/* ---------------------------------------------------------------------------
 * DS-05 Black Label Luxury -- yacht and boat sales showroom treatment.
 *
 * The master build ran light-on-near-black. This one runs the other way: a
 * pale marine ground (#F1F1F8) with deep ink on it, and the only dark plane in
 * the build is the footer (#1F1E38). Everything structural is untouched --
 * every section is still a full-width plane separated from the next by a
 * single hairline, and there is no box-shadow anywhere that reads as depth.
 * The inset rings below draw a 1px frame, not a shadow.
 *
 * Measured against the page ground #F1F1F8 (relative luminance .883):
 *
 *   ink        #181825 on ground ........ 15.5:1   body copy, headings
 *   muted      #44445A on ground .........  8.4:1   secondary copy, labels
 *   action     #464B0C on ground .........  8.2:1   links, numerals, prices
 *   action-lit #595E0D on ground .........  7.2:1   link and button hover
 *   frame      #38376C on ground ......... 10.3:1   media frames, card rings
 *   white on action #464B0C ..............  9.2:1   the Book button label
 *   ink on highlight #BEF0B2 ............. 13.4:1   selected state in the rail
 *   error      #8C1D18 on ground .........  8.0:1   field and form errors
 *
 * And against the footer plane #1F1E38 (luminance .015):
 *
 *   footer ink   #FFFFFF ................. 16.6:1
 *   footer muted #C9C8DE ................. 10.0:1
 *   footer accent #BEF0B2 ................ 12.6:1   labels, seal, subscribe
 *   footer rule  #6E6C9A ..................  3.3:1   hairlines under labels
 *
 * The olive action colour is deliberately NOT carried into the footer: on
 * #1F1E38 it measures 1.76:1 and would fail every one of section 5's four
 * states. The footer takes the highlight green instead, which is the same
 * palette and clears 12:1, and the subscribe button flips to a dark label on
 * that green rather than white on olive.
 *
 * Frame treatment: 1px #38376C, a 2px radius (--radius, dropped from the
 * master build's 28px) and a 6px horizon line in the secondary accent
 * #1E1D6D along the base of every media frame. Section hairlines use a tint
 * of the frame colour rather than the frame colour itself -- at 1px across a
 * 1360px plane the full-strength navy reads as a printed stripe, and the
 * design fingerprint asks for a hairline.
 * ------------------------------------------------------------------------ */




:root {
  /* ground and ink */
  --bg: #F1F1F8;
  --plane: #FCFCFD;
  --ink: #181825;
  --muted: #44445A;

  /* action */
  --act: #464B0C;
  --gold-l: #595E0D;
  --act-a: #35380B;
  --on-act: #FFFFFF;

  /* accent, highlight and panels */
  --acc: #1E1D6D;
  --hi: #BEF0B2;
  --on-hi: #181825;
  --hi-soft: #E9E8F5;
  --rev-panel: #E3E3F2;
  --stf-panel: #DDDAEC;

  /* frames and hairlines: the frame colour itself, then two tints of it */
  --frame: #38376C;
  --rule: #C7C6DC;
  --ruleg: #B0AECA;
  --field: #FFFFFF;
  --bad: #8C1D18;

  /* the one dark plane */
  --ft-bg: #1F1E38;
  --ft-ink: #FFFFFF;
  --ft-muted: #C9C8DE;
  --ft-act: #BEF0B2;
  --ft-rule: #6E6C9A;

  /* spacing scale, measures and timings: unchanged from the master build */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --max: 1360px;
  --measure: 68ch;
  --measure-s: 52ch;
  --radius: 2px;

  --head-h:var(--catalog-font-heading);
  --band-pad: 72px;

  --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);

  --gutter: 16px;
}

@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; --head-h:var(--catalog-font-heading); }
}
@media (min-width: 1024px) {
  :root { --gutter: 48px; --band-pad: 144px; }
}

/* ---- the ground ------------------------------------------------------- */

body {
  background-color: var(--bg);
  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, .mark__h, .price__v, .rev__no, .gal__no,
.how__no, .proc__no, .ft__mono-h {
  font-family: var(--font-h);
  font-weight: 700;
}

h1 {
  font-size: clamp(2.25rem, 11vw, 3.75rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0;
}

@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; margin: 0; }
h3 { font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.15; margin: 0; }

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

a { color: var(--act); }
a:hover { color: var(--gold-l); }

/* Section 4, verbatim: 3px solid at 3px offset. The highlight token reaches
   4.46:1 against the ground, and a focus indicator is non-text, so 3:1 is
   the bar it has to clear. */
:focus-visible {
  outline: 3px solid var(--act);
  outline-offset: 3px;
}

/* ---- wide cinematic planes -------------------------------------------- */
/*
 * Every <section> is a full-width plane. Alternate planes are raised by five
 * and a half per cent of the ink, and every seam between two of them is a
 * one-pixel metallic rule. That pair -- a flat surface and a hairline -- is
 * the whole of the layout fingerprint, and it is why this build has no
 * free-floating cards and no shadows.
 */

.sec {
  position: relative;
  padding-block: var(--band-pad);
  border-top: 1px solid var(--ruleg);
}

/* The hero is the first plane on the page and sits directly under the
   header's own rule; a second hairline 1px below it would read as a
   mistake. */
.sec.hero { border-top: 0; }

.svcp, .prin, .how, .rev, .faqg, .proc, .stfp { background: var(--plane); }

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

/* ---- 88px minimal black header ---------------------------------------- */

.hd {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--ruleg);
}

.hd__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--head-h);
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mark {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
  text-decoration: none;
  color: var(--ink);
  padding-block: var(--s2);
}

.mark__h {
  font-size: 1.0625rem;
  letter-spacing: .02em;
}

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

.mark__sub {
  font-size: .6875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ---- sparse centered navigation --------------------------------------- */
/*
 * The wide navigation is a centred row of plain labels -- no boxes, no
 * separators, and the 01..09 index that the shared header emits is hidden
 * here, because a numbered list is the opposite of sparse. It stays visible
 * in the drawer, where it is the only thing giving the nine links an order.
 *
 * It begins at 1024 and not at 768. Nine labels centred between a wordmark
 * and a visible Book action need about 930px at this type size; in a 768px
 * bar they wrap into the wordmark, and a wrapped row cannot hold a 44px
 * target inside an 88px header.
 */

.nav { display: none; }

.nav__list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t);
}

.nav__link:hover { color: var(--ink); }

/* The active page is marked twice: the label goes to full ink, and a
   one-pixel metallic rule is drawn under it. Colour alone would be the only
   cue, and section 5 asks for a visual treatment as well as aria-current. */
.nav__link[aria-current="page"] {
  color: var(--ink);
  box-shadow: inset 0 -1px 0 var(--act);
}

.nav__link .nav__no { display: none; }

.drawer__link .nav__no {
  display: inline-block;
  min-width: 2.25em;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: .1em;
}

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

@media (min-width: 1280px) {
  .nav__list { gap: var(--s5); }
  .nav__link { font-size: .8125rem; }
}

/* ---- the disclosure that stands in for it below 1024 ------------------ */

.drawer { position: relative; }

.drawer__toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  min-width: 44px;
  padding: var(--s2) var(--s3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.drawer__toggle::-webkit-details-marker { display: none; }

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

/* Below 375px the wordmark, the Book action and the toggle do not fit a
   320px viewport at a 16px gutter, and flex will not shrink a control that
   has declared a 44px floor. The toggle drops its word and becomes a square.

   The word is CLIPPED, never display:none. Hidden that way the summary would
   be left with an aria-hidden icon and no accessible name, which is a worse
   failure than the one being fixed. */
@media (max-width: 374px) {
  .drawer__word {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

.drawer__panel {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--s2));
  z-index: 40;
  width: min(21rem, calc(100vw - (var(--gutter) * 2)));
  padding: var(--s3);
  background: var(--plane);
  border: 1px solid var(--ruleg);
  border-radius: var(--radius);
}

.drawer__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

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

.drawer__link[aria-current="page"] {
  color: var(--act);
  font-weight: 700;
}

/* ---- actions ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--s3) var(--s5);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 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);
}
a.btn.btn--primary, a.btn.btn--book, a.btn.btn--sub { color: var(--on-act); }

/* The Book label stays at full strength in all four states. The gold is
   LIGHTENED on hover rather than darkened: darkening it to mix(act, bg) drops
   the black label to 4.45:1 and forces the label colour to flip mid-gesture,
   which is the usual way section 5's "visible in rest, hover, focus and
   active" gets failed. Lightened, the label measures 9.53:1. */
.btn--primary:hover, .btn--book:hover, .btn--sub:hover,
.btn--primary:active, .btn--book:active, .btn--sub:active,
.btn--primary:focus-visible, .btn--book:focus-visible,
.btn--sub:focus-visible {
  background: var(--gold-l);
  border-color: var(--gold-l);
  color: var(--on-act);
}

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

.btn--ghost:hover, .btn--ghost:active {
  border-color: var(--act);
  color: var(--act);
}

/* At 1024 the header carries the wordmark, nine centred labels and this
   button inside 1024px. A slightly tighter button is what buys the nav its
   centred row; the label itself is untouched. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hd__in .btn--book { padding-inline: var(--s4); font-size: .8125rem; }
}

/* ---- thin-rule monogram footer ---------------------------------------- */

.ft {
  background: var(--bg);
  border-top: 1px solid var(--ruleg);
  color: var(--ink);
}

.ft a { color: var(--ink); }
.ft a:hover { color: var(--act); }

.ft__mono {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s7);
  border-bottom: 1px solid var(--ruleg);
  text-align: center;
}

.ft__mono-h {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .5em;
  /* letter-spacing adds a trailing space after the last letter, which throws
     a centred monogram off centre by half of it. Taking it back here is the
     whole reason this rule exists. */
  text-indent: .5em;
  color: var(--act);
}

.ft__mono-sub {
  font-size: .6875rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted);
}

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

.field label {
  display: block;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: var(--s2);
}

.field input, .field select, .field textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--s3);
  border: 1px solid var(--rule);
  border-radius: var(--s3);
  background: var(--field);
  color: var(--ink);
  font: inherit;
}

.field textarea { min-height: 168px; resize: vertical; }

.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--act); }

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



/* ---- footer: the four zones under the monogram ------------------------ */
/*
 * Section 17 asks for four zones and a restrained signature device carried
 * into the footer. The device here is the one the whole design runs on: a
 * 1px #38376C hairline and 8px-tracked metadata. Each zone opens with a
 * tracked gold label over a hairline, so the footer reads as four ruled
 * fields of a folio rather than four stacked lists.
 *
 * Everything below the monogram band had no rule at all before this pass -
 * the markup shipped .ft__in, .ft__block, .ft__h, .ft__addr, .ft__hours,
 * .ft__row, .ft__list, .ft__foot and .ft__legal and the stylesheet defined
 * none of them, so the closing scene of every page was default flow. The
 * dead-selector gate only looks CSS-to-HTML and never caught it.
 */

.ft__in {
  display: grid;
  gap: var(--s7);
  padding-block: var(--s8);
}

.ft__block { min-width: 0; }

.ft__h {
  font-family: var(--font-b);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--act);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
  border-bottom: 1px solid var(--ruleg);
}

/* The second label inside one zone sits closer: it is a subdivision of the
   field it is in, not a new field. */
.ft__h--2 { margin-top: var(--s6); }

.ft__seal {
  display: block;
  width: 56px;
  margin-bottom: var(--s5);
}

/* base.css resets every svg to max-width:100%, which collapses a fixed mark
   inside any container allowed to shrink. The seal opts out and takes its
   size from the track, not from the element. */
.ft__seal svg { display: block; width: 56px; height: 56px; max-width: none; flex: none; }
.sl__ring { fill: none; stroke: var(--frame); stroke-width: 1; }
.sl__ring--in { stroke: var(--rule); }
.sl__crown { fill: var(--act); }
.sl__base { fill: var(--frame); }

.ft__sum {
  max-width: var(--measure-s);
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.7;
}

.ft__list { display: grid; gap: var(--s1); }
.ft__list a { text-decoration: none; }
.ft__list a:hover, .ft__list a:focus-visible { text-decoration: underline; text-underline-offset: .28em; }

.ft__list a,
.ft__addr a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .9375rem;
}

.ft__act { margin-top: var(--s4); }

.ft__addr {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.8;
}

.ft__hours { font-size: .9375rem; }

.ft__row {
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}

.ft__row:last-child { border-bottom: 0; }
.ft__row dt {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s1);
}
.ft__row dd { color: var(--ink); font-variant-numeric: tabular-nums; }

.ft__subp {
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.7;
  margin-bottom: var(--s5);
}

.ft__note {
  margin-top: var(--s4);
  color: var(--muted);
  font-size: .8125rem;
  line-height: 1.7;
}

.ft__note a { color: var(--act); text-decoration: underline; text-underline-offset: .28em; }

.ft__foot {
  padding-block: var(--s5);
  border-top: 1px solid var(--ruleg);
}

.ft__legal {
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--muted);
}

.ft__legal a { color: var(--muted); text-decoration: underline; text-underline-offset: .28em; }
.ft__legal a:hover { color: var(--act); }

/* ---- the subscribe form, now inside the footer ------------------------ */

.sub-form { display: grid; gap: var(--s4); }
.sub-form__field { margin: 0; }
.sub-form .btn--sub { justify-self: start; }

.sub-form__status {
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
  min-height: 1.6em;
}

.sub-form__status[data-state="error"] { color: var(--bad); }
.sub-form__status[data-state="success"] { color: var(--act); }

.err {
  margin-top: var(--s2);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--bad);
  min-height: 1.6em;
}

/* 414px: the two short metadata zones pair off before the wide ones do. */
@media (min-width: 414px) {
  .ft__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--s6); }
  .ft__block--brand { grid-column: 1 / -1; }
}

/* 768px: the folio opens to its full four fields. The brand zone keeps the
   width its summary needs; the three metadata fields share the rest. */
@media (min-width: 768px) {
  .ft__in {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s7) var(--s7);
  }
  .ft__block--brand { grid-column: 1; grid-row: 1 / 3; }
  .ft__block--sub { grid-column: 2 / -1; }
}

@media (min-width: 1024px) {
  .ft__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.1fr); }
  .ft__block--brand { grid-column: 1; grid-row: 1; }
  .ft__block--sub { grid-column: 4; }
}


/* ---- Recommendation #3: the footer is the one dark plane --------------- */
/*
 * The footer model is unchanged -- monogram band, four ruled zones, legal
 * line. Only the colours move, and they have to: the olive action colour
 * measures 1.76:1 on #1F1E38. Everything that was gold on near-black becomes
 * the highlight green on the footer navy, which is the same palette read the
 * other way round.
 */

.ft { background: var(--ft-bg); color: var(--ft-ink); border-top: 1px solid var(--ft-bg); }
.ft a { color: var(--ft-ink); }
.ft a:hover { color: var(--ft-act); }
.ft__mono { border-bottom-color: var(--ft-rule); }
.ft__mono-h { color: var(--ft-act); }
.ft__mono-sub { color: var(--ft-muted); }
.ft__h { color: var(--ft-act); border-bottom-color: var(--ft-rule); }
.ft__sum, .ft__addr, .ft__subp, .ft__note, .ft__legal { color: var(--ft-muted); }
.ft__note a, .ft__legal a { color: var(--ft-act); }
.ft__legal a:hover { color: var(--ft-ink); }
.ft__row { border-bottom-color: var(--ft-rule); }
.ft__row dt { color: var(--ft-muted); }
.ft__row dd { color: var(--ft-ink); }
.ft__foot { border-top-color: var(--ft-rule); }
.ft .sl__ring { stroke: var(--ft-rule); }
.ft .sl__ring--in { stroke: var(--ft-rule); }
.ft .sl__crown { fill: var(--ft-act); }
.ft .sl__base { fill: var(--ft-act); }

/* the subscribe control: a dark label on the footer accent, never white on
   olive, which would be a 1.76:1 fill against the plane behind it */
.ft .btn--sub,
.ft .btn--book {
  background: var(--ft-act);
  border-color: var(--ft-act);
  color: var(--ink);
}
.ft a.btn--book { color: var(--ink); }
.ft .btn--sub:hover, .ft .btn--book:hover,
.ft .btn--sub:active, .ft .btn--book:active,
.ft .btn--sub:focus-visible, .ft .btn--book:focus-visible {
  background: #D6F6CD;
  border-color: #D6F6CD;
  color: var(--ink);
}
.ft .field input { background: #2A2951; border-color: var(--ft-rule); color: var(--ft-ink); }
.ft .field input::placeholder { color: #9C9AC0; }
.ft .field label { color: var(--ft-ink); }
.ft .err { color: #F3BDB6; }
.ft .sub-form__status { color: var(--ft-muted); }
.ft .sub-form__status[data-state="error"] { color: #F3BDB6; }
.ft .sub-form__status[data-state="success"] { color: var(--ft-act); }
.ft :focus-visible { outline-color: var(--ft-act); }