/* DS-09 -- Blueprint Service Map. Ranked profession treatment 5, applied as
   tokens only: the master layout, header model, hero composition, footer
   model, navigation behaviour, spacing scale, responsive transformations and
   the signature leader rule are the base build's and are untouched here.

   MEASURED CONTRAST (sRGB, WCAG 2.1 relative luminance).

     ink        #182225 on page      #F1F6F8   15.9 : 1
     muted      #44545A on page      #F1F6F8    7.2 : 1
     ink        #182225 on surface   #FCFDFD   16.7 : 1
     ink        #182225 on review    #E3EEF2   14.1 : 1
     ink        #182225 on staff     #DAE4EC   13.0 : 1
     ink        #182225 on highlight #B2F0BD   12.1 : 1
     label      #FFFFFF on action    #2E4B0C    9.6 : 1
     label      #FFFFFF on hover     #3A5E0D    7.7 : 1
     accent     #1D566D on page      #F1F6F8    7.1 : 1
     frame      #375D6C on page      #F1F6F8    6.3 : 1   (3 : 1 gate)
     focus ring #2E4B0C on page      #F1F6F8    9.2 : 1   (3 : 1 gate)

   ON THE FOOTER PLANE #1E3138, where the treatment states white text:

     text   #FFFFFF on #1E3138  13.4 : 1
     muted  #C7D6DC on #1E3138   9.1 : 1
     frame  #6F8E9C on #1E3138   4.1 : 1   (3 : 1 gate)
     action #B2F0BD on #1E3138  10.4 : 1

   THE STATED DEVIATION. The treatment names #2E4B0C for the primary action
   and for the keyboard focus ring, and both hold everywhere the page or a
   card is the ground. Neither holds on the deep footer plane the same
   treatment names: #2E4B0C on #1E3138 measures 1.45 : 1, far under the 3 : 1
   control boundary, so the Book control in the footer would be a dark green
   shape on a dark slate ground and the ring around it would be invisible.
   The footer therefore re-declares the action and the accent as the
   treatment's OWN highlight fill #B2F0BD carrying its own stated text colour
   #182225. No colour is introduced that the treatment does not already name,
   and the contrast gate is met by strengthening the plane rather than by
   editing the palette, which is what the treatment asks for. */





:root {
  --bg: #F1F6F8;  --ink: #182225;  --act: #2E4B0C;  --acc: #1D566D;
  --hi: #FCFDFD;  --surface: #FCFDFD;  --muted: #44545A;  --line: #375D6C;
  --grid-f: #E1EBEF; --grid-h: #C9DBE3; --act-h: #3A5E0D; --on-act: #FFFFFF;
  --act-a: #23380B; --sel: #B2F0BD; --on-sel: #182225;
  --panel-rev: #E3EEF2; --panel-stf: #DAE4EC;
  --deep: #1E3138; --on-deep: #FFFFFF;
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --max: 1320px; --measure: 68ch; --measure-s: 52ch; --radius: 14px;
  --head-h:var(--catalog-font-heading); --band-pad: 72px; --gutter: 16px; --gap: var(--s5);
  --hair: 1px; --rule: 2px; --underline: 5px;
  --plate-shadow: 0 18px 40px rgba(24, 34, 37, .14);
  --media-filter: saturate(.92) contrast(1.04);
  --media-scrim: linear-gradient(180deg, rgba(10, 12, 14, .02) 0%,
                                         rgba(10, 12, 14, .64) 100%);
  --font-h:var(--catalog-font-heading);
  --font-b:var(--catalog-font-body);
  --t: 220ms cubic-bezier(.2,.8,.2,1);
  --t-long: 600ms cubic-bezier(.2,.8,.2,1);
  --focus-ring: var(--act);
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* Section 7's gutter ladder, and the section spacing that steps with it. */
@media (min-width: 360px)  { :root { --gutter: 18px; } }
@media (min-width: 375px)  { :root { --gutter: 20px; } }
@media (min-width: 414px)  { :root { --gutter: 24px; } }
@media (min-width: 768px)  { :root { --gutter: 36px; --band-pad: 112px; } }
@media (min-width: 1024px) {
  :root { --gutter: 48px; --band-pad: 144px; --head-h:var(--catalog-font-heading); }
}

/* The outer halo of the stated deviation. The outline is base.css's and
   carries section 4's 3px/3px; this only puts the specified highlight back
   around it, which is what keeps the ring legible over a photograph. */
:focus-visible {
  box-shadow: 0 0 0 calc(var(--focus-offset) + var(--focus-width) * 2)
              var(--hi);
}

/* ---- the drawing surface ---------------------------------------------- */

body {
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(to right,
      var(--grid-h) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to bottom,
      var(--grid-h) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(to right,
      var(--grid-f) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom,
      var(--grid-f) 0 1px, transparent 1px 24px);
  color: var(--ink);
  font-family: var(--font-b);
  font-size: 1rem;
  line-height: 1.6;
}

@media (min-width: 768px) { body { font-size: 1.0625rem; } }

h1, h2, h3 {
  font-family: var(--font-h);
  font-weight: 700;
  margin: 0;
  overflow-wrap: break-word;
  text-transform: uppercase;
  letter-spacing: .01em;
}

/* Section 4's mobile H1, then its desktop H1 at the 768 identity change. */
h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.02em;
}

@media (min-width: 768px) {
  h1 {
    font-size: clamp(3.25rem, 7vw, 7rem);
    line-height: .94;
    letter-spacing: -.035em;
  }
}

h2 { font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; }

p { margin: 0; }

.measure   { max-width: var(--measure); }
.measure-s { max-width: var(--measure-s); }

a { color: var(--act); text-underline-offset: .18em; }
a:hover { color: var(--act-h); }

/* Section 4 puts the metadata floor at .8125rem and labels at .875rem. This
   is the drawing-annotation voice, and it is used for every key, number and
   label in the build -- which is what makes the legends read as one system
   rather than as twenty decisions. */
.nav__no, .price__q, .svc__fitlabel, .gal__no, .rev__no, .proc__no,
.how__no, .ft__legal, .hint, .field__opt, .sub-form__status,
.cform__status, .pv__date, .revp__by, .rev__by,
.hero__eyebrow, .hero__leg-no, .sa__no, .ft__tb-k, .galp__cap, .place__cap,
.hero__cap, .sap__cap, .sa__plan-cap {
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-h);
}

/* ---- the band --------------------------------------------------------- */
/*
 * `overflow: clip` and not `hidden`: clip contains the leader rules that run
 * to the band edge without creating a scroll container, which `hidden` would,
 * and a scroll container is what silently breaks a sticky child.
 */

.sec {
  position: relative;
  overflow: clip;
  padding-block: var(--band-pad);
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sec > .wrap > * + * { margin-top: var(--s6); }

/* Every band heading carries a drawing tick above it: a short heavy rule
   with a finer one running out from it, at the same distance every time. */
.sec > .wrap > h2,
.sec > .wrap > .phead__h1,
.sec > .wrap > .nf__h1 {
  padding-top: var(--s5);
  position: relative;
}

.sec > .wrap > h2::before,
.sec > .wrap > .phead__h1::before,
.sec > .wrap > .nf__h1::before {
  content: "";
  display: block;
  width: 72px;
  height: var(--underline);
  margin-bottom: var(--s5);
  border-radius: calc(var(--underline) / 2);
  background: var(--acc);
}

/* ---- the title block -------------------------------------------------- */

.hd {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--hi);
  color: var(--ink);
  border-bottom: var(--rule) solid var(--line);
}

/* A button carries its own pair and must not inherit the bar's link colour:
   `.hd a` is (0,1,1) and `.btn--book` is (0,1,0), so without the :not() the
   bar's ink repaints the Book control's label. */
.hd a:not(.btn) { color: var(--ink); }
.hd a:not(.btn):hover { color: var(--act); }

.hd__in {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: var(--head-h);
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Field one of the block: the wordmark, ruled off from what follows. */
.mark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  align-self: stretch;
  padding-right: var(--s3);
  border-right: var(--hair) solid var(--line);
  font-family: var(--font-h);
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 414px) { .mark { padding-right: var(--s5); } }

.mark__h {
  display: block;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (min-width: 414px) { .mark__h { font-size: 1.375rem; } }

.mark__s {
  display: none;
  font-size: .8125rem;
  line-height: 1.2;
  letter-spacing: .16em;
  color: var(--muted);
}

@media (min-width: 768px) { .mark__s { display: block; margin-top: 3px; } }

/* Field two: the legend index. Hidden below the breakpoint, where the
   drawer carries the same list. */
.nav { display: none; }

@media (min-width: 1024px) {
  .nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    padding-inline: var(--s5);
  }

  .nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s5);
    margin: 0;
  }

  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    font-family: var(--font-h);
    font-size: .9375rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
  }

  /* Signature effect, row 6: the leader rule draws itself out. */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 8px;
    height: var(--hair);
    background: var(--acc);
    transition: right var(--t);
  }

  .nav__link:hover::after,
  .nav__link:focus-visible::after,
  .nav__link[aria-current="page"]::after { right: 0; }

  .nav__link[aria-current="page"] { color: var(--acc); }
}

.nav__no {
  color: var(--muted);
  letter-spacing: .12em;
}

/* Field three: the action. Ruled off on its own, the way a title block
   separates the approval cell. */
.hd .btn--book {
  align-self: center;
  flex: 0 0 auto;
  margin-left: auto;
  padding-inline: var(--s3);
  font-size: .875rem;
}

@media (min-width: 414px) {
  .hd .btn--book { padding-inline: var(--s5); font-size: 1rem; }
}

@media (min-width: 1024px) {
  .hd .btn--book {
    margin-left: 0;
    padding-left: var(--s5);
  }
}

/* ---- the drawer ------------------------------------------------------- */

.drawer {
  align-self: center;
  margin-left: var(--s2);
  position: static;
}

@media (min-width: 414px) { .drawer { margin-left: var(--s3); } }

@media (min-width: 1024px) { .drawer { display: none; } }

.drawer__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding-inline: var(--s2);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-h);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 414px) {
  .drawer__toggle { padding-inline: var(--s3); font-size: .875rem; }
}

.drawer__bars {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.drawer__word { display: block; }

.drawer__panel {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 100%;
  z-index: 40;
  padding: var(--s4);
  background: var(--hi);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--plate-shadow);
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 44px;
  padding-inline: var(--s2);
  font-family: var(--font-h);
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: var(--hair) solid var(--line);
}

.drawer__link:last-child { border-bottom: 0; }
.drawer__link[aria-current="page"] { color: var(--acc); }

/* ---- controls --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);   /* section 4: 24px minimum horizontal */
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-h);
  font-size: 1rem;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--t), color var(--t),
              border-color var(--t);
}

.btn--primary, .btn--book, .btn--sub {
  background: var(--act);
  color: var(--on-act);
  border-color: var(--act);
}

.btn--primary:hover, .btn--book:hover, .btn--sub:hover {
  background: var(--act-h);
  border-color: var(--act-h);
  color: var(--on-act);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn--ghost:hover { border-color: var(--acc); color: var(--acc); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
}

.hero__second, .svcp__link, .svc__link, .galp__all, .stfp__all, .revp__all,
.faqp__all, .rev__svc {
  font-family: var(--font-h);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- forms ------------------------------------------------------------ */

.field > label {
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea {
  min-height: 44px;
  padding: var(--s3) var(--s4);
  background: var(--hi);
  color: var(--ink);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
}

.field input::placeholder, .field textarea::placeholder {
  color: var(--muted);
}

.field textarea { min-height: 9rem; }

.hint { display: block; margin-top: var(--s2); }

.err {
  display: block;
  margin-top: var(--s2);
  color: var(--acc);
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---- the subscribe band ----------------------------------------------- */

.sub-band {
  background: var(--hi);
  border-top: var(--rule) solid var(--line);
  border-bottom: var(--hair) solid var(--line);
  padding-block: var(--s8);
}

.sub-band__in { display: grid; gap: var(--s6); }

@media (min-width: 1024px) {
  .sub-band__in {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: var(--s7);
    align-items: end;
  }
}

.sub-band__h { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.sub-band__p { margin-top: var(--s3); color: var(--muted); }

.sub-form { display: grid; gap: var(--s4); }

@media (min-width: 560px) {
  .sub-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .sub-form__status { grid-column: 1 / -1; }
}

.sub-form__field { min-width: 0; }
.sub-form__field input { width: 100%; }

/* ---- the footer ------------------------------------------------------- */

.ft {
  background: var(--hi);
  border-top: var(--rule) solid var(--line);
  padding-block: var(--s8) var(--s7);
}

.ft__in {
  display: grid;
  gap: var(--s7);
  margin-top: var(--s8);
}

@media (min-width: 768px) {
  .ft__in {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s6);
  }
}

.ft__h {
  font-family: var(--font-h);
  font-size: .875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s4);
}

.ft__addr { color: var(--ink); }

.ft__hours { margin: 0; }

.ft__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s2);
  border-bottom: var(--hair) solid var(--line);
}

.ft__row:last-child { border-bottom: 0; }

.ft__list { display: grid; gap: var(--s2); }

.ft__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-h);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.ft__list a:hover { color: var(--acc); }

.ft__foot {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: var(--hair) solid var(--line);
  display: grid;
  gap: var(--s3);
}

/* ---- the drawing-revision block --------------------------------------- */
/*
 * Section 3's fourth row. A revision block is a ruled strip of named cells
 * across the head of the footer, with the approval cell at the end -- so the
 * cells sit in a grid that stays a strip at every width rather than
 * collapsing into a list, and the action is pushed to the far end from 768.
 */

.ft__tb { padding-bottom: var(--s5); }

.ft__tb-in {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: var(--rule) solid var(--line);
}

@media (min-width: 768px) {
  .ft__tb-in {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s6);
    align-items: end;
  }
}

.ft__tb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  margin: 0;
}

@media (min-width: 560px) {
  .ft__tb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .ft__tb-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ft__tb-cell {
  padding-left: var(--s3);
  border-left: var(--hair) solid var(--line);
}

.ft__tb-v {
  margin: var(--s1) 0 0;
  font-family: var(--font-h);
  font-size: 1.0625rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---- print ------------------------------------------------------------ */
/*
 * The blueprint grid is a screen surface, not a paper one: printed, it is a
 * cartridge tax and a grey page. The ground goes white, the ink goes black,
 * and the rules become something a printer will actually render.
 */

@media print {
  body { background-image: none; background-color: #FFFFFF; color: #101010; }
  .hd { position: static; background: none; border-bottom: 1px solid #000; }
  .ft { background: none; border-top: 2px solid #000; }
  .sec { padding-block: var(--s7); }
}


/* PREMIUM REALISM PASS — DS01-09
   One unmistakable signature per design; shared selectors only provide polish. */
footer, .ft { position: relative; overflow: hidden; isolation: isolate; }
footer::before, .ft::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle at 88% 12%, rgba(178,240,189,.14), transparent 38%), linear-gradient(110deg, transparent 0 58%, rgba(178,240,189,.14) 58% 59%, transparent 59%); }
footer a, .ft a { text-underline-offset: .28em; transition: color .2s ease, transform .2s ease; }
footer a:hover, footer a:focus-visible, .ft a:hover, .ft a:focus-visible { color: #CFF6D6; }
.stf, .stf__card, [class*="staff-card"] { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: translateY(-3px); border-color: #1D566D; box-shadow: 0 18px 48px rgba(29,86,109,.16); }
.field--intake { padding: 14px; border-inline-start: 3px solid #2E4B0C; background: rgba(178,240,189,.34); }
.field--intake label { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .stf, .stf__card, [class*="staff-card"] { transition: none; } .stf:hover, .stf__card:hover, [class*="staff-card"]:hover { transform: none; } }


/* ---- treatment 5: media, panels and the footer plane ------------------- */
/*
 * The stated media filter, applied to every photographic plate in the build
 * and to nothing else -- the SVG annotation overlay sits outside the filter
 * so the drawing ink is not desaturated with the photograph underneath it.
 */

.hero__frame img, .gal__frame img, .place__frame img, .sap__frame img,
.galp__fig img, .stf__fig img { filter: var(--media-filter); }

/*
 * The stated text-on-media overlay, on the one plate that carries text over
 * the photograph. ::before and not ::after is load-bearing: the scrim and the
 * annotation overlay are both positioned with z-index auto, so they paint in
 * DOM order, and ::after would put the scrim OVER the callouts it exists to
 * make legible.
 */
.hero__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--media-scrim);
}

.revp__item { background: var(--panel-rev); }
.stf__card  { background: var(--panel-stf); border-radius: var(--radius); }

/* The deep plane. Tokens are re-declared in the scope rather than rules being
   rewritten, so every control, rule and label inside the footer keeps the
   behaviour it has everywhere else on the site. */
.ft {
  --ink: #FFFFFF;
  --muted: #C7D6DC;
  --line: #6F8E9C;
  --hi: #2A4149;
  --acc: #B2F0BD;
  --act: #B2F0BD;
  --act-h: #CFF6D6;
  --on-act: #182225;
  background: var(--deep);
  color: #FFFFFF;
}