/* This padding sits INSIDE the background image: it gives the card breathing room
   but does nothing to separate the band from the blocks around it. That outer
   spacing is set on the wrapping group in the page markup instead, because
   the global styles print ":root :where(.is-layout-flow) > * {margin-block:0}" AFTER this
   stylesheet at equal specificity - a margin declared here is silently zeroed. */
/* Background URL held behind .pf-ship--bg so this 58 KB photo does not download
   during the LCP window - the section starts ~4300px down the front page, but a
   CSS background on a rendered element is fetched regardless of where it sits.
   pf-ship-js adds the class as the section nears the viewport; without JS the
   card simply sits on the #efe6dc fill it already falls back to. */
.pf-ship{
	background:#efe6dc center/cover no-repeat;
	padding:clamp(40px,6vw,76px) clamp(16px,4vw,24px);
}
.pf-ship.pf-ship--bg{background-image:url(/tenants/pfoundry/pages/home/shipping-band.webp)}
/* The figure column is deliberately the wider of the two: the box is a wide subject
   and the side callouts need runway beside it. Narrowing the copy column instead
   would push the headline to four lines. */
.pf-ship__card{
	max-width:1300px;margin:0 auto;border-radius:32px;
	padding:clamp(28px,4vw,54px) clamp(24px,4.4vw,60px);
	background:rgba(38,26,20,.46);
	border:1px solid rgba(255,255,255,.14);
	backdrop-filter:blur(37.5px);-webkit-backdrop-filter:blur(37.5px);
	display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,3.4vw,48px);align-items:center;
}
/* Safari <14 and any engine without backdrop-filter would render near-transparent
   text on a busy photo; fall back to an opaque-enough panel instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
	.pf-ship__card{background:rgba(38,26,20,.86)}
}

.pf-ship__eyebrow{
	font-family:var(--wp--preset--font-family--mono),ui-monospace,monospace;
	font-weight:600;font-size:12px;line-height:1;letter-spacing:.16em;text-transform:uppercase;
	color:rgba(255,255,255,.74);margin:0 0 22px;display:flex;align-items:center;gap:9px;
}
.pf-ship__eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wp--preset--color--primary,#D9772E);flex:none}
.pf-ship__head{
	font-family:var(--wp--preset--font-family--sans, 'Hanken Grotesk'), sans-serif;
	font-weight:400;font-size:clamp(1.55rem,3.1vw,2.5rem);line-height:1.13;letter-spacing:-.01em;
	color:#fff;margin:0 0 clamp(20px,2.4vw,30px);
}
.pf-ship__stat{
	display:flex;align-items:center;justify-content:space-between;gap:26px;
	border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:18px 24px;max-width:430px;
}
.pf-ship__stat p{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.74);white-space:nowrap}
.pf-ship__pill{
	display:inline-block;font-family:var(--wp--preset--font-family--mono),ui-monospace,monospace;
	font-weight:600;font-size:10px;line-height:1;letter-spacing:.12em;
	border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:5px 9px;color:#fff;
}
.pf-ship__fig{
	font-family:var(--wp--preset--font-family--sans, 'Hanken Grotesk'), sans-serif;
	font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1;color:#fff;white-space:nowrap;
	display:flex;align-items:center;gap:9px;
}
.pf-ship__fig svg{width:25px;height:25px;flex:none;color:var(--pf-primary,hsl(24,72%,50%))}
.pf-ship__note{font-size:12px;color:rgba(255,255,255,.55);margin:16px 0 0}

/* Geometry note - the leaders must actually touch the box, so every position is
   derived from the video size instead of eyeballed. Within the keyed 900px frame
   the box sits at the same fractions it always has - .147-.857 across and
   .229-.892 down. Expressed relative to the video's centre:
     box left   .5 - .353    box right  .5 + .357
     lid centre .5 - .115    base centre .5 + .258
   The figure centres the video with flex and callouts are absolute, so the
   figure's 50% IS the video's centre. Change --pf-vid and everything follows.

   Sizing is a three-way constraint: video size, callout width and the runway left
   over for the leader. Seed's capsule is tall and narrow so their callouts have room;
   this box is wide and fills its frame, so the leader is what gets squeezed. At
   346px in the old narrower column the leaders collapsed to zero width entirely.
   Widening the card bought enough room to grow the box past that and still leave
   ~30px of visible line. Shrink the column and this needs revisiting. */
.pf-ship__figure{
	--pf-vid:356px;
	--pf-call-w:138px;
	--pf-gap:12px;                                             /* callout -> leader */
	--pf-box-l:calc(50% - var(--pf-vid) * 0.353);              /* box's left edge  */
	--pf-box-r:calc(50% + var(--pf-vid) * 0.357);              /* box's right edge */
	--pf-lid-y:calc(50% - var(--pf-vid) * 0.115);              /* centre of the lid  */
	--pf-base-y:calc(50% + var(--pf-vid) * 0.258);             /* centre of the base */
	position:relative;display:flex;align-items:center;justify-content:center;
	min-height:430px;padding:0 8px;
}
/* Below ~1200px the card stops being 1300px wide and the fr columns shrink, which
   eats the leader runway. Step the box and callouts down before that happens. */
@media (max-width:1200px){
	.pf-ship__figure{--pf-vid:300px;--pf-call-w:126px;min-height:380px}
}
/* .pf-ship__still is the transparent poster the markup ships by default; the script
   swaps it OUT for the video only once alpha is proven (see the probe in the footer
   script), so it must size identically to the video it may be replaced by. */
/* Deliberately NOT `.pf-ship__figure video`. The <video> still lives in this figure but
   is a 2px decode source that must stay out of the layout; only the canvas the script
   swaps in - and the still it replaces - are laid out here, and they must match exactly. */
.pf-ship__figure .pf-ship__canvas,
.pf-ship__figure .pf-ship__still{width:var(--pf-vid);height:var(--pf-vid);max-width:100%;object-fit:contain;display:block}
.pf-ship__call{position:absolute;width:var(--pf-call-w)}
.pf-ship__call h3{
	font-family:var(--wp--preset--font-family--mono),ui-monospace,monospace;
	font-weight:600;font-size:11px;line-height:1;letter-spacing:.13em;text-transform:uppercase;
	color:#fff;margin:0 0 7px;
}
.pf-ship__call p{font-size:12.5px;line-height:1.46;color:rgba(255,255,255,.74);margin:0}
/* Each callout's heading sits on its leader line (heading is 11px, so -6px). */
.pf-ship__call--a{top:calc(var(--pf-lid-y) - 6px);left:0;text-align:right}
.pf-ship__call--b{top:calc(var(--pf-base-y) - 6px);right:0}
/* Span from the callout's inner edge to the box, leaving a 6px breathing gap.
   Leader A's right edge is measured from the figure's right, hence the sign flip. */
.pf-ship__lead{position:absolute;border-top:1px dashed rgba(255,255,255,.4);height:0}
.pf-ship__lead--a{
	top:var(--pf-lid-y);
	left:calc(var(--pf-call-w) + var(--pf-gap));
	right:calc(50% + var(--pf-vid) * 0.353 + 6px);
	transform-origin:left center;
}
.pf-ship__lead--b{
	top:var(--pf-base-y);
	left:calc(50% + var(--pf-vid) * 0.357 + 6px);
	right:calc(var(--pf-call-w) + var(--pf-gap));
	transform-origin:right center;
}

/* Scroll reveal. Default state is VISIBLE so no-JS and reduced-motion users get
   the finished layout; the script opts in by adding .pf-ship--anim. */
.pf-ship--anim .pf-ship__head,
.pf-ship--anim .pf-ship__stat,
.pf-ship--anim .pf-ship__note,
.pf-ship--anim .pf-ship__call{opacity:0;transform:translateY(14px)}
.pf-ship--anim.is-in .pf-ship__head,
.pf-ship--anim.is-in .pf-ship__stat,
.pf-ship--anim.is-in .pf-ship__note,
.pf-ship--anim.is-in .pf-ship__call{
	opacity:1;transform:none;
	transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}
.pf-ship--anim.is-in .pf-ship__stat{transition-delay:.1s}
.pf-ship--anim.is-in .pf-ship__note{transition-delay:.16s}
.pf-ship--anim.is-in .pf-ship__call--a{transition-delay:.22s}
.pf-ship--anim.is-in .pf-ship__call--b{transition-delay:.3s}
/* Each line draws itself from its own callout out toward the box (origins set above). */
.pf-ship--anim .pf-ship__lead{transform:scaleX(0)}
.pf-ship--anim.is-in .pf-ship__lead{transform:scaleX(1);transition:transform .6s cubic-bezier(.22,.61,.36,1) .34s}
.pf-ship--anim .pf-ship__eyebrow span{opacity:0}
.pf-ship--anim.is-in .pf-ship__eyebrow span{opacity:1;transition:opacity .3s linear}

@media (max-width:900px){
	.pf-ship__card{grid-template-columns:1fr;gap:26px}
	.pf-ship__stat p{white-space:normal}
	.pf-ship__stat{gap:16px}
	/* Stacked: the callouts drop out of absolute positioning into the flow, and the
	   leaders have nothing to point at. Pull the video to the top so the box is seen
	   before the labels describing its parts - in source order callout A precedes it. */
	.pf-ship__figure{min-height:0;flex-direction:column;align-items:stretch;padding:0}
	/* The box only fills .229-.892 of the video's height, so a stacked video carries
	   ~23% empty frame above and ~11% below. Desktop never shows it (the callouts are
	   positioned against the box's real edges); stacked, it reads as dead space.
	   These negative margins claw back most of it without clipping the box. */
	.pf-ship__figure .pf-ship__canvas,
	.pf-ship__figure .pf-ship__still{order:-1;align-self:center;margin:-38px 0 -14px}
	.pf-ship__call{position:static;width:auto;text-align:left!important;margin-top:18px}
	.pf-ship__lead{display:none}
}
@media (prefers-reduced-motion:reduce){
	.pf-ship--anim .pf-ship__head,.pf-ship--anim .pf-ship__stat,.pf-ship--anim .pf-ship__note,
	.pf-ship--anim .pf-ship__call,.pf-ship--anim .pf-ship__eyebrow span{opacity:1;transform:none}
	.pf-ship--anim .pf-ship__lead{transform:scaleX(1)}
}