/* ==========================================================================
   D. R. James Consulting, LLC — Home
   Rebuilt 1:1 from the supplied design.

   Design canvas: 1600 x 1020.
   Every desktop value below is the measured original, written in rem where
   1rem = 16px at the 1600px design width. The root font-size is tied to the
   viewport between 1100px and 1600px, so the composition scales down as one
   piece instead of overflowing. A 1366px or 1440px laptop therefore shows an
   exact proportional miniature of the design — nothing is cut off, nothing
   moves. Below 1100px the layout stacks so the text stays readable.
   ========================================================================== */

/* --- Webfont -------------------------------------------------------------
   The design is set in DejaVu Serif. It is self-hosted (subset, 15 KB) so the
   page renders identically on Windows, macOS, iOS and Android instead of
   falling back to Times / Georgia and drifting off the design.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "DejaVu Serif";
  src: url("../fonts/dejavu-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DejaVu Serif";
  src: url("../fonts/dejavu-serif-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --navy-bar:  #001b31;   /* top navigation                */
  --navy-foot: #04253f;   /* footer                        */
  --navy-ink:  #051a2f;   /* body / headline text          */
  --cream-hi:  #faf8f4;   /* brand bar + light text        */
  --cream-lo:  #f8f6f1;   /* hero                          */
  --gold:      #c2841e;   /* rules, gems, badge border     */
  --gold-lt:   #daa13f;   /* active nav, name, copyright   */
}

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

/* The whole desktop composition is sized in rem. Locking the root font-size to
   the viewport in this band scales the design instead of breaking it. */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 1100px) and (max-width: 1599.98px) {
  html { font-size: 1vw; }   /* 1600px -> 16px … 1100px -> 11px */
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--cream-lo);
  color: var(--navy-ink);
  font-family: "DejaVu Serif", Georgia, "Times New Roman", serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--gold); color: #fff; padding: 10px 18px;
}
.skip:focus { left: 0; }

/* ==========================================================================
   1. TOP NAVIGATION            design: y 0–68, bg #001b31
   ========================================================================== */
.topbar { background: var(--navy-bar); }

.topbar__nav {
  height: 4.25rem;               /* 68 */
  display: flex;
  align-items: center;
  padding: 0 2.125rem;           /* 34 */
}

.navmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2.28125rem;               /* 36.5 */
}

.navmenu a {
  display: block;
  position: relative;
  font-size: 1rem;               /* 16 */
  line-height: 1.25rem;          /* 20 */
  color: var(--cream-hi);
  text-decoration: none;
  padding-top: 0.5rem;           /* 8  */
  padding-bottom: 0.75rem;       /* 12 — puts the active rule on y=51 */
  white-space: nowrap;
}
.navmenu a:hover,
.navmenu a:focus-visible { color: var(--gold-lt); }

.navmenu a.is-active { color: var(--gold-lt); }
.navmenu a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0.1875rem;             /* 3 */
  background: var(--gold-lt);
}

/* burger — desktop hides it */
.navtoggle {
  display: none;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 10px 8px;
  background: none; border: 0; cursor: pointer;
}
.navtoggle span {
  display: block; height: 2px; margin: 5px 0;
  background: var(--cream-hi);
}

/* ==========================================================================
   2. BRAND BAR                 design: y 68–258 (190px), bg #faf8f4
   ========================================================================== */
.brandbar { background: var(--cream-hi); }

.brandbar__in {
  max-width: 100rem;                       /* 1600 */
  margin: 0 auto;
  padding: 2.5rem 10rem 0 6.875rem;        /* 40 / 160 / 0 / 110 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 11.875rem;                   /* 190 */
}

/* --- logo lockup --- */
.brand { display: flex; align-items: flex-start; }

.brand__mark {
  width: 8.4375rem;              /* 135 — design x110–244 */
  height: 6.4375rem;             /* 103 — design y90–192  */
  flex: 0 0 8.4375rem;
  margin-top: -1.125rem;         /* lifts it from the text top (108) to y90 */
}

.brand__text {
  display: block;
  margin-left: 0.75rem;          /* emblem right (245) -> text (257) */
  padding-top: 0.125rem;
}

.brand__name {
  display: block;
  font-size: 3rem;               /* 48 */
  line-height: 3.3125rem;        /* 53 — cap-top y117 -> y168 */
  white-space: nowrap;
}

.brand__sub {
  display: block;
  font-size: 1.9375rem;          /* 31 */
  line-height: 2.25rem;          /* 36 */
}

/* --- right-hand tagline --- */
.tagline {
  width: 26.9375rem;             /* 431 — rule x1010–1440 */
  flex: 0 0 26.9375rem;
  padding-top: 0.4375rem;
}

.tagline__text {
  width: 24.375rem;              /* 390 */
  margin: 0 0 0 auto;            /* text block sits flush right */
  text-align: center;
  font-size: 1.0625rem;          /* 17 */
  line-height: 1.875rem;         /* 30 */
  white-space: nowrap;           /* holds the design's 2 lines at every width —
                                    browser glyph rounding would otherwise wrap
                                    line 1 on a scaled-down laptop */
}

/* ==========================================================================
   3. GOLD RULE + GEM  (shared)
   ========================================================================== */
.rule {
  position: relative;
  height: 0.125rem;              /* 2 */
  background: var(--gold);
}
.rule__gem {
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.rule--tagline { width: 26.9375rem; margin-top: 0.625rem; }        /* 431 / 10 */
.rule--tagline .rule__gem { width: 1rem; height: 1rem; }           /* 16 */

.rule--hero { width: 39.4375rem; margin: 1.375rem auto 0; }        /* 631 / 22 */
.rule--hero .rule__gem { width: 1.3125rem; height: 1.3125rem; }    /* 21 */

/* ==========================================================================
   4. HERO                      design: y 258–775, bg #f8f6f1
   ========================================================================== */
.hero { background: var(--cream-lo); }

.hero__in {
  position: relative;
  max-width: 100rem;
  margin: 0 auto;
  padding: 5.0625rem 1.5rem 3.875rem;   /* 81 / 24 / 62 — headline cap-top = y352 */
  text-align: center;
}

/* Intuit / QuickBooks badge — supplied as artwork, placed exactly where the
   design puts it: floating at the left of the hero, beside the headline. */
.qb {
  position: absolute;
  left: 9.6875rem;               /* 155 */
  top: 5.75rem;                  /* 350 — hero starts at y258 */
  width: 7.4375rem;              /* 119 */
  height: 4.1875rem;             /* 67  */
}

.hero__title {
  margin: 0;
  font-size: 3.5rem;             /* 56 */
  font-weight: 700;
  line-height: 4.5rem;           /* 72 — line 1 y352 -> line 2 y424 */
  color: var(--navy-ink);
}

.hero__lede {
  margin: 2.5625rem 0 0;         /* 41 — rule -> first lede line (y556) */
  font-size: 1.375rem;           /* 22 */
  line-height: 2.125rem;         /* 34 */
  letter-spacing: 0.00375rem;
}

.hero__serve {
  margin: 2.4375rem 0 0;         /* 39 -> y695 */
  font-size: 1.0625rem;          /* 17 */
  line-height: 1.5rem;           /* 24 */
  letter-spacing: 0.0053125rem;
}

/* ==========================================================================
   5. FOOTER                    design: y 775–1020 (245px), bg #04253f
   --------------------------------------------------------------------------
   Blocks sit on the measured grid on desktop; below 1100px they fall back to
   a normal stacked flow.
   ========================================================================== */
.foot {
  background: var(--navy-foot);
  color: var(--cream-hi);
  /* The footer is a site-wide component drawn in the Home design's face. Pin it
     here rather than inheriting, so a page that runs on a different body font
     (Services and Knowledge Is Power use the condensed cut) still draws the
     same footer as every other page. */
  font-family: "DejaVu Serif", Georgia, "Times New Roman", serif;
}

.foot__in {
  position: relative;
  max-width: 100rem;             /* 1600 */
  height: 15.3125rem;            /* 245 */
  margin: 0 auto;
}

.foot p { margin: 0; }   /* element defaults — per-block spacing is set below */

/* left credential column */
.foot__person {
  position: absolute;
  left: 5.375rem;                /* 86 */
  top: 2.6875rem;                /* 43 */
}

.foot__name {
  font-size: 1.9rem;             /* 30.4 */
  font-weight: 700;
  line-height: 2.125rem;         /* 34 */
  letter-spacing: 0.009375rem;
  color: var(--gold-lt);
}

.foot__creds {
  font-size: 1.0625rem;          /* 17 */
  line-height: 1.9375rem;        /* 31 — line tops y866 / 897 / 928 / 959 */
  color: var(--cream-hi);
}
.foot .foot__creds { margin-top: 0.375rem; }   /* beats `.foot p` specificity */

/* right service line */
.foot__services {
  position: absolute;
  left: 32.5rem;                 /* 520 */
  top: 3.5rem;                   /* 56  */
  font-size: 1.71875rem;         /* 27.5 */
  letter-spacing: -0.009375rem;
  font-weight: 700;
  line-height: 2rem;             /* 32 */
  white-space: nowrap;
}
.foot__services span { white-space: nowrap; }

/* contact strip */
.foot__contact {
  position: absolute;
  left: 40.125rem;               /* 642 */
  top: 9.3125rem;                /* 149 */
  display: flex;
  gap: 1.7708rem;                /* 28.3 -> line ends on x1406 */
  font-size: 1rem;               /* 16 */
  line-height: 1.375rem;         /* 22 */
}
.foot__contact a,
.foot__contact span { color: var(--cream-hi); text-decoration: none; }
.foot__contact a:hover,
.foot__contact a:focus-visible { color: var(--gold-lt); text-decoration: underline; }

/* copyright */
.foot__copy {
  position: absolute;
  left: 35.4375rem;              /* 567 */
  top: 12.4375rem;               /* 199 */
  font-size: 0.875rem;           /* 14 */
  line-height: 1.125rem;         /* 18 */
  letter-spacing: 0.0075rem;
  color: var(--gold-lt);
}

/* ==========================================================================
   6. BELOW 1100px — stack it.
      The same blocks, the same order, the same fonts and colours, just
      re-flowed so the type stays readable on a small screen.
   ========================================================================== */
@media (max-width: 1099.98px) {
  /* nav no longer fits on one row at 16px — tighten it until the burger takes over */
  .topbar__nav { padding: 0 20px; }
  .navmenu     { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .navmenu a   { font-size: 14px; line-height: 18px; padding-top: 7px; padding-bottom: 11px; }
  .navmenu a.is-active::after { height: 3px; }

  .brandbar__in {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 24px 30px;
    min-height: 0;
  }
  .brand { flex-direction: column; align-items: center; }
  .brand__mark { width: 135px; height: 103px; flex-basis: auto; margin: 0 0 10px; }
  .brand__text { margin-left: 0; }
  .brand__name { font-size: 38px; line-height: 44px; white-space: normal; }
  .brand__sub  { font-size: 24px; line-height: 30px; }

  .tagline { margin-top: 26px; width: 100%; flex-basis: auto; padding-top: 0; }
  .tagline__text { width: 100%; font-size: 17px; line-height: 28px; white-space: normal; }
  .rule--tagline { width: min(431px, 100%); margin: 12px auto 0; height: 2px; }
  .rule--tagline .rule__gem { width: 16px; height: 16px; }

  /* badge leaves its float and sits above the headline */
  .qb          { position: static; width: 119px; height: 67px; margin: 0 auto 30px; }

  .hero__in    { padding: 60px 24px 70px; }
  .hero__title { font-size: 44px; line-height: 58px; }
  .hero__lede  { font-size: 20px; line-height: 31px; margin-top: 30px; }
  .hero__serve { font-size: 16px; line-height: 26px; margin-top: 34px; }
  .rule--hero  { width: min(631px, 90%); margin-top: 24px; height: 2px; }
  .rule--hero .rule__gem { width: 21px; height: 21px; }

  /* footer: stop absolute-positioning, lay it out as a grid */
  .foot__in {
    position: static;
    height: auto;
    max-width: 1100px;
    padding: 44px 40px 34px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "person services"
      "person contact"
      "copy   copy";
    column-gap: 48px;
    row-gap: 22px;
    align-items: start;
  }
  .foot__person   { position: static; grid-area: person; }
  .foot__name     { font-size: 30px; line-height: 34px; }
  .foot__creds    { font-size: 17px; line-height: 31px; }
  .foot__services { position: static; grid-area: services; white-space: normal; font-size: 26px; line-height: 32px; }
  .foot__contact  { position: static; grid-area: contact; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
  .foot__copy     { position: static; grid-area: copy; text-align: center; margin-top: 10px; font-size: 14px; }
}

/* ==========================================================================
   7. PHONE
   ========================================================================== */
@media (max-width: 860px) {
  .topbar__nav { padding: 0 18px; position: relative; flex-wrap: wrap; height: 62px; }
  .navtoggle   { display: block; }

  .navmenu {
    display: none;
    order: 2;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 0 14px;
  }
  .navmenu.is-open { display: flex; }
  .navmenu a { padding: 11px 0; font-size: 17px; line-height: 22px; }
  .navmenu a.is-active::after { right: auto; width: 48px; bottom: 6px; height: 3px; }

  .brand__mark { width: 118px; height: 90px; }
  .brand__name { font-size: 28px; line-height: 34px; }
  .brand__sub  { font-size: 19px; line-height: 26px; }
  .tagline__text { font-size: 16px; line-height: 26px; }

  .qb          { margin-bottom: 26px; }
  .hero__in    { padding: 44px 20px 52px; }
  .hero__title { font-size: 31px; line-height: 41px; }
  .hero__lede  { font-size: 17px; line-height: 28px; margin-top: 26px; }
  .hero__lede br { display: none; }
  .hero__serve { font-size: 15px; line-height: 24px; margin-top: 30px; }
  .rule--hero  { margin-top: 22px; }
  .rule--hero .rule__gem { width: 17px; height: 17px; }

  .foot__in {
    display: block;
    padding: 34px 20px 26px;
    text-align: center;
  }
  .foot__name     { font-size: 24px; }
  .foot__creds    { font-size: 15px; line-height: 28px; }
  .foot__services { font-size: 19px; line-height: 30px; margin-top: 24px; }
  .foot__contact  { justify-content: center; margin-top: 22px; font-size: 15px; gap: 6px 22px; }
  /* the address is one long unbreakable token — let it wrap on narrow phones */
  .foot__contact a { max-width: 100%; overflow-wrap: anywhere; }
  .foot__copy     { margin-top: 24px; font-size: 13px; }
}


/* ==========================================================================
   SERVICES PAGE                design canvas: 1525 x 1031
   --------------------------------------------------------------------------
   The two supplied designs are NOT drawn to the same spec:

     * Home is set in DejaVu Serif; Services is set in DejaVu Serif CONDENSED.
     * The Services nav is ~25% larger (20px vs 16px) and sits at x48, not x34.
     * The Services header is a different lockup entirely (rules + diamond +
       corner graphic) where Home is emblem-left / tagline-right.

   Both are reproduced exactly as supplied. Every value below is measured off
   the Services design, in rem where 1.04918rem = 16px at its 1525px width.
   ========================================================================== */

@font-face {
  font-family: "DejaVu Serif Condensed";
  src: url("../fonts/dejavu-serif-cond-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DejaVu Serif Condensed";
  src: url("../fonts/dejavu-serif-cond-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

.p-services { font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif; }

/* The footer is a site-wide component and is drawn in the Home design's face.
   Keep it on DejaVu Serif so it stays identical on every page. */
.p-services .foot { font-family: "DejaVu Serif", Georgia, "Times New Roman", serif; }

@media (min-width: 1100px) and (max-width: 1524.98px) {
  html.svc { font-size: 1.04918vw; }        /* 16px at the 1525 design width */
}
@media (min-width: 1525px) {
  html.svc { font-size: 16px; }
}

/* ---- nav ----------------------------------------------------------------
   These sized the Services page's own navy top bar. The Services page now
   carries the site-wide banner instead, so every rule here is scoped inside
   .topbar and cannot reach the shared nav. Kept, not deleted: restoring the
   old bar is a markup swap, nothing else. */
@media (min-width: 1100px) {
  .p-services .topbar { height: 4.45902rem; }               /* 68 on this design's scale */
  .p-services .topbar__nav { height: 4.45902rem; padding: 0 3.14754rem; }  /* ink starts x48 */
  .p-services .topbar .navmenu { gap: 2.72131rem; }            /* 41.5 -> line ends x1261 */
  .p-services .topbar .navmenu a { font-size: 1.31148rem; line-height: 1.63934rem; }  /* 20 */
}

/* ---- brand bar ---------------------------------------------------------- */
.svcbar {
  position: relative;
  height: 15.2787rem;                    /* 233  (y68 -> y301) */
  background: var(--cream-lo);
  overflow: hidden;
}
.svcbar__corner {
  position: absolute;
  right: 0; top: 0;
  width: 35.7377rem;                     /* 545 */
  height: 15.2787rem;
  display: block;
}
.svcbar__in {
  position: relative;
  max-width: 100rem;                 /* 1525 */
  margin: 0 auto;
  height: 100%;
}
.svcbar__mark {
  position: absolute;
  left: 5.83607rem;                       /* 89 */
  top: 3.08197rem;                        /* 115 */
  width: 6.22951rem;                      /* 95 */
  height: 5.96721rem;                     /* 91 */
}
.svcbar__lockup {
  position: absolute;
  left: 13.1148rem;                         /* 200 */
  top: 0;
  width: 45.1803rem;                     /* 689  (x200 -> x889) */
}
.rule--svc-top { margin-top: 3.21311rem; margin-left: 0.06557rem; }  /* rule on y117 */
.rule--svc-bot { margin-top: 0.98361rem; }                          /* rule on y258 */
.rule--svc-bot .rule__gem { width: 0.91803rem; height: 0.91803rem; }   /* 14 */

.svcbar__name {
  margin: 0;
  padding: 0.98361rem 0 0 0.13115rem;       /* cap-top lands on y142, ink starts x205 */
  font-size: 3.54098rem;                   /* 54 */
  line-height: 1.15;
  color: var(--navy-ink);
  white-space: nowrap;
  width: max-content;              /* nowrap must never be clipped by the lockup box */
}
.svcbar__llc {
  font-size: 2.95082rem;                  /* 45 - the design draws LLC smaller */
  margin-left: 1.37705rem;                /* 21 */
}
.svcbar__sub {
  margin: 0;
  padding-top: 0.39344rem;                 /* cap-top lands on y209 */
  padding-right: 5.37705rem;               /* 82 - the design centres it on x503, not on the rule */
  font-size: 2.22951rem;                   /* 34 */
  line-height: 1.25;
  color: var(--navy-ink);
  text-align: center;
}

/* ---- "What We Do" band -------------------------------------------------- */
.svcband {
  height: 6.7541rem;                     /* 103  (y301 -> y404) */
  background: var(--navy-foot);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.svcband__title {
  margin: 0;
  padding-top: 1.37705rem;                /* cap-top lands on y328 */
  font-size: 3.34426rem;                  /* 51 */
  font-weight: 700;
  line-height: 1;
  color: #dc9418;
}
.svcband__under {
  width: 47.4754rem;                       /* 724  (x398 -> x1121) */
  height: 0.13115rem;
  margin-top: 0.65574rem;                  /* lands on y383 */
  background: var(--gold);
}

/* ---- service cards ------------------------------------------------------ */
.cards {
  background: var(--cream-lo);
  padding: 4.45902rem 0 4.98361rem;            /* row 1 tops out on y472 */
}
.cards__row {
  display: flex;
  align-items: stretch;
  gap: 1.44262rem;                         /* 22 */
  margin: 0 auto;
}
.cards__row--4 { max-width: 90.8197rem; }                          /* 1385 */
.cards__row--3 { max-width: 70.3607rem; margin-top: 1.70492rem; }    /* 1073 / 26 */
.cards__row > .card { flex: 1 1 0; }
.cards__row--4 > .card { min-height: 15.3443rem; }                  /* 234 */
.cards__row--3 > .card { min-height: 14.6885rem; }                      /* 224 */

.card {
  display: flex;
  flex-direction: column;
  border: 0.13115rem solid var(--gold);    /* 2 */
  border-radius: 0.78689rem;                /* 12 */
  padding: 1.11475rem 1.5082rem 1.57377rem;   /* 17 / 23 / 24 */
  background: transparent;               /* the cards are the same cream as the page */
}
.card__head { display: flex; align-items: center; gap: 1.5082rem; }  /* 23 */
.card__dot {
  position: relative;
  flex: 0 0 3.08197rem;                   /* 47 */
  width: 3.08197rem;
  height: 3.21311rem;                     /* 49 */
  border-radius: 50%;
  background: var(--navy-foot);
}
.card__dot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 0.52459rem; height: 0.52459rem;
  margin: -0.2623rem 0 0 -0.2623rem;
  border-radius: 50%;
  background: var(--gold-lt);
}
.card__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy-ink);
  white-space: nowrap;
}
/* The supplied artwork auto-shrinks a title that will not fit beside the disc.
   A 22px "QuickBooks Maintenance" cannot fit a 343px card, so the design draws
   the long row-2 titles smaller. Reproduced exactly. */
.cards__row--4 .card__title { font-size: 1.44262rem; }                    /* 22   */
.cards__row--3 .card__title { font-size: 1.40984rem; }                  /* 21.5 */
.cards__row--3 .card:nth-child(2) .card__title,
.cards__row--3 .card:nth-child(3) .card__title { font-size: 1.2459rem; }  /* 19   */

/* row 2 is drawn with a tighter gutter so the long titles clear the border */
.cards__row--3 .card { padding: 1.18033rem 0.32787rem 1.57377rem 1.18033rem; }
.cards__row--3 .card__head { gap: 1.37705rem; }
.card__body {
  margin: 0.45902rem 0 0;                 /* first line lands on y557 */
  max-width: 17.8361rem;                      /* 272 - reproduces the design's exact line breaks
                                            in all 7 cards; the copy column is narrower than
                                            the card's content box in the supplied artwork */
  font-size: 1.18033rem;                   /* 18 */
  line-height: 2.16393rem;                /* 33 */
  color: var(--navy-ink);
}

/* ---- below 1100px: stack ------------------------------------------------ */
@media (max-width: 1099.98px) {
  .svcbar { height: auto; padding: 26px 0 30px; }
  .svcbar__corner { display: none; }
  .svcbar__in { display: flex; flex-direction: column; align-items: center; }
  .svcbar__mark { position: static; width: 95px; height: 91px; margin-bottom: 12px; }
  .svcbar__lockup { position: static; width: 100%; max-width: 640px; padding: 0 20px; }
  .rule--svc-top { margin: 0; }
  .rule--svc-bot { margin-top: 14px; }
  .svcbar__name {
    padding-top: 12px; font-size: 32px; line-height: 1.25;
    text-align: center; white-space: normal;
  }
  .svcbar__llc { font-size: 24px; margin-left: 8px; }
  .svcbar__sub { padding: 6px 0 0; font-size: 21px; }

  .svcband { height: auto; padding: 22px 20px 26px; }
  .svcband__title { padding-top: 0; font-size: 34px; }
  .svcband__under { width: min(70%, 420px); margin-top: 12px; }

  .cards { padding: 34px 20px 40px; }
  .cards__row { flex-wrap: wrap; gap: 18px; max-width: 720px; }
  .cards__row--3 { max-width: 720px; margin-top: 18px; }
  .cards__row > .card { flex: 1 1 300px; min-height: 0; }
  .cards__row--4 > .card, .cards__row--3 > .card { min-height: 0; }
  .card, .cards__row--3 .card { border-radius: 12px; padding: 18px 22px 22px; }
  .card__head, .cards__row--3 .card__head { gap: 16px; }
  .card__dot { flex-basis: 42px; width: 42px; height: 42px; }
  /* the desktop rules set nowrap + per-card sizes; both must be undone here or
     a long title overflows a narrow card */
  .card__title,
  .cards__row--4 .card__title,
  .cards__row--3 .card__title,
  .cards__row--3 .card:nth-child(2) .card__title,
  .cards__row--3 .card:nth-child(3) .card__title { font-size: 21px; white-space: normal; }
  .card__body { margin-top: 12px; max-width: none; font-size: 17px; line-height: 27px; }
}
@media (max-width: 620px) {
  .cards__row > .card { flex: 1 1 100%; }
  .card__title,
  .cards__row--4 .card__title,
  .cards__row--3 .card__title,
  .cards__row--3 .card:nth-child(2) .card__title,
  .cards__row--3 .card:nth-child(3) .card__title { font-size: 19px; }
  .svcband__title { font-size: 28px; }
  .svcbar__name { font-size: 26px; }
  .svcbar__llc { font-size: 20px; }
  .svcbar__sub { font-size: 18px; }
}

/* ==========================================================================
   HOME PAGE  —  design of 2026-08-09
   Design canvas 1448 x 1086. Every value below is the measured original px
   divided by 14.48, so the page sits on the SAME rem scale as the rest of the
   site (1rem = 16px at the shared 1600 canvas).
   ========================================================================== */
.p-brand { background: var(--cream-hi); }

/* ---- Header: emblem hard left, title block centred, single rule ----
   This block is the SITE-WIDE banner: identical markup and identical values on
   every page. The face is pinned here rather than inherited, so a page that
   sets a different body font (Services runs on the condensed cut) still draws
   the banner in the same face as the rest of the site. */
.p-brand .hdr {
  position: relative;
  background: var(--cream-hi);
  padding-top: 0.307rem;
  font-family: "DejaVu Serif", Georgia, "Times New Roman", serif;
}
.p-brand .hdr__lockup { position: relative; }
.p-brand .hdr__emblem {
  position: absolute;
  left: 5.456rem;                 /* x79 */
  top: 1.45rem;                   /* y21 */
  width: 6.354rem;                /* 92 */
  height: auto;
}
.p-brand .hdr__titles {
  width: 44rem;
  margin: 0 auto;
  transform: translateX(4.21rem); /* title block centres on design x785 */
  text-align: center;
}

.p-brand .rule { display: block; position: relative; height: 0.13rem; background: var(--gold); width: 100%; }
.p-brand .rule--bot { width: 39.23rem; margin: 0.97rem auto 0; }   /* 568 */
.p-brand .gem {
  position: absolute; top: 50%; left: 50%;
  width: 0.95rem; height: 0.95rem; background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-brand .hdr__name {
  margin: 0.62rem 0 0;
  font-weight: 400;
  font-size: 2.898rem;            /* width-fit 609 */
  line-height: 0.9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--navy-ink);
}
.p-brand .hdr__sub {
  margin: 0.783rem 0 0;
  font-size: 1.66rem;             /* width-fit 525 */
  color: var(--navy-ink);
}

/* ---- Nav ---- */
.p-brand .hdr__nav {
  display: flex;
  justify-content: center;
  padding: 1.395rem 1.5rem 0.886rem;
}
.p-brand .navmenu { gap: 2.256rem; flex-wrap: nowrap; transform: translateX(2.38rem); }
.p-brand .navmenu a {
  font-size: 1.207rem;
  line-height: 1.34rem;
  color: var(--navy-ink);
  padding: 0 0 0.25rem;
}
.p-brand .navmenu a:hover,
.p-brand .navmenu a:focus-visible { color: var(--gold); }
.p-brand .navmenu a.is-active { color: var(--navy-ink); }
.p-brand .navmenu a.is-active::after { height: 0.13rem; background: var(--navy-ink); bottom: 0; }

/* ---- Hero (photo background, live text on top) ---- */
.p-brand .hero {
  position: relative;
  width: 100%;
  height: 29.28rem;                              /* 424 */
  background: url("../img/hero.jpg") top center / 100% 100% no-repeat;
}
.p-brand .hero__panel {
  position: absolute;
  left: 11.33rem;                                /* x164 */
  top: 1.809rem;                                 /* headline cap-top y199 */
  width: 29rem;
}
.p-brand .hero__title {
  margin: 0;
  max-width: 29rem;
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
  font-weight: 700;
  font-size: 2.345rem;                           /* width-fit 373 */
  line-height: 3.315rem;                         /* 48 */
  color: var(--navy-ink);
}
.p-brand .hero__rule {
  display: block; position: relative;
  width: 25.83rem;                               /* 374 */
  height: 0.13rem; background: var(--gold);
  margin: 1.05rem 0 0;
}
.p-brand .hero__rule .gem { width: 1.15rem; height: 1.15rem; }
.p-brand .hero__lede {
  margin: 1.276rem 0 0;
  max-width: none;
  font-size: 1.1326rem;
  letter-spacing: 0.016em;
  line-height: 1.9rem;                           /* 27.5 */
  color: var(--navy-ink);
}
.p-brand .hero__tag {
  margin: 0.843rem 0 0;
  font-weight: 700;
  font-size: 0.8564rem;
  line-height: 1.45rem;                          /* 21 */
  letter-spacing: 0.06em;
  color: var(--navy-ink);
}
.p-brand .hero__btns { display: flex; gap: 1.04rem; margin-top: 1.012rem; }
.p-brand .btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.177rem;                              /* 46 */
  font-size: 0.868rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.p-brand .btn--navy { width: 14.64rem; background: var(--navy-bar); color: var(--cream-hi); }
.p-brand .btn--gold { width: 12.78rem; background: var(--gold); color: #fff; }
.p-brand .btn--navy:hover { background: #002a4d; }
.p-brand .btn--gold:hover { background: #a9720f; }

/* ---- Services strip ---- */
.p-brand .svc { background: var(--cream-hi); padding: 0.62rem 0 2.134rem; text-align: center; }
.p-brand .svc__h {
  margin: 0;
  font-size: 1.238rem;                           /* width-fit 123 */
  padding-left: 3.46rem;             /* shifts the centred word to design x749 */
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--navy-ink);
}
.p-brand .svc__grid {
  display: flex; justify-content: center; align-items: stretch;
  max-width: 86.03rem;                           /* 1211 + the design's 17px right bias */
  margin: 0.705rem auto 0;
  padding-left: 2.4rem;
}
.p-brand .svc__item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0.5rem;
  border-left: 0.06rem solid var(--gold);
}
.p-brand .svc__item:first-child { border-left: 0; }
.p-brand .svc__item img { width: 4.42rem; height: auto; }
.p-brand .svc__item p {
  margin: 0.78rem 0 0;
  font-size: 1.121rem;
  line-height: 1.4;
  color: var(--navy-ink);
}

/* ==========================================================================
   HOME FOOTER — quote line sits inside the navy band in this design
   ========================================================================== */
.foot--home { background: var(--navy-foot); color: var(--cream-hi); padding-bottom: 1.8rem; }
.foot--home p { margin: 0; }

.foot--home .foot__quote {
  padding-top: 1.62rem;                          /* glyph top y799 */
  text-align: center;
  padding-left: 2.76rem;             /* centres the line on design x744 */
  font-style: italic;
  font-size: 1.312rem;
  color: var(--cream-hi);
}
.foot--home .foot__q {
  color: var(--gold-lt);
  font-size: 2.5rem;
  font-weight: 700;
  font-style: normal;
  line-height: 0;
  vertical-align: -0.85rem;
}
.foot--home .foot__q:first-child { margin-right: 0.42rem; }
.foot--home .foot__q:last-child  { margin-left: 0.42rem; }

.foot--home .foot__in {
  position: static;
  display: flex;
  align-items: flex-start;
  height: auto;
  max-width: none;
  padding: 1.72rem 0 0 10.98rem;                 /* left column ink at x161 */
}

.foot--home .foot__person { position: static; flex: 0 0 26.8rem; }
.foot--home .foot__name {
  font-size: 1.783rem;                           /* width-fit 300 */
  font-weight: 400;
  line-height: 1.9rem;
  color: var(--gold-lt);
}
.foot--home .foot__creds {
  margin-top: 0.674rem;
  font-size: 1.135rem;
  line-height: 2.17rem;                          /* 31.4 */
  color: var(--cream-hi);
}

.foot--home .foot__right { flex: 1 1 auto; padding-top: 1.651rem; }

.foot--home .foot__services {
  position: static;
  margin-left: 0.2rem;
  font-size: 1.652rem;
  font-weight: 400;
  line-height: 1.9rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.foot--home .foot__services i { font-style: normal; color: var(--gold-lt); margin: 0 0.325rem; }

.foot--home .foot__contact {
  position: static;
  display: flex;
  align-items: center;
  margin-top: 2.948rem;
  gap: 2.62rem;
  font-size: 1.045rem;
  line-height: 1.45rem;
}
.foot--home .foot__stack { display: flex; flex-direction: column; gap: 0.76rem; }
.foot--home .foot__ci {
  display: inline-flex;
  align-items: center;
  gap: 1.312rem;
  color: var(--cream-hi);
  text-decoration: none;
}
.foot--home a.foot__ci:hover,
.foot--home a.foot__ci:focus-visible { color: var(--gold-lt); }
.foot--home .foot__ci svg {
  flex: 0 0 auto;
  width: 1.865rem; height: 1.865rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.foot--home .foot__copy {
  position: static;
  margin-top: 2.702rem;
  text-align: center;
  font-size: 1.084rem;
  line-height: 1.1rem;
  color: var(--gold-lt);
}

/* ---- Home: tablet / mobile (< 1100px) ---- */
@media (max-width: 1099.98px) {
  .p-brand .hdr { padding-top: 1.1rem; }
  .p-brand .hdr__lockup { text-align: center; }
  .p-brand .hdr__emblem { position: static; width: 64px; margin: 0 auto 0.4rem; }
  .p-brand .hdr__titles { width: auto; max-width: 40rem; margin: 0 auto; transform: none; padding: 0 1rem; }
  .p-brand .hdr__name { font-size: clamp(22px, 5.2vw, 40px); white-space: normal; margin-top: 0.6rem; }
  .p-brand .hdr__sub  { font-size: clamp(14px, 3.1vw, 25px); }

  .p-brand .hdr__nav { position: relative; display: block; padding: 0.4rem 1rem 0.6rem; }
  .p-brand .navtoggle { display: block; margin: 0 auto; }
  .p-brand .navtoggle span { background: var(--navy-ink); }
  .p-brand .navmenu {
    display: none; flex-direction: column; align-items: center;
    gap: 0.2rem; width: 100%; margin-top: 0.4rem;
  }
  .p-brand .navmenu.is-open { display: flex; }
  .p-brand .navmenu a { font-size: 17px; padding: 0.5rem 0; }

  .p-brand .hero { height: auto; background: var(--cream-hi); }
  .p-brand .hero::before {
    content: ""; display: block; width: 100%;
    height: 42vw; max-height: 300px;
    background: url("../img/hero-mobile.jpg") center 40% / cover no-repeat;
  }
  .p-brand .hero__panel {
    position: static; left: auto; top: auto;
    width: auto; max-width: 40rem; margin: 0 auto;
    padding: 1.8rem 1.35rem 2.2rem;
  }
  .p-brand .hero__title { max-width: none; font-size: clamp(30px, 7vw, 50px); line-height: 1.06; }
  .p-brand .hero__rule { width: 60%; max-width: 374px; margin-top: 1.1rem; }
  .p-brand .hero__lede { max-width: none; font-size: clamp(17px, 3.6vw, 23px); line-height: 1.5; }
  .p-brand .hero__lede br { display: none; }
  .p-brand .navmenu { transform: none; }
  .p-brand .hero__tag  { font-size: clamp(13px, 2.6vw, 16px); line-height: 1.5; }
  .p-brand .hero__btns { flex-wrap: wrap; gap: 14px; }
  .p-brand .btn { height: 52px; padding: 0 1.4rem; }
  .p-brand .btn--navy, .p-brand .btn--gold { width: auto; min-width: 15rem; flex: 1 1 auto; }

  .p-brand .svc { padding: 2rem 1rem 2.4rem; }
  .p-brand .svc__h { font-size: 20px; padding-left: 0; }
  .p-brand .svc__grid { flex-wrap: wrap; margin-top: 1.8rem; row-gap: 2rem; max-width: none; padding-left: 0; }
  .p-brand .svc__item { flex: 0 0 33.333%; border-left: 0; }
  .p-brand .svc__item img { width: 52px; }
  .p-brand .svc__item p { font-size: 16px; }

  /* footer stacks */
  .foot--home { padding-bottom: 26px; }
  .foot--home .foot__quote { padding: 26px 20px 0; font-size: clamp(16px, 3.4vw, 24px); }
  .p-brand .rule--bot { width: auto; max-width: 100%; }
  .foot--home .foot__q { font-size: 1.6em; }
  .foot--home .foot__in {
    display: block;
    padding: 28px 16px 0;
  }
  .foot--home .foot__person { text-align: center; }
  .foot--home .foot__name { font-size: 28px; line-height: 34px; }
  .foot--home .foot__creds { font-size: 16px; line-height: 28px; margin-top: 10px; }
  .foot--home .foot__right { padding-top: 26px; text-align: center; }
  .foot--home .foot__services { white-space: normal; font-size: 20px; line-height: 30px; }
  .foot--home .foot__services i { margin: 0 10px; }
  .foot--home .foot__contact {
    flex-wrap: wrap; justify-content: center;
    margin-top: 20px; gap: 12px 26px; font-size: 15px;
  }
  .foot--home .foot__stack { gap: 12px; }
  .foot--home .foot__ci svg { width: 19px; height: 19px; }
  .foot--home .foot__copy { margin-top: 24px; font-size: 13px; }
}
@media (max-width: 560px) {
  .p-brand .svc__item { flex: 0 0 50%; }
  .p-brand .btn--navy, .p-brand .btn--gold { flex: 1 1 100%; }
  .foot--home .foot__contact { font-size: 13px; }
  .foot--home .foot__ci { gap: 10px; }
  .foot--home .foot__ci { max-width: 100%; }
  .foot--home .foot__ci span { word-break: break-word; }
}

/* ==========================================================================
   ABOUT PAGE  —  design of 2026-08-26
   Design canvas 1448 x 1086, so every value is the measured original px
   divided by 14.48 — the same rem scale the home page is built on.
   The header, nav and footer are the shared .p-brand block above.
   ========================================================================== */
.about { position: relative; overflow: hidden; }

.about__in {
  position: relative;
  /* 886 (design y200 -> y1086) + 68 of breathing room before the footer.
     Nothing inside the composition moves — the extra height is added below it. */
  height: 65.885rem;
}

/* screen-reader heading — the design carries no visible page title */
.about__sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.about__text {
  position: absolute;
  z-index: 2;                       /* the copy sits over the photograph's soft edge */
  left: 3.522rem;                   /* x51 */
  top: 4.15rem;                     /* first ink row lands on design y265 */
  width: 46rem;
}

.about__text p {
  margin: 0;
  /* the condensed cut matches the proportions of the design's copy — it lands
     the line endings on the designed pixels without squeezing the tracking */
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
  font-size: 1.446rem;
  line-height: 2.5553rem;           /* 37 */
  color: var(--navy-ink);
}
.about__text p + p { margin-top: 2.417rem; }   /* 35 -> 72px between baselines */

/* keeps an em dash from starting a line when the copy reflows */
.about__text .nb { white-space: nowrap; }

.about__text .about__stmt {
  margin-top: 2.35rem;
  font-weight: 700;
  font-size: 1.6437rem;
  line-height: 2.9rem;              /* 42 */
  letter-spacing: 0.01em;
}

.about__photo {
  position: absolute;
  z-index: 1;
  right: 0;
  top: -0.69rem;                    /* design y190 — unchanged against the copy */
  width: 58.564rem;                 /* 848 : design x600 -> x1448 */
  /* the design ran the photograph off the bottom of the page. Now that a footer
     follows it, the cut edge is dissolved into the cream instead of sliced. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5.5rem), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 5.5rem), rgba(0,0,0,0) 100%);
}
.about__photo img { width: 100%; height: auto; }

/* ---- About: tablet / mobile (< 1100px) ---- */
@media (max-width: 1099.98px) {
  .about { overflow: visible; }
  .about__in {
    position: static;
    height: auto;
    max-width: 40rem;
    margin: 0 auto;
    padding: 1.6rem 1.35rem 3.4rem;
  }
  .about__text { position: static; width: auto; }
  .about__text br { display: none; }
  .about__text p { font-size: clamp(17px, 3.6vw, 23px); line-height: 1.62; letter-spacing: 0; }
  .about__text p + p { margin-top: 1.15em; }
  .about__stmt {
    margin-top: 1.25em !important;
    font-size: clamp(19px, 4.2vw, 27px);
    line-height: 1.4;
  }
  .about__photo {
    position: static;
    display: block;
    width: 100%;
    max-width: 30rem;
    margin: 1.9rem auto 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 46px), rgba(0,0,0,0) 100%);
  }
}

/* ==========================================================================
   APPOINTMENTS PAGE  —  design of 2026-08-26 (21:48)
   The design arrived on a 1024 x 1536 portrait canvas instead of the 1448 x
   1086 the other pages use, so its numbers are kept literal and re-scaled by
   a single unit: --u is one pixel of that canvas. Every value below IS the
   measured design pixel, so the whole composition moves with one number.
   ========================================================================== */
.p-appt {
  --s: 0.86;                                   /* composition scale on the 1448 canvas */
  --u: calc(0.069061rem * var(--s));           /* 1 design px */
}

.appt {
  background: var(--cream-hi);
  /* the design's face is a narrow display serif — the condensed cut is the
     closest of the two the site self-hosts, same choice as the About page */
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
  padding-top: calc(var(--u) * 79);            /* nav underline y286 -> cap-top y403 */
  padding-bottom: calc(var(--u) * 87);         /* design keeps 87px under the last line */
  text-align: center;
  color: var(--navy-ink);
}
.appt__in { max-width: calc(var(--u) * 1024); margin: 0 auto; padding: 0 1.35rem; }

.appt__title {
  margin: 0;
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
  font-weight: 700;
  font-size: calc(var(--u) * 64);              /* width-fit 530 / 753 */
  line-height: calc(var(--u) * 103);           /* cap-top 403 -> 506 */
  letter-spacing: 0;
}

/* ---- gold rule with its diamond, as on the rest of the site ---- */
.appt__rule {
  display: block;
  position: relative;
  width: calc(var(--u) * 488);
  height: calc(var(--u) * 2);
  margin: calc(var(--u) * 52) auto 0;          /* cap-top 506 -> rule centre 637 */
  background: var(--gold);
}
.appt__rule .gem {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--u) * 15.6); height: calc(var(--u) * 15.6);
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}
.appt__rule--wide { width: calc(var(--u) * 666); margin-top: calc(var(--u) * 54); }

.appt__lede {
  margin: calc(var(--u) * 43) 0 0;             /* rule centre 637 -> ink top 694 */
  font-size: calc(var(--u) * 31.5);            /* width-fit 592 / 633 */
  line-height: calc(var(--u) * 56);
}

/* ---- the call to action ---- */
.appt__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 37);
  width: calc(var(--u) * 658);
  height: calc(var(--u) * 153);
  margin: calc(var(--u) * 62) auto 0;          /* lede line 2 -> button top y854 */
  border: calc(var(--u) * 2.5) solid var(--gold);
  border-radius: calc(var(--u) * 12);
  background: linear-gradient(180deg, #012049 0%, #001b3d 55%, #011a3f 100%);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 9) rgba(5, 26, 47, 0.22);
  color: #fff;
  text-decoration: none;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}
.appt__cta:hover,
.appt__cta:focus-visible {
  background: linear-gradient(180deg, #03306b 0%, #00265a 55%, #012a5c 100%);
  box-shadow: 0 calc(var(--u) * 5) calc(var(--u) * 12) rgba(5, 26, 47, 0.3);
}
.appt__cta svg {
  flex: 0 0 auto;
  width: calc(var(--u) * 87); height: calc(var(--u) * 91);
  fill: none;
  stroke: var(--gold-lt);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* the pencil punches a gap through the page outline, as the design draws it */
.appt__cta svg .cut { fill: #011c40; stroke: #011c40; stroke-width: 9; }

.appt__cta span {
  font-weight: 700;
  font-size: calc(var(--u) * 36.7);            /* width-fit 434 */
  line-height: 1;
  letter-spacing: 0.012em;
  text-transform: uppercase;
}

.appt__note {
  margin: calc(var(--u) * 59) 0 0;             /* button bottom 1006 -> ink top 1080 */
  font-size: calc(var(--u) * 32.9);            /* width-fit 260 / 502 */
  line-height: calc(var(--u) * 56);
}

/* ---- phone ---- */
.appt__phone { margin: calc(var(--u) * 48) 0 0; }
.appt__phone a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 34);
  color: var(--navy-ink);
  text-decoration: none;
}
.appt__ring {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(var(--u) * 83); height: calc(var(--u) * 83);
  border: calc(var(--u) * 4) solid var(--gold);
  border-radius: 50%;
}
.appt__ring svg { width: calc(var(--u) * 46); height: calc(var(--u) * 46); fill: var(--gold); }
.appt__num {
  font-weight: 700;
  font-size: calc(var(--u) * 57.5);            /* width-fit 404 */
  line-height: 1;
}
.appt__phone a:hover .appt__num,
.appt__phone a:focus-visible .appt__num { color: var(--gold); }

.appt__tag {
  margin: calc(var(--u) * 40) 0 0;             /* rule centre 1365 -> ink top 1416 */
  font-weight: 700;
  font-style: italic;
  font-size: calc(var(--u) * 25.2);            /* width-fit 644 */
  line-height: calc(var(--u) * 44);
}

/* ---- Appointments: tablet / mobile (< 1100px) ---- */
@media (max-width: 1099.98px) {
  .p-appt { --u: 1px; }
  .appt { padding-top: 1.7rem; padding-bottom: 3.4rem; }
  .appt__in { max-width: 40rem; }
  /* the designed break is kept here: sized so "15-Minute Consultation" always
     fits one line, which stops the browser breaking it at the hyphen */
  .appt__title { font-size: min(calc(7.9vw - 3px), 48px); line-height: 1.14; }
  .appt__rule { width: min(74%, 330px); height: 2px; margin-top: 1.05rem; }
  .appt__rule .gem { width: 11px; height: 11px; }
  .appt__rule--wide { width: min(88%, 420px); margin-top: 1.5rem; }
  .appt__lede { margin-top: 1.15rem; font-size: clamp(17px, 3.9vw, 24px); line-height: 1.5; }
  .appt__lede br { display: none; }
  .appt__cta {
    width: min(100%, 26rem);
    height: auto;
    gap: 1rem;
    margin-top: 1.6rem;
    padding: 0.85rem 1.1rem;
    border-width: 2px;
    border-radius: 9px;
  }
  .appt__cta svg { width: 44px; height: 46px; stroke-width: 6; }
  /* the pencil punches a gap through the page outline, as the design draws it */
.appt__cta svg .cut { fill: #011c40; stroke: #011c40; stroke-width: 9; }

.appt__cta span { font-size: clamp(16px, 3.7vw, 23px); }
  .appt__note { margin-top: 1.7rem; font-size: clamp(17px, 3.9vw, 24px); line-height: 1.5; }
  .appt__note br { display: none; }
  .appt__phone { margin-top: 1.5rem; }
  .appt__phone a { gap: 0.75rem; }
  .appt__ring { width: 46px; height: 46px; border-width: 2px; }
  .appt__ring svg { width: 26px; height: 26px; }
  .appt__num { font-size: clamp(28px, 6.6vw, 44px); }
  .appt__tag { margin-top: 1.15rem; font-size: clamp(16px, 3.5vw, 22px); line-height: 1.4; }
}

/* ==========================================================================
   WHO I SERVE PAGE  —  design of 2026-08-30
   The design arrived on the same 1024 x 1536 portrait canvas the Appointments
   design used, so it is built the same way: --u is one pixel of that canvas.

   Unlike the Appointments design, this one draws its NAV at the site's real
   size — the eight labels width-fit at 17.46px against the 17.48px the shared
   banner actually renders — so the canvas maps 1:1 and --s is 1. That is also
   what the composition says: the design's card is 0.80 of its nav's width, and
   at --s 1 it comes out 0.77 of the real nav. Two independent checks agree.
   (The lockup is the exception: this design draws the name ~27% larger than
   the site does. That is the header-scale question already raised with her;
   the banner is a shared block and is not touched here.)
   ========================================================================== */
.p-serve {
  --s: 1;                                      /* composition scale on the 1448 canvas */
  --u: calc(0.069061rem * var(--s));           /* 1 design px */
}

.serve {
  background: var(--cream-hi);
  /* design: nav underline y253 -> card top y319. The shared banner already
     keeps 12.8px under its underline, so the padding carries the remaining 53. */
  padding-top: calc(var(--u) * 53);
  padding-bottom: calc(var(--u) * 43);         /* card bottom y1189 -> footer y1232 */
  color: var(--navy-ink);
}

/* screen-reader heading — the design carries no visible page title,
   the same situation as the About page */
.serve__sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.serve__card {
  width: calc(var(--u) * 779.1);               /* outer edges x121.7 -> x900.8 */
  margin: 0 auto;
  border: calc(var(--u) * 2.6) solid var(--gold);
  border-radius: calc(var(--u) * 18.5);
  padding: calc(var(--u) * 40) 0 calc(var(--u) * 49);
}

/* ---- the two centred lines at the top of the card ---- */
.serve__lede {
  margin: 0;
  /* the design's face is a narrow display serif — the condensed cut is the
     closest of the two the site self-hosts, same choice as About and
     Appointments */
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
  font-size: calc(var(--u) * 29.5);            /* width-fit 452 / 503 */
  line-height: calc(var(--u) * 55);            /* ink top y372 -> y427 */
  text-align: center;
}

/* ---- the checklist ---- */
.serve__list {
  margin: calc(var(--u) * 50) 0 0;             /* heading ink -> icon 1 top y521 */
  padding: 0;
  list-style: none;
}

.serve__list li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 31);                    /* icon right x236 -> ink x267 */
  padding-left: calc(var(--u) * 76);           /* card inner edge -> icon x199 */
  /* the row is exactly the icon's height, so the 72.5px pitch the design draws
     between icon centres is set once, on the gap below */
  min-height: calc(var(--u) * 37.2);
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
  font-size: calc(var(--u) * 23.1);            /* width-fit, least squares over the 9 rows */
  line-height: calc(var(--u) * 37.2);
}
.serve__list li + li { margin-top: calc(var(--u) * 35.3); }   /* 72.5 pitch */

.serve__check {
  flex: 0 0 auto;
  display: block;
  width: calc(var(--u) * 37.2);
  height: calc(var(--u) * 37.2);
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.serve__check .ring { stroke-width: 1.94; }    /* design ring 3px  */
.serve__check .tick { stroke-width: 2.84; }    /* design tick 4.4px */

/* ==========================================================================
   Who I Serve: tablet / mobile (< 1100px)
   ========================================================================== */
@media (max-width: 1099.98px) {
  .p-serve { --u: 1px; }

  .serve { padding: 1.9rem 1.1rem 2.6rem; }
  .serve__card {
    width: auto;
    max-width: 40rem;
    margin: 0 auto;
    border-width: 2px;
    border-radius: 14px;
    padding: 1.6rem 1.35rem 1.8rem;
  }
  .serve__lede {
    font-size: clamp(19px, 4.2vw, 27px);
    line-height: 1.42;
  }
  .serve__lede br { display: none; }

  .serve__list { margin-top: 1.5rem; }
  .serve__list li {
    padding-left: 0;
    gap: 0.85rem;
    min-height: 0;
    font-size: clamp(16px, 3.5vw, 21px);
    line-height: 1.4;
    align-items: flex-start;
  }
  .serve__list li + li { margin-top: 1.05rem; }
  .serve__check {
    width: clamp(24px, 5.2vw, 30px);
    height: clamp(24px, 5.2vw, 30px);
    /* keeps the ring optically on the first line once the label wraps */
    margin-top: 0.05em;
  }
}

/* ==========================================================================
   KNOWLEDGE IS POWER PAGE  —  design of 2026-09-04

   The design arrived on a 1448 x 1086 canvas: the SAME canvas the Home design
   uses (see css_home.css). One design pixel is therefore one CSS pixel at the
   1448 reference width, so --s is 1 and --u maps 1:1 — no guessing required.

   The design redraws the shared banner much larger than the site renders it
   (title ink 904px against the site's 610, emblem 114px against 92, nav labels
   at a 17px cap against the site's 12.7) and in a bluer navy. That is the
   AI drift the client has already ruled on: on a shared block the site wins.
   So the banner is untouched here, and everything below it is anchored to the
   NAV UNDERLINE rather than to the design's absolute y — the design keeps 55px
   between the underline and the first line of text, and so does this page.

   The four article rows are drawn with a shrinking pitch (154.5, 149, 145);
   that is drift too, not intent, so the pitch here is a single fitted value.
   ========================================================================== */
.p-kip {
  --s: 1;                                      /* design canvas maps 1:1 */
  --u: calc(0.069061rem * var(--s));           /* 1 design px */
  /* the design sets its link text distinctly darker than its rules; the rules
     themselves are the site's --gold. Keeping the link on --gold would drop it
     to 3:1 against the cream, which is under the readable-text threshold. */
  --gold-dk: #8a4a12;
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
}

.kip {
  background: var(--cream-hi);
  color: var(--navy-ink);
  /* nav underline -> first line of text is 55 in the design; the shared banner
     already keeps 13.4 of it below the underline, and the lede's own half
     leading carries a further 5.6 */
  padding-top: calc(var(--u) * 36);
  padding-bottom: calc(var(--u) * 46);
}

/* screen-reader heading — the design carries no visible page title, the same
   situation as About and Who I Serve */
.kip__sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.kip__in {
  width: calc(var(--u) * 957);                 /* rules x246 -> x1202 */
  margin: 0 auto;
}

/* ---- the two paragraphs above the divider ---- */
.kip__lede {
  margin: 0;
  /* the design's first line runs 8px past the rule below it; the block is a
     touch wider than the column so the line breaks exactly where drawn */
  width: calc(var(--u) * 972);
  font-size: calc(var(--u) * 22.3);            /* width-fit over 3 lines */
  line-height: calc(var(--u) * 32);
}
.kip__lede + .kip__lede { margin-top: calc(var(--u) * 4); }

/* ---- divider ---- */
.p-kip .rule--kip {
  width: 100%;
  height: calc(var(--u) * 2);
  margin: calc(var(--u) * 36.5) auto 0;        /* lede ink bottom -> rule y390 */
}
.p-kip .rule--kip .gem {
  width: calc(var(--u) * 18.4);                /* 26px across the diagonal */
  height: calc(var(--u) * 18.4);
}

/* ==========================================================================
   The article list
   ========================================================================== */
.kip__list {
  margin: calc(var(--u) * 10.3) 0 0;           /* rule -> first row box top */
  padding: 0;
  list-style: none;
}

.kip__item {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 45);                    /* icon right x379 -> ink x423.5 */
  /* the design's own pitch collapses down the page (154.5, 149, 145) and its
     padding is not symmetric; a joint least-squares fit over the four icons AND
     the four rules gives 13.7 above, 11.5 below, pitch 147.7 — which lands every
     one of the eight within 5px of where it is drawn */
  padding: calc(var(--u) * 13.7) 0 calc(var(--u) * 11.5);
  border-bottom: calc(var(--u) * 2) solid var(--gold);
}

.kip__icon {
  flex: 0 0 auto;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 120);
  border-radius: 50%;
  background: #f9e1c1;                         /* measured off the design */
  /* the icons sit 13px inside the rule, not flush with it */
  margin-left: calc(var(--u) * 13);
}
.kip__ic { display: block; width: 100%; height: 100%; }
.kip__ic .nv { fill: var(--navy-ink); }
.kip__ic .cr { fill: #f9e1c1; }
.kip__ic .st { fill: none; stroke: var(--navy-ink); stroke-linecap: round; stroke-linejoin: round; }
.kip__ic .cst { fill: none; stroke: #f9e1c1; stroke-linecap: round; stroke-linejoin: round; }

.kip__body {
  width: calc(var(--u) * 560);
  /* the design sets the text block ~4px below the icon's centre rather than
     dead on it. This has to be a relative offset, not a margin: the text block
     is 120.5 tall and is what actually drives the row height, so a margin would
     stretch the row instead of moving the text inside it. */
  position: relative;
  top: calc(var(--u) * 4);
}

.kip__title {
  margin: 0;
  font-weight: 700;
  font-size: calc(var(--u) * 24.25);           /* width-fit, mean of the four */
  line-height: calc(var(--u) * 28);
  color: var(--navy-ink);
}

.kip__sum {
  margin: calc(var(--u) * 5) 0 0;              /* title ink -> summary ink = 32 */
  font-size: calc(var(--u) * 22.3);
  line-height: calc(var(--u) * 27);
}

.kip__more {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 8);                     /* text ends x550, arrow x558 */
  margin-top: calc(var(--u) * 6.5);            /* summary ink -> link ink = 32 */
  font-size: calc(var(--u) * 22.3);
  line-height: calc(var(--u) * 27);
  color: var(--gold-dk);
  text-decoration: none;
}
/* only the real links get the hover underline — the four "Read Article" items
   are spans until the articles themselves exist, and a span that underlines
   under the pointer promises a destination it does not have */
a.kip__more:hover,
a.kip__more:focus-visible { text-decoration: underline; }

.kip__arrow {
  display: block;
  width: calc(var(--u) * 19);                  /* arrow ink x558 -> x576 */
  height: calc(var(--u) * 14);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   "Have a topic…" — the closing note
   ========================================================================== */
.kip__ask {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 17);                    /* diamond box right x277 -> ink x294 */
  margin: calc(var(--u) * 14) 0 0;             /* last rule -> first line ink = 19 */
  padding-left: calc(var(--u) * 15);           /* diamond sits on the icon axis */
  font-size: calc(var(--u) * 24.3);            /* width-fit over both lines */
  line-height: calc(var(--u) * 28);
}

/* the closing note points at the Contact page. It is drawn as plain text, so
   it stays plain text to the pixel and only announces itself under the
   pointer or the keyboard. */
.kip__ask a {
  color: inherit;
  text-decoration: none;
}
.kip__ask a:hover,
.kip__ask a:focus-visible { text-decoration: underline; }

.kip__dia {
  flex: 0 0 auto;
  width: calc(var(--u) * 16);                  /* 23px across the diagonal */
  height: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 6.6);            /* centres on the first line */
  background: var(--gold);
  transform: rotate(45deg);
}

/* the footer is a site-wide component drawn in the Home design's face; this
   page runs on the condensed cut, so pin it back the way Services does */
.p-kip .foot { font-family: "DejaVu Serif", Georgia, "Times New Roman", serif; }

/* ==========================================================================
   Knowledge Is Power: tablet / mobile (< 1100px)
   ========================================================================== */
@media (max-width: 1099.98px) {
  .p-kip { --u: 1px; }

  .kip { padding: 1.6rem 1.1rem 2.2rem; }
  .kip__in { width: auto; max-width: 42rem; }

  /* the desktop line breaks are drawn into the design; on a phone the text has
     to find its own */
  .kip__lede br,
  .kip__sum br { display: none; }

  .kip__lede {
    width: auto;
    font-size: clamp(16px, 3.6vw, 21px);
    line-height: 1.45;
  }
  .kip__lede + .kip__lede { margin-top: 0.6rem; }

  .p-kip .rule--kip { height: 2px; margin-top: 1.5rem; }
  .p-kip .rule--kip .gem { width: 14px; height: 14px; }

  .kip__list { margin-top: 0.6rem; }

  .kip__item {
    gap: 0.95rem;
    padding: 1.15rem 0;
    border-bottom-width: 2px;
    align-items: flex-start;
  }
  .kip__icon {
    width: clamp(56px, 15vw, 78px);
    height: clamp(56px, 15vw, 78px);
    margin-left: 0;
  }
  .kip__body { width: auto; flex: 1 1 auto; }

  .kip__title { font-size: clamp(17px, 4vw, 22px); line-height: 1.3; }
  .kip__sum   { margin-top: 0.4rem; font-size: clamp(15px, 3.4vw, 19px); line-height: 1.42; }
  .kip__more  { margin-top: 0.45rem; font-size: clamp(15px, 3.4vw, 19px); gap: 7px; }
  .kip__arrow { width: 17px; height: 12px; }

  .kip__ask {
    margin-top: 1.2rem;
    padding-left: 0;
    gap: 0.7rem;
    font-size: clamp(16px, 3.6vw, 21px);
    line-height: 1.42;
  }
  .kip__dia { width: 13px; height: 13px; margin-top: 0.35em; }
}

/* ==========================================================================
   ARTICLE PAGES  —  the four destinations of "Read Article" on the
   Knowledge Is Power page.

   There is no design for an article page, so this one does not invent a look:
   it is the Knowledge Is Power page's own frame — the same cream field, the
   same gold rule with its gem, the same condensed serif — with a reading
   column set narrower than the index column, because a 957px measure at 22px
   runs past ninety characters a line and stops being readable.

   Scale is the Knowledge Is Power scale: --s 1 on the 1448 canvas, so one
   design pixel is one CSS pixel there, exactly as on the page these link from.
   ========================================================================== */
.p-article {
  --s: 1;
  --u: calc(0.069061rem * var(--s));           /* 1 design px */
  /* the same darkened gold the Knowledge Is Power page uses for link text —
     the rule gold drops to 3:1 on cream, which is under the readable threshold */
  --gold-dk: #8a4a12;
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
}
/* the footer is a site-wide block drawn in the Home face — keep it there */
.p-article .foot { font-family: "DejaVu Serif", Georgia, "Times New Roman", serif; }

.art {
  background: var(--cream-hi);
  color: var(--navy-ink);
  /* the same 36 the Knowledge Is Power page keeps under the nav underline */
  padding-top: calc(var(--u) * 36);
  padding-bottom: calc(var(--u) * 46);
}

.art__in {
  width: calc(var(--u) * 790);                 /* ~68 characters a line at 21.5 */
  margin: 0 auto;
}

/* ---- the line back to the index, above the title ---- */
.art__up {
  margin: 0;
  font-size: calc(var(--u) * 18.5);
  line-height: calc(var(--u) * 26);
  text-align: center;
  letter-spacing: calc(var(--u) * 0.6);
}
.art__up a {
  color: var(--gold-dk);
  text-decoration: none;
}
.art__up a:hover,
.art__up a:focus-visible { text-decoration: underline; }

/* ---- title ---- */
.art__title {
  margin: calc(var(--u) * 14) 0 0;
  font-size: calc(var(--u) * 41);
  line-height: calc(var(--u) * 50);
  font-weight: 700;
  text-align: center;
}

.p-article .rule--art {
  display: block;
  position: relative;
  width: calc(var(--u) * 320);
  height: calc(var(--u) * 2);
  margin: calc(var(--u) * 22) auto 0;
  background: var(--gold);
}
.p-article .rule--art .gem {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  margin: 0;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gold);
}

/* ---- the standfirst under the rule ---- */
.art__lede {
  margin: calc(var(--u) * 26) 0 0;
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 36);
  text-align: center;
  font-style: italic;
}

/* ==========================================================================
   the body
   ========================================================================== */
.art__body { margin-top: calc(var(--u) * 34); }

.art__body p {
  margin: 0;
  font-size: calc(var(--u) * 21.5);
  line-height: calc(var(--u) * 34);
}
.art__body p + p,
/* a paragraph that closes a list needs the same air as one that follows a
   paragraph — without this it sits flush against the last bullet */
.art__body ul + p { margin-top: calc(var(--u) * 17); }

.art__body h3 {
  margin: calc(var(--u) * 34) 0 calc(var(--u) * 12);
  font-size: calc(var(--u) * 27);
  line-height: calc(var(--u) * 34);
  font-weight: 700;
}

.art__body ul {
  margin: calc(var(--u) * 14) 0 0;
  padding: 0;
  list-style: none;
}
.art__body li {
  position: relative;
  padding-left: calc(var(--u) * 26);
  font-size: calc(var(--u) * 21.5);
  line-height: calc(var(--u) * 32);
}
.art__body li + li { margin-top: calc(var(--u) * 10); }
/* the same small gold lozenge the Knowledge Is Power page sets beside its
   closing note, so a list here reads as part of the same family */
.art__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--u) * 12);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  transform: rotate(45deg);
  background: var(--gold);
}

.art__body strong { font-weight: 700; }

/* ==========================================================================
   the closing invitation
   ========================================================================== */
.art__cta {
  margin-top: calc(var(--u) * 40);
  border: calc(var(--u) * 2.2) solid var(--gold);
  border-radius: calc(var(--u) * 15);
  padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 28);
  text-align: center;
}
.art__cta p {
  margin: 0;
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 32);
}
.art__cta .art__btn {
  display: inline-block;
  margin-top: calc(var(--u) * 18);
  padding: 0 calc(var(--u) * 30);
  height: calc(var(--u) * 48);
  border-radius: calc(var(--u) * 24);
  background: var(--navy-ink);
  color: var(--cream-hi);
  font-size: calc(var(--u) * 21);
  line-height: calc(var(--u) * 48);
  text-decoration: none;
}
.art__cta .art__btn:hover { background: #0a2947; }
.art__cta .art__btn:focus-visible { outline: calc(var(--u) * 2) solid var(--gold-lt); outline-offset: 2px; }

/* the one line that says what this page is and is not. It is set quieter than
   the body but not so quiet that it stops being readable on the cream. */
.art__note {
  margin: calc(var(--u) * 26) 0 0;
  font-size: calc(var(--u) * 17.5);
  line-height: calc(var(--u) * 26);
  text-align: center;
  color: #4a5765;
}

.art__back {
  margin: calc(var(--u) * 26) 0 0;
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 28);
  text-align: center;
}
.art__back a { color: var(--gold-dk); text-decoration: none; }
.art__back a:hover,
.art__back a:focus-visible { text-decoration: underline; }

/* ==========================================================================
   Article: tablet / mobile (< 1100px)
   ========================================================================== */
@media (max-width: 1099.98px) {
  .p-article { --u: 1px; }

  .art { padding: 1.6rem 1.1rem 2.2rem; }
  .art__in { width: auto; max-width: 40rem; }

  .art__up { font-size: 0.95rem; line-height: 1.4; }
  .art__title { margin-top: 0.6rem; font-size: clamp(24px, 6vw, 34px); line-height: 1.22; }
  .p-article .rule--art { width: min(260px, 70%); height: 2px; margin-top: 1rem; }
  .p-article .rule--art .gem { width: 14px; height: 14px; }

  .art__lede { margin-top: 1rem; font-size: clamp(16px, 3.8vw, 21px); line-height: 1.45; }

  .art__body { margin-top: 1.4rem; }
  .art__body p,
  .art__body li { font-size: clamp(16px, 3.6vw, 19px); line-height: 1.55; }
  .art__body p + p,
  .art__body ul + p { margin-top: 0.8rem; }
  .art__body h3 { margin: 1.5rem 0 0.5rem; font-size: clamp(18px, 4.4vw, 23px); line-height: 1.3; }
  .art__body ul { margin-top: 0.7rem; }
  .art__body li { padding-left: 1.25rem; }
  .art__body li + li { margin-top: 0.5rem; }
  .art__body li::before { top: 0.55em; width: 8px; height: 8px; }

  .art__cta { margin-top: 1.8rem; border-width: 2px; border-radius: 12px; padding: 1.2rem 1rem 1.3rem; }
  .art__cta p { font-size: clamp(16px, 3.6vw, 20px); line-height: 1.45; }
  .art__cta .art__btn { margin-top: 0.9rem; height: 2.9rem; line-height: 2.9rem; padding: 0 1.4rem; font-size: 1.05rem; border-radius: 1.45rem; }

  .art__note { margin-top: 1.2rem; font-size: 0.88rem; line-height: 1.45; }
  .art__back { margin-top: 1.2rem; font-size: 1rem; }
}

/* ==========================================================================
   CONTACT PAGE  —  design of 2026-09-04
   Same 1024 x 1536 portrait canvas as the Appointments and Who I Serve
   designs, so it is built the same way: --u is one pixel of that canvas.

   Scale: --s is 1. The check is not against the site's banner — that banner is
   redrawn at a different scale in every one of her mockups, so it cannot settle
   anything — but against HER OWN Who I Serve design, which is already built and
   live at --s 1. Measured at the same ink threshold, the eight nav labels of
   this design come out 0.973 to 1.000 of the Who I Serve design's, and the full
   nav ink span 0.993 of it. Same canvas, same scale.

   Type sizes are width-fits, solved as one least-squares system over 25
   measured strings: one size per typographic group plus a single allowance for
   how wide her drawing sets a word space. RMS residual 3.6px on a 1024px
   canvas. The face is the condensed cut, the same choice as About,
   Appointments and Who I Serve — her display serif is narrower than either cut
   the site self-hosts, and matching the line LENGTHS is what keeps the
   composition on her drawing.
   ========================================================================== */
.p-contact {
  --s: 1;                                        /* composition scale on the 1448 canvas */
  --u: calc(0.069061rem * var(--s));             /* 1 design px */
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
}
/* the footer is a site-wide block drawn in the Home face — keep it there */
.p-contact .foot { font-family: "DejaVu Serif", Georgia, "Times New Roman", serif; }

.ct {
  background: var(--cream-hi);
  /* design: nav underline bottom y241 -> card top y307 = 66. The shared banner
     already keeps 13.4px under its underline, so the padding carries the 53
     that remain — the same 53 the Who I Serve page needed. */
  padding-top: calc(var(--u) * 53);
  padding-bottom: calc(var(--u) * 53);           /* card bottom y1163 -> footer y1216 */
  color: var(--navy-ink);
}

.ct__card {
  width: calc(var(--u) * 911);                   /* outer edges x57 -> x967 */
  margin: 0 auto;
  border: calc(var(--u) * 2.2) solid var(--gold);
  border-radius: calc(var(--u) * 15);
  padding: 0 0 calc(var(--u) * 27.8);            /* button bottom y1133 -> card inner bottom */
}

/* ---- the two centred lines at the top of the card ---- */
.ct__title {
  margin: calc(var(--u) * 32.9) 0 0;
  font-size: calc(var(--u) * 51.6);              /* width-fit 353 */
  line-height: calc(var(--u) * 60);
  font-weight: 700;
  text-align: center;
}

.ct__lede {
  margin: calc(var(--u) * 15) 0 0;
  font-size: calc(var(--u) * 26.2);              /* width-fit 563 / 462 */
  line-height: calc(var(--u) * 39.2);            /* baselines y445.8 -> y485 */
  text-align: center;
}

/* ==========================================================================
   the two columns
   ========================================================================== */
.ct__cols {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: calc(var(--u) * 53.1);
  padding-left: calc(var(--u) * 34);             /* card inner edge x59 -> icon x93 */
}

/* the vertical gold rule between the columns: design x514, y528 -> y1135 */
.ct__cols::before {
  content: "";
  position: absolute;
  left: calc(var(--u) * 455);                    /* x514 measured from the card's inner edge */
  top: calc(var(--u) * -20.6);
  width: calc(var(--u) * 1.2);
  height: calc(var(--u) * 608);
  background: var(--gold);
}

.ct__info {
  flex: 0 0 calc(var(--u) * 421);                /* icon x93 -> rule x514 */
  padding-top: calc(var(--u) * 5.4);             /* first icon sits at y554 */
}

.ct__form {
  flex: 1 1 auto;
  padding-left: calc(var(--u) * 28);             /* rule x514 -> field x542 */
}

/* ---- left column: four icon rows ---- */
.ct__list { margin: 0; padding: 0; list-style: none; }

.ct__row { display: flex; align-items: flex-start; }
/* label baselines run on a strict 114.7 cadence (y586, 701, 816, 930). Her
   fourth circle drifts 6px off that cadence; the cadence is what is regular in
   the drawing, so the rows are set from it. */
.ct__row + .ct__row { margin-top: calc(var(--u) * 39.3); }

.ct__icon {
  flex: 0 0 auto;
  display: block;
  width: calc(var(--u) * 68);
  height: calc(var(--u) * 68);
}
.ct__icon .ring { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.ct__icon .solid { fill: var(--gold); }
.ct__icon .line {
  fill: none; stroke: var(--gold); stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}

.ct__body { padding: calc(var(--u) * 11.75) 0 0 calc(var(--u) * 26); }  /* icon right x161 -> ink x187 */

.ct__label {
  margin: 0;
  font-size: calc(var(--u) * 19.5);              /* width-fit over the four labels */
  line-height: calc(var(--u) * 27);
  font-weight: 700;
}

.ct__value {
  margin: calc(var(--u) * 6.4) 0 0;
  font-size: calc(var(--u) * 20);                /* width-fit over the address lines */
  line-height: calc(var(--u) * 30.25);           /* baselines y1023 -> y1053 */
}
/* the phone number is drawn larger than the address lines, and the two long
   web addresses smaller — she sized them to the column, and the column is the
   same width here, so each keeps its own fit */
.ct__value--tel   { font-size: calc(var(--u) * 22.2); }
.ct__value--email { font-size: calc(var(--u) * 15);   }
.ct__value--site  { font-size: calc(var(--u) * 16.4); }

.ct__value a { color: inherit; text-decoration: none; }
.ct__value a:hover, .ct__value a:focus-visible { text-decoration: underline; }

/* ---- right column: heading, intro, form ---- */
.ct__h2 {
  margin: 0;
  font-size: calc(var(--u) * 24.65);             /* width-fit 194 */
  line-height: calc(var(--u) * 34);
  font-weight: 700;
}

.ct__intro {
  margin: calc(var(--u) * 7.8) 0 0;
  font-size: calc(var(--u) * 20.76);             /* width-fit over the three lines */
  line-height: calc(var(--u) * 31);              /* baselines y613 / y644 / y675 */
}

.ct__form form { margin: calc(var(--u) * 24.6) 0 0; }

.ct__pair {
  display: flex;
  gap: calc(var(--u) * 17);                      /* x736 -> x753 */
  width: calc(var(--u) * 404);
  max-width: 100%;
}
.ct__pair > * { flex: 1 1 0; min-width: 0; }

.ct__field {
  display: block;
  width: calc(var(--u) * 404);                   /* x542 -> x945 */
  max-width: 100%;
  height: calc(var(--u) * 56);
  margin: 0;
  padding: 0 calc(var(--u) * 18);                /* placeholder ink starts 18 in */
  border: calc(var(--u) * 1.2) solid var(--gold);
  border-radius: calc(var(--u) * 4);
  background: transparent;
  color: var(--navy-ink);
  font-family: inherit;
  font-size: calc(var(--u) * 17.3);              /* width-fit over the five placeholders */
  line-height: calc(var(--u) * 53.6);
}
.ct__pair .ct__field { width: 100%; }
/* direct children only — the two name fields sit side by side inside .ct__pair
   and are adjacent siblings, so an unscoped rule would push the second one
   down and stretch the row */
.ct__form form > .ct__field + .ct__field,
.ct__form form > .ct__pair + .ct__field { margin-top: calc(var(--u) * 16); }

textarea.ct__field {
  height: calc(var(--u) * 137);                  /* y923 -> y1059 */
  padding-top: calc(var(--u) * 13);
  line-height: calc(var(--u) * 27);
  resize: vertical;
}

.ct__field::placeholder { color: var(--navy-ink); opacity: 1; }
.ct__field:focus-visible { outline: calc(var(--u) * 2) solid var(--gold-lt); outline-offset: 1px; }

.ct__send {
  display: block;
  width: calc(var(--u) * 404);
  max-width: 100%;
  height: calc(var(--u) * 56);
  margin: calc(var(--u) * 16) 0 0;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 4);
  background: var(--navy-ink);
  color: var(--gold-lt);
  font-family: inherit;
  font-size: calc(var(--u) * 21.7);              /* width-fit 140 */
  line-height: calc(var(--u) * 56);
  cursor: pointer;
}
.ct__send:hover { background: #0a2947; }
.ct__send:focus-visible { outline: calc(var(--u) * 2) solid var(--gold-lt); outline-offset: 2px; }

/* the honeypot: a field no person can see, and no person will fill in */
.ct__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* the message the handler sends the visitor back to */
.ct__note {
  margin: calc(var(--u) * 16) 0 0;
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  width: calc(var(--u) * 404);
  max-width: 100%;
  border: calc(var(--u) * 1.2) solid var(--gold);
  border-radius: calc(var(--u) * 4);
  font-size: calc(var(--u) * 18);
  line-height: calc(var(--u) * 26);
}
.ct__note--bad { border-color: #a33; }

/* ==========================================================================
   Contact: tablet / mobile (< 1100px)
   ========================================================================== */
@media (max-width: 1099.98px) {
  .p-contact { --u: 1px; }

  .ct { padding: 1.9rem 1.1rem 2.6rem; }
  .ct__card {
    width: auto;
    max-width: 40rem;
    margin: 0 auto;
    border-width: 2px;
    border-radius: 14px;
    padding: 0 1.35rem 1.8rem;
  }

  .ct__title { margin-top: 1.5rem; font-size: clamp(30px, 7vw, 44px); line-height: 1.2; }
  .ct__lede  { margin-top: 0.7rem; font-size: clamp(17px, 3.8vw, 24px); line-height: 1.45; }
  .ct__lede br { display: none; }

  .ct__cols { display: block; margin-top: 1.7rem; padding-left: 0; }
  .ct__cols::before { display: none; }
  .ct__info { padding-top: 0; }

  .ct__row + .ct__row { margin-top: 1.1rem; }
  .ct__icon { width: clamp(38px, 8vw, 48px); height: clamp(38px, 8vw, 48px); }
  .ct__body { padding: 0 0 0 0.85rem; }
  .ct__label { font-size: clamp(17px, 3.6vw, 21px); line-height: 1.35; }
  .ct__value,
  .ct__value--tel,
  .ct__value--email,
  .ct__value--site {
    margin-top: 0.15rem;
    font-size: clamp(15px, 3.2vw, 18px);
    line-height: 1.45;
    /* the two long web addresses carry <wbr> hints, so they break between
       words rather than mid-word; this is only the backstop */
    overflow-wrap: break-word;
  }

  .ct__form { padding-left: 0; margin-top: 2rem; }
  .ct__h2 { font-size: clamp(21px, 4.6vw, 27px); line-height: 1.3; }
  .ct__intro { margin-top: 0.5rem; font-size: clamp(16px, 3.5vw, 20px); line-height: 1.45; }
  .ct__intro br { display: none; }

  .ct__form form { margin-top: 1.2rem; }
  .ct__pair { display: block; }
  .ct__field {
    width: 100%;
    height: 3rem;
    padding: 0 0.85rem;
    border-width: 1px;
    font-size: 1rem;
    line-height: 2.9rem;
  }
  .ct__form form > .ct__field + .ct__field,
  .ct__form .ct__pair + .ct__field,
  .ct__pair .ct__field + .ct__field { margin-top: 0.75rem; }
  textarea.ct__field { height: 8rem; padding-top: 0.7rem; line-height: 1.45; }

  .ct__send { width: 100%; height: 3rem; margin-top: 0.9rem; font-size: 1.15rem; line-height: 3rem; }
  .ct__note { width: 100%; font-size: 0.95rem; line-height: 1.45; }
}

/* ==========================================================================
   APPOINTMENT REQUEST  —  the destination of the "Complete the Form" button
   on the Appointments page.

   There is no separate design for this page, so it does not invent one: it
   runs on the Contact page's card, border, field and button, which she drew
   and approved. Only the parts a booking form needs that a message form does
   not — the single centred column, the drop-downs and the two hint lines —
   are added here. The page carries class "p-contact" for exactly that reason,
   so every .ct rule and the whole Contact mobile block apply unchanged.
   ========================================================================== */

.bk {
  width: calc(var(--u) * 620);
  max-width: 100%;
  margin: calc(var(--u) * 44) auto 0;
}

.bk__row + .bk__row { margin-top: calc(var(--u) * 16); }

/* Grid, not flex, and the reason matters: flex-basis 0 resolves against the
   CONTENT box, so a drop-down (which carries 44 of right padding for its
   chevron) came out 26px wider than the text field beside it and the pair sat
   visibly off-centre. Grid columns are sized before padding is considered, so
   1fr and 1fr are equal whatever each control carries inside it. */
.bk__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 17);
}
.bk__pair > * { min-width: 0; }

/* the Contact field is drawn at a fixed 404 for its own column; here it fills
   the single column it is given */
.bk .ct__field,
.bk .ct__send { width: 100%; }

/* ---- drop-downs, matched to the drawn text field -------------------------
   A native select cannot be given the field's border radius and gold on every
   platform, so it is stripped and redrawn — including the chevron, which is a
   background image rather than a glyph so it cannot fall back to a different
   font. */
.bk__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: calc(var(--u) * 44);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.2 7 7.2 13 1.2' fill='none' stroke='%23c2841e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right calc(var(--u) * 18) center;
  background-size: calc(var(--u) * 14) auto;
  cursor: pointer;
}
.bk__select option { color: var(--navy-ink); }

/* ---- section headings ----------------------------------------------------
   The form is long enough to need signposts. They are set on the card's own
   gold rather than on a new colour, and the hairline under each one is the
   same 2.2 the card border uses, at a third of the opacity so it separates
   without competing with the border it sits inside. */
.bk__sub {
  margin: calc(var(--u) * 30) 0 0;
  padding-bottom: calc(var(--u) * 7);
  border-bottom: calc(var(--u) * 1.6) solid rgba(194, 132, 30, 0.45);
  font-size: calc(var(--u) * 21);
  line-height: calc(var(--u) * 28);
  font-weight: 700;
  letter-spacing: calc(var(--u) * 0.4);
}
.bk__sub--first { margin-top: 0; }

/* a heading is not a row either, so it carries the gap to whatever follows it */
.bk__sub + .bk__row { margin-top: calc(var(--u) * 16); }
.bk__sub + .bk__hint { margin-top: calc(var(--u) * 10); }

/* ---- the two hint lines -------------------------------------------------- */
.bk__hint {
  margin: calc(var(--u) * 8) 0 0;
  font-size: calc(var(--u) * 16.4);
  line-height: calc(var(--u) * 24);
}

/* the hint is not a row, so the row that follows it would otherwise sit flush
   against it while every other row keeps 16 */
.bk__hint + .bk__row { margin-top: calc(var(--u) * 12); }

.bk__req {
  margin: calc(var(--u) * 18) 0 0;
  font-size: calc(var(--u) * 16.4);
  line-height: calc(var(--u) * 24);
}

/* a taller message box than the Contact page's — this one is the only place a
   visitor describes the work */
.bk textarea.ct__field { height: calc(var(--u) * 150); }

/* ==========================================================================
   Appointment request: tablet / mobile (< 1100px)
   The Contact mobile block already resets --u to 1px and restyles the card,
   the fields and the button; only the pieces added above need answering.
   ========================================================================== */
@media (max-width: 1099.98px) {
  .bk { width: auto; margin-top: 1.4rem; }
  .bk__row + .bk__row { margin-top: 0.75rem; }
  .bk__pair { display: block; }
  .bk__pair > * + * { margin-top: 0.75rem; }

  .bk__select {
    padding-right: 2.4rem;
    background-position: right 0.85rem center;
    background-size: 13px auto;
  }

  .bk__sub {
    margin-top: 1.5rem;
    padding-bottom: 0.35rem;
    border-bottom-width: 2px;
    font-size: 1.05rem;
    line-height: 1.35;
  }
  .bk__sub--first { margin-top: 0; }
  .bk__sub + .bk__row  { margin-top: 0.75rem; }
  .bk__sub + .bk__hint { margin-top: 0.5rem; }

  .bk__hint,
  .bk__req { font-size: 0.9rem; line-height: 1.45; }
  .bk__hint + .bk__row { margin-top: 0.55rem; }
  .bk__req { margin-top: 0.9rem; }

  .bk textarea.ct__field { height: 8.5rem; }
}

/* ==========================================================================
   PAY ONLINE PAGE  —  design of 2026-09-08

   Same 1024 x 1536 portrait canvas as the Appointments, Who I Serve and
   Contact designs, so it is built the same way: --u is one pixel of that
   canvas and --s is 1.

   Scale check, as always, against a design of HERS that is already built and
   accepted rather than against the banner (which she redraws at a different
   size in every mockup): the nav ink of this drawing spans 965px against the
   Contact drawing's 959 — 1.006 — on the same canvas. Same scale.

   The drawing redraws the shared banner larger and bluer than the site, and
   names the menu item "Appointments" where the site says "Book Appointment".
   Both are shared-block drift, and her standing rule is that the site wins
   there, so the banner and the menu are untouched. Everything below the
   banner is anchored to the NAV UNDERLINE, not to the drawing's absolute y.

   Type is fitted by WIDTH over 22 measured strings, one size per group. The
   four cards' body text solved to 20.24-21.70 across thirteen separate lines,
   which is what a single fitted 21 looks like when the drawing is consistent.

   Where this drawing differs from the site's type: her display face is much
   NARROWER than either cut this site self-hosts. "Pay Online" is 392 wide and
   93 tall in her drawing; the condensed cut needs 517 to stand 93 tall. Every
   size here is therefore fitted by WIDTH, exactly as on the five pages already
   built and accepted, so every line starts and ends where she drew it and the
   blocks either side of it land on her coordinates. The cost is that the two
   display lines - the title and "PAYMENT OPTIONS" - read a little shorter than
   she drew them. Fitting their height instead would have moved the rules and
   the cards off her layout, which is the more visible error of the two.
   ========================================================================== */
.p-pay {
  --s: 1;                                        /* composition scale on the 1448 canvas */
  --u: calc(0.069061rem * var(--s));             /* 1 design px */
  font-family: "DejaVu Serif Condensed", "DejaVu Serif", Georgia, serif;
}
/* the footer is a site-wide block drawn in the Home face — keep it there */
.p-pay .foot { font-family: "DejaVu Serif", Georgia, "Times New Roman", serif; }

.py {
  background: var(--cream-hi);
  color: var(--navy-ink);
  /* design: nav underline bottom y297 -> title cap-top y395. The shared banner
     already keeps 13.4 below its underline and the title's own half-leading
     carries a further 16.2. */
  padding-top: calc(var(--u) * 72);
  padding-bottom: calc(var(--u) * 73.2);         /* tag baseline -> canvas bottom */
}

.py__in {
  width: calc(var(--u) * 955);                   /* card row x33 -> x987 */
  margin: 0 auto;
}

/* ---- title ---- */
.py__title {
  margin: 0;
  font-size: calc(var(--u) * 72.7);              /* width-fit 392 */
  line-height: calc(var(--u) * 88);
  font-weight: 700;
  text-align: center;
}

/* ---- the two centred lines under it ---- */
.py__lede {
  margin: calc(var(--u) * 67.4) 0 0;
  font-size: calc(var(--u) * 28.1);              /* width-fit 696 / 661 */
  line-height: calc(var(--u) * 49);              /* ink tops y550 -> y599 */
  text-align: center;
}

/* ==========================================================================
   PAYMENT OPTIONS  —  a caption with a rule running out to both margins
   ========================================================================== */
.py__band {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 48);
  margin: calc(var(--u) * 46.5) 0 0;
  font-size: calc(var(--u) * 30.6);              /* width-fit 312 */
  line-height: calc(var(--u) * 40);
  font-weight: 700;
  text-transform: uppercase;
}
.py__band::before,
.py__band::after {
  content: "";
  flex: 1 1 0;
  height: calc(var(--u) * 2);
  background: var(--gold);
}
.py__band span { white-space: nowrap; }

/* ==========================================================================
   the four cards
   ========================================================================== */
.py__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);         /* 229 each */
  gap: calc(var(--u) * 13);
  margin: calc(var(--u) * 28.3) 0 0;
  padding: 0;
  list-style: none;
}

.py__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(var(--u) * 350);
  border: calc(var(--u) * 2) solid var(--gold);
  border-radius: calc(var(--u) * 10);
  text-align: center;
}

.py__mark { display: block; }
.py__mark--pp { width: calc(var(--u) * 124); height: calc(var(--u) * 126); margin-top: calc(var(--u) * 45); }
.py__mark--zl { width: calc(var(--u) * 153); height: calc(var(--u) * 68);  margin-top: calc(var(--u) * 71); }
.py__mark--ax { width: calc(var(--u) * 91);  height: calc(var(--u) * 57);  margin-top: calc(var(--u) * 16); }

/* Visa and Mastercard share a line; the drawing sets 20 between them and hangs
   them off a common centre, so they are centred on each other vertically. */
.py__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 20);
  margin: calc(var(--u) * 22.4) 0 0;
}
.py__mark--vi { width: calc(var(--u) * 92); height: calc(var(--u) * 31); }
.py__mark--mc { width: calc(var(--u) * 71); height: calc(var(--u) * 45); }

.py__we {
  margin: calc(var(--u) * 23.7) 0 0;
  font-size: calc(var(--u) * 22.6);              /* width-fit 140 */
  line-height: calc(var(--u) * 30);
  font-weight: 700;
  text-transform: uppercase;
}

.py__txt {
  margin: 0;
  font-size: calc(var(--u) * 21);                /* width-fit over 13 lines */
  line-height: calc(var(--u) * 34);
}
.py__card--pp .py__txt { margin-top: calc(var(--u) * 25); }
.py__card--zl .py__txt { margin-top: calc(var(--u) * 57); }
.py__card--ac .py__txt { margin-top: calc(var(--u) * 15); }
.py__card--fe .py__txt { margin-top: calc(var(--u) * 33); }

/* ---- the card-with-a-percentage icon, drawn rather than fetched ---- */
.py__mark--fe { margin-top: calc(var(--u) * 45); }
.py__ic { display: block; width: calc(var(--u) * 128); height: calc(var(--u) * 107); }
.py__ic .ln {
  fill: none;
  stroke: var(--navy-ink);
  stroke-width: 6;
  stroke-linecap: round;
}
.py__ic .bdg { fill: var(--gold); }
.py__ic .pct { fill: var(--cream-hi); stroke: var(--cream-hi); stroke-width: 4.6; stroke-linecap: round; }
.py__ic .pct circle { fill: none; }

/* ==========================================================================
   the reassurance box
   ========================================================================== */
.py__safe {
  display: flex;
  align-items: flex-start;
  width: calc(var(--u) * 778);                   /* x123 -> x900 */
  height: calc(var(--u) * 138);
  margin: calc(var(--u) * 44) auto 0;
  border: calc(var(--u) * 2) solid var(--gold);
  border-radius: calc(var(--u) * 10);
  /* the drawing hangs the padlock off the left rather than centring the pair,
     and centres the two lines of text on x547 — not on the box. Reproduced. */
  padding-left: calc(var(--u) * 117);
}
.py__lock { flex: 0 0 auto; margin-top: calc(var(--u) * 25); }
.py__lockic { display: block; width: calc(var(--u) * 61); height: calc(var(--u) * 84); }
.py__lockic .shk { fill: none; stroke: var(--gold); stroke-width: 9; }
.py__lockic .bdy { fill: var(--gold); }
.py__lockic .hol { fill: var(--cream-hi); }

.py__safetxt {
  width: calc(var(--u) * 490);
  margin: calc(var(--u) * 26.4) 0 0;
  font-size: calc(var(--u) * 23.3);              /* width-fit 391 / 401 */
  line-height: calc(var(--u) * 39);              /* ink tops y1183 -> y1222 */
  text-align: center;
}

/* ==========================================================================
   the sign-off
   ========================================================================== */
.p-pay .rule--py {
  display: block;
  position: relative;
  width: calc(var(--u) * 778);
  height: calc(var(--u) * 2);
  margin: calc(var(--u) * 63.5) auto 0;
  background: var(--gold);
}
.p-pay .rule--py .gem {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.py__thanks {
  margin: calc(var(--u) * 33.6) 0 0;
  font-size: calc(var(--u) * 23.8);              /* width-fit 349 */
  line-height: calc(var(--u) * 36);
  font-weight: 700;
  font-style: italic;
  text-align: center;
}

.py__tag {
  margin: calc(var(--u) * 11.7) 0 0;
  font-size: calc(var(--u) * 23);                /* width-fit 531 */
  line-height: calc(var(--u) * 34);
  font-style: italic;
  text-align: center;
  color: var(--gold);
}

/* ==========================================================================
   Pay Online: tablet / mobile (< 1100px)
   ========================================================================== */
@media (max-width: 1099.98px) {
  .p-pay { --u: 1px; }

  .py { padding: 1.6rem 1.1rem 2.4rem; }
  .py__in { width: auto; max-width: 42rem; }

  .py__title { font-size: clamp(30px, 7.6vw, 46px); line-height: 1.15; }
  .py__lede {
    margin-top: 1.1rem;
    font-size: clamp(16px, 3.7vw, 21px);
    line-height: 1.45;
  }
  .py__lede br { display: none; }

  .py__band {
    margin-top: 1.5rem;
    gap: 0.9rem;
    font-size: clamp(16px, 3.8vw, 22px);
    line-height: 1.3;
  }
  .py__band::before,
  .py__band::after { height: 2px; }

  .py__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin-top: 1.1rem;
  }
  .py__card {
    height: auto;
    padding-bottom: 1.1rem;
    border-width: 2px;
    border-radius: 9px;
  }

  /* the marks keep their drawn proportions; only their size follows the column */
  .py__mark--pp { width: clamp(64px, 17vw, 100px); height: auto; margin-top: 1.1rem; }
  .py__mark--zl { width: clamp(84px, 22vw, 124px); height: auto; margin-top: 1.5rem; }
  .py__mark--ax { width: clamp(56px, 15vw, 78px);  height: auto; margin-top: 0.6rem; }
  .py__mark--vi { width: clamp(56px, 15vw, 78px);  height: auto; }
  .py__mark--mc { width: clamp(44px, 12vw, 62px);  height: auto; }
  .py__row { gap: 0.6rem; margin-top: 0.7rem; }

  .py__we { margin-top: 0.9rem; font-size: clamp(15px, 3.6vw, 19px); line-height: 1.3; }

  .py__mark--fe { margin-top: 1.1rem; }
  .py__ic { width: clamp(74px, 20vw, 110px); height: auto; }

  .py__txt { font-size: clamp(14px, 3.3vw, 18px); line-height: 1.45; }
  .py__card--pp .py__txt,
  .py__card--zl .py__txt,
  .py__card--ac .py__txt,
  .py__card--fe .py__txt { margin-top: 0.85rem; }

  .py__safe {
    width: auto;
    height: auto;
    margin-top: 1.4rem;
    padding: 1rem 1.1rem;
    border-width: 2px;
    border-radius: 9px;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
  }
  .py__lock { margin-top: 0; }
  .py__lockic { width: clamp(34px, 9vw, 48px); height: auto; }
  .py__safetxt { width: auto; margin-top: 0; font-size: clamp(15px, 3.5vw, 19px); line-height: 1.45; }
  .py__safetxt br { display: none; }

  .p-pay .rule--py { width: min(90%, 30rem); height: 2px; margin-top: 1.6rem; }
  .p-pay .rule--py .gem { width: 13px; height: 13px; }

  .py__thanks { margin-top: 1.1rem; font-size: clamp(17px, 4vw, 22px); line-height: 1.35; }
  .py__tag { margin-top: 0.45rem; font-size: clamp(15px, 3.6vw, 20px); line-height: 1.4; }
}