/* ==========================================================================
   BRAND.CSS — Mayer Germany Tex
   Loaded last, after every other stylesheet, so it wins on specificity.
   Covers:
     1. Brand colour tokens (#008BB0 system)
     2. Tailwind "indigo-*" utility overrides (the template used indigo-*
        classes as its accent; we repoint every one of them to the brand
        blue instead of leaving the framework's default purple/indigo).
     3. Hero eyebrow readability fix (step 3)
     4. Catalog modal (step 4)
     5. Product rail polish (step 6/7 support — base rail rules live in
        index.html; this file only adds a few brand-colour touches)
   ========================================================================== */

:root{
  --brand-dark:    #006E8C;
  --brand-primary: #008BB0;
  --brand-light:   #00A5CE;
  --brand-tint:    #E9F6FA;
  --brand-border:  #D3EBF2;
  --brand-ink:     #10333F;
  --brand-muted:   #4C6873;
}

/* ---------------------------------------------------------------------
   1. Replace every Tailwind indigo-* utility with the brand blue.
      (The CDN Tailwind build generates indigo-* as literal hex values,
      so we target them the same way the rest of this override file
      already targets literal classes.)
   --------------------------------------------------------------------- */
html body .text-indigo-200,
html body .text-indigo-200\/70,
html body .text-indigo-200\/60,
html body .text-indigo-300,
html body .text-indigo-300\/50,
html body .text-indigo-400,
html body .text-indigo-500,
html body .text-indigo-600{
  color: var(--brand-light) !important;
}
html body .border-indigo-400,
html body .border-indigo-500,
html body .border-indigo-500\/30{
  border-color: var(--brand-primary) !important;
}
html body .bg-indigo-500,
html body .bg-indigo-600{
  background-color: var(--brand-primary) !important;
}
html body .bg-indigo-950\/40{
  background-color: rgba(0,58,74,.45) !important;
}

/* ---------------------------------------------------------------------
   2. Hero eyebrow — was low-contrast light indigo on translucent white,
      unreadable against the light hero background. Solid brand pill.
   --------------------------------------------------------------------- */
.hero-eyebrow{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#FFFFFF !important;
  background:var(--brand-primary) !important;
  padding:.5rem 1.1rem;
  border-radius:999px;
  border:1px solid var(--brand-dark);
  box-shadow:0 6px 16px rgba(0,139,176,.28);
  margin-bottom:1.25rem;
}

/* ---------------------------------------------------------------------
   3. Explore Catalog — modal + list styling.
   --------------------------------------------------------------------- */
.catalog-overlay{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(10,32,40,.55);
  backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease;
}
.catalog-overlay.open{ opacity:1; }
.catalog-overlay[hidden]{ display:none; }

.catalog-panel{
  width:100%; max-width:640px; max-height:88vh; overflow-y:auto;
  background:#FFFFFF;
  border-radius:20px;
  padding:32px 28px 24px;
  position:relative;
  box-shadow:0 30px 70px rgba(0,40,52,.35);
  transform:translateY(14px) scale(.98);
  transition:transform .2s ease;
}
.catalog-overlay.open .catalog-panel{ transform:translateY(0) scale(1); }

.catalog-close{
  position:absolute; top:14px; right:14px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--brand-border);
  background:#FFFFFF; color:var(--brand-ink);
  font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease;
}
.catalog-close:hover{ background:var(--brand-primary); color:#FFFFFF; border-color:var(--brand-primary); }

.catalog-header{ padding-right:32px; margin-bottom:18px; }
.catalog-eyebrow{
  font-size:.62rem; font-weight:800; letter-spacing:.16em;
  color:var(--brand-primary);
}
.catalog-header h3{
  font-size:1.35rem; font-weight:800; color:var(--brand-ink);
  margin:.35rem 0 .4rem;
}
.catalog-header p{ font-size:.85rem; color:var(--brand-muted); line-height:1.5; margin:0; }

.catalog-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.catalog-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  border:1px solid var(--brand-border);
  border-radius:14px;
  background:var(--brand-tint);
}
.catalog-item--pending{ opacity:.72; }
.catalog-icon{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-primary); color:#FFFFFF; font-size:1.05rem;
}
.catalog-copy{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.catalog-copy strong{ font-size:.85rem; color:var(--brand-ink); font-weight:700; }
.catalog-copy small{ font-size:.72rem; color:var(--brand-muted); line-height:1.4; }
.catalog-actions{ flex:0 0 auto; display:flex; gap:8px; }
.catalog-view, .catalog-download{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.68rem; font-weight:700;
  padding:7px 11px; border-radius:8px;
  text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.catalog-view{
  color:var(--brand-primary); border:1px solid var(--brand-primary); background:#FFFFFF;
}
.catalog-view:hover{ background:var(--brand-primary); color:#FFFFFF; }
.catalog-download{
  color:#FFFFFF; background:var(--brand-primary); border:1px solid var(--brand-primary);
}
.catalog-download:hover{ background:var(--brand-dark); border-color:var(--brand-dark); }
.catalog-soon{
  font-size:.68rem; font-weight:700; color:var(--brand-muted);
  background:#FFFFFF; border:1px dashed var(--brand-border);
  padding:7px 11px; border-radius:8px;
}
.catalog-foot{ margin:18px 2px 0; font-size:.74rem; color:var(--brand-muted); }
.catalog-foot a{ color:var(--brand-primary); font-weight:700; text-decoration:none; }
.catalog-foot a:hover{ text-decoration:underline; }

@media (max-width:560px){
  .catalog-item{ flex-wrap:wrap; }
  .catalog-actions{ width:100%; justify-content:flex-end; }
}

/* ---------------------------------------------------------------------
   4. Buttons — ensure primary CTA (now a <button>) matches the anchor
      styling it replaced, and that it looks/behaves identically.
   --------------------------------------------------------------------- */
button.btn-primary{
  font-family:inherit;
  border:none;
  cursor:pointer;
}

/* ---------------------------------------------------------------------
   5. Product rails — brand-colour polish for the new navigation UI.
      (Structural rules already live in index.html; kept here only so
      all brand-colour decisions live in one file.)
   --------------------------------------------------------------------- */
.product-rail-title{ color:var(--brand-ink) !important; }
.product-rail-index,
.product-rail-count{ color:var(--brand-primary) !important; }
.product-rail-count{
  background:var(--brand-tint) !important;
  border-color:var(--brand-border) !important;
}
.rail-btn{ color:var(--brand-primary) !important; border-color:var(--brand-border) !important; }
.rail-btn:hover:not(:disabled){
  background:var(--brand-primary) !important;
  border-color:var(--brand-primary) !important;
  color:#FFFFFF !important;
}
.product-rail-progress > span{ background:var(--brand-primary) !important; }


/* ==========================================================================
   UPDATE — 2026-08-19
   6. Hero eyebrow: high-contrast + animated shine
   7. About: 2 x 2 key figures, larger numerals
   8. Catalogue picker: cover previews + built-in PDF reader
   9. Product rails: alternating auto-scroll marquee
   ========================================================================== */

/* ---------------------------------------------------------------------
   6. HERO EYEBROW — "GERMAN QUALITY • UZBEK COTTON • GLOBAL REACH"
      Bigger, bolder, on a deep brand gradient, with a specular highlight
      that sweeps across it and a slow outer glow so the eye is drawn to
      it without the text ever becoming hard to read (white on #007A9C
      clears 4.7:1 at the lightest gradient stop, past WCAG AA).
   --------------------------------------------------------------------- */
html body .hero-eyebrow,
html body #hero .hero-eyebrow,
html body #hero [data-lang-key="hero_badge"]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:clamp(.78rem, .55rem + .55vw, .95rem) !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  line-height:1.25;
  text-transform:uppercase;
  color:#FFFFFF !important;
  background:linear-gradient(100deg,#005A7C 0%,#006B8E 45%,#007D9F 100%) !important;
  padding:.72rem 1.5rem !important;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.35) !important;
  text-shadow:0 1px 2px rgba(0,42,56,.45);
  box-shadow:
    0 8px 22px rgba(0,110,140,.38),
    0 0 0 0 rgba(0,165,206,.55);
  animation:eyebrowGlow 3.2s ease-in-out infinite;
  margin-bottom:1.25rem;
}

/* The travelling highlight. */
html body .hero-eyebrow::after,
html body #hero [data-lang-key="hero_badge"]::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-75%;
  width:55%;
  height:220%;
  z-index:-1;
  pointer-events:none;
  transform:skewX(-22deg);
  background:linear-gradient(90deg,
              rgba(255,255,255,0)   0%,
              rgba(255,255,255,.16) 35%,
              rgba(255,255,255,.62) 50%,
              rgba(255,255,255,.16) 65%,
              rgba(255,255,255,0)  100%);
  animation:eyebrowShine 3.2s cubic-bezier(.35,0,.25,1) infinite;
}

@keyframes eyebrowShine{
  0%   { left:-75%; }
  55%  { left:125%; }
  100% { left:125%; }      /* hold, so the sweep reads as a pulse not a strobe */
}

@keyframes eyebrowGlow{
  0%,100% { box-shadow:0 8px 22px rgba(0,110,140,.38), 0 0 0 0    rgba(0,165,206,.50); }
  50%     { box-shadow:0 8px 26px rgba(0,110,140,.46), 0 0 0 10px rgba(0,165,206,0);    }
}

/* Motion is decoration only — the pill stays fully legible without it. */
@media (prefers-reduced-motion: reduce){
  html body .hero-eyebrow{ animation:none !important; }
  html body .hero-eyebrow::after{ animation:none !important; display:none; }
}

@media (max-width:480px){
  html body .hero-eyebrow,
  html body #hero [data-lang-key="hero_badge"]{
    letter-spacing:.10em !important; padding:.62rem 1.05rem !important;
  }
}

/* ---------------------------------------------------------------------
   7. ABOUT — key figures stacked two-by-two
      Row 1: 10,000 | 7     Row 2: 22 | 300+
   --------------------------------------------------------------------- */
.about-stats{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.about-stats .stat-cell{
  text-align:center;
  padding:22px 14px;
  border:1px solid var(--brand-border);
  border-radius:16px;
  background:linear-gradient(180deg,#FFFFFF 0%,var(--brand-tint) 100%);
  box-shadow:0 8px 22px rgba(0,110,140,.07);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.about-stats .stat-cell:hover{
  transform:translateY(-3px);
  border-color:var(--brand-primary);
  box-shadow:0 14px 30px rgba(0,110,140,.14);
}

html body #about .about-stats .stat-number{
  font-size:clamp(2.4rem, 1.35rem + 3.1vw, 4rem) !important;
  font-weight:800 !important;
  line-height:1.02 !important;
  letter-spacing:-.03em !important;
  background:none !important;
  color:var(--brand-primary) !important;
  -webkit-text-fill-color:var(--brand-primary) !important;
  font-variant-numeric:tabular-nums;
}

html body #about .about-stats .stat-label{
  display:block;
  margin-top:.45rem;
  font-size:.8rem !important;
  font-weight:700 !important;
  letter-spacing:.02em;
  color:var(--brand-ink) !important;
}

html body #about .about-stats .stat-note{
  display:block;
  margin-top:.2rem;
  font-size:.68rem;
  color:var(--brand-muted) !important;
}

@media (max-width:400px){
  .about-stats{ gap:10px; }
  .about-stats .stat-cell{ padding:16px 8px; }
}

/* ---------------------------------------------------------------------
   8. CATALOGUE PICKER — cover thumbnails, metadata, in-modal reader
   --------------------------------------------------------------------- */
.catalog-panel{ max-width:720px; }

.catalog-thumb{
  position:relative;
  flex:0 0 auto;
  width:64px; height:88px;
  padding:0; border:1px solid var(--brand-border);
  border-radius:8px; overflow:hidden; cursor:pointer;
  background:#FFFFFF;
  box-shadow:0 3px 10px rgba(0,64,82,.13);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.catalog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.catalog-thumb:hover{
  transform:translateY(-2px);
  border-color:var(--brand-primary);
  box-shadow:0 8px 18px rgba(0,64,82,.22);
}
.catalog-thumb:focus-visible{ outline:3px solid rgba(0,139,176,.40); outline-offset:2px; }

/* Icon only shows through if the cover image fails to load. */
.catalog-thumb-icon{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  background:var(--brand-primary); color:#FFFFFF; font-size:1.3rem;
}
.catalog-thumb--fallback .catalog-thumb-icon{ display:flex; }

.catalog-thumb-hover{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,110,140,.55); color:#FFFFFF; font-size:.95rem;
  opacity:0; transition:opacity .18s ease;
}
.catalog-thumb:hover .catalog-thumb-hover,
.catalog-thumb:focus-visible .catalog-thumb-hover{ opacity:1; }

.catalog-item{ align-items:center; gap:16px; }
.catalog-meta{
  margin-top:5px;
  font-size:.66rem; font-weight:600; letter-spacing:.03em;
  color:var(--brand-primary);
}
.catalog-actions{ flex-direction:column; gap:7px; }
button.catalog-view{ font-family:inherit; cursor:pointer; }
.catalog-view, .catalog-download{ justify-content:center; }

/* --- the reader itself --- */
.catalog-viewer{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  background:#FFFFFF; border-radius:20px;
  padding:16px 16px 14px;
  z-index:5;
}
.catalog-viewer[hidden]{ display:none; }

.catalog-viewer-bar{
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:12px;
  border-bottom:1px solid var(--brand-border);
  flex-wrap:wrap;
}
.catalog-viewer-bar > strong{
  flex:1 1 auto; min-width:0;
  font-size:.92rem; font-weight:800; color:var(--brand-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.catalog-viewer-actions{ display:flex; gap:8px; flex:0 0 auto; }

.catalog-viewer-back{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:.72rem; font-weight:700;
  padding:8px 13px; border-radius:8px; cursor:pointer;
  color:var(--brand-primary);
  background:var(--brand-tint);
  border:1px solid var(--brand-border);
  transition:background .15s ease, color .15s ease;
}
.catalog-viewer-back:hover{ background:var(--brand-primary); color:#FFFFFF; border-color:var(--brand-primary); }

.catalog-viewer-stage{
  position:relative;
  flex:1 1 auto; min-height:60vh;
  border:1px solid var(--brand-border); border-radius:12px;
  overflow:hidden; background:var(--brand-tint);
}
.catalog-viewer-stage iframe{
  position:relative; z-index:1;
  width:100%; height:100%; border:0; display:block;
  /* Transparent, not white: a browser that cannot render the PDF paints
     nothing here, so the fallback message underneath becomes visible.
     A working PDF viewer paints its own background and covers it. */
  background:transparent;
}
/* Sits underneath the iframe; only visible when the iframe renders nothing. */
.catalog-viewer-fallback{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:24px; text-align:center;
  font-size:.8rem; line-height:1.6; color:#4C6873;
}
.catalog-viewer-fallback > span{ max-width:34ch; }
.catalog-viewer-fallback strong{ color:var(--brand-ink); }

/* Give the reader the full panel height while it is open. */
.catalog-overlay.is-reading .catalog-panel{ height:88vh; overflow:hidden; }

@media (max-width:560px){
  .catalog-thumb{ width:52px; height:72px; }
  .catalog-viewer-bar > strong{ order:-1; width:100%; white-space:normal; }
  .catalog-viewer-actions{ width:100%; }
  .catalog-viewer-actions a{ flex:1 1 0; }
  .catalog-viewer-stage{ min-height:52vh; }
}

/* ---------------------------------------------------------------------
   9. PRODUCT RAILS — alternating auto-scroll
      Row 1 drifts left to right, row 2 right to left, row 3 left to
      right. The JS drives scrollLeft directly each frame, so a looping
      viewport must not also be doing native smooth-scrolling or
      scroll-snapping, or the two fight each other.
   --------------------------------------------------------------------- */
.product-rail-viewport.is-looping{
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
}
.product-rail-viewport.is-looping > .product-card{ scroll-snap-align:none; }

/* Soft edge fade so cards drift in and out of the rail rather than being
   cut off hard. Masking the viewport (not the whole rail) keeps the row
   heading and arrow buttons perfectly crisp. */
.product-rail-viewport.is-looping{
  -webkit-mask-image:linear-gradient(90deg,
      transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
          mask-image:linear-gradient(90deg,
      transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}
@media (max-width:640px){
  .product-rail-viewport.is-looping{
    -webkit-mask-image:linear-gradient(90deg,
        transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image:linear-gradient(90deg,
        transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
}

/* Autoplay is decoration: without it the rails still work via arrows,
   drag, swipe and keyboard. */
@media (prefers-reduced-motion: reduce){
  .product-rail-viewport.is-looping{
    scroll-behavior:smooth !important;
    -webkit-mask-image:none; mask-image:none;
  }
}

/* ---------------------------------------------------------------------
   10. TOKEN GUARD — do not depend on --brand-primary
      A late `:root{--brand-primary:#CBE9F1 !important}` inside index.html
      overrides the value declared at the top of this file. Because custom
      properties resolve at computed-value time, every var(--brand-primary)
      in this stylesheet was silently resolving to that pale tint — which
      is why the catalogue buttons rendered white-on-near-white.

      Rather than change the global token (it is used by ~20 other rules
      whose current appearance is signed off), the components below are
      pinned to literal brand values.
   --------------------------------------------------------------------- */

/* Catalogue buttons — were #FFFFFF on #CBE9F1 (~1.3:1). Now 4.7:1+. */
html body .catalog-download{
  background:#006E8C !important;
  border-color:#006E8C !important;
  color:#FFFFFF !important;
}
html body .catalog-download:hover{
  background:#00506B !important;
  border-color:#00506B !important;
}
html body button.catalog-view,
html body .catalog-view{
  color:#00688A !important;
  border-color:#008BB0 !important;
  background:#FFFFFF !important;
}
html body button.catalog-view:hover,
html body .catalog-view:hover{
  background:#006E8C !important;
  color:#FFFFFF !important;
}

html body .catalog-icon{ background:#006E8C !important; color:#FFFFFF !important; }
html body .catalog-eyebrow{ color:#00688A !important; }
html body .catalog-meta{ color:#00688A !important; }
html body .catalog-thumb:hover{ border-color:#008BB0 !important; }
html body .catalog-viewer-back{ color:#00688A !important; }
html body .catalog-viewer-back:hover{ background:#006E8C !important; color:#FFFFFF !important; }

/* Rail arrows — were pale and hard to see against white. */
html body .rail-btn{ color:#008BB0 !important; border-color:#B9DFEB !important; }
html body .rail-btn:hover:not(:disabled){
  background:#006E8C !important;
  border-color:#006E8C !important;
  color:#FFFFFF !important;
}
html body .product-rail-progress > span{ background:#008BB0 !important; }
html body .product-rail-index,
html body .product-rail-count{ color:#00688A !important; }

/* Key figures — pinned so the numerals read as brand blue, not a tint. */
html body #about .about-stats .stat-number{
  color:#006E8C !important;
  -webkit-text-fill-color:#006E8C !important;
  background:none !important;
  background-image:none !important;
  -webkit-background-clip:border-box !important;
          background-clip:border-box !important;
}

/* ---------------------------------------------------------------------
   11. PRODUCTION JOURNEY — serpentine flow chart
      A faithful rebuild of the supplied diagram: five rows of two
      columns, with the connecting path snaking down the page and
      U-turning alternately on the right and left.

      The path is pure CSS, not an image, so it stays sharp at any zoom
      and reflows with the text. Each U-turn is one box with a top,
      right/left and bottom border plus a large corner radius — its top
      border meets the end of one row's line and its bottom border meets
      the start of the next, so the whole path reads as continuous.

      On narrow screens the two columns collapse to one and the path
      becomes a simple vertical timeline down the left edge.
   --------------------------------------------------------------------- */
:root{
  --pj-line:#008BB0;          /* the path */
  --pj-turn:56px;             /* width of a U-turn, = its radius */
  --pj-w:3px;                 /* stroke weight */
  --pj-pad:30px;              /* gap between the line and the text below it */
}

.pj-flow{
  position:relative;
  max-width:1000px;
  margin:0 auto;
  padding:0 var(--pj-turn);
}

.pj-row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 26px;
  min-height:178px;
  padding-top:var(--pj-pad);     /* clears the line the nodes hang from */
}
.pj-row:last-child{ min-height:0; padding-bottom:14px; }

/* The horizontal segment at the top of each row. Row 1 has none —
   the path enters vertically from the top-left instead. */
.pj-row::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:var(--pj-w);
  background:var(--pj-line);
}
.pj-row--start::before{
  /* vertical entry stub down the left edge into row 2's line */
  top:0; bottom:0; right:auto;
  width:var(--pj-w); height:auto;
  border-radius:var(--pj-w);
}

/* U-turns. Height 100% of the row spans from this row's line down to
   the next row's line. */
.pj-row--turn-right::after,
.pj-row--turn-left::after{
  content:"";
  position:absolute;
  top:0;
  width:var(--pj-turn);
  height:100%;
  border-top:var(--pj-w) solid var(--pj-line);
  border-bottom:var(--pj-w) solid var(--pj-line);
  pointer-events:none;
}
.pj-row--turn-right::after{
  left:100%;
  border-right:var(--pj-w) solid var(--pj-line);
  border-radius:0 999px 999px 0;
}
.pj-row--turn-left::after{
  right:100%;
  border-left:var(--pj-w) solid var(--pj-line);
  border-radius:999px 0 0 999px;
}

.pj-node{ position:relative; padding-right:14px; }
/* Row 1 sits to the right of the vertical entry stub, as in the diagram. */
.pj-row--start .pj-node{ padding-left:30px; }
.pj-node--blank{ display:block; }

/* Node dot, sitting on the line above the text. */
.pj-node::before{
  content:"";
  position:absolute;
  top:calc(-1 * var(--pj-pad) + (var(--pj-w) / 2));
  left:0;
  width:15px; height:15px;
  transform:translate(-30%,-50%);
  border-radius:50%;
  background:var(--pj-line);
  box-shadow:0 0 0 4px rgba(0,139,176,.14);
}
.pj-node--blank::before{ content:none; }

html body .pj-title{
  margin:0 0 .3rem;
  font-size:.95rem; font-weight:800; line-height:1.3;
  color:#10333F !important;
}
html body .pj-text{
  margin:0;
  font-size:.82rem; line-height:1.55;
  color:#00688A !important;
  max-width:34ch;
}

/* Step icon. In the reference diagram every mark sits in the clear space
   ABOVE the line its own step hangs from - not below its own text. Anchoring
   it to the node's own line keeps icon, dot and heading as one unit, so the
   set can never drift a step out of sequence again. */
.pj-icon{
  position:absolute;
  left:58px;
  top:calc(-1 * var(--pj-pad) - 12px);
  transform:translateY(-100%);
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  background:#E9F6FA;
  border:1px solid #B9DFEB;
  color:#00688A !important;
  z-index:1;
}
.pj-icon > svg{ width:24px; height:24px; display:block; }

/* Row 1 has no line above it - the path enters vertically - so its mark sits
   inline to the left of the heading, exactly as in the diagram. */
.pj-node--lead{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:0 14px;
  align-items:start;
  align-content:start;   /* auto rows must not absorb the row's spare height */
}
.pj-node--lead .pj-icon{
  position:static; transform:none;
  grid-row:1 / span 2;
}
.pj-node--lead .pj-title,
.pj-node--lead .pj-text{ grid-column:2; }

/* ---- Tablet: keep two columns but tighten the geometry ---- */
@media (max-width:1024px){
  :root{ --pj-turn:40px; --pj-pad:28px; }
  .pj-row{ min-height:186px; gap:0 18px; }
  .pj-icon{ left:48px; width:40px; height:40px; }
  .pj-icon > svg{ width:22px; height:22px; }
  html body .pj-text{ font-size:.78rem; }
}

/* ---- Mobile: one column, straight vertical path ---- */
@media (max-width:760px){
  .pj-flow{ padding:0 0 0 36px; }
  .pj-row{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:0;
    gap:0;
  }
  /* Replace the horizontal segments with one continuous vertical line. */
  .pj-row::before{
    top:0; bottom:0; left:0; right:auto;
    width:var(--pj-w); height:auto;
    transform:translateX(-26px);
  }
  .pj-row--turn-right::after,
  .pj-row--turn-left::after{ content:none; }

  .pj-node,
  .pj-row--start .pj-node{ padding:0 0 26px 0; }
  .pj-node--blank{ display:none; }
  .pj-node::before{
    top:6px; left:-26px;
    transform:translate(-50%,0);
  }
  .pj-icon{
    position:static;
    transform:none;
    margin:0 0 10px;
    display:inline-flex;
  }
  .pj-node--lead{ display:block; }
  .pj-node--lead .pj-icon{ margin:0 0 10px; }
  html body .pj-text{ max-width:none; }
}

/* The path is decorative; it must never trap a screen reader or a
   keyboard user, and it is hidden from print where it would not align. */
@media print{
  .pj-row::before, .pj-row::after, .pj-node::before{ display:none; }
}