/* ============================================================
   IPHIOS LOGISTICS CORP. — ROUTES & REACH
   routes-reach.css

   Drop-in section styles. Everything is namespaced under .rr so
   nothing here can collide with the rest of the site.

   Each row straddles a centre spine: copy on one side, the mark
   on the other. They travel inward from opposite edges on the
   same curve, so the pair reads as one movement.

   ON THE LIVE SITE: delete the :root block and the DEMO PAGE ONLY
   rules below — the section will inherit your existing --paper /
   --ink / --line / --f-display / --f-body / --ease tokens. Keep
   --harbour, --brass, --spine and --travel; those are new here.
   ============================================================ */

:root{
  --paper:#F1F2EF;          /* cool paper, not cream */
  --ink:#0B1410;            /* near-black with a green cast */
  --ink-60:rgba(11,20,16,.60);
  --ink-38:rgba(11,20,16,.38);
  --line:rgba(11,20,16,.14);
  --harbour:#14432F;        /* Iphios green */
  --brass:#9C7434;          /* used once, on the award */
  --f-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --f-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --spine:64px;             /* centre gutter the route runs through */
  --travel:52px;            /* how far each half travels inward */
  --mark-box:clamp(46px,5.2vw,74px);  /* base optical height for logos */
}

/* ---- DEMO PAGE ONLY. Delete these three rules on the live site;
       your global stylesheet already handles them. ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased}

/* ============ SECTION SHELL ============ */
.rr{background:var(--paper);padding:clamp(72px,10vw,148px) 0;overflow:hidden}
.rr__wrap{width:min(1240px,92vw);margin:0 auto}

/* ---- centred head ---- */
.rr__head{text-align:center;display:grid;justify-items:center}

.rr__eyebrow{
  display:flex;align-items:center;gap:clamp(12px,2vw,20px);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-60);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.rr__eyebrow::before,.rr__eyebrow::after{
  content:"";height:1px;width:clamp(28px,7vw,96px);background:var(--line);
  transform:scaleX(0);transition:transform 1s var(--ease) .15s;
}
.rr__eyebrow::before{transform-origin:right center}
.rr__eyebrow::after{transform-origin:left center}
.is-live .rr__eyebrow{opacity:1;transform:none}
.is-live .rr__eyebrow::before,.is-live .rr__eyebrow::after{transform:scaleX(1)}

/* the swapping display word — carries the direction of travel */
.rr__titlebox{
  position:relative;display:grid;place-items:center;
  margin:clamp(14px,2vw,22px) 0 clamp(26px,3.4vw,40px);
  min-height:1.02em;width:100%;
  font-family:var(--f-display);font-weight:400;font-size:clamp(38px,8vw,120px);
  line-height:1.02;letter-spacing:-.03em;
}
.rr__word{
  grid-area:1/1;display:block;margin:0;font:inherit;letter-spacing:inherit;white-space:nowrap;
  padding:0 .06em;clip-path:inset(-18% -2% -18% -2%);
}
.rr__word i{
  display:inline-block;font-style:italic;color:var(--harbour);
  transition:transform .74s var(--ease),opacity .5s var(--ease);
  will-change:transform,opacity;
}
.rr__word[data-state="in"]  i{transform:none;opacity:1}
.rr__word[data-state="pre"] i{transform:translateX(calc(var(--dir,1) * 26%));opacity:0}
.rr__word[data-state="out"] i{transform:translateX(calc(var(--dir,1) * -26%));opacity:0}

/* ---- nav rendered as a lane with ports ---- */
.rr__route{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:26px}
.rr__lane{
  position:absolute;top:26px;left:0;right:0;height:1px;background:var(--line);
  transform:scaleX(0);transform-origin:center;transition:transform 1.1s var(--ease) .2s;
}
.is-live .rr__lane{transform:scaleX(1)}
.rr__vessel{
  position:absolute;top:26px;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--harbour);
  transition:transform .74s var(--ease);
}
.rr__vessel::after{
  content:"";position:absolute;inset:-13px;border:1px solid var(--harbour);border-radius:50%;
  opacity:.30;transform:scale(.6);transition:transform .74s var(--ease),opacity .6s var(--ease);
}
.is-live .rr__vessel::after{transform:scale(1)}

.rr__port{
  appearance:none;background:none;border:0;cursor:pointer;
  flex:1 1 0;min-width:0;padding:22px 6px 0;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-38);transition:color .4s var(--ease);position:relative;
}
.rr__port::before{
  content:"";position:absolute;top:0;left:50%;width:1px;height:12px;background:var(--line);
  transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.is-live .rr__port::before{transform:translateX(-50%) scaleY(1)}
.rr__port:hover{color:var(--ink-60)}
.rr__port[aria-selected="true"]{color:var(--ink)}
.rr__port span{display:block;pointer-events:none}
.rr__port b{
  display:block;font-family:var(--f-body);font-weight:500;font-size:10px;letter-spacing:.1em;
  color:var(--ink-38);margin-top:5px;font-variant-numeric:tabular-nums;
}
.rr__port:focus-visible{outline:2px solid var(--harbour);outline-offset:6px;border-radius:2px}

/* ============ STAGE — panels slide in the direction of travel ============ */
.rr__stage{position:relative;margin-top:clamp(44px,6vw,84px);height:0;transition:height .7s var(--ease);touch-action:pan-y}
.rr__panel{
  position:absolute;inset:0 0 auto 0;opacity:0;pointer-events:none;visibility:hidden;
  transform:translateX(calc(var(--dir,1) * 44px));
  transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s linear .5s;
}
.rr__panel[data-active="true"]{
  opacity:1;transform:none;pointer-events:auto;visibility:visible;
  transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s;
}

/* ---- the spine every row straddles ---- */
.rr__spine{
  position:absolute;top:0;bottom:0;left:calc(50% - .5px);width:1px;
  background:linear-gradient(to bottom,transparent,var(--line) 6%,var(--line) 94%,transparent);
  transform:scaleY(0);transform-origin:top;transition:transform 1.15s var(--ease) .1s;
}
.rr__panel[data-active="true"] .rr__spine{transform:scaleY(1)}

/* ============ ROWS — copy one side, mark the other ============ */
.rr__row{display:grid;grid-template-columns:1fr var(--spine) 1fr;align-items:center;
  padding:clamp(30px,4vw,52px) 0;position:relative}
.rr__row + .rr__row{border-top:1px solid var(--line)}

/* both halves share one transition; only the sign of travel differs */
.rr__cell,.rr__aside{
  min-width:0;opacity:0;
  transition:opacity .7s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 120ms);
}
.rr__panel[data-active="true"] .rr__cell,
.rr__panel[data-active="true"] .rr__aside{opacity:1;transform:none}

/* default: copy left, mark right */
.rr__cell {grid-column:1;text-align:right;transform:translateX(calc(var(--travel) * -1))}
.rr__aside{grid-column:3;display:flex;justify-content:flex-start;transform:translateX(var(--travel))}

/* flipped: copy right, mark left */
.rr__row[data-side="right"] .rr__cell {grid-column:3;text-align:left;transform:translateX(var(--travel))}
.rr__row[data-side="right"] .rr__aside{grid-column:1;justify-content:flex-end;transform:translateX(calc(var(--travel) * -1))}

/* node on the spine, hairline reaching to both halves */
.rr__node{
  grid-column:2;justify-self:center;position:relative;width:100%;height:7px;
  opacity:0;transition:opacity .5s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 300ms);
}
.rr__panel[data-active="true"] .rr__node{opacity:1}
.rr__node::before{
  content:"";position:absolute;top:0;left:calc(50% - 3.5px);width:7px;height:7px;border-radius:50%;
  background:var(--paper);border:1px solid var(--ink-38);z-index:1;
  transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.rr__node::after{content:"";position:absolute;top:3px;left:0;right:0;height:1px;background:var(--line);
  transition:background .45s var(--ease)}
.rr__row:hover .rr__node::before{background:var(--harbour);border-color:var(--harbour);transform:scale(1.28)}
.rr__row:hover .rr__node::after{background:var(--harbour)}

/* ============ MARKS ============ */
/* Every mark sits in a band of the same height and is centred in it,
   so the logo lines up with the midpoint between the row's top and
   bottom rules no matter its proportions.

   Sizing is by OPTICAL height, not by a shared max-height. These
   marks run from 1.3:1 (PEZA) to 3:1 (WIFFA, JCtrans), and a single
   height makes the wide ones look enormous next to the square ones.
   Each <img> carries its own --mark-h multiplier: below 1 for the
   wide wordmarks, above 1 for the compact seals.

   `height` is set outright rather than as a max — a global
   `img{height:auto}` in the site stylesheet would otherwise win and
   the logo would render at its intrinsic size.

   multiply drops the white box on the two flat JPEG marks. */
.rr__aside{
  align-items:center;line-height:0;
  min-height:calc(var(--mark-box) * 1.45);   /* the band, tallest mark + air */
}
.rr__aside .rr__logo{
  display:block;
  height:calc(var(--mark-box) * var(--mark-h,1));
  width:auto;max-width:100%;object-fit:contain;
  mix-blend-mode:multiply;
  filter:grayscale(1) contrast(.92);opacity:.5;
  transition:filter .55s var(--ease),opacity .55s var(--ease),transform .55s var(--ease);
}
.rr__row:hover .rr__aside .rr__logo{filter:none;opacity:1;transform:translateX(-6px)}
.rr__row[data-side="right"]:hover .rr__aside .rr__logo{transform:translateX(6px)}

/* the award keeps its colour and its scale — the one loud moment */
.rr__aside .rr__logo--award{
  height:clamp(132px,15vw,196px);
  filter:none;opacity:1;mix-blend-mode:normal;
}
.rr__row--award .rr__aside{min-height:0}
.rr__seal{width:clamp(120px,14vw,180px);height:auto;color:var(--brass)}
.rr__aside:has(img) .rr__seal{display:none}   /* real file loaded — retire the drawn seal */

/* ============ COPY ============ */
.rr__meta{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-38);margin:0 0 12px}
.rr__mark{font-family:var(--f-display);font-weight:600;font-size:clamp(28px,4.2vw,54px);
  line-height:1;letter-spacing:-.02em;margin:0;transition:color .45s var(--ease)}
.rr__row:hover .rr__mark{color:var(--harbour)}
.rr__note{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-60);max-width:42ch}
.rr__cell .rr__note{margin-left:auto}
.rr__row[data-side="right"] .rr__note{margin-left:0}

/* ---- Dormant: quote + attribution styling. Nothing uses these now
       that Client Voices is gone. Kept because the aside slot takes an
       attribution block as readily as a logo, so restoring client
       quotes later is markup only, no CSS work. ---- */
.rr__quote{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(20px,2.4vw,34px);line-height:1.26;letter-spacing:-.016em;margin:0;max-width:26ch}
.rr__cell .rr__quote{margin-left:auto}
.rr__row[data-side="right"] .rr__quote{margin-left:0}
.rr__by{display:flex;flex-direction:column;gap:5px}
.rr__by b{font-family:var(--f-body);font-weight:500;font-size:14px;letter-spacing:.02em}
.rr__by span{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink-60);line-height:1.6}
.rr__by::before{content:"";width:34px;height:1px;background:var(--ink-38);margin-bottom:12px}
.rr__row[data-side="right"] .rr__by{align-items:flex-end;text-align:right}

.rr__year{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;
  color:var(--brass);margin-top:16px}

/* ============ MOBILE — spine to the edge, mark above copy ============ */
@media (max-width:760px){
  :root{--spine:22px;--travel:26px;--mark-box:clamp(40px,11vw,58px)}
  .rr__row{grid-template-columns:var(--spine) 1fr;align-items:start;padding:28px 0}
  .rr__aside,.rr__row[data-side="right"] .rr__aside{
    grid-column:2;grid-row:1;justify-content:flex-start;margin-bottom:20px;
    transform:translateX(var(--travel))}
  .rr__cell,.rr__row[data-side="right"] .rr__cell{
    grid-column:2;grid-row:2;text-align:left;transform:translateX(var(--travel))}
  .rr__node{grid-column:1;grid-row:1;align-self:start;margin-top:10px}
  .rr__node::after{left:50%;right:-10px}
  .rr__spine{left:calc(var(--spine)/2)}
  .rr__cell .rr__note,.rr__cell .rr__quote{margin-left:0}
  .rr__row[data-side="right"] .rr__by{align-items:flex-start;text-align:left}
  .rr__by{margin-top:18px}
  .rr__row:hover .rr__logo,.rr__row[data-side="right"]:hover .rr__logo{transform:none}
  .rr__logo{filter:none;opacity:1}      /* no hover on touch — show them in colour */
  .rr__port b{display:none}
  .rr__port{letter-spacing:.08em;font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .rr__cell,.rr__aside,.rr__node{opacity:1;transform:none}
}