/* static/css/service_detail.css
   Service pages: the /services index and the four pillar pages.

   Loaded after services.css, which supplies .svc-section and .container.
   Prefixes: sd- (pillar page furniture), dir- (index), ep- (how we work).

   Motion: entrance animations come from the .reveal/.visible classes added
   in service_detail.js and services.js, with per-item stagger from a --i
   custom property set in the markup. All of it is disabled under
   prefers-reduced-motion in the last block of this file.

   Ordering matters here: every base rule comes before the responsive block,
   because media queries add no specificity and a later base rule would
   otherwise beat them. */


/* ==================================================================== */
/* HERO                                                                 */
/* ==================================================================== */

.sd-hero {
  position: relative;
  padding: 10rem 0 5.5rem;
  overflow: hidden;
  isolation: isolate;
}

.sd-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* A single slow accent bloom. The only motion in the hero. */
.sd-hero-glow {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60%;
  height: 128%;
  background: radial-gradient(
    ellipse at center,
    rgba(220, 38, 38, 0.15) 0%,
    rgba(220, 38, 38, 0.05) 40%,
    transparent 70%
  );
  filter: blur(16px);
  animation: sd-glow 14s ease-in-out infinite alternate;
}

@keyframes sd-glow {
  from { opacity: 0.6; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1.05); }
}

.sd-hero .container { position: relative; z-index: 1; }

.sd-crumbs { margin-bottom: 2.1rem; }

.sd-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sd-crumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: var(--border-light);
}

.sd-crumbs a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.sd-crumbs a:hover { color: var(--accent-ink); }
.sd-crumbs [aria-current="page"] { color: var(--text); }

.sd-hero-content { max-width: 810px; }
.sd-hero-content .page-hero-kicker { margin: 0 0 1.1rem; }
.sd-hero-content .section-label { margin-bottom: 0; }
.sd-hero-content .section-label i { font-size: 0.82rem; }

.sd-hero-content h1 {
  margin: 0 0 1.3rem;
  font-size: clamp(2.15rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.032em;
  color: var(--text-strong);
  text-wrap: balance;
}

.sd-lede {
  margin: 0;
  max-width: 60ch;
  font-size: 1.12rem;
  line-height: 1.72;
  color: var(--text-secondary);
}

.sd-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.4rem;
}

/* Hero entrance, sequenced top to bottom. */
.sd-crumbs,
.sd-hero-content .page-hero-kicker,
.sd-lede,
.sd-hero-actions {
  animation: sd-rise 0.8s var(--ease-out) both;
}

/* The heading wipes up out of a mask rather than sliding, which reads as
   more deliberate on a page whose first job is to name the service. */
.sd-hero-content h1 {
  animation: sd-wipe 1s var(--ease-out) 0.12s both;
}

@keyframes sd-wipe {
  from {
    opacity: 0;
    clip-path: inset(0 0 105% 0);
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 -20% 0);
    transform: none;
  }
}

.sd-hero-content .page-hero-kicker { animation-delay: 0.06s; }
.sd-lede                           { animation-delay: 0.24s; }
.sd-hero-actions                   { animation-delay: 0.32s; }

@keyframes sd-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: none; }
}


/* ==================================================================== */
/* DIRECTORY CARDS  (/services)                                         */
/* ==================================================================== */

.dir-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.dir-card {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2.25rem 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--card-shadow);
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out),
              background 0.35s ease;
}

.dir-card:hover {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--bg-elevated);
  transform: translateY(-4px);
}

.dir-card:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.dir-card-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.4rem;
  border-radius: var(--radius);
  background: var(--accent-muted);
  color: var(--accent);
  font-size: 1.15rem;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease;
}

.dir-card:hover .dir-card-icon {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 10px 26px -12px rgba(220, 38, 38, 0.55);
}

.dir-card-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.55rem;
}

.dir-card h2 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.022em;
  color: var(--text-strong);
  transition: color var(--transition);
}

.dir-card:hover h2 { color: var(--accent-ink); }

.dir-card > p {
  flex: 1 1 auto;
  margin: 0 0 1.75rem;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--text-secondary);
}

.dir-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.dir-card-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.dir-card-go {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  color: var(--accent-ink);
  font-size: 0.72rem;
  transition: background 0.32s ease, border-color 0.32s ease,
              color 0.32s ease, transform 0.32s var(--ease-out);
}

.dir-card:hover .dir-card-go {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: translateX(4px);
}


/* ==================================================================== */
/* HOW WE WORK  (on the index)                                          */
/* ==================================================================== */

.ep-section { padding: clamp(4.5rem, 8vw, 7rem) 0; }

.ep-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ep-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.ep-step-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
  padding-top: 0.22rem;
}

.ep-step-body h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-strong);
}

.ep-step-body p {
  margin: 0;
  max-width: 40ch;
  font-size: 0.88rem;
  line-height: 1.68;
  color: var(--text-secondary);
}


/* ==================================================================== */
/* SECTION HEADER + SERVICE LIST                                        */
/* ==================================================================== */

/* Heading block left, action pinned to the right edge of the container,
   both sitting on the same baseline. The label spans the full width above
   them so its rule runs the whole way across. */
.sd-sechead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.4rem 2.5rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.sd-sechead .section-label {
  grid-column: 1 / -1;
  margin: 0 0 1.5rem;
}

.sd-sechead-text { grid-column: 1; }

.sd-sechead-text h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  color: var(--text-strong);
  text-wrap: balance;
}

.sd-sechead-text > p {
  margin: 0;
  max-width: 46ch;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* The count is the one piece of hard information in the line, so it gets
   the accent and the weight; the rest stays quiet. */
.sd-sechead-count {
  color: var(--text-strong);
  font-weight: 600;
  white-space: nowrap;
}

.sd-sechead-count::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 0.15rem 0 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.18em;
}

.sd-sechead-cta {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  white-space: nowrap;
}

.sd-sechead-cta i { font-size: 0.72rem; transition: transform 0.25s var(--ease-out); }
.sd-sechead-cta:hover i { transform: translateX(5px); }

.sd-sechead-cta:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}


/* --- the list --------------------------------------------------------- */

.sd-eng-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.sd-eng-list li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
  padding: 1.75rem 0.5rem 1.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: padding-left 0.35s var(--ease-out), background 0.35s ease;
}

.sd-eng-list li:hover { background: var(--bg-card); padding-left: 0.9rem; }

/* accent tick that grows from the row's top-left on hover */
.sd-eng-list li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease-out);
}

.sd-eng-list li:hover::before { width: 46px; }

.sd-eng-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
  background: var(--accent-muted);
  color: var(--accent);
  font-size: 1.02rem;
  transition: transform 0.32s var(--ease-out), box-shadow 0.32s ease;
}

.sd-eng-list li:hover .sd-eng-icon {
  transform: scale(1.08);
  box-shadow: 0 8px 22px -10px rgba(220, 38, 38, 0.5);
}

.sd-eng-main h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.35;
  color: var(--text-strong);
  transition: color var(--transition);
}

.sd-eng-list li:hover .sd-eng-main h3 { color: var(--accent-ink); }

.sd-eng-main p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ==================================================================== */
/* STANDARDS CHIPS                                                      */
/* ==================================================================== */

.sd-standards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.sd-standards-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sd-standards ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-standards li {
  padding: 0.36rem 0.78rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, transform 0.25s var(--ease-out);
}

.sd-standards li:hover {
  color: var(--accent-ink);
  border-color: rgba(220, 38, 38, 0.45);
  background: var(--accent-muted);
  transform: translateY(-2px);
}

.visible .sd-standards li,
.sd-standards:not(.reveal) li {
  animation: sd-chip-in 0.5s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 0.15s);
}

@keyframes sd-chip-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}


/* ==================================================================== */
/* METHOD  (penetration testing only)                                   */
/* ==================================================================== */

/* A connected sequence rather than six loose blocks: a rule runs across
   each row with a node sitting on it. Column gap is zero so the rule joins
   between cells; spacing comes from padding inside each step. */
.sd-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}


.sd-phase {
  position: relative;
  padding: 2.1rem 2.75rem 0 0;
}

/* Grey rule underneath, accent drawn over it left to right as the step
   arrives, so the sequence visibly progresses as you scroll through it. */
.sd-phase::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--border);
  background-image: linear-gradient(90deg, var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.sd-phase.visible::before,
.sd-phase:not(.reveal)::before { background-size: 100% 100%; }

/* last step in a row: fade out rather than butting the edge */
.sd-phase:nth-child(3n)::before,
.sd-phase:last-child::before {
  mask-image: linear-gradient(90deg, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
}

/* the node. The ring of page colour makes the rule appear to pass behind. */
.sd-phase::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent-muted);
  transform: scale(0);
  transition: transform 0.45s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 0.15s);
}

.sd-phase.visible::after,
.sd-phase:not(.reveal)::after { transform: scale(1); }

.sd-phase-num {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

.sd-phase h3 {
  margin: 0 0 0.5rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.014em;
  color: var(--text-strong);
}

.sd-phase p {
  margin: 0;
  max-width: 38ch;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-secondary);
}


/* ==================================================================== */
/* TRIGGERS  ("what usually prompts a test")                            */
/* ==================================================================== */

/* Panels rather than bullets. Each one is a situation someone should be
   able to recognise as their own in a couple of seconds, so the statement
   carries the weight and everything else stays quiet: a ghosted numeral
   behind it, and an accent rail that fills as the panel arrives. */
.sd-triggers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-triggers li {
  position: relative;
  overflow: hidden;
  padding: 1.85rem 1.75rem 1.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.35s ease, background 0.35s ease,
              transform 0.35s var(--ease-out);
}

.sd-triggers li:hover {
  border-color: rgba(220, 38, 38, 0.32);
  background: var(--bg-elevated);
  transform: translateY(-3px);
}

/* the rail grows down the left edge as the panel reveals */
.sd-triggers li::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(220, 38, 38, 0.25));
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms + 0.12s);
}


.sd-triggers li.visible::before,
.sd-triggers li:not(.reveal)::before { transform: scaleY(1); }

/* ghosted numeral, sitting behind the statement */
.sd-trigger-num {
  position: absolute;
  top: -0.85rem;
  right: 0.6rem;
  font-size: 4.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--watermark);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: color 0.35s ease;
}

.sd-triggers li:hover .sd-trigger-num { color: rgba(220, 38, 38, 0.12); }

.sd-triggers li p {
  position: relative;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--text);
  text-wrap: pretty;
}


/* =================================================================== */
/* PILLAR SWITCHER                                                      */
/* ==================================================================== */

.sd-pillar-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sd-pillar-switch a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.2rem;
  align-items: center;
  padding: 1.2rem 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease,
              transform 0.3s var(--ease-out);
}

.sd-pillar-switch a:hover {
  border-color: rgba(220, 38, 38, 0.35);
  background: var(--bg-elevated);
  transform: translateY(-3px);
}

.sd-pillar-switch a:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
}

.sd-pillar-switch i {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-size: 1.05rem;
}

.sd-switch-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.35;
}

.sd-switch-count {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}


/* ==================================================================== */
/* SCROLL REVEALS                                                       */
/* ==================================================================== */

/* base.css supplies the mechanics: .reveal starts hidden and shifted,
   .reveal.visible resets it. The scripts add .reveal on load (so a JS
   failure leaves everything visible) and .visible on intersection.

   What varies per component is the direction of travel. Each block below
   overrides the transform for BOTH states, because base.css's
   `.reveal.visible { transform: none }` would otherwise beat a
   single-state override. --i is set in the markup and drives the stagger. */

.reveal { transition-delay: calc(var(--i, 0) * 55ms); }

/* Headings settle from a little further down and a little slower, so the
   eye lands on the heading before the content beneath it arrives. */
.section-header.reveal,
.sd-sechead.reveal { transform: translate3d(0, 30px, 0); transition-duration: 0.95s; }
.section-header.reveal.visible,
.sd-sechead.reveal.visible { transform: none; }

/* Directory cards lift into place. */
.dir-card.reveal { transform: translate3d(0, 34px, 0) scale(0.985); }
.dir-card.reveal.visible { transform: none; }

/* Process steps and service rows enter from the side, in reading order. */
.ep-step.reveal,
.sd-eng-list li.reveal { transform: translate3d(-22px, 14px, 0); }
.ep-step.reveal.visible,
.sd-eng-list li.reveal.visible { transform: none; }

/* Method steps rise; the node on the rule pops separately once one lands. */
.sd-phase.reveal { transform: translate3d(0, 26px, 0); }
.sd-phase.reveal.visible { transform: none; }

/* Trigger panels rise in a tight stagger; the rail inside each one fills a
   beat later, so the panel lands before the accent draws. */
.sd-triggers li.reveal {
  transform: translate3d(0, 26px, 0);
  transition-duration: 0.65s;
  transition-delay: calc(var(--i, 0) * 60ms);
}
.sd-triggers li.reveal.visible { transform: none; }

.sd-pillar-switch li.reveal { transform: translate3d(0, 24px, 0); }
.sd-pillar-switch li.reveal.visible { transform: none; }

/* The hero bloom drifts as the page scrolls. The translate lives on the
   wrapper so it cannot fight the scale animation on the glow itself. */
.sd-hero-bg { will-change: transform; }

.svc-section[id],
.sd-hero { scroll-margin-top: 8.5rem; }


/* ==================================================================== */
/* RESPONSIVE                                                           */
/* ==================================================================== */

@media (max-width: 1024px) {
  .sd-hero { padding: 8.5rem 0 4rem; }
  .sd-triggers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 0; }
  .sd-phase { padding-right: 2.25rem; }
  /* fade lands on the last item of a two-up row instead of a three-up one */
  .sd-phase:nth-child(3n)::before { mask-image: none; -webkit-mask-image: none; }
  .sd-phase:nth-child(2n)::before,
  .sd-phase:last-child::before {
    mask-image: linear-gradient(90deg, #000 55%, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent);
  }
  .ep-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-pillar-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sd-eng-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

@media (max-width: 768px) {
  /* Not enough width to sit the action beside the heading. */
  .sd-sechead { grid-template-columns: minmax(0, 1fr); gap: 1.6rem 0; }
  .sd-sechead-cta { grid-column: 1; grid-row: auto; justify-self: start; }
  .sd-sechead-text > p { max-width: none; }
}

@media (max-width: 860px) {
  .dir-grid { grid-template-columns: minmax(0, 1fr); }
  .sd-triggers { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .sd-hero { padding: 7.5rem 0 3.5rem; }
  .sd-hero-content h1 { font-size: 2.1rem; }
  .sd-lede { font-size: 1rem; }
  .sd-pillar-switch { grid-template-columns: minmax(0, 1fr); }
}

/* Single column: the method rule turns and runs down the left as a spine. */
@media (max-width: 640px) {
  .ep-steps { grid-template-columns: minmax(0, 1fr); gap: 1.9rem; }
  .dir-card { padding: 1.75rem 1.6rem 1.4rem; }

  .sd-phases { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sd-phase { padding: 0 0 2rem 1.9rem; }
  .sd-phase::before,
  .sd-phase:nth-child(3n)::before,
  .sd-phase:nth-child(2n)::before {
    top: 6px;
    bottom: 0;
    left: 4px;
    right: auto;
    width: 1px;
    height: auto;
    mask-image: none;
    -webkit-mask-image: none;
    background-size: 100% 0%;
  }
  /* the spine fills downward rather than across */
  .sd-phase.visible::before,
  .sd-phase:not(.reveal)::before { background-size: 100% 100%; }
  .sd-phase:last-child::before { display: none; }
  .sd-phase::after { top: 2px; }
  .sd-phase p { max-width: none; }
}

@media (max-width: 480px) {
  .sd-hero { padding: 7rem 0 3rem; }
  .sd-hero-content h1 { font-size: 1.8rem; }
  .sd-crumbs { margin-bottom: 1.5rem; }
  .sd-hero-actions { gap: 0.75rem; }
  .sd-hero-actions .btn { width: 100%; justify-content: center; }
}


/* ==================================================================== */
/* REDUCED MOTION                                                       */
/* ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sd-hero-glow { animation: none; }
  .sd-hero-bg,
  .sd-hero-content { transform: none !important; opacity: 1 !important; will-change: auto; }
  .sd-hero-content h1 { animation: none; clip-path: none; }

  /* Kill the travel. base.css already collapses the transition duration
     under this setting, so content simply appears in place. */
  .section-header.reveal,
  .sd-sechead.reveal,
  .dir-card.reveal,
  .ep-step.reveal,
  .sd-eng-list li.reveal,
  .sd-phase.reveal,
  .sd-triggers li.reveal,
  .sd-pillar-switch li.reveal { transform: none; }

  .sd-crumbs,
  .sd-hero-content .page-hero-kicker,
  .sd-hero-content h1,
  .sd-lede,
  .sd-hero-actions { animation: none; opacity: 1; transform: none; }

  .visible .sd-standards li,
  .sd-standards:not(.reveal) li { animation: none; opacity: 1; transform: none; }

  .reveal { transition-delay: 0s; }
  .sd-triggers li::before { transition: none; transform: scaleY(1); }
  .sd-phase::before { transition: none; background-size: 100% 100%; }
  .sd-eng-list li:hover { padding-left: 0; }
  .sd-eng-list li:hover::before { width: 0; }
  .sd-eng-list li:hover .sd-eng-icon,
  .sd-sechead-cta:hover i { transform: none; }
  .sd-triggers li:hover { transform: none; }
  .sd-phase::after { transition: none; transform: scale(1); }

  .dir-card:hover,
  .dir-card:hover .dir-card-icon,
  .dir-card:hover .dir-card-go,
  .sd-eng-list li:hover .sd-eng-icon,
  .sd-pillar-switch a:hover,
  .sd-standards li:hover { transform: none; }
}