@charset "UTF-8";
/* WPK Notary — บริการของเรา, v3. Loaded after assets/css/v2/styles.css and
   assets/css/v3/app.css. See pages/v3-services.php for the direction's argument.

   The rail, the chain track, the station plates, the schedule rows, the density roles
   and the text link all come from app.css. This file holds only what is particular to
   this page: the hero split, the sticky section bar, the document tabs, the chain's
   DETAIL rows, the legal blocks and the confidentiality plate.

   No colour, no radius, no shadow and no type size of its own. Two thresholds. */

/* ------------------------------------------------------------------- hero */

.v3-svchero {
  background-image: url("../../v2/photos/bg-cta.jpg");
  background-position: left center;
  padding: clamp(40px, 5.5vw, 68px) clamp(18px, 4vw, 48px) clamp(44px, 5.5vw, 72px);
}

/* Unequal on purpose. The title column leads and the index is the subordinate column
   it points into; two equal halves would make them read as alternatives. */
.v3-svchero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

/* --type-display-page, the declared role for a short one-line page title. This used to
   note that the page does NOT take --v3-type-hero, the home page's 84px clamp - that
   token was retired on 2 September 2026 and the home page now takes this same role, so
   all six v3 pages share one H1 size. */
.v3-svchero__title {
  margin: 0;
  font-size: var(--type-display-page);
  line-height: var(--lh-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
}

.v3-svchero__lead {
  margin: 16px 0 0;
  max-width: var(--measure-lead);
  color: var(--text-on-dark-soft);
}

.v3-svchero__cta {
  margin-top: clamp(24px, 3vw, 32px);
}

/* The schedule sits on the photograph here rather than on a flat band, so its rows
   take the on-dark hairline and the first one closes the top of the list. */
.v3-svcindex {
  margin: 0;
}

/* ------------------------------------------------------- sticky section bar */

/* Sticky UNDER the 64px site header, not instead of it. --nav-height is the token that
   header is built from, so the two cannot drift apart. */
.v3-svctabs {
  position: sticky;
  top: var(--nav-height);
  z-index: 40;
  background: var(--surface-dark-elevated);
  border-bottom: var(--border-on-dark);
}

.v3-svctabs__inner {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.5vw, 18px);
  min-height: var(--control-height);
  padding: 8px clamp(18px, 4vw, 48px);
}

.v3-svctab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-height);
  padding: 0 4px;
  font-size: var(--type-base);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark-soft);
  text-decoration: none;
  /* Transparent until active, so the row does not reflow when the mark appears. */
  border-bottom: 2px solid transparent;
  transition: color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}

.v3-svctab:hover {
  color: var(--text-on-dark);
  text-decoration: none;
}

.v3-svctab--on {
  color: var(--text-on-dark);
  border-bottom-color: var(--accent-gold-on-dark);
}

.v3-svctab__num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent-gold-on-dark);
}

.v3-svctabs__cta {
  margin-left: auto;
}

/* -------------------------------------------------------------- section heads */

.v3-svchead__title {
  margin: 0;
}

.v3-svchead__lead {
  margin: 18px 0 0;
  max-width: var(--measure-read);
}

/* The section number in the rail, and the page's spine: 01 / 02 / 03 running down the
   left margin, the same mono-as-record device the home page uses for the registration
   number and the schedule indices.

   At --type-meta it was a 15px afterthought in a 152px column. --type-subhead gives it
   the presence the column was reserved for. Latin digits, so mono is legal and correct
   here - the Mono-Is-Digits rule bans THAI in this face, not numerals. */
.v3-svcsection .v3-rail__mark .v2-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-subhead);
  line-height: var(--lh-subhead);
  font-variant-numeric: tabular-nums;
  margin-top: 10px;
}

.v3-svclabel {
  margin: clamp(32px, 4vw, 44px) 0 14px;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

/* ------------------------------------------------------------ document tabs */

.v3-tabrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.v3-tab {
  min-height: var(--control-height);
  padding: 0 18px;
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: var(--type-base);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-body);
  cursor: pointer;
  transition: background var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}

.v3-tab:hover {
  background: var(--surface-soft);
}

.v3-tab--on {
  background: var(--color-primary);
  border-color: transparent;
  color: var(--text-on-primary);
  font-weight: var(--weight-semibold);
}

.v3-docpanel__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v3-docpanel__title {
  font-size: var(--type-subtitle);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
}

.v3-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* --radius-tag is the declared 4px corner for exactly this. */
.v3-tag {
  padding: 7px 12px;
  border: var(--border-hairline);
  border-radius: var(--radius-tag);
  background: var(--surface-soft);
  font-size: var(--type-base);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--text-body);
}

.v3-svcnotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 44px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: var(--border-hairline);
}

.v3-svcnote {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.v3-svcnote__title {
  font-size: var(--type-subtitle);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  margin-bottom: 2px;
}

/* ------------------------------------------------- the chain, in detail

   Same track as the home page, from app.css. The only difference is that each station
   carries its rows, so the track is vertical at every width rather than turning
   vertical at 768px: three stages with two or three detail rows each cannot sit in one
   horizontal row without becoming three narrow columns of running text. */

.v3-chaintrack--detail {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-left: 0;
  margin-top: clamp(36px, 4.5vw, 52px);
}

.v3-chaintrack--detail::before {
  top: calc(var(--v3-plate) / 2);
  bottom: calc(var(--v3-plate) / 2);
  left: calc(var(--v3-plate) / 2 - 1px);
  width: 0;
  height: auto;
  border-top: 0;
  border-left: var(--rule-gold-on-dark);
}

.v3-chaintrack--detail .v3-station {
  display: grid;
  grid-template-columns: var(--v3-plate) minmax(0, 1fr);
  column-gap: clamp(16px, 2vw, 24px);
  align-items: start;
  padding-bottom: clamp(32px, 4.5vw, 48px);
}

.v3-chaintrack--detail .v3-station:last-child {
  padding-bottom: 0;
}

.v3-chaintrack--detail .v3-station__plate {
  grid-row: 1 / span 5;
}

.v3-chaintrack--detail .v3-station__step {
  margin-top: 0;
  font-size: var(--type-meta);
  line-height: var(--lh-label);
  letter-spacing: var(--thai-tracking);
  color: var(--accent-gold-on-dark);
}

.v3-chaintrack--detail .v3-station__name {
  margin-top: 2px;
  align-self: start;
}

/* The stage's formal title, under its short name. The short name is what the home
   page's track shows; this is the full wording the certificate uses. */
.v3-station__full {
  display: block;
  margin-top: 6px;
  font-size: var(--type-base);
  line-height: var(--lh-read);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark-soft);
  max-width: var(--measure-read);
}

.v3-chainrows {
  display: block;
  margin-top: clamp(18px, 2.2vw, 24px);
  border-top: var(--border-on-dark);
  max-width: var(--measure-read);
}

.v3-chainrow {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(12px, 1.6vw, 16px) 0;
  border-bottom: var(--border-on-dark);
}

.v3-chainrow__name {
  font-size: var(--type-base);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark);
}

.v3-chainrow__desc {
  font-size: var(--type-base);
  line-height: var(--lh-read);
  letter-spacing: var(--thai-tracking);
  color: var(--text-on-dark-soft);
}

.v3-chaintrack--detail .v3-station__note {
  margin-top: 12px;
}

/* -------------------------------------------------------------- legal blocks */

.v3-legalgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(24px, 3.5vw, 48px);
  margin-top: clamp(36px, 4.5vw, 52px);
}

/* A block, not a card: hairline above, no border box, no radius. These five are facets
   of one service. The gold card border is reserved for things that really are separate
   objects, which on this site means articles. */
.v3-legalblock {
  padding-top: clamp(18px, 2.2vw, 24px);
  border-top: var(--border-hairline);
}

.v3-legalblock__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v3-legalblock__title {
  margin: 0;
  font-size: var(--type-title);
  line-height: var(--lh-title);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--thai-tracking);
  color: var(--text-ink);
  text-wrap: balance;
}

.v3-legalblock__list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--type-base);
  line-height: var(--lh-read);
  letter-spacing: var(--thai-tracking);
  color: var(--text-muted);
}

/* The ask block is the one thing in this grid that IS a separate object - it is an
   action, not a description - so it takes the gold card treatment the others refuse. */
.v3-legalblock--ask {
  padding: clamp(20px, 3vw, 28px);
  border: var(--border-gold);
  border-radius: var(--radius-card);
  background: var(--surface-gold-wash);
}

.v3-legalblock__body {
  margin: 10px 0 18px;
  max-width: var(--measure-copy);
}

/* ------------------------------------------------ confidentiality — the plate

   This page's evidence band, treated exactly as the home page's registration number
   is: the system's third ground, framed by gold rules, navy ink. Gold carries navy or
   nothing, so the Gold-Never-Fills rule holds. */

.v3-nda {
  padding: var(--v3-pad-tight) clamp(18px, 4vw, 48px);
  background: var(--surface-gold-wash);
  border-top: var(--rule-gold);
  border-bottom: var(--rule-gold);
}

.v3-nda__inner {
  max-width: var(--container-narrow);
}

.v3-nda__title {
  margin: 12px 0 0;
}

.v3-nda__body {
  margin: 12px 0 0;
  max-width: var(--measure-read);
}

/* ---------------------------------------------------------------- closing CTA */

.v3-svccta {
  background-image: url("../../v2/photos/bg-hero.jpg");
  padding: clamp(48px, 7vw, 88px) clamp(18px, 4vw, 48px);
}

.v3-svccta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.v3-svccta__title {
  margin: 12px 0 0;
  color: var(--text-on-dark);
  max-width: var(--measure-read);
}

.v3-svccta__body {
  margin: 14px 0 0;
  max-width: var(--measure-lead);
  color: var(--text-on-dark-soft);
}

.v3-svccta__actions {
  margin-top: clamp(24px, 3vw, 32px);
}

/* ================================================================ 1024px */

@media (max-width: 1023px) {
  .v3-svchero__grid,
  .v3-svccta__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .v3-legalgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The bar scrolls sideways rather than wrapping to a second row, which would double
     the height of something that is stuck to the top of the viewport. */
  .v3-svctabs__inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }

  .v3-svctab,
  .v3-svctabs__cta {
    flex: none;
  }
}

/* ================================================================= 768px */

@media (max-width: 767px) {
  .v3-legalgrid,
  .v3-svcnotes {
    grid-template-columns: minmax(0, 1fr);
  }

  .v3-chainrow {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  /* The CTA is the one place the bar can afford to lose: the band it points at carries
     the same button, and at this width the three section links matter more. */
  .v3-svctabs__cta {
    display: none;
  }
}