/* ==========================================================================
   Cumberland Cathodic Protection Limited
   components.css — header, navigation, hero, schematic, cards, register,
                    forms, footer.

   Every component reads its values from the tokens in style.css. No component
   here redeclares .section spacing; band rhythm belongs to style.css alone, so
   the two files cannot cancel each other out.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Staff bar — the thin utility strip above the masthead.
      Carries only the three external staff systems the live site links to.
   -------------------------------------------------------------------------- */
.staff-bar {
  background: var(--structure-deep);
  border-block-end: 1px solid rgb(255 255 255 / 0.07);
  block-size: var(--bar-h);
  display: flex; align-items: center;
}
.staff-bar__inner { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.staff-bar__label {
  margin-inline-end: auto;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--track-utility); text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
}
.staff-bar a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none;
  color: rgb(255 255 255 / 0.62);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.staff-bar a:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.staff-bar a::after {
  content: ""; inline-size: 8px; block-size: 8px; flex: none;
  background: currentColor; opacity: 0.66;
  -webkit-mask: var(--ext) no-repeat center / contain; mask: var(--ext) no-repeat center / contain;
  --ext: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.2 7.8 7.8 2.2M3.6 2.2h4.2v4.2' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Masthead
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 100;
  background: var(--structure);
  border-block-end: 1px solid rgb(255 255 255 / 0.09);
  transition: box-shadow var(--dur-hover) var(--ease),
              background var(--dur-hover) var(--ease);
}
/* Scrolled state: the masthead compacts and gains a shadow rather than
   changing colour, so the brand surface stays constant down the page. */
.site-header.is-scrolled { box-shadow: 0 6px 24px -10px rgb(8 27 46 / 0.6); }
.site-header.is-scrolled .masthead { block-size: 62px; }
.site-header.is-scrolled .masthead__logo img { block-size: 30px; }

.masthead {
  display: flex; align-items: center; gap: 28px;
  block-size: var(--header-h);
  transition: block-size var(--dur-hover) var(--ease);
}

.masthead__logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.masthead__logo img {
  block-size: 36px; inline-size: auto;
  transition: block-size var(--dur-hover) var(--ease);
}

/* --------------------------------------------------------------------------
   3. Primary navigation
   -------------------------------------------------------------------------- */
.nav { margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  font-size: var(--fs-nav); font-weight: 500;
  color: rgb(255 255 255 / 0.8); text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  font-family: inherit;
  transition: color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease);
}
.nav__link:hover { color: #fff; background: rgb(255 255 255 / 0.07); }

/* The active item is marked by a current rule under the label — the same
   hairline the eyebrow tick uses, in the same blue. */
.nav__link[aria-current="page"],
.nav__item.is-active > .nav__link { color: #fff; }
.nav__link[aria-current="page"]::before,
.nav__item.is-active > .nav__link::before {
  content: "";
  position: absolute; inset-block-end: -1px; inset-inline: 14px;
  block-size: 2px; background: var(--current-lift);
}

.nav__caret { inline-size: 9px; block-size: 9px; flex: none; opacity: 0.7;
  transition: transform var(--dur-hover) var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* Dropdown */
.nav__panel {
  position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0;
  min-inline-size: 268px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease),
              visibility var(--dur-hover);
}
.nav__item.is-open > .nav__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__panel--end { inset-inline-start: auto; inset-inline-end: 0; }

.nav__panel a {
  display: block; padding: 9px 12px;
  font-size: var(--fs-nav); color: var(--graphite); text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.nav__panel a:hover { background: var(--current-wash); color: var(--current-deep); }
.nav__panel a[aria-current="page"] {
  background: var(--current-wash); color: var(--current-deep); font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Mobile navigation
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  margin-inline-start: auto;
  inline-size: 44px; block-size: 44px;
  align-items: center; justify-content: center;
  background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-sm); color: #fff; cursor: pointer;
}
.nav-toggle__bars { display: block; inline-size: 18px; block-size: 12px; position: relative; }
.nav-toggle__bars::before, .nav-toggle__bars::after, .nav-toggle__bars span {
  content: ""; position: absolute; inset-inline: 0; block-size: 2px;
  background: currentColor; border-radius: 1px;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.nav-toggle__bars::before { inset-block-start: 0; }
.nav-toggle__bars span { inset-block-start: 5px; }
.nav-toggle__bars::after { inset-block-start: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 99;
  display: none;
  background: var(--structure);
  padding-block-start: calc(var(--header-h) + var(--bar-h));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__inner { padding-block: 24px 48px; }

.mobile-nav__list { list-style: none; }
.mobile-nav__list a, .mobile-nav__group-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  inline-size: 100%;
  padding: 15px 2px;
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -0.01em;
  color: rgb(255 255 255 / 0.86); text-decoration: none;
  background: none; border: 0; border-block-end: 1px solid rgb(255 255 255 / 0.1);
  text-align: start; cursor: pointer;
}
.mobile-nav__list a[aria-current="page"] { color: var(--current-lift); }
.mobile-nav__group-btn svg { inline-size: 11px; block-size: 11px; flex: none;
  transition: transform var(--dur-hover) var(--ease); }
.mobile-nav__group.is-open .mobile-nav__group-btn svg { transform: rotate(180deg); }

.mobile-nav__sub { list-style: none; display: none; padding-block: 6px; }
.mobile-nav__group.is-open .mobile-nav__sub { display: block; }
.mobile-nav__sub a {
  padding: 12px 2px 12px 20px;
  font-family: var(--font-body); font-size: var(--fs-nav); font-weight: 400;
  color: rgb(255 255 255 / 0.66);
  border-block-end-color: rgb(255 255 255 / 0.06);
  border-inline-start: 2px solid rgb(255 255 255 / 0.12);
}
.mobile-nav__sub a[aria-current="page"] { border-inline-start-color: var(--current-lift); }

.mobile-nav__staff { margin-block-start: 30px; }
.mobile-nav__staff .staff-bar__label { margin: 0 0 12px; display: block; }
.mobile-nav__staff a { font-family: var(--font-mono); font-size: var(--fs-fine); font-weight: 400; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-body); font-size: var(--fs-nav); font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease),
              color var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease),
              transform var(--dur-hover) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { inline-size: 15px; block-size: 15px; flex: none; }

.btn--primary { background: var(--current); color: #fff; }
.btn--primary:hover { background: var(--current-deep); color: #fff; }

.btn--ghost { background: transparent; color: var(--current); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--current); background: var(--current-wash); color: var(--current-deep); }

.ground .btn--ghost { color: #fff; border-color: rgb(255 255 255 / 0.28); }
.ground .btn--ghost:hover { background: rgb(255 255 255 / 0.1); border-color: rgb(255 255 255 / 0.5); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   6. Home hero
   -------------------------------------------------------------------------- */
.hero { position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px; align-items: center;
  padding-block: 92px 96px;
  min-block-size: min(72svh, 640px);
}

.hero__title {
  font-size: var(--fs-hero);
  letter-spacing: -0.032em;
  margin-block-end: 26px;
}
.hero__title em {
  display: block; font-style: normal;
  color: var(--current-lift);
}
.hero__copy { max-inline-size: 54ch; }
.hero .btn-row { margin-block-start: 34px; }

/* The photograph runs the full width of the page and the claim is set over
   it. The scrim below, not a plate, is what keeps every word legible.
   The doubled selector outranks `.ground > *`, which would otherwise lift
   both layers to z-index 1 and bury the copy. */
.hero.ground > .hero__figure {
  position: absolute; inset: 0;
  z-index: -2;
  margin: 0;
  overflow: hidden;
}
.hero__figure img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover; object-position: center;
}
.hero.ground > .hero__scrim {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right,
      rgb(4 14 24 / 0.93) 0%, rgb(4 14 24 / 0.84) 34%,
      rgb(4 14 24 / 0.46) 66%, rgb(4 14 24 / 0.22) 100%),
    linear-gradient(to bottom,
      rgb(4 14 24 / 0.46) 0%, rgb(4 14 24 / 0.06) 30%,
      rgb(4 14 24 / 0.06) 60%, rgb(4 14 24 / 0.58) 100%);
}
.hero__figure figcaption {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 30px clamp(18px, 5vw, 48px) 14px;
  text-align: end;
  background: linear-gradient(180deg, transparent, rgb(4 14 24 / 0.6));
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: rgb(255 255 255 / 0.7);
}

/* --------------------------------------------------------------------------
   7. Signature — the ICCP circuit schematic
      A cathodic protection system is invisible once installed: buried anodes,
      a rectifier in a cabinet, and a structure that simply does not corrode.
      The schematic is the one place the site shows the mechanism it sells, so
      it is drawn honestly — transformer-rectifier, anode groundbed, the
      electrolyte, the protected structure, and the return to the rectifier.
   -------------------------------------------------------------------------- */
.schematic { inline-size: 100%; block-size: auto; overflow: visible; }
.schematic text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  fill: rgb(255 255 255 / 0.5);
}
.schematic .sc-key { fill: rgb(255 255 255 / 0.82); }
.schematic .sc-rule { stroke: rgb(255 255 255 / 0.22); stroke-width: 1; fill: none; }
.schematic .sc-soil { stroke: rgb(255 255 255 / 0.13); stroke-width: 1; }
.schematic .sc-struct { stroke: var(--current-lift); stroke-width: 2.5; fill: none; }
.schematic .sc-anode { fill: var(--anode-lift); }
.schematic .sc-anode-stroke { stroke: var(--anode-lift); stroke-width: 1.6; fill: none; }
.schematic .sc-box { stroke: rgb(255 255 255 / 0.42); stroke-width: 1.2; fill: rgb(255 255 255 / 0.04); }
.schematic .sc-lead { stroke: rgb(255 255 255 / 0.34); stroke-width: 1.2; fill: none; }

/* One dot travels anode -> electrolyte -> structure -> rectifier, once, on
   load. It is the only continuous motion on the site and it stops when it
   arrives. Under reduced motion it never runs and the dot rests at the anode. */
.schematic .sc-charge { fill: var(--anode-lift); }
.schematic.is-live .sc-charge {
  offset-path: path("M 250 176 L 250 214 L 96 214 L 96 118");
  offset-distance: 0%;
  animation: charge-travel 3.4s var(--ease) 0.5s 2 both;
}
@keyframes charge-travel {
  from { offset-distance: 0%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .schematic.is-live .sc-charge { animation: none; offset-path: none; }
}

.schematic-key {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-block-start: 18px;
  list-style: none;
}
.schematic-key li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.56);
}
.schematic-key i { inline-size: 14px; block-size: 3px; flex: none; border-radius: 2px; }
.schematic-key .k-struct { background: var(--current-lift); }
.schematic-key .k-anode  { background: var(--anode-lift); }

/* --------------------------------------------------------------------------
   8. Inner page head
      One third the height of the home hero, same ground, so every inner page
      arrives the same way.
   -------------------------------------------------------------------------- */
.page-head { padding-block: 52px 56px; }
.page-head__title { font-size: var(--fs-page); margin-block-start: 14px; }
.page-head__lead { margin-block-start: 18px; max-inline-size: 62ch; }

.breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.11em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.46);
}
.breadcrumb a { color: rgb(255 255 255 / 0.66); text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb li + li::before { content: "/"; margin-inline-end: 8px; color: rgb(255 255 255 / 0.3); }
.breadcrumb [aria-current="page"] { color: var(--current-lift); }

/* --------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-hover) var(--ease),
              box-shadow var(--dur-hover) var(--ease),
              border-color var(--dur-hover) var(--ease);
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }

.card__title {
  font-size: var(--fs-title);
  margin-block-end: 10px;
  transition: color var(--dur-hover) var(--ease);
}
a.card:hover .card__title { color: var(--current); }
.card__text { font-size: var(--fs-fine); line-height: 1.66; color: var(--slate); flex: 1; }

/* The card's own directional rule: it grows toward the reader on hover, in
   the same blue and the same direction as everything else on the site. */
.card__rule {
  display: block; inline-size: 30px; block-size: 2px;
  margin-block-end: 20px;
  background: var(--current);
  transition: inline-size var(--dur-hover) var(--ease);
}
a.card:hover .card__rule { inline-size: 54px; }

.card__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-block-start: 20px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--current);
}
.card__more svg { inline-size: 14px; block-size: 8px; transition: transform var(--dur-hover) var(--ease); }
a.card:hover .card__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   10. Editorial subsections — used on service pages whose source content is a
       run of sub-headed paragraphs (Design Activities, Field Services,
       Manufacturing, Survey Activities).
   -------------------------------------------------------------------------- */
.topics { display: grid; gap: 0; }
.topic {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 40px;
  padding-block: 34px;
  border-block-start: 1px solid var(--line);
}
.topic:last-child { border-block-end: 1px solid var(--line); }
.topic__title { font-size: var(--fs-title); position: sticky; inset-block-start: calc(var(--header-h) + 24px); align-self: start; }
.topic__body { font-size: var(--fs-body); max-inline-size: var(--measure); }
.topic__body p + p { margin-block-start: 1.1em; }

/* A group heading inside Survey Activities: the source groups its topics under
   three survey types, and that grouping is information, so it is kept. */
.topic-group { margin-block-start: 56px; }
.topic-group:first-of-type { margin-block-start: 0; }
.topic-group__head { margin-block-end: 4px; }
.topic-group__head h2 { font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   11. Statement — a single sentence given a whole band.
       Used once, for the line that is the company's actual thesis.
   -------------------------------------------------------------------------- */
.statement { padding-block: 84px; }
.statement__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.1vw, 2.375rem);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.022em;
  color: #fff;
  max-inline-size: 22ch;
  text-wrap: balance;
}
.statement__quote b { font-weight: 600; color: var(--anode-lift); }
.statement__attrib { margin-block-start: 26px; }

/* --------------------------------------------------------------------------
   12. Record band — figures derived from the site's own content.
   -------------------------------------------------------------------------- */
.record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.record__cell { background: var(--paper); padding: 30px 24px; }
.section--mist .record { background: var(--mist-deep); }
.section--mist .record__cell { background: var(--mist); }
.record__figure {
  font-family: var(--font-display); font-size: var(--fs-figure); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1; color: var(--current);
  font-variant-numeric: tabular-nums;
}
.record__label {
  display: block; margin-block-start: 12px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--graphite);
}

/* An editorial two-column section head: the heading holds the left column and
   the running copy sits beside it, so a text-only band does not leave half the
   shell empty. */
.editorial { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: 56px; align-items: start; }
.editorial .section-head { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   13. Split — image or plate beside copy.
   -------------------------------------------------------------------------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.split--wide-start { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.plate {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 30px 28px; box-shadow: var(--shadow-card);
}
.plate__title { font-size: var(--fs-title); margin-block-end: 14px; }

/* --------------------------------------------------------------------------
   14. The projects register
       48 rows transcribed from the five scanned tables the live site publishes
       as images. The serial numbers are the source's own, so tabular mono
       numerals are honest here where numbered decoration elsewhere would not
       be.
   -------------------------------------------------------------------------- */
.register-tools {
  display: flex; flex-wrap: wrap; align-items: end; gap: 16px;
  margin-block-end: 24px;
  padding-block-end: 22px;
  border-block-end: 1px solid var(--line);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--graphite);
}
.field select, .field input {
  padding: 10px 13px; min-inline-size: 170px;
  max-inline-size: 100%;
  background: var(--paper); color: var(--graphite);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: var(--fs-fine);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.field select:focus, .field input:focus {
  border-color: var(--current); box-shadow: 0 0 0 3px var(--current-wash);
}
.field--wide { flex: 1 1 260px; }
.field--wide input { min-inline-size: 260px; inline-size: 100%; }

.register-count {
  margin-inline-start: auto;
  font-family: var(--font-mono); font-size: var(--fs-utility);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite);
}

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }

.register { inline-size: 100%; min-inline-size: 720px; border-collapse: collapse; text-align: start; }
.register caption { text-align: start; padding: 0 0 14px; font-size: var(--fs-fine); color: var(--slate); }
.register th, .register td { padding: 14px 18px; vertical-align: top; text-align: start; }
.register thead th {
  /* Sticks below the compacted masthead, not underneath it. */
  position: sticky; inset-block-start: 62px; z-index: 2;
  background: var(--structure); color: rgb(255 255 255 / 0.86);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: 0.13em; text-transform: uppercase;
  white-space: nowrap;
}
.register tbody tr { border-block-start: 1px solid var(--line); }
.register tbody tr:hover { background: var(--current-wash); }
.register tbody tr.is-hidden { display: none; }
.register .col-sr { inline-size: 60px; font-family: var(--font-mono); font-size: var(--fs-fine);
  color: var(--graphite); font-variant-numeric: tabular-nums; }
.register .col-client { inline-size: 27%; font-weight: 600; color: var(--structure); font-size: var(--fs-fine); }
.register .col-detail { font-size: var(--fs-fine); line-height: 1.62; }
.register .col-date { inline-size: 96px; font-family: var(--font-mono); font-size: var(--fs-fine);
  color: var(--graphite); white-space: nowrap; font-variant-numeric: tabular-nums; }
.register__empty td { padding: 40px 18px; text-align: center; color: var(--slate); }

.scan-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.scan { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.scan img { inline-size: 100%; }
.scan figcaption {
  padding: 11px 14px; border-block-start: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite);
}

/* --------------------------------------------------------------------------
   15. Contact
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 48px; align-items: start; }

.detail-list { list-style: none; }
.detail-list li { padding-block: 16px; border-block-start: 1px solid var(--line); }
.detail-list li:first-child { border-block-start: 0; padding-block-start: 0; }
.detail-list dt, .detail-list__label {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--graphite);
  margin-block-end: 6px;
}
.detail-list__value { font-size: var(--fs-body); color: var(--structure); font-weight: 500; }
.detail-list__value a { font-weight: 500; }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form label {
  display: block; margin-block-end: 7px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--graphite);
}
.form input, .form textarea {
  inline-size: 100%;
  padding: 13px 15px;
  background: var(--paper); color: var(--structure);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: var(--fs-fine);
  transition: border-color var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease);
}
.form textarea { min-block-size: 150px; resize: vertical; }
.form input:focus, .form textarea:focus {
  border-color: var(--current); box-shadow: 0 0 0 3px var(--current-wash);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: #B3261E; }
.form__error {
  display: none; margin-block-start: 6px;
  font-size: var(--fs-fine); color: #B3261E;
}
.form__error.is-shown { display: block; }
.form__note {
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--anode-wash); border: 1px solid rgb(179 101 31 / 0.24);
  font-size: var(--fs-fine); color: #7A4514;
}
.form__status { display: none; }
.form__status.is-shown {
  display: block; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--current-wash); border: 1px solid rgb(0 96 175 / 0.24);
  font-size: var(--fs-fine); color: var(--current-deep);
}

/* --------------------------------------------------------------------------
   16. Closing call to action
   -------------------------------------------------------------------------- */
.cta { padding-block: 76px; }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; }
.cta__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); max-inline-size: 20ch; }
.cta__text { margin-block-start: 14px; max-inline-size: 46ch; }

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--structure-deep); color: rgb(255 255 255 / 0.62); }
.site-footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-block: 60px 48px;
}
.site-footer__logo { block-size: 34px; inline-size: auto; margin-block-end: 22px; }
.site-footer p { font-size: var(--fs-fine); line-height: 1.66; max-inline-size: 40ch; }

.footer-head {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.42);
  margin-block-end: 16px;
}
.footer-list { list-style: none; display: grid; gap: 9px; font-size: var(--fs-fine); line-height: 1.55; }
.footer-list a { font-size: var(--fs-fine); color: rgb(255 255 255 / 0.68); text-decoration: none; }
.footer-list a:hover { color: #fff; text-decoration: underline; }

.site-footer__base {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center;
  padding-block: 22px;
  border-block-start: 1px solid rgb(255 255 255 / 0.09);
  font-size: var(--fs-fine);
}
.site-footer__base p { max-inline-size: none; }
.site-footer__parent { font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: 0.11em; text-transform: uppercase; color: rgb(255 255 255 / 0.46); }

/* --------------------------------------------------------------------------
   18. Scroll reveal
   -------------------------------------------------------------------------- */
/* Reveal is opt-in on JavaScript. Without it every section is simply visible,
   so the page is complete for crawlers, for reader modes and if a script fails
   to load. The .js class is set by a two-line inline script in <head>. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* Page-load stagger on the hero. */
.js .hero__copy > * { animation: rise-in 620ms var(--ease) both; }
.js .hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.js .hero__copy > *:nth-child(2) { animation-delay: 140ms; }
.js .hero__copy > *:nth-child(3) { animation-delay: 220ms; }
.js .hero__copy > *:nth-child(4) { animation-delay: 300ms; }
.js .hero__figure { animation: rise-in 720ms var(--ease) 260ms both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero__copy > *, .js .hero__figure { animation: none; }
}