/* ==========================================================================
   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;
}
.kip__more:hover,
.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);
}

.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; }
}

/* ==========================================================================
   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; }
}