/* ============================================================
   FOLD 2 — LOGO MARQUEE (white)
   ============================================================ */
/* Equal top and bottom — see the note on .fold2 in base.css. This sheet loads
   after it and repeats the shorthand, so the padding has to be corrected in
   both or the homepage keeps the old 34/14. */
.fold2{background:var(--paper);padding:34px 0;border-bottom:1px solid #eee;overflow-x:clip;overflow-y:visible;position:relative;z-index:2}
.fold2 .cap{
  text-align:center;font-family:var(--mono);font-size:.68rem;letter-spacing:calc(.104em * var(--mono-track, 1));
  text-transform:uppercase;color:var(--grey);margin-bottom:26px;
}
/* Reserve is 0 now that the metric overlays the logo — see base.css. */
.marquee{position:relative;overflow:visible;--tip-reserve:0px;padding-bottom:var(--tip-reserve)}
/* Horizontal fade edges — applied via pseudo-elements so they don't clip the tooltip vertically */
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;width:8%;height:calc(100% - var(--tip-reserve,70px));z-index:10;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
/*
 * A copy of the base.css rule, and the duration has to stay a variable in
 * both. This sheet loads after components.css, so when this said
 * `animation:scroll 34s` the shorthand reset animation-duration and the
 * homepage silently ignored the CMS scroll-speed setting — the only page that
 * did. Every other page ran at whatever the setting said, which is why the
 * industry walls crawled while this one did not.
 */
.track{display:flex;gap:0;width:max-content;animation:scroll var(--peepal-marquee-duration,34s) linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--peepal-marquee-shift,50%)))}}
.logo{
  position:relative;font-family:var(--display);font-weight:600;font-size:1.5rem;
  color:var(--grey);white-space:nowrap;padding:8px 2px;transition:color .25s;cursor:default;
}
.logo:hover{color:var(--ink)}
/*
 * Hover metric — styled once in base.css, and now centred on the logo rather
 * than hung below it, so the only thing left to say here is that it clears the
 * edge fades. Duplicating the pill here just let the two copies drift.
 */
.fold2 .logo .tip{z-index:30}

/* ============================================================
   FOLD 3 — WHO WE ARE (#fafafa)
   ============================================================ */
.fold3{background:var(--mist);padding:clamp(48px,7vw,80px) 0}
.fold3 .eyebrow{margin-bottom:var(--eyebrow-gap)}
.brick{
  margin:0;
  font-family:var(--display);font-weight:500;font-size:var(--fs-brick,clamp(1.6rem,3.2vw,2.6rem));
  line-height:1.24;max-width:24ch;letter-spacing:-.005em;
}
.brick .val{color:var(--orange)}
.who-lead{max-width:58ch;margin-top:26px;color:#333;font-size:var(--fs-lead,1rem);line-height:1.6}

/* The metric panel lives in base.css — it is used on article pages too, and
   this file loads after it, so a copy here silently won the cascade and kept
   the old outlined cards on the one page the design was drawn for. */

/* ============================================================
   FOLD 4 — OUR SERVICES (stacked open sections, scroll-through)
   ============================================================ */
.fold4{background:var(--paper);padding:clamp(56px,8vw,92px) 0 0}
.fold4 .head{margin-bottom:10px}
/* Same eyebrow→heading rhythm as .fold3; --head-gap is set from the CMS. */
.fold4 .head .eyebrow{margin-bottom:var(--head-gap,var(--eyebrow-gap))}
.fold4 h2{font-size:var(--fs-h2,clamp(2rem,4.4vw,3rem));font-weight:700}
.svc-list{margin-top:26px}
.svc{
  position:relative;border-top:1px solid #ececec;
  background:var(--paper);color:var(--ink);
  transition:background .45s ease,color .45s ease;cursor:pointer;overflow:hidden;
}
.svc:last-child{border-bottom:1px solid #ececec}
.svc:hover{background:var(--ink);color:#fff}           /* hover overlay → black */
.svc-inner{
  max-width:var(--maxw);margin:0 auto;padding:clamp(38px,5.5vw,64px) var(--pad);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,60px);align-items:center;
}
/*
 * The illustration column is as tall as the card, not as tall as the picture.
 * It used to be neither: the row was centre-aligned, so the box shrank to the
 * image's own height, and the image itself arrived pre-cropped to 2:1 — which
 * is what was cutting the artwork off. The box now stretches to the full row
 * and the picture is fitted inside it whole (`contain`), so nothing is lost
 * whatever shape the editor uploads.
 */
.svc-illus{
  width:100%;align-self:stretch;display:flex;align-items:center;justify-content:center;
  /* The picture no longer carries its own intrinsic height (it is fitted to
     the box), so the box needs a floor or a card with two lines of copy
     would squash it to nothing. */
  min-height:clamp(180px,22vw,320px);
}
.svc-illus svg{width:100%;height:auto;display:block}
.svc-illus .peepal-media{height:100%;display:flex;align-items:center}
.svc-illus__img,
.svc-illus .peepal-media__img{
  width:100%;height:100%;max-height:100%;
  object-fit:var(--peepal-fit,contain);object-position:var(--peepal-pos,center);
}
.svc-illus svg *{stroke:var(--ink);transition:stroke .45s ease}
.svc:hover .svc-illus svg *{stroke:var(--neon)}
.svc:hover .svc-illus svg{filter:drop-shadow(var(--neon-glow))}
.svc .s-idx{font-family:var(--mono);font-size:.74rem;letter-spacing:calc(.088em * var(--mono-track, 1));color:var(--neon);margin-bottom:12px;display:block}
.svc h3{font-family:var(--display);font-size:var(--fs-svc-title,clamp(1.9rem,4vw,2.9rem));font-weight:700;margin:0 0 14px;line-height:1.04}
.svc .s-body{font-size:var(--fs-svc-body,1.02rem);line-height:1.6;color:#555;max-width:46ch;transition:color .45s}
.svc:hover .s-body{color:rgba(255,255,255,.82)}
/* Always on screen — see the note in base.css. */
.svc .s-cta{margin-top:20px;font-family:var(--mono);font-size:var(--fs-svc-cta,.72rem);letter-spacing:calc(.064em * var(--mono-track, 1));text-transform:uppercase;color:var(--neon);opacity:.9;transition:opacity .4s}
.svc:hover .s-cta,.svc:focus-visible .s-cta{opacity:1}

/* Right-edge Get in Touch rail (fixed) */
.rail{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60;
  background:var(--orange);color:#fff;border:0;border-radius:12px 0 0 12px;
  display:flex;align-items:center;gap:0;padding:0;overflow:hidden;
  box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:padding .3s;
}
.rail .r-icon{padding:16px 14px;font-size:1.1rem}
.rail .r-text{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:.74rem;letter-spacing:calc(.088em * var(--mono-track, 1));text-transform:uppercase;
  max-width:0;opacity:0;transition:max-width .35s ease,opacity .3s ease,padding .3s;padding:0;white-space:nowrap;
}
.rail:hover .r-text{max-width:40px;opacity:1;padding:18px 4px 18px 0}

/* Contact modal — moved to components.css: it is rendered in the footer
   of every page, so its styles cannot live in the home page layer. */



/* ============================================================
   FOLD 5 — TESTIMONIALS (#fafafa, masonry)
   ============================================================ */
.fold5{background:var(--mist);padding:clamp(64px,10vw,120px) 0}
.fold5 .head{margin-bottom:44px}
.fold5 .eyebrow{margin-bottom:var(--eyebrow-gap)}
.fold5 h2{font-size:var(--fs-h2,clamp(2rem,4.4vw,3rem));font-weight:700;margin-top:0}
/* The columns are dealt in PHP (see peepal_testimonials_columns): a portrait
   video sits in the column the editor picked, and the quotes are balanced
   around it so no column ends hundreds of pixels short of the others — that
   much bare section background reads as the rest of the section being dimmed
   behind the video, which is what it was being reported as. */
.masonry{display:flex;gap:22px;align-items:flex-start}
/* `gap:inherit` rather than a repeat of the value, so the section's Gap
   control — which is compiled onto .peepal-items — moves both axes together.
   The cards' own margin is for the narrow-screen fallback below, where the
   columns dissolve and the browser flows them itself. */
.masonry__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:inherit}
.masonry__col>.tcard{margin-bottom:0}
.tcard{
  background:var(--paper);border-radius:16px;padding:26px;margin:0 0 22px;
  break-inside:avoid;border:1px solid #eee;
}
.tcard.quote p{font-family:var(--display);font-size:1.12rem;line-height:1.5;font-style:italic;margin:0 0 18px}
.tcard .who{font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.04em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep)}
.tcard .who b{color:var(--ink);display:block;font-size:.82rem;letter-spacing:0;text-transform:none;font-family:var(--body);margin-bottom:2px}
/*
 * The frame inside this card is taller than the card and overflows top and
 * bottom (see the crop rule below) — on the homepage's portrait clip, by 77px
 * at each end. overflow:hidden is the only thing cropping it.
 *
 * A desktop browser honours that. A mobile one often does not: the player is
 * an iframe on its own compositor layer, and a composited descendant is
 * routinely painted without its ancestor's overflow clip applied — the same
 * gap on every mobile engine, which is why this was reported on all of them
 * and reproduces on none of the desktop ones. What spills is an opaque player
 * rectangle across the full width of the card, over the quote cards above and
 * below it: "the rest of the page greys out around the video".
 *
 * contain:paint and overflow:hidden are not enough for cross-origin iframes
 * on mobile compositors. The fix is structural: the oversized height and the
 * centering transform are applied to .peepal-video (a regular div), not to
 * the iframe. The iframe fills its parent at 100%, so its compositor layer
 * never extends beyond the card. clip-path:inset(0) on the card provides a
 * hardware-backed clip that mobile WebKit/Blink honour even for composited
 * descendants — it creates an actual clip in the compositor tree rather than
 * asking the compositor to respect a CSS overflow it routinely ignores.
 */
.tcard.video{padding:0;overflow:hidden;contain:paint;position:relative;cursor:pointer;clip-path:inset(0);-webkit-clip-path:inset(0);isolation:isolate}
.tcard.video .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#1a1a1a,#333);position:relative;display:flex;align-items:center;justify-content:center}
.tcard.video .play{width:56px;height:56px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center}
.tcard.video .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.tcard.video .dur{position:absolute;bottom:12px;right:12px;font-family:var(--mono);font-size:.7rem;color:#fff;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px}
.tcard.video .vmeta{padding:18px 22px}
.tcard.video .vmeta .who{color:var(--grey-deep)}
/* A clip taller than the card keeps its own shape and overflows top and
   bottom, cropped by the card's clip-path — see peepal_video_ratio_cap().
   --tcard-video-crop is the frame's height as a share of the card's, set per
   card in PHP; without it the frame fills the card exactly as before.

   IMPORTANT: the oversizing is on .peepal-video (a regular div), not on the
   iframe. The iframe fills .peepal-video at inset:0, so its compositor layer
   is exactly the size of .peepal-video and never bleeds past the card's clip
   on any platform. The card's clip-path:inset(0) crops .peepal-video. */
.tcard.video .peepal-video{
  height:var(--tcard-video-crop,100%);position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%);
}
/* Override the component default: inside a tcard the .peepal-video is
   already absolutely positioned and sized by --tcard-video-crop, so the
   aspect-ratio the component sets would fight the explicit height. */
.tcard.video .peepal-video{aspect-ratio:auto}
/* The embed slot and iframe/video fill .peepal-video edge-to-edge.
   No oversizing, no transform — they stay inside their parent's box. */
.tcard.video .peepal-embed{position:absolute;inset:0}
.tcard.video .peepal-video>iframe,
.tcard.video .peepal-video>video{position:absolute;inset:0;width:100%;height:100%}

/* Keep the testimonial video's sound control explicit instead of icon-only. */
.tcard.video .peepal-video__sound{
	border-radius:50%;
	bottom:auto;
	padding:0;
	top:calc(var(--tcard-sound-top,100%) - 52px);
	transform:none;
	width:40px;
}
.tcard.video .peepal-video__sound:hover,
.tcard.video .peepal-video__sound:focus-visible{
  transform:scale(1.06);
}

/* Skip layout and paint work for the heaviest below-fold sections until they
   approach the viewport. `auto` preserves the measured height after a visit,
   while the fallback size keeps the scrollbar stable on the first pass. */
@supports (content-visibility:auto) {
  .fold3,.fold4,.fold5,.fold6{
    content-visibility:auto;
    contain-intrinsic-size:auto 900px;
  }
}

/* ============================================================
   FOLD 6 — INSIGHTS (black carousel)
   ============================================================ */
.fold6{background:var(--ink);color:#fff;padding:clamp(48px,6.5vw,80px) 0;overflow:hidden}
.fold6 .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:30px}
.fold6 .eyebrow{margin-bottom:var(--eyebrow-gap)}
.fold6 h2{color:#fff;font-size:var(--fs-h2,clamp(2rem,4.4vw,3rem));font-weight:700;margin-top:0}
.fold6 .arrows{display:flex;gap:10px}
.fold6 .arrows button{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--line-on-dark);color:#fff;font-size:1.1rem;transition:background .2s,color .2s,box-shadow .2s}
.fold6 .arrows button:hover{background:var(--orange);border-color:var(--neon);box-shadow:var(--neon-glow)}
.itrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none}
.itrack::-webkit-scrollbar{display:none}
.icard{
  flex:0 0 420px;scroll-snap-align:start;background:var(--paper);color:var(--ink);
  border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s;
}
.icard:hover{transform:translateY(-6px)}
.icard .cimg{aspect-ratio:16/8;width:100%;background:var(--mist);border-bottom:1px solid #eee;display:block}
/*
 * :not() past the <defs> node, the same guard components.css uses on
 * .peepal-scene.
 *
 * `.icard .cimg svg` is (0,2,1) and the rule that is meant to keep the shared
 * gradient <defs> svg inert — `.peepal-scene > .peepal-scene__defs`, with
 * width:0;height:0 — is (0,2,0). This one wins, so the node that is supposed
 * to occupy nothing was being stretched to 100%/100% of the card: measured at
 * 390x780, absolutely positioned at left:var(--pad), right edge 410 against a
 * 390 viewport.
 *
 * That is where the page's 20px of phantom horizontal overflow came from — 18
 * at 360, 20 at 390, 38 at 768, in Chromium, Gecko and WebKit alike. It never
 * scrolled or painted, because html/body carry overflow-x:clip, which is
 * exactly the problem: the safety net was hiding it rather than it not
 * existing. scrollWidth still reported it, and on an engine that sizes the
 * layout viewport to the content that is enough to shrink the page.
 */
.icard .cimg svg:not(.peepal-scene__defs){width:100%;height:100%;display:block}
.icard .cimg .line{stroke:#242424;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icard .cimg .acc{stroke:var(--neon);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icard .cimg .dot{fill:#242424;stroke:none}
.icard .cbody{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1}
.icard .tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{
  font-family:var(--mono);font-size:.64rem;letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase;
  display:inline-flex;align-items:center;line-height:1;padding:7px 12px;border-radius:6px;
}
.tag.ind{background:var(--ink);color:#fff}
.tag.top{background:var(--orange-soft);color:var(--orange)}
.icard h3{font-family:var(--display);font-size:var(--fs-h3,1.35rem);font-weight:700;line-height:1.24;margin:0}
.icard .ctype{margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:calc(.056em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep)}

/* ============================================================
   FOLD 7 — FOOTER (black)
   ============================================================ */
.footer{background:var(--ink);color:rgba(255,255,255,.9);padding:clamp(56px,8vw,96px) 0 34px;border-top:1px solid rgba(255,255,255,.18)}
.f-grid{display:grid;grid-template-columns:1.2fr 1.6fr 1.3fr;gap:clamp(28px,5vw,64px)}
.f-brand h2{color:#fff;font-size:var(--fs-h2,1.8rem);font-weight:700;margin-bottom:14px}
.f-brand p{color:var(--text-dim);font-size:.92rem;line-height:1.6;max-width:30ch;margin:0 0 24px}
.btn-outline{
  display:inline-block;padding:13px 26px;border:1.5px solid var(--neon);border-radius:11px;
  background:transparent;color:#fff;font-weight:500;font-size:.95rem;
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.btn-outline:hover,.btn-outline:focus-visible{
  background:var(--orange);border-color:var(--orange);color:#fff;
  transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(255,122,41,.85),var(--neon-glow);
}
.btn-outline:active{transform:translateY(0);box-shadow:var(--neon-glow)}

.f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.f-col h4{font-family:var(--mono);font-size:.74rem;letter-spacing:calc(.072em * var(--mono-track, 1));text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:500;position:relative;display:inline-block;padding-bottom:5px;cursor:default}
.f-col h4::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--neon);box-shadow:var(--neon-glow);transition:width .28s ease}
.f-col h4:hover::after{width:100%}
.f-col ul{list-style:none;padding:0;margin:0}
.f-col li{margin-bottom:11px}
.f-col a,.f-cols .f-sub a{color:rgba(255,255,255,.72);font-size:.9rem}
/*
 * Dim the rest of the column while one link is hovered. The column heading is
 * deliberately left alone — it labels the group rather than belonging to the
 * set being chosen between, so it holds still while the links resolve.
 */
.f-col a,.f-cols .f-sub a{transition:color .22s ease,opacity .22s ease}
.f-col:hover a,.f-sub:hover a{opacity:.35}
.f-col a:hover,.f-sub a:hover{opacity:1;color:#fff}

.f-right .mapwrap{border-radius:14px;overflow:hidden;border:1px solid var(--line-on-dark-faint);margin-bottom:24px;background:#101010}
.f-right .mapwrap svg,.f-right .mapwrap iframe{width:100%;height:170px;display:block;border:0}
.f-news h4{font-family:var(--display);font-size:1.02rem;font-weight:600;color:#fff;margin:0 0 14px;letter-spacing:0;text-transform:none;line-height:1.35}
.f-news .nrow{display:flex;gap:12px;align-items:center}
.f-news input{
  flex:1;padding:11px 2px;border:0;border-bottom:1px solid rgba(255,122,41,.5);
  background:transparent;color:#fff;font-size:.92rem;font-family:var(--body);
  transition:border-color .25s,box-shadow .25s;border-radius:0;
}
.f-news input:focus{outline:none;border-bottom-color:var(--neon);box-shadow:0 6px 8px -6px rgba(255,122,41,.5)}
.f-news input::placeholder{color:rgba(255,255,255,.38)}
.f-news button{padding:11px 4px;border:0;background:transparent;color:var(--neon);font-weight:600;font-size:.8rem;font-family:var(--mono);letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase}
.f-news button:hover{text-shadow:var(--neon-glow)}

.f-bottom{border-top:1px solid var(--line-on-dark-faint);margin-top:56px;padding-top:28px;display:flex;flex-direction:column;align-items:center;gap:18px}
.socials{display:flex;gap:20px}
.socials a{color:var(--grey);transition:color .2s}
.socials a:hover{color:var(--orange)}
.socials svg{width:20px;height:20px}
.copyright{font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.04em * var(--mono-track, 1));color:var(--grey)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .hero-copy h1{font-size:var(--fs-hero-h1-m,var(--fs-hero-h1,clamp(2.1rem,4.4vw,3.4rem)))}
  .hero-copy .sub{font-size:var(--fs-hero-sub-m,var(--fs-hero-sub,clamp(1rem,1.9vw,1.22rem)))}
  .hero-grid{grid-template-columns:1fr}
  .lead{order:2}
  .f-grid{grid-template-columns:1fr}
  .masonry{display:block;columns:2;column-gap:22px}
  .masonry__col{display:contents}
  .masonry__col>.tcard{margin-bottom:22px}
  .rail{display:none}
  .svc-inner{grid-template-columns:1fr;gap:22px}
  .svc-illus{max-width:420px}
}
@media(max-width:640px){
  .mainnav{display:none}
  .navtoggle{display:block}
  .masonry{display:block;columns:1}
  .masonry__col{display:contents}
  .masonry__col>.tcard{margin-bottom:22px}
  .f-cols{grid-template-columns:1fr 1fr}
  .icard{flex:0 0 300px}
}
@media(prefers-reduced-motion:reduce){
  .track{animation:none}
  *{scroll-behavior:auto}
}