/* ========================================================
   OSH Compliance — page body styles for the plugin-shipped
   landing template (templates/page-compliance.php).
   Theme header/footer stay intact; these rules only apply
   inside <main class="oshc-page-main">. Token values mirror
   assessment.css — keep in sync.
======================================================== */

/* ========================================================
   1. TOKENS & SHARED PIECES
======================================================== */
body.oshc-page {
  --oshc-purple: #cc785c;
  --oshc-purple-hover: #a9583e;
  /* Terracotta at body size fails AA on the warm canvas (3.1:1);
     use this darker step for text-level accents. Fills/graphics keep --oshc-purple. */
  --oshc-accent-text: #a9583e;
  --oshc-accent-deep: #8c4630;
  /* Page canvas is white; cream lives only on chosen bands. */
  --oshc-bg: #ffffff;
  --oshc-surface: #efe9de;
  --oshc-section-soft: #f7f4ee;
  --oshc-ink: #181715;
  --oshc-body: #3d3d3a;
  --oshc-muted: #6c6a64;
  --oshc-hairline: rgba(20, 20, 19, 0.08);
  --oshc-hairline-strong: rgba(20, 20, 19, 0.22);
  --oshc-gutter: clamp(1.25rem, 3.4vw, 4rem);
  --oshc-page-max: 96rem;
  --oshc-max: var(--oshc-page-max);
  --oshc-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --oshc-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --oshc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Safety net for the full-bleed breakout below. */
  overflow-x: clip;
}

.oshc-page-main {
  font-family: var(--oshc-font-body);
  color: var(--oshc-body);
  background: var(--oshc-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Break out of the theme's content container — the sections below are
     meant to span edge-to-edge while the theme keeps its header/footer.
     Negative margins stretch the auto-width box to the viewport. */
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
}

/* overflow:clip on the escapee alone does not stop the document-level
   horizontal scroll — clip the wrapper too so the 7-8px bleed cannot
   produce a scrollbar. clip does not create a scroll container, so
   position:sticky inside keeps working. */
.oshc-page {
  overflow-x: clip;
}

/* body's clip does not propagate to the viewport scroller — clip the root
   too. This stylesheet only loads on the compliance template. */
html {
  overflow-x: clip;
}

.oshc-page-main *,
.oshc-page-main *::before,
.oshc-page-main *::after {
  box-sizing: border-box;
}

.oshc-page-main ::selection {
  background: rgba(204, 120, 92, 0.28);
  color: var(--oshc-ink);
}

.oshc-page-eyebrow {
  display: inline-block;
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oshc-accent-text);
}

.oshc-section-title {
  font-family: var(--oshc-font-display);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--oshc-ink);
  margin: 0.4em 0 0.9em;
}

.oshc-section-inner {
  max-width: var(--oshc-max);
  margin: 0 auto;
  padding-left: var(--oshc-gutter);
  padding-right: var(--oshc-gutter);
}

/* Shared content edge: the app caps its measure at the section column so
   topbar/grid/cards land on the exact same left edge as every section
   below. assessment.css consumes --oshc-max/--oshc-gutter for its own
   padding math — overriding the tokens realigns it without touching
   standalone embeds (contract keeps 1360px elsewhere). */
.oshc-page-main .oshc-app {
  --oshc-max: calc(var(--oshc-page-max) - 2 * clamp(1.25rem, 3.4vw, 4rem));
  --oshc-gutter: max(clamp(1.25rem, 3.4vw, 4rem), calc((100% - var(--oshc-max)) / 2));
  /* Keep this page white even when saved assessment colors are applied inline. */
  --oshc-bg: #ffffff !important;
}

/* The theme forces heading fonts; keep the approved type inside this page only. */
.oshc-page-main .oshc-page-title,
.oshc-page-main .oshc-service-title,
.oshc-page-main .oshc-section-title,
.oshc-page-main .oshc-app h1,
.oshc-page-main .oshc-app h2,
.oshc-page-main .oshc-app h3 {
  font-family: var(--oshc-font-display) !important;
}

/* Reserve real space for the instrument instead of covering actions or copy. */
.oshc-page-main .oshc-gauge-dock {
  position: static;
  align-self: flex-end;
  width: fit-content;
  margin: 1rem var(--oshc-gutter);
  z-index: auto;
}

/* Flush with the rail's left text edge — the dock reads as an instrument
   row inside the column, not a floating widget. */
.oshc-page-main .oshc-rail .oshc-gauge-dock {
  align-self: flex-start;
  margin: 0;
}

/* Media blocks — videos, infographics, report previews. */
.oshc-media {
  margin: 0;
  border: 1px solid var(--oshc-hairline-strong);
  background: var(--oshc-surface);
  line-height: 0;
}

.oshc-media img,
.oshc-media video {
  width: 100%;
  height: auto;
  display: block;
}

.oshc-media-caption {
  margin-top: 0.85rem;
  line-height: 1.5;
  font-family: var(--oshc-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--oshc-muted);
}

/* ========================================================
   2. HERO
======================================================== */
.oshc-hero {
  padding-bottom: clamp(2.75rem, 6vw, 4.25rem);
  position: relative;
}

/* Full-bleed rule under the hero — draws itself on load (see MOTION). */
.oshc-hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--oshc-hairline-strong);
}

/* Full-width editorial masthead — title flush left, lede + legal
   share a bottom row so the hero claims the whole column. */
.oshc-hero-inner {
  max-width: var(--oshc-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 5.5rem) var(--oshc-gutter) 0;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.5rem;
}

.oshc-hero-inner > .oshc-page-eyebrow,
.oshc-hero-inner > .oshc-page-title {
  flex-basis: 100%;
}

.oshc-page-title {
  font-family: var(--oshc-font-display);
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--oshc-ink);
  margin: 0.5rem 0 0.5rem;
}

/* Italic display lede provides the editorial voice. */
.oshc-page-lede {
  font-family: var(--oshc-font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  color: var(--oshc-body);
  max-width: 32rem;
  margin: 0;
  flex: 1 1 22rem;
}

.oshc-page-legal {
  flex: 0 1 30rem;
  margin: 0 0 0 auto;
  text-align: left;
  border: 1px solid var(--oshc-hairline-strong);
  background: var(--oshc-surface);
  font-size: 0.85rem;
  color: var(--oshc-body);
}

.oshc-page-legal summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 0.75rem 1.1rem;
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oshc-body);
}

.oshc-page-legal summary::-webkit-details-marker {
  display: none;
}

.oshc-page-legal summary::after {
  content: '+';
  color: var(--oshc-accent-text);
}

.oshc-page-legal[open] summary::after {
  content: '–';
}

.oshc-page-legal summary:hover {
  color: var(--oshc-ink);
}

.oshc-page-legal summary:focus-visible {
  outline: 2px solid var(--oshc-purple);
  outline-offset: -2px;
}

/* Expanded: claim the whole hero row — the disclosure reads as a wide
   footnote band in two columns instead of a tall tower beside dead space. */
.oshc-page-legal[open] {
  flex-basis: 100%;
  margin-top: 0.5rem;
}

.oshc-page-legal[open] .oshc-page-legal-body {
  column-count: 2;
  column-gap: clamp(2rem, 5vw, 5rem);
}

@media (max-width: 700px) {
  .oshc-page-legal[open] .oshc-page-legal-body {
    column-count: 1;
  }
}

/* Smooth disclosure — ::details-content + interpolate-size (Chrome 131+).
   Unsupported browsers keep the instant native snap. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .oshc-page-legal {
      interpolate-size: allow-keywords;
    }
    .oshc-page-legal::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        content-visibility 0.3s allow-discrete;
    }
    .oshc-page-legal[open]::details-content {
      block-size: auto;
    }
  }
}

.oshc-page-legal-body {
  border-top: 1px solid var(--oshc-hairline);
  padding: 0.9rem 1.1rem 1.1rem;
}

.oshc-page-legal-body p {
  margin: 0 0 0.8em;
}

.oshc-page-legal-body p:last-child {
  margin-bottom: 0;
}

.oshc-page-legal-body strong {
  color: var(--oshc-ink);
  font-weight: 600;
}

/* ========================================================
   3. PAGE CONTENT (shortcode app + optional editor markup)
======================================================== */
.oshc-page-content {
  width: 100%;
}

.oshc-page-content > * {
  max-width: var(--oshc-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--oshc-gutter);
  padding-right: var(--oshc-gutter);
}

/* The embedded app is full-bleed — release the cap. */
.oshc-page-content > .oshc-app,
.oshc-page-content .oshc-app {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* Editor typography — scoped AWAY from .oshc-app so app internals keep
   their own type rules regardless of stylesheet order. */
.oshc-page-content h1:not(.oshc-app *),
.oshc-page-content h2:not(.oshc-app *),
.oshc-page-content h3:not(.oshc-app *) {
  font-family: var(--oshc-font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--oshc-ink);
  margin: 0 0 0.75em;
}

.oshc-page-content h1:not(.oshc-app *) { font-size: clamp(2rem, 4.5vw, 3rem); }
.oshc-page-content h2:not(.oshc-app *) { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-top: 2em; }
.oshc-page-content h3:not(.oshc-app *) { font-size: 1.3rem; margin-top: 1.6em; }

.oshc-page-content p:not(.oshc-app *),
.oshc-page-content ul:not(.oshc-app *),
.oshc-page-content ol:not(.oshc-app *) {
  font-size: 1rem;
  margin: 0 0 1.1em;
}

.oshc-page-content ul:not(.oshc-app *),
.oshc-page-content ol:not(.oshc-app *) { padding-left: 1.4em; }
.oshc-page-content li:not(.oshc-app *) { margin-bottom: 0.35em; }
.oshc-page-content strong:not(.oshc-app *) { color: var(--oshc-ink); font-weight: 600; }

.oshc-page-content a:not(.oshc-app *) {
  color: var(--oshc-accent-text);
  text-decoration-color: var(--oshc-hairline-strong);
  text-underline-offset: 3px;
}

.oshc-page-content a:not(.oshc-app *):hover { color: var(--oshc-purple-hover); }
.oshc-page-content img:not(.oshc-app *) { max-width: 100%; height: auto; }

/* ========================================================
   4. TRUST STRIP
======================================================== */
.oshc-trust {
  border-top: 1px solid var(--oshc-hairline-strong);
  border-bottom: 1px solid var(--oshc-hairline-strong);
  padding: 1.6rem max(var(--oshc-gutter), calc((100% - var(--oshc-max)) / 2 + var(--oshc-gutter)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.oshc-trust-line {
  margin: 0;
  max-width: 30rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--oshc-muted);
}

/* Fixed-width marks on a shared baseline — the original osh.vn strip.
   Each logo keeps its natural ratio; the row height is the tallest mark. */
.oshc-trust-clients {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.oshc-trust-clients li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.oshc-trust-clients img {
  display: block;
  width: 120px;
  max-width: 100%;
  height: auto;
  filter: none;
  opacity: 1;
}

/* ========================================================
   5. PROCESS — Mô hình triển khai
======================================================== */
.oshc-process {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--oshc-section-soft);
}

.oshc-process-figure {
  margin-bottom: 0;
  border: 0;
  background: transparent;
}

.oshc-process-scroll {
  overflow-x: auto;
  scrollbar-color: var(--oshc-accent-text) var(--oshc-surface);
}

.oshc-process-scroll:focus-visible {
  outline: 2px solid var(--oshc-ink);
  outline-offset: 4px;
}

.oshc-scroll-hint {
  display: none;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--oshc-muted);
  margin: 0.75rem 0 0;
}

.oshc-process-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--oshc-hairline-strong);
  border-left: 1px solid var(--oshc-hairline);
}

.oshc-process-step {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.1rem 1.5rem;
  border-right: 1px solid var(--oshc-hairline);
  border-bottom: 1px solid var(--oshc-hairline);
}

.oshc-process-num {
  font-family: var(--oshc-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--oshc-accent-text);
}

.oshc-process-name {
  font-family: var(--oshc-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--oshc-ink);
}

.oshc-process-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--oshc-muted);
}

/* ========================================================
   6. SERVICES
======================================================== */
.oshc-service {
  position: relative;
}

/* Top rule drawn as a pseudo-line so it can scaleX in on reveal. */
.oshc-service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--oshc-hairline-strong);
}

.oshc-service:last-child {
  border-bottom: 1px solid var(--oshc-hairline-strong);
}

.oshc-service-inner {
  max-width: var(--oshc-max);
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4rem) var(--oshc-gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "meta media"
    "heading media"
    "body media";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.5rem;
  align-items: start;
}

.oshc-service-heading { grid-area: heading; min-width: 0; }
.oshc-service-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.oshc-service-body { grid-area: body; }
.oshc-service .oshc-media { grid-area: media; }

/* Alternate the media side — a deliberate zigzag down the page. */
.oshc-service:nth-child(even) .oshc-service-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "media meta"
    "media heading"
    "media body";
}

/* Ghost numeral — oversized outlined index, the section signature. */
.oshc-service-num {
  display: block;
  font-family: var(--oshc-font-mono);
  font-size: clamp(2.75rem, 4.5vw, 4.25rem);
  font-weight: 500;
  line-height: 0.95;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--oshc-purple);
  margin: 0;
}

@supports not (-webkit-text-stroke: 1px black) {
  .oshc-service-num { color: var(--oshc-purple); }
}

.oshc-service-facts {
  margin: 0;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
}

.oshc-service-facts > div {
  padding: 0;
}

.oshc-service-facts dt {
  font-family: var(--oshc-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oshc-muted);
  margin-bottom: 0.2rem;
}

.oshc-service-facts dd {
  margin: 0;
  color: var(--oshc-ink);
}

.oshc-service-title {
  font-family: var(--oshc-font-display);
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--oshc-ink);
  margin: 0 0 0.35em;
}

.oshc-service-tagline {
  font-size: 0.95rem;
  color: var(--oshc-muted);
  margin: 0;
}

.oshc-service-points {
  margin: 0 0 1.5em;
  padding: 0;
  list-style: none;
}

.oshc-service-points li {
  padding: 0.45rem 0.4rem 0.45rem 1.1rem;
  border-bottom: 1px solid var(--oshc-hairline);
  position: relative;
  font-size: 1rem;
  transition: background-color 0.18s ease;
}

.oshc-service-points li:hover {
  background: var(--oshc-surface);
}

.oshc-service-points li::before {
  content: '+';
  position: absolute;
  left: 0.3rem;
  color: var(--oshc-accent-text);
  font-family: var(--oshc-font-mono);
  transition: color 0.18s ease;
}

.oshc-service-points li:hover::before {
  color: var(--oshc-purple);
}

.oshc-service-sub {
  display: block;
  font-family: var(--oshc-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oshc-muted);
  margin-bottom: 0.6rem;
}

.oshc-service-process ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
  font-size: 1rem;
  color: var(--oshc-body);
}

.oshc-service-process li {
  margin-bottom: 0.3em;
}

.oshc-service-note {
  max-width: 60ch;
  font-size: 0.9rem;
  color: var(--oshc-muted);
  border-left: 2px solid var(--oshc-purple);
  padding-left: 0.9rem;
  margin: 0;
}

.oshc-service-note strong { color: var(--oshc-ink); }

.oshc-service .oshc-media {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 1.5rem);
}

/* ========================================================
   7. CONTACT
======================================================== */
/* Deeper cream end-cap for the contact section. */
.oshc-contact {
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
  background: var(--oshc-surface);
}

/* Accent text on the tinted surface needs the deeper step (4.2:1 → AA). */
.oshc-contact .oshc-page-eyebrow,
.oshc-contact .oshc-contact-list li::before {
  color: var(--oshc-accent-deep);
}

.oshc-contact .oshc-section-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
}

.oshc-contact-list {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  counter-reset: oshc-contact;
}

.oshc-contact-list li {
  counter-increment: oshc-contact;
  padding: 0.65rem 0 0.65rem 2.6rem;
  border-bottom: 1px solid var(--oshc-hairline);
  position: relative;
  font-size: 1rem;
}

.oshc-contact-list li::before {
  content: counter(oshc-contact, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-family: var(--oshc-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--oshc-accent-text);
}

/* Reading progress — the page's signature hairline keeps drawing
   itself as the user scrolls. Fixed at the viewport top, accent-thin. */
.oshc-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 80;
  pointer-events: none;
}

.oshc-page-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oshc-accent-text);
  transform: scaleX(var(--oshc-scroll-p, 0));
  transform-origin: left center;
}

/* ========================================================
   8. MOTION — "the document draws itself"
   One authored system: section rules draw across while content
   rises once into place. Hidden state only applies when page.js
   adds .oshc-io to <html> — without it everything renders fully.
======================================================== */
.oshc-io .oshc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--oshc-reveal-delay, 0ms);
}

.oshc-io .oshc-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Keep the mask outside the glyph bounds so Vietnamese accents survive. */
.oshc-io .oshc-page-title,
.oshc-io .oshc-service .oshc-service-title {
  clip-path: inset(-0.2em -0.05em 100% -0.05em);
  transform: translateY(0.65em);
  transition:
    clip-path 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
  transition-delay: var(--oshc-reveal-delay, 0ms);
}

.oshc-io .oshc-page-title.is-in,
.oshc-io .oshc-service.is-in .oshc-service-title {
  clip-path: inset(-0.2em -0.05em -0.2em -0.05em);
  transform: none;
}

/* Choreographed hero entrance on load. */
.oshc-io .oshc-hero-inner > .oshc-reveal:nth-child(2) { --oshc-reveal-delay: 90ms; }
.oshc-io .oshc-hero-inner > .oshc-reveal:nth-child(3) { --oshc-reveal-delay: 180ms; }
.oshc-io .oshc-hero-inner > .oshc-reveal:nth-child(4) { --oshc-reveal-delay: 270ms; }

/* Client logos arrive as one staggered group. */
.oshc-io .oshc-trust-clients .oshc-reveal:nth-child(1) { --oshc-reveal-delay: 60ms; }
.oshc-io .oshc-trust-clients .oshc-reveal:nth-child(2) { --oshc-reveal-delay: 140ms; }
.oshc-io .oshc-trust-clients .oshc-reveal:nth-child(3) { --oshc-reveal-delay: 220ms; }
.oshc-io .oshc-trust-clients .oshc-reveal:nth-child(4) { --oshc-reveal-delay: 300ms; }

/* Hairlines draw themselves — the signature move. */
.oshc-io .oshc-hero::after {
  transform: scaleX(0);
  animation: oshc-rule-draw 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.oshc-io .oshc-service::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 80ms;
}

.oshc-io .oshc-service.is-in::before {
  transform: scaleX(1);
}

@keyframes oshc-rule-draw {
  to { transform: scaleX(1); }
}

/* ========================================================
   9. RESPONSIVE
======================================================== */
/* Logo steps follow the original strip: 120px → 90px → 150px, never cropped. */
@media (max-width: 1024px) {
  .oshc-trust-clients { grid-template-columns: repeat(4, 90px); }
  .oshc-trust-clients img { width: 90px; }
}

@media (max-width: 960px) {
  .oshc-process-grid { grid-template-columns: repeat(2, 1fr); }
  .oshc-service-inner,
  .oshc-service:nth-child(even) .oshc-service-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "heading" "media" "body";
    gap: 1.5rem;
  }

  .oshc-service .oshc-media { position: static; }

  .oshc-service-meta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.25rem;
  }

  .oshc-service-num { margin-bottom: 0; }

  .oshc-service-facts {
    display: flex;
    min-width: 0;
    gap: 0.75rem 1.75rem;
    flex-wrap: wrap;
  }

  .oshc-service-facts > div {
    padding: 0;
    border-top: 0;
  }

  .oshc-contact .oshc-section-inner { grid-template-columns: 1fr; }
  /* Single column order: copy first, then the image. */
  .oshc-contact-body { order: 1; }
  .oshc-contact-media { order: 2; }
}

@media (max-width: 767px) {
  .oshc-trust { flex-direction: column; align-items: flex-start; }
  .oshc-trust-clients {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 0.5rem 1rem;
  }
  .oshc-trust-clients img { width: 150px; max-width: 100%; }
}

@media (max-width: 700px) {
  .oshc-process-scroll img { min-width: 52rem; }
  .oshc-scroll-hint { display: block; }
}

@media (max-width: 560px) {
  .oshc-process-grid { grid-template-columns: 1fr; }
  .oshc-page-legal { flex-basis: 100%; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .oshc-io .oshc-reveal { opacity: 1; transform: none; transition: none; }
  .oshc-io .oshc-page-title,
  .oshc-io .oshc-service .oshc-service-title {
    clip-path: none;
    transform: none;
    transition: none;
  }
  .oshc-io .oshc-hero::after,
  .oshc-io .oshc-service::before { transform: none; transition: none; animation: none; }
  .oshc-service-points li,
  .oshc-service-points li::before { transition: none; }
}

@media print {
  .oshc-io .oshc-reveal,
  .oshc-io .oshc-page-title,
  .oshc-io .oshc-service .oshc-service-title {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .oshc-io .oshc-hero::after,
  .oshc-io .oshc-service::before {
    transform: none;
    animation: none;
    transition: none;
  }
  .oshc-process-scroll { overflow: visible; }
  .oshc-process-scroll img { min-width: 0; }
  .oshc-scroll-hint { display: none; }
}