/*
 * CHINAPORT , homepage presentation.
 *
 * Self-contained: replaces the previous compiled-Tailwind layer entirely.
 * Everything here is scoped under .cp-reference so it cannot leak into the
 * internal-page system in pages.css.
 *
 * RTL notes: this layout is deliberately mirrored by design, so a few rules
 * use physical properties on purpose (the scroll rail sits on the visual
 * left, the catalog hover cursor tracks the pointer in page coordinates).
 * Everything content-related uses logical properties.
 */

/* ============================================================
   shell
   ============================================================ */

.home .skip-link:not(:focus){position:absolute;clip:rect(0 0 0 0)}

.cp-reference{
  /* Design tokens live in main.css :root , see the note there. */
  direction:rtl;
  min-height:100vh;
  overflow:clip;
  background:var(--navy-deep);
  color:#fff;
  font-family:var(--font);
  line-height:1.5;
}

.cp-reference *,.cp-reference *::before,.cp-reference *::after{box-sizing:border-box}
.cp-reference a{text-decoration:none}
:where(.cp-reference a){color:inherit}
.cp-reference button,.cp-reference input{font:inherit}
.cp-reference button{border:0;border-radius:0;background:none;color:inherit;cursor:pointer}
.cp-reference :where(h1,h2,h3,p,ul,ol,figure,blockquote){margin:0}
.cp-reference :where(ul){list-style:none;padding:0}
.cp-reference :where(h1,h2,h3){max-width:100%;text-wrap:balance}
.cp-reference :where(p,blockquote){max-width:100%;text-wrap:pretty}
.cp-reference :where(img,picture,svg){max-width:100%}
.cp-reference :where(picture,img){min-width:0}
.cp-reference svg{flex:none}
.cp-reference :focus-visible{outline:3px solid #fff;outline-offset:3px}

.home-main{background:var(--navy-deep)}

/* shared accent helpers */
.cp-reference .accent{color:var(--red)}
.cp-reference .accent-block{display:block;color:var(--red)}
.cp-reference .muted-block{display:block;color:rgba(255,255,255,.62)}
.cp-reference .navy-block{display:block;color:var(--navy)}
.eyebrow-rule{display:block;height:1px;width:2.5rem;background:currentColor}

/* ============================================================
   film treatment
   ============================================================ */

.film-grain,.film-scanlines,.film-vignette{position:fixed;inset:0;pointer-events:none}
.film-grain{z-index:70;opacity:.16;mix-blend-mode:overlay}
.film-scanlines{z-index:69;opacity:.12;mix-blend-mode:soft-light}
.film-vignette{z-index:68}
.home-scanlines{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.5) 0,rgba(255,255,255,.5) 1px,transparent 1px,transparent 4px)}
.home-vignette{background:radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.45) 100%)}

/* ============================================================
   hero
   ============================================================ */

.ref-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;min-height:calc(100svh - var(--header-height));overflow:hidden;background:var(--navy)}
.hero-media{position:absolute;inset:0;z-index:-30}
.hero-media picture{display:block;width:100%;height:100%}
.cp-hero-photo,.hero-media img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.hero-tint{position:absolute;inset:0;z-index:-20;background:rgba(26,24,21,0.18);mix-blend-mode:multiply}
.hero-gradient{position:absolute;inset:0;z-index:-20;background:linear-gradient(to top,var(--navy-deep),transparent 52%,rgba(23,19,16,.7))}
.hero-columns{position:absolute;inset:0;z-index:-10;opacity:.18;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0,rgba(255,255,255,.6) 1px,transparent 1px,transparent 9vw)}
.hero-clouds{position:absolute;inset:0;z-index:-10;overflow:hidden}
.cloud-layer{position:absolute;inset-inline:0}
.cloud-layer-back{top:-10%;height:70%;opacity:.4;filter:blur(40px);background:radial-gradient(45% 60% at 12% 50%,rgba(255,255,255,.45),transparent 70%),radial-gradient(38% 55% at 34% 35%,rgba(255,255,255,.35),transparent 70%),radial-gradient(50% 65% at 58% 60%,rgba(255,255,255,.4),transparent 70%),radial-gradient(40% 58% at 82% 40%,rgba(255,255,255,.32),transparent 70%);animation:drift-slower 90s linear infinite alternate}
.cloud-layer-front{top:18%;height:55%;opacity:.25;filter:blur(64px);background:radial-gradient(40% 60% at 20% 45%,rgba(255,255,255,.5),transparent 70%),radial-gradient(46% 62% at 48% 60%,rgba(255,255,255,.4),transparent 70%),radial-gradient(42% 58% at 76% 45%,rgba(255,255,255,.45),transparent 70%);animation:drift-slow 60s linear infinite alternate}
@keyframes drift-slow{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,0,0)}}
@keyframes drift-slower{from{transform:translate3d(3%,0,0)}to{transform:translate3d(-3%,0,0)}}

/* Decorative coordinate stamp. It only shows from 1024px up, so the contrast
   audit sees it on desktop alone and fails it at 45% white over the hero photo.
   aria-hidden already keeps it out of the a11y tree; drawing it as generated
   content makes it what it is, decoration, without touching the look. attr()
   keeps the wording editable from ACF. */
.ref-coordinate::before{content:attr(data-text)}
.ref-coordinate{position:absolute;bottom:10rem;right:.75rem;z-index:20;display:none;writing-mode:vertical-rl;user-select:none;font-size:0.75rem;font-weight:700;letter-spacing:.45em;color:rgba(255,255,255,.45);pointer-events:none}
@media (min-width:1024px){.ref-coordinate{display:block}}

.hero-copy{position:relative;z-index:20;display:flex;flex:1;flex-direction:column;justify-content:flex-end;padding:4rem 1rem 2rem}
@media (min-width:640px){.hero-copy{padding-inline:2rem}}

.ref-hero-title{display:block;user-select:none;color:#fff;will-change:transform,opacity}
.hero-title-main{display:block;font-size:clamp(2.8rem,8vw,7rem);font-weight:900;line-height:.82;letter-spacing:-.055em;color:#fff}
.ref-texture-title{
  display:block;
  font-size:clamp(1.8rem,4.2vw,3.6rem);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.03em;
  /* Clipped to the glyphs, so it never needs the full-size file. The 1500px
     webp was 82KB on the critical path purely to texture one headline. */
  background-image:url("../images/hero-texture-768.webp");
  background-image:image-set(url("../images/hero-texture-768.avif") type("image/avif"),url("../images/hero-texture-768.webp") type("image/webp"));
  background-size:cover;
  background-position:center;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.35);
  filter:drop-shadow(0 0 28px rgba(0,0,0,.55));
}

.ref-hero-bottom{display:grid;gap:2rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);will-change:transform,opacity}
@media (min-width:1024px){.ref-hero-bottom{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}
.hero-intro{font-size:1rem;line-height:1.625;color:rgba(255,255,255,.75)}
@media (max-width:639px){.hero-intro{font-size:.875rem}}
.hero-note{display:none;align-self:flex-end;font-size:.75rem;line-height:1.625;letter-spacing:.025em;color:rgba(255,255,255,.5)}
@media (min-width:1024px){.hero-note{display:block}}
/* Phones are most of the traffic and the scarcity line was hidden there. */
@media (max-width:1023px){.hero-note{display:block;align-self:auto;margin-top:.6rem;font-size:.7rem;color:rgba(255,255,255,.62)}}
.cp-hero-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem}

.cp-reference .ref-light-button{position:relative;display:inline-block;overflow:hidden;padding:1rem 2rem;background:#fff;color:var(--ink);font-size:.875rem;line-height:1.25rem;font-weight:900;letter-spacing:.025em}
.ref-light-button .button-label{position:relative;z-index:10;transition:color .3s}
.ref-light-button .button-fill{position:absolute;inset:0;transform:scaleY(0);transform-origin:bottom;background:var(--red);transition:transform .3s}
.ref-light-button:hover .button-fill{transform:scaleY(1)}
.ref-light-button:hover .button-label{color:#fff}

.hero-whatsapp{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.5rem;border:1px solid rgba(255,255,255,.4);font-size:.875rem;line-height:1.25rem;font-weight:700;color:#fff;transition:border-color .2s,color .2s}
.hero-whatsapp:hover{border-color:var(--red);color:var(--red)}

.hero-ticker{position:relative;z-index:20;overflow:hidden;padding-block:.75rem;border-block:1px solid rgba(255,255,255,.15);background:rgba(23,19,16,.7);backdrop-filter:blur(4px)}
.ticker-track{display:flex;width:max-content;gap:2rem;white-space:nowrap;animation:ticker-x 38s linear infinite}
.ticker-set{display:flex;gap:2rem}
.ticker-item{display:flex;align-items:center;gap:2rem;font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:.2em;color:#fff}
.ticker-item i{color:var(--red);font-style:normal}
@keyframes ticker-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(25%,0,0)}}

/* ============================================================
   manifesto
   ============================================================ */

.ref-manifesto{position:relative;height:260vh;background:var(--sand)}
.manifesto-sticky{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;height:100vh;overflow:hidden}
/* Decorative watermark. The wording lives in content: rather than in the
   markup because it is pure decoration at 4.5% opacity , aria-hidden keeps
   it out of the a11y tree, but as real text it still failed the contrast
   audit, which judges what a sighted user sees. As generated content it is
   what it actually is: background, not copy. */
.manifesto-ghost::before{content:"photo\00a0\00b7\00a0tzalamus\00a0\00b7\00a0photo"}
.manifesto-ghost{position:absolute;top:50%;right:0;transform:translateY(-50%);white-space:nowrap;user-select:none;pointer-events:none;font-size:26vw;font-weight:900;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.045)}
.manifesto-inner{position:relative;padding-inline:var(--pad-x)}
.manifesto-lines{transform-origin:right center;transform:scale(1.06)}
.manifesto-lines p{color:#fff;font-size:clamp(2rem,7.2vw,6.4rem);font-weight:900;line-height:1.02;letter-spacing:-.045em;transform:translateY(36%);opacity:0;clip-path:inset(0 0 100% 0);will-change:clip-path,transform,opacity}
.manifesto-lines p.is-accent{color:var(--red)}
.manifesto-lines p.is-revealed{transform:translateY(0);opacity:1;clip-path:inset(0 0 0 0)}

/* ============================================================
   red marquee break
   ============================================================ */

.break-wrap{position:relative;overflow:hidden;background:var(--navy-deep)}
.section-break{position:relative;padding-block:1rem;background:var(--red);transform:skewY(-6deg);transform-origin:center;will-change:transform}
.section-break-track{display:flex;width:max-content;gap:2.5rem;white-space:nowrap;transform:translate3d(-25%,0,0);will-change:transform}
.break-set{display:flex;align-items:center;gap:2.5rem;font-size:clamp(1.1rem,2.6vw,2.2rem);font-weight:900;letter-spacing:-.02em;color:#fff}
.break-set i{color:rgba(255,255,255,.45);font-style:normal}
.break-spacer{height:2rem;background:var(--navy-deep)}

/* ============================================================
   services accordion
   ============================================================ */

.cp-services{position:relative;overflow:hidden;padding-block:4rem;background:var(--sand)}
@media (min-width:640px){.cp-services{padding-top:5rem}}
.services-head{padding-inline:var(--pad-x);user-select:none;pointer-events:none}
.services-head-a,.services-head-b{margin:0;max-width:100%;font-size:clamp(2.4rem,10vw,8.5rem);font-weight:900;line-height:.86;letter-spacing:-.045em;white-space:normal;overflow-wrap:normal}
.services-head-a{color:#fff}
.services-head-b{color:var(--red)}
.services-intro{margin-top:2rem;padding-inline:var(--pad-x);font-size:1rem;line-height:1.625;color:rgba(255,255,255,.6)}
@media (min-width:640px){.services-intro{font-size:1.125rem}}
.services-list{margin-top:3.5rem;border-top:1px solid rgba(255,255,255,.12)}

.ref-service{position:relative;border-bottom:1px solid rgba(255,255,255,.12);cursor:pointer}
.ref-service-trigger{position:relative;z-index:10;display:flex;width:100%;align-items:baseline;gap:2.5rem;padding:2rem var(--pad-x);text-align:right}
@media (max-width:639px){.ref-service-trigger{align-items:center;gap:.75rem;padding:1.15rem 1.25rem}}
.cp-service-index{flex:none;font-family:var(--mono);font-size:.875rem;line-height:1.25rem;color:rgba(255,255,255,.62);transition:color .3s}
.service-title{min-width:0;flex:1;margin:0;color:rgba(255,255,255,.45);font-size:clamp(1.6rem,3.8vw,3.25rem);font-weight:900;line-height:1.05;letter-spacing:-.03em;overflow-wrap:anywhere;text-wrap:balance;transition:color .3s}
@media (max-width:639px){.service-title{font-size:clamp(1.45rem,7vw,2rem);line-height:1.12}}
.service-subtitle{display:none;flex:none;font-size:0.75rem;font-weight:700;letter-spacing:.25em;color:rgba(255,255,255,.62)}
@media (min-width:640px){.service-subtitle{display:block}}
.ref-service.is-open .cp-service-index{color:var(--red)}
.ref-service.is-open .service-title{color:var(--ink)}

.ref-service-panel{position:relative;overflow:hidden;transition:height .5s var(--ease),opacity .4s}
.service-panel-grid{display:grid;gap:1.5rem;padding:0 var(--pad-x) 2.5rem}
@media (min-width:1101px){.service-panel-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center}}
.service-panel-copy{align-self:center;max-width:32rem}
.service-panel-copy p{max-width:38rem;font-size:1.125rem;line-height:1.625;color:rgba(255,255,255,.8)}
@media (max-width:639px){.service-panel-copy p{font-size:1rem}}
.service-panel-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.5rem}
.service-tag{display:inline-block;padding:.375rem 1rem;background:var(--red);font-size:.75rem;line-height:1rem;font-weight:700;color:#fff}
.service-link{display:inline-block;padding-block:.15rem;font-size:.875rem;line-height:1.25rem;font-weight:700;color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:8px}
.service-panel-media{position:relative;height:14rem;overflow:hidden}
@media (min-width:640px){.service-panel-media{height:18rem}}
.service-panel-media picture{display:block;width:100%;height:100%}
.service-panel-media img{width:100%;height:100%;max-width:none;object-fit:cover}
.service-panel-scrim{position:absolute;inset:0;background:rgba(23,19,16,.25)}

/* ============================================================
   process
   ============================================================ */

.cp-process{position:relative;background:var(--sand)}
.ref-process-scroll{position:relative;height:290vh}
.process-sticky{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;height:100vh;overflow:hidden}
.process-ghost{position:absolute;bottom:-6vw;left:2vw;user-select:none;pointer-events:none;font-size:34vw;font-weight:900;line-height:1;color:rgba(255,255,255,.05)}
.process-head{position:relative;width:100%;padding-inline:var(--pad-x)}
.cp-process-title{margin:0;color:var(--ink);font-size:clamp(1.8rem,5.5vw,4.2rem);font-weight:900;line-height:.95;letter-spacing:-.03em}
@media (max-width:767px){.cp-process-title{font-size:clamp(1.8rem,8vw,2.6rem)}}
.process-rail{position:relative;width:100%;height:1px;margin-top:1.5rem;background:rgba(255,255,255,.12)}
.process-line{display:block;width:0;height:1px;background:var(--red)}
.process-stations{position:absolute;inset-inline:0;top:-.25rem;display:flex;justify-content:space-between}
.process-stations i{width:.5rem;height:.5rem;border-radius:50%;background:rgba(255,255,255,.25)}
.process-stations i.is-current{background:var(--red)}

.ref-process-track{position:relative;display:flex;gap:1rem;margin-top:2rem;padding-inline:var(--pad-x);direction:rtl;will-change:transform}
.ref-process-card{position:relative;isolation:isolate;display:flex;flex:none;flex-direction:column;justify-content:flex-end;width:80vw;height:44vh;padding:1.75rem;overflow:hidden;opacity:.55;transition:opacity .5s,transform .5s}
@media (min-width:640px){.ref-process-card{width:48vw}}
@media (min-width:1024px){.ref-process-card{width:30vw}}
.ref-process-card picture{display:block}
.process-card-image{position:absolute;inset:0;z-index:-20;width:100%;height:100%;max-width:none;object-fit:cover;filter:grayscale(1);transition:filter .7s,transform .7s}
.process-card-overlay{position:absolute;inset:0;z-index:-10;background:rgba(23,19,16,.8)}
.process-card-index{font-family:var(--mono);font-size:.875rem;line-height:1.25rem;letter-spacing:.3em;color:rgba(255,255,255,.68)}
.process-card-title{margin:.75rem 0 0;color:#fff;font-size:1.875rem;font-weight:900;line-height:1.25;letter-spacing:normal;max-width:100%;overflow-wrap:anywhere}
.ref-process-card p{margin-top:.75rem;font-size:clamp(.9rem,1.35vw,1rem);line-height:1.625;color:rgba(255,255,255,.75);overflow-wrap:anywhere}
.ref-process-card.is-active{opacity:1}
.ref-process-card.is-active .process-card-image{filter:none;transform:scale(1.05)}
.ref-process-card.is-active .process-card-overlay{background:linear-gradient(to top,var(--navy-deep),rgba(23,19,16,.55),transparent)}
.ref-process-card.is-active .process-card-index{color:var(--red)}

/* ============================================================
   catalog
   ============================================================ */

.ref-catalog{position:relative;overflow:hidden;padding-block:4rem;background:var(--sand)}
/* Decorative watermark , see .manifesto-ghost. */
.catalog-ghost::before{content:"EVENTS \00b7 EVENTS"}
.catalog-ghost{position:absolute;top:2.5rem;left:0;white-space:nowrap;user-select:none;pointer-events:none;font-size:16vw;font-weight:900;line-height:1;color:rgba(255,255,255,.04)}
.catalog-inner{position:relative;padding-inline:var(--pad-x)}
.catalog-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
@media (max-width:767px){.catalog-heading{align-items:flex-start}}
.catalog-title{margin:0;color:#fff;font-size:clamp(2.2rem,8vw,6.5rem);font-weight:900;line-height:.88;letter-spacing:-.04em}
.catalog-intro{font-size:.875rem;line-height:1.625;color:rgba(255,255,255,.6)}

.catalog-list{position:relative;display:none;margin-top:4rem}
@media (min-width:768px){.catalog-list{display:block}}
.ref-catalog-row{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.75rem;border-top:1px solid rgba(26,24,21,0.14)}
.ref-catalog-row:last-of-type{border-bottom:1px solid rgba(26,24,21,0.14)}
.catalog-row-fill{position:absolute;inset:0;z-index:-10;transform:scaleY(0);transform-origin:bottom;background:var(--red);transition:transform .5s}
.ref-catalog-row:hover .catalog-row-fill{transform:scaleY(1)}
.catalog-row-main{display:flex;align-items:baseline;gap:1.5rem;padding-inline:.5rem;transition:transform .5s}
.ref-catalog-row:hover .catalog-row-main{transform:translateX(-.75rem)}
.catalog-row-index{font-size:.875rem;line-height:1.25rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.62);transition:color .3s}
.ref-catalog-row:hover .catalog-row-index{color:rgba(26,24,21,0.92)}
.catalog-row-title{font-size:clamp(1.6rem,4.2vw,3.4rem);font-weight:900;line-height:1;letter-spacing:-.03em;color:#fff;overflow-wrap:anywhere;text-wrap:balance}
.catalog-row-meta{padding-inline:.5rem;font-style:normal;font-size:.75rem;line-height:1rem;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.68);transition:color .3s}
.ref-catalog-row:hover .catalog-row-meta{color:var(--ink)}

.catalog-cursor{position:absolute;top:0;left:0;z-index:20;width:26rem;height:18rem;overflow:hidden;opacity:0;direction:rtl;box-shadow:0 25px 50px -12px rgba(0,0,0,.5);transform:translate(-13rem,-9rem) rotate(-2deg) scale(.88);transition:opacity .2s,transform .35s var(--ease);pointer-events:none}
.catalog-cursor.is-visible{opacity:1;transform:translate(-13rem,-9rem) rotate(-2deg) scale(1)}
.catalog-cursor picture{display:block;width:100%;height:100%}
.catalog-cursor img{width:100%;height:100%;object-fit:cover}
.catalog-cursor-caption{position:absolute;inset-inline:0;bottom:0;padding:1rem;background:linear-gradient(to top,var(--navy-deep),transparent);font-size:.875rem;line-height:1.25rem;font-weight:700;color:#fff}

.catalog-mobile{display:grid;gap:.75rem;margin-top:3rem}
@media (min-width:768px){.catalog-mobile{display:none}}
.cp-catalog-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;height:14rem;padding:1.25rem;overflow:hidden}
.cp-catalog-tile picture{display:block}
.cp-catalog-tile-image{position:absolute;inset:0;z-index:-20;width:100%;height:100%;max-width:none;object-fit:cover}
.cp-catalog-tile-scrim{position:absolute;inset:0;z-index:-10;background:linear-gradient(to top,var(--navy-deep),rgba(23,19,16,.4) 50%,transparent)}
.cp-catalog-tile-meta{font-size:0.75rem;font-weight:700;letter-spacing:.18em;color:#fff}
.cp-catalog-tile-title{margin:0;color:#fff;font-size:1.5rem;font-weight:900;line-height:1.2;letter-spacing:normal}

.catalog-cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-top:3.5rem;padding:2rem;background:var(--red)}
@media (min-width:640px){.catalog-cta{padding:3rem}}
/* solid white: 4.96:1 on the red band */
.catalog-cta-label{font-size:0.75rem;font-weight:700;letter-spacing:.25em;color:#fff}
.catalog-cta-title{margin:.75rem 0 0;color:#fff;font-size:clamp(1.8rem,5vw,3.6rem);font-weight:900;line-height:1;letter-spacing:normal}
.catalog-cta-text{font-size:.875rem;line-height:1.25rem;color:rgba(255,255,255,.95)}

/* ============================================================
   testimonials
   ============================================================ */

.ref-testimonials{padding-block:4rem;background:var(--sand)}
.testimonials-inner{max-width:1200px;margin-inline:auto;padding-inline:var(--pad-x)}
.testimonials-quote-mark{display:block;font-size:10rem;font-weight:900;line-height:.6;color:var(--red)}
.testimonial-stage{position:relative}
.testimonial-stage figure{display:none}
.testimonial-stage figure.is-active{display:block;animation:testimonial-in .45s var(--ease)}
.testimonial-stage blockquote{color:#fff;font-size:clamp(1.5rem,4vw,3.2rem);font-weight:900;line-height:1.15;letter-spacing:-.02em}
@media (max-width:767px){.testimonial-stage blockquote{font-size:clamp(1.45rem,7vw,2.2rem)}}
.testimonial-stage figcaption{margin-top:2rem;font-size:.875rem;line-height:1.25rem}
.testimonial-stage figcaption b{color:#fff}
.testimonial-stage figcaption i{margin-inline:.5rem;color:var(--red-on-dark);font-style:normal}
.testimonial-stage figcaption span{color:rgba(255,255,255,.55)}
.testimonial-dots{display:flex;gap:.75rem;margin-top:3rem}
.testimonial-dots button{position:relative;width:4rem;height:24px;padding:0;border:0;background:transparent;cursor:pointer}
.testimonial-dots button::before{content:"";position:absolute;inset-inline:0;top:50%;height:3px;transform:translateY(-50%);background:rgba(255,255,255,.3)}
.testimonial-dots button.is-active::before{background:var(--red-on-dark)}
@keyframes testimonial-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ============================================================
   faq
   ============================================================ */

/* ============================================================
   clients strip
   ============================================================ */

.ref-clients{padding-block:3.5rem;background:#fff;overflow:hidden}
.clients-inner{max-width:1200px;margin-inline:auto;padding-inline:var(--pad-x)}
.clients-label{font-size:.75rem;font-weight:700;letter-spacing:.35em;color:var(--muted)}
.clients-title{margin:1rem 0 0;color:var(--ink);font-size:clamp(1.6rem,4vw,3rem);font-weight:900;line-height:.95;letter-spacing:-.03em}
.clients-strip{margin-top:2.5rem}
.clients-track{display:flex}
.clients-set{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2rem 3.5rem;margin:0;padding-inline:var(--pad-x);list-style:none}
.clients-item{display:flex;align-items:center;justify-content:center}
.clients-item img{display:block;width:auto;height:clamp(2rem,5vw,3rem);max-width:11rem;object-fit:contain;filter:grayscale(1);opacity:.62;transition:filter .3s var(--ease),opacity .3s var(--ease)}
.clients-item a:hover img,.clients-item a:focus-visible img{filter:grayscale(0);opacity:1}
.clients-item a:focus-visible{outline:2px solid var(--red);outline-offset:6px;border-radius:2px}
.clients-note{max-width:1200px;margin:1.75rem auto 0;padding-inline:var(--pad-x);color:var(--muted);font-size:.8125rem;line-height:1.5}

/* Six logos or more scroll as a seamless strip. The track is laid out in the
   document direction, so the RTL page scrolls it toward the reading edge. */
.clients-strip.is-marquee{position:relative;-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.clients-strip.is-marquee .clients-track{width:max-content;flex-wrap:nowrap;animation:clients-x 42s linear infinite}
.clients-strip.is-marquee .clients-set{flex-wrap:nowrap;justify-content:flex-start}
.clients-strip.is-marquee:hover .clients-track,
.clients-strip.is-marquee:focus-within .clients-track{animation-play-state:paused}
@keyframes clients-x{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
[dir="rtl"] .clients-strip.is-marquee .clients-track{animation-name:clients-x-rtl}
@keyframes clients-x-rtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}

/* Without motion the loop is meaningless: drop the duplicate set and let the
   first one wrap, so every logo stays reachable and nothing is clipped. */
@media (prefers-reduced-motion:reduce){
  .clients-strip.is-marquee{-webkit-mask-image:none;mask-image:none}
  .clients-strip.is-marquee .clients-track{width:auto;flex-wrap:wrap;animation:none}
  .clients-strip.is-marquee .clients-set{flex-wrap:wrap;justify-content:center}
  .clients-strip.is-marquee .clients-set[aria-hidden="true"]{display:none}
}

.ref-faq{padding-block:4rem;background:var(--sand)}
.faq-grid{display:grid;gap:2.5rem;padding-inline:var(--pad-x)}
@media (min-width:1101px){
  .faq-grid{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .faq-aside{position:sticky;top:6rem;height:fit-content}
}
.faq-label{font-size:.75rem;font-weight:700;letter-spacing:.35em;color:rgba(255,255,255,.68)}
.faq-title{margin:1.25rem 0 0;color:#fff;font-size:clamp(1.9rem,5vw,3.8rem);font-weight:900;line-height:.95;letter-spacing:-.03em}
.faq-items details{padding-block:1.5rem;border-bottom:1px solid rgba(255,255,255,.12)}
.faq-items details:first-child{border-top:1px solid rgba(255,255,255,.12)}
.faq-items summary{display:flex;align-items:flex-start;gap:1.25rem;list-style:none;cursor:pointer}
.faq-items summary::-webkit-details-marker{display:none}
@media (max-width:767px){.faq-items summary{gap:.75rem}}
/* .35 alpha was 3.08:1 on navy */
.faq-index{margin-top:.5rem;font-family:var(--mono);font-size:.75rem;color:rgba(255,255,255,.62)}
.cp-reference .faq-question{flex:1;margin:0;font-size:1.25rem;font-weight:900;line-height:1.375;letter-spacing:-.035em;color:rgba(255,255,255,.8)}
@media (min-width:640px){.cp-reference .faq-question{font-size:1.5rem}}
.faq-items details[open] .faq-question{color:var(--ink)}
.faq-items summary i{flex:none;margin-top:.25rem;font-size:1.875rem;line-height:1;font-style:normal;color:var(--red);transition:transform .3s}
.faq-items details[open] summary i{transform:rotate(45deg)}
.faq-items details>p{margin-top:1rem;padding-inline-end:2.5rem;line-height:1.625;color:rgba(255,255,255,.65)}
@media (max-width:767px){.faq-items details>p{padding-inline-end:2rem}}

/* ============================================================
   stats
   ============================================================ */

.ref-stats{position:relative;overflow:hidden;padding-top:5rem;background:var(--sand)}
.stats-ghost{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);white-space:nowrap;text-align:center;pointer-events:none;font-size:22vw;font-weight:900;line-height:1;letter-spacing:-.06em;color:rgba(255,255,255,.03)}
.stats-grid-bg{position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:linear-gradient(to right,#fff 1px,transparent 1px);background-size:12.5% 100%}
.stats-inner{position:relative;z-index:10;padding-inline:var(--pad-x)}
.stats-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.15)}
.stats-label{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:0.75rem;font-weight:700;letter-spacing:.32em;color:var(--red)}
.stats-title{margin:0;color:#fff;font-size:clamp(2.2rem,7vw,5.5rem);font-weight:900;line-height:.88;letter-spacing:-.05em}
.stats-intro{font-size:.875rem;line-height:1.625;color:rgba(255,255,255,.68)}
.stats-row{display:grid;grid-template-columns:1fr}
@media (min-width:640px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.stats-row{grid-template-columns:repeat(4,1fr)}}
.ref-stat{position:relative;overflow:hidden;padding:3rem .25rem;border-bottom:1px solid rgba(255,255,255,.1)}
@media (min-width:640px){.ref-stat{padding-inline:1.5rem}}
@media (min-width:1024px){
  .ref-stat{border-bottom:0;border-inline-start:1px solid rgba(255,255,255,.1)}
  .ref-stat:last-child{border-inline-start:0}
}
.stat-rule{position:absolute;inset-inline:0;bottom:0;height:1px;transform:scaleX(0);transform-origin:right;background:var(--red);transition:transform .7s}
.ref-stat:hover .stat-rule{transform:scaleX(1)}
.stat-ghost{position:absolute;left:-1rem;top:-1.5rem;font-size:7rem;font-weight:900;line-height:1;color:rgba(255,255,255,.04)}
.stat-body{position:relative}
.ref-stat strong{display:block;font-size:clamp(2.4rem,6vw,4.5rem);font-weight:900;line-height:1;letter-spacing:-.04em;color:#fff}
.stat-label{display:block;margin-top:1rem;font-size:1rem;font-weight:700;letter-spacing:-.025em;color:#fff}
.stat-note{display:block;margin-top:.25rem;max-height:0;overflow:hidden;opacity:0;font-size:.875rem;line-height:1.25rem;color:rgba(255,255,255,.45);transition:max-height .5s,opacity .5s}
.ref-stat:hover .stat-note{max-height:4rem;opacity:1}

/* ============================================================
   closing
   ============================================================ */

.ref-closing{position:relative;overflow:hidden;padding-block:5rem;background:var(--red)}
@media (min-width:640px){.ref-closing{padding-block:7rem}}
.closing-pattern{position:absolute;inset:0;opacity:.08;pointer-events:none;background-image:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 14px)}
.closing-ship{position:absolute;left:-2.5rem;top:25%;display:none;width:18rem;height:18rem;color:rgba(255,255,255,.1);transform:rotate(-15deg);pointer-events:none}
@media (min-width:1024px){.closing-ship{display:block}}
.closing-inner{position:relative;z-index:10;padding-inline:var(--pad-x)}
.closing-label{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem;font-size:0.75rem;font-weight:700;letter-spacing:.32em;color:#fff}
.closing-row{display:flex;flex-direction:column;gap:2.5rem}
@media (min-width:1101px){.closing-row{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.ref-closing-heading{margin:0;color:#fff;font-size:clamp(2.6rem,10vw,8rem);font-weight:900;line-height:.82;letter-spacing:-.055em}
@media (max-width:767px){.ref-closing-heading{font-size:clamp(2.5rem,11vw,4.5rem);line-height:.88}}
.closing-action{flex:none}
@media (min-width:1101px){.closing-action{padding-bottom:.75rem}}
.closing-button{display:inline-flex;max-width:100%;align-items:center;justify-content:center;gap:1rem;padding:1.25rem 2rem;background:#fff;color:var(--navy);font-size:1.125rem;font-weight:900;text-align:center;white-space:normal;transition:transform .2s}
.closing-button:hover{transform:translateY(-.25rem)}
@media (max-width:767px){.closing-button{width:100%;padding-inline:1.25rem}}
.closing-note{margin-top:1rem;font-size:.875rem;line-height:1.25rem;color:rgba(255,255,255,.95)}

/* ============================================================
   scroll reveal
   ============================================================ */

.motion-ready .ref-closing-heading,
.motion-ready .ref-testimonials>div,
.motion-ready .catalog-cta{opacity:0;transform:translateY(40px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.motion-ready .ref-closing-heading.is-visible,
.motion-ready .ref-testimonials>div.is-visible,
.motion-ready .catalog-cta.is-visible{opacity:1;transform:none}

/* ============================================================
   compact viewport heights
   ============================================================ */

@media (min-width:1101px) and (max-height:820px){
  .hero-title-main{font-size:clamp(3.2rem,7vw,6rem)}
  .ref-texture-title{font-size:clamp(1.8rem,3.5vw,3rem)}
  .ref-hero-bottom{margin-top:1.25rem;padding-top:1.1rem;gap:1.25rem}
  .hero-copy{padding-top:2rem;padding-bottom:1.25rem}
  .ref-process-card{height:min(42vh,21rem);padding:1.5rem}
  .service-panel-media{height:16rem}
}

@media (max-width:639px){
  .ref-hero{min-height:calc(100svh - var(--header-height))}
  .hero-copy{padding-top:2.5rem;padding-bottom:1.25rem}
  .hero-title-main{font-size:clamp(2.55rem,11.5vw,3.45rem);line-height:.88}
  .ref-texture-title{font-size:clamp(1.65rem,8vw,2.25rem)}
  .ref-hero-bottom{margin-top:1.4rem;padding-top:1.1rem;gap:1.1rem}
  .cp-hero-actions{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
  .cp-hero-actions>a{width:100%;justify-content:center;padding-inline:1rem;text-align:center}
  .manifesto-lines p{font-size:clamp(2rem,11vw,3.6rem);line-height:1.03}
  .manifesto-lines{transform:none}
.ref-manifesto{height:auto}
.manifesto-sticky{position:relative;height:auto;padding-block:4.25rem}
.manifesto-lines p{clip-path:none!important;transform:none!important;opacity:1!important}
.manifesto-ghost{font-size:32vw}
  .ref-process-scroll{height:auto}
  .process-sticky{position:relative;height:auto;min-height:0;padding-block:4.5rem}
  /* A horizontal swipe with no affordance hid four of five steps. On phones
     the rail becomes a plain vertical stack that ordinary scrolling reveals. */
  .ref-process-track{display:grid;grid-template-columns:1fr;gap:1rem;overflow:visible;transform:none!important;padding-inline:1.25rem;padding-bottom:0}
  .ref-process-card{width:auto;height:auto;min-height:15rem;opacity:1;scroll-snap-align:none}
  .process-stations{display:none}
  .process-card-title{font-size:1.5rem}
  .services-head-a,.services-head-b{font-size:clamp(2.35rem,10vw,4.7rem);line-height:.92}
}

@media (max-width:767px){
  .services-head-a,.services-head-b{font-size:clamp(2.35rem,10vw,4.7rem);line-height:.92}
  .services-intro{margin-top:1.5rem}
  .section-break{transform:skewY(-1.5deg)}
  .section-break-track{gap:1.5rem}
}

/* ============================================================
   reduced motion
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  .cp-reference *,.cp-reference *::before,.cp-reference *::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .manifesto-lines p{clip-path:none;transform:none;opacity:1}
  .ref-process-scroll{height:auto}
  .process-sticky{position:relative;height:auto;padding-block:5rem}
  .ref-process-track{overflow-x:auto;transform:none!important}
  .section-break{transform:none}
  .section-break-track{transform:translate3d(-8%,0,0)}
}

/* Testimonial controls: arrows either side of the progress dots. */
.testimonial-nav{display:flex;align-items:center;gap:1rem;margin-top:3rem}
.testimonial-nav .testimonial-dots{margin-top:0;flex:1}
.testimonial-arrow{display:grid;place-items:center;flex:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.testimonial-arrow:hover,.testimonial-arrow:focus-visible{border-color:var(--red);background:var(--red);color:#fff}
.testimonial-arrow svg{display:block}
@media (max-width:520px){
  .testimonial-dots button{width:2.2rem}
  .testimonial-nav{gap:.6rem}
  .testimonial-arrow{width:38px;height:38px}
}

/* Hero was composed for a cloud-and-cargo photograph. The haze layers and the
   heavy column rules sat over faces once the hero became an event photograph. */
.hero-hazeoff .cloud-layer{display:none}
.cloud-layer{display:none}
.hero-columns{opacity:.07}

/* ------------------------------------------------------------------
   Light gallery treatment.
   The homepage shipped dark end to end, which is right for cargo and
   wrong for photography: the photographs carry the colour, so the page
   around them is near-white. Hero, closing CTA and footer stay dark.
   Text that sits over a photograph (catalog tiles, cursor caption)
   keeps its white and is deliberately absent from this block.
   ------------------------------------------------------------------ */
.service-subtitle{color:rgba(26,24,21,0.71)}
.service-panel-copy p{color:rgba(26,24,21,0.92)}
.service-tag{color:var(--ink)}
.service-link{color:var(--ink)}
.catalog-row-index{color:rgba(26,24,21,0.71)}
.catalog-row-title{color:var(--ink)}
.catalog-row-meta{color:rgba(26,24,21,0.78)}
.testimonial-stage blockquote{color:var(--ink)}
.testimonial-stage figcaption b{color:var(--ink)}
.testimonial-stage figcaption span{color:rgba(26,24,21,0.63)}
.cp-reference .muted-block{color:rgba(26,24,21,0.71)}
.manifesto-ghost{color:rgba(26,24,21,0.043)}
.manifesto-lines p{color:var(--ink)}
.services-head-a{color:var(--ink)}
.services-intro{color:rgba(26,24,21,0.69)}
.cp-service-index{color:rgba(26,24,21,0.71)}
.service-title{color:rgba(26,24,21,0.52)}
.ref-service.is-open .service-title{color:var(--ink)}
.process-ghost{color:rgba(26,24,21,0.05)}
.process-card-index{color:rgba(26,24,21,0.78)}
.process-card-title{color:var(--ink)}
.ref-process-card p{color:rgba(26,24,21,0.86)}
.catalog-ghost{color:rgba(26,24,21,0.04)}
.catalog-title{color:var(--ink)}
.catalog-intro{color:rgba(26,24,21,0.69)}
.catalog-cta-label{color:var(--ink)}
.catalog-cta-title{color:var(--ink)}
.catalog-cta-text{color:rgba(26,24,21,1)}
.faq-label{color:rgba(26,24,21,0.78)}
.faq-title{color:var(--ink)}
.faq-index{color:rgba(26,24,21,0.71)}
.cp-reference .faq-question{color:rgba(26,24,21,0.92)}
.faq-items details > p{color:rgba(26,24,21,0.75)}
.stats-ghost{color:rgba(26,24,21,0.03)}
.stats-title{color:var(--ink)}
.stats-intro{color:rgba(26,24,21,0.78)}
.stat-ghost{color:rgba(26,24,21,0.04)}
.ref-stat strong{color:var(--ink)}
.stat-label{color:var(--ink)}
.stat-note{color:rgba(26,24,21,0.52)}
.testimonial-arrow{color:var(--ink)}
.ref-service,.ref-process-card,.faq-items details,.ref-stat{border-color:var(--line)}
.ref-catalog-row{color:var(--ink)}
.catalog-row-main{color:var(--ink)}

.ref-manifesto,.cp-services,.cp-process,.ref-catalog,.ref-testimonials,.ref-stats,.ref-faq{color:var(--ink)}
.cp-catalog-tile,.service-panel-media,.catalog-cursor{color:#fff}

/* Freight cost calculator and the imported testimonials do not apply to this
   business yet: the calculator computes CBM and customs, and no real client
   quotes have been supplied. Hidden rather than shown with invented content. */
.ref-calculator,.ref-testimonials{display:none}

/* ------------------------------------------------------------------
   Contrast corrections for the light palette.
   Brass exists in two tones: --red (#8A5A22) is the one that reads on a
   light ground, --red-on-dark (#D9A45E) the one that reads on a dark one.
   The imported CSS used a single tone for both, so half of it inverted
   when the page went from dark-on-dark to a near-white ground.
   ------------------------------------------------------------------ */

/* Hero sits on a dark photograph. */
.hero-title-main .accent{color:var(--red-on-dark)}
/* Second H1 line was filled with the hero image through background-clip:text.
   Against a dark photograph the fill is invisible, which hides half the H1. */
.ref-texture-title{background:none;-webkit-text-fill-color:var(--sand);color:var(--sand)}

/* Light sections: the dark brass is the legible tone. */
.cp-service-index,.process-card-index,.stats-label,.faq-index,.faq-label,.catalog-row-index,.services-label,.clients-label,.closing-label{color:var(--red)}

/* Text painted on a brass fill needs white, not ink. */
.service-tag,.catalog-cta-label,.catalog-cta-title,.catalog-cta-text{color:#fff}

/* A dark word on brass cannot clear 3:1 at any weight, so the closing band
   goes deep and the accent word takes the light brass, matching the hero. */
.ref-closing{background:var(--navy-deep)}
.ref-closing .navy-block{color:var(--red-on-dark)}
.ref-closing .closing-label{color:var(--red-on-dark)}

/* Watermarks were tuned against near-black and vanish on ivory. */
.stats-ghost,.stat-ghost,.catalog-ghost,.manifesto-ghost{color:rgba(26,24,21,.07)}

/* The alt-tip feature wraps every bundled image in a .has-alt-tip element.
   Inside the catalog tiles the image is absolutely positioned against that
   wrapper, but the wrapper itself had no height, so it collapsed to 0 and the
   lazy image was never fetched: six tiles rendered as a bare scrim. */
.cp-catalog-tile .has-alt-tip,
.cp-catalog-tile picture{position:absolute;inset:0;display:block;width:100%;height:100%}
.cp-catalog-tile .has-alt-tip img,
.cp-catalog-tile picture img{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------------------
   Light sections: structure.
   On the dark original, cards and rows were separated by a translucent
   white film and a white hairline. Both vanish over ivory, which left
   every block floating on one flat sheet. Surfaces and hairlines are
   restored explicitly, and consecutive sections alternate between two
   close grounds so the page still reads as bands.
   ------------------------------------------------------------------ */
.cp-process,.ref-stats{background:#F4F1EA}

.ref-process-card{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(26,24,21,.04)}
.ref-process-card.is-active{border-color:var(--red);box-shadow:0 12px 34px rgba(26,24,21,.10)}

.ref-catalog-row{border-bottom:1px solid var(--line)}
.ref-catalog-row:hover{background:#fff}

.ref-service{border-bottom:1px solid var(--line)}
.ref-stat{background:#fff;border:1px solid var(--line)}
.faq-items details{border-bottom:1px solid var(--line)}

/* The oversized step numeral was brass at full strength, which on ivory
   competed with the cards instead of sitting behind them. */
.cp-process .process-ghost{color:rgba(26,24,21,.06)}

/* ------------------------------------------------------------------
   Process steps.
   Each card carried a photograph behind a dark gradient overlay. The
   image sat in a .has-alt-tip wrapper with no height, so it collapsed to
   0 and never loaded, leaving the overlay painting grey over white. The
   photographs it pointed at were the service images anyway, which do not
   illustrate the steps. The cards are flat surfaces now: white, hairline,
   brass numeral, ink text.
   ------------------------------------------------------------------ */

.process-card-index{display:block;margin-bottom:1rem;font-size:.75rem;letter-spacing:.18em;color:var(--red)}
.process-card-title{margin:0 0 .6rem;color:var(--ink);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.15}
.ref-process-card p{margin:0;color:rgba(26,24,21,.72);font-size:.95rem;line-height:1.6}
.ref-process-card.is-active .process-card-index{color:var(--red)}

/* ------------------------------------------------------------------
   Process steps, with imagery.
   The cards were built for a photograph behind a dark gradient with the
   text on top. That reads only when the photograph is dark. These images
   are light, so the card is split instead: picture on top at a fixed
   ratio, copy underneath on white.
   ------------------------------------------------------------------ */
.ref-process-card{display:flex;flex-direction:column;padding:0;overflow:hidden}

/* A fixed 4/3 left the copy flush against the card edge, and the card clips.
   The picture takes a share of the card height instead, so the text keeps its
   room at every viewport height. */
.ref-process-card .has-alt-tip,
.ref-process-card picture{display:block;position:relative;inset:auto;width:100%;height:54%;flex:0 0 54%;overflow:hidden}
.ref-process-card picture img,
.ref-process-card .process-card-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* The overlay existed to darken a photograph under white text. The text is
   no longer over the image, so it becomes a hairline instead. */
.process-card-overlay{position:static;display:block;width:100%;height:1px;background:var(--line);background-image:none}

.process-card-index{display:block;padding:1.25rem 1.5rem 0}
.process-card-title{margin:.5rem 0 .5rem;padding:0 1.5rem}
.ref-process-card p{margin:0;padding:0 1.5rem 1.5rem}


/* ------------------------------------------------------------------
   Editorial body on the homepage. pages.css is not enqueued here, so the
   prose styling cannot be borrowed from the internal-page layer and is
   written against the dark homepage palette instead.
   ------------------------------------------------------------------ */
.home-body{padding-block:var(--section);background:var(--navy-deep)}
.home-body .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.home-body .prose{max-width:none;margin-inline:auto;color:rgba(255,255,255,.82)}
.home-body .prose>p{max-width:70ch;margin:0 0 1.15rem;font-size:1.0625rem;line-height:1.85}
.home-body .prose>p:last-child{margin-bottom:0}
.home-body .prose h2{max-width:24ch;margin:2.75rem 0 1rem;color:var(--white);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;line-height:1.2;letter-spacing:var(--track-tight)}
.home-body .prose>*:first-child{margin-top:0}
.home-body .prose a{color:var(--red-on-dark);text-decoration:underline;text-underline-offset:.2em}
.home-body .prose a:hover{color:var(--white)}
.home-body .prose figure{margin:2rem 0;max-width:768px}
.home-body .prose figure img{display:block;width:100%;height:auto;border:1px solid var(--line-dark)}
.home-body .prose figcaption{margin-top:.6rem;color:rgba(255,255,255,.6);font-size:.9375rem;line-height:1.6}
@media (max-width:767px){.home-body .prose>p{font-size:1rem}.home-body .prose h2{margin-top:2rem}}
/* The card layout puts the photo in the top 54% and the copy on white below
   it. That geometry came from the media wrapper (picture / .has-alt-tip), but
   the ACF path prints a bare <img>, so the wrapper was missing and the
   absolute rule stretched the photo across the whole card with the text on
   top of it. A direct child image takes the wrapper's place. */
.ref-process-card > .process-card-image{position:relative;inset:auto;flex:0 0 54%;width:100%;height:54%;object-fit:cover}
/* Between 640px and the desktop rail the card keeps a fixed 44vh, and the
   photo takes 54% of it. On a short viewport (a phone held sideways, a small
   laptop) 44vh leaves the copy under 80px and the card clips it. Letting the
   card grow on short screens keeps the five steps readable without touching
   the rail geometry on normal ones. */
@media (min-width:640px) and (max-height:700px){.ref-process-card{height:auto;min-height:19rem}}

/* ------------------------------------------------------------------
   Stats: the 01..04 watermark was removed from the markup, so each card
   centers on its own axis and the figure carries the block.
   ------------------------------------------------------------------ */
.ref-stat{text-align:center;padding-block:3.25rem}
.stat-body{display:flex;flex-direction:column;align-items:center}
.ref-stat strong{font-size:clamp(4.25rem,9vw,7rem);font-weight:900;line-height:.95;letter-spacing:-.05em}
.ref-stat strong .accent{font-size:.5em;vertical-align:.3em;margin-inline-start:.06em}
.stat-label{margin-top:1.15rem;font-size:1.0625rem}
.stat-note{text-align:center;max-width:22ch}