/* Purpose: Section styling, built to the Figma homepage.
   Frame 1440 · content column 1240 · 80px gutters · 80px section bands.
   Every value here comes from a token; the numbers in comments are the Figma spec. */

/* ============================================================
   HERO
   Wordmark centred over the footage; headline bottom-left, sub and
   buttons bottom-right. 700px tall in the design.
   ============================================================ */
.hero--video{position:relative;min-height:auto;padding:0;display:block;overflow:visible}
.hero--video .hero__track{position:relative}
.hero--video .hero__stage{
  position:relative;
  /* The hero owns the first screen. 100vh is the value everywhere and the only one older
     browsers understand - on its own, an unsupported svh would be dropped and leave the
     stage with no minimum height at all. svh then refines it on phones, where it is the
     area actually visible with the browser chrome showing, so the buttons land above the
     fold on first paint rather than behind the URL bar. */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:space-between;
  overflow:hidden;
  isolation:isolate;
  padding-block:calc(var(--header-offset) + var(--space-40)) var(--space-60, 60px);
}
.hero--video.is-scroll-hero .hero__track{height:var(--hero-track, 320vh)}
.hero--video.is-scroll-hero .hero__stage{position:sticky;top:0}

.hero__video{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;background:var(--c-bg);
}

/* Orbitron Bold 120px, 150px line, 2px tracking, white fading to transparent. */
.hero__wordmark{
  font-family:var(--font-display);
  font-weight:var(--weight-bold);
  font-size:clamp(var(--fs-40), 8.4vw, var(--fs-120));
  line-height:1.25;
  letter-spacing:2px;
  text-align:center;
  color:var(--c-text-hero);
  pointer-events:none;
  white-space:nowrap;
  margin-inline:auto;
}

/* The gradient lives on each letter rather than on the word.
   With background-clip:text on the parent, the parent paints the gradient behind all the
   glyphs at once, so fading a single letter would leave its colour behind. Painted per
   letter it fades with the letter. The gradient is vertical and every letter box shares
   one line-height, so the ramp still reads as one continuous fall across the word. */
.hero__letter{
  display:inline-block;
  white-space:pre;              /* the space between the two words is its own letter */
  opacity:calc(1 - var(--out, 0));
  transform:translateY(calc(var(--out, 0) * -0.55em));
  will-change:opacity, transform;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__letter{
    background:linear-gradient(180deg, rgba(var(--rgb-white),.96) 13.667%, rgba(var(--rgb-white),0) 91.536%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

.hero__content{
  position:relative;z-index:1;
  width:min(calc(100% - (2 * var(--container-pad))), var(--container-max));
  margin-inline:auto;
}

/* Heading 643, sub-headline column 408, pushed apart and vertically centred. */
.hero__phase--outro{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-32);
  align-items:center;
}
@media (min-width:1024px){
  .hero__phase--outro{
    grid-template-columns:643px minmax(0,408px);
    justify-content:space-between;
    gap:var(--space-40);
  }
}
.hero__aside{display:flex;flex-direction:column;gap:var(--space-24)}
.hero__phase{max-width:none}
.hero--video.is-scroll-hero .hero__phase{
  opacity:var(--phase, 1);
  transform:translateY(calc((1 - var(--phase, 1)) * var(--space-24)));
  transition:opacity var(--dur-base) linear, transform var(--dur-base) var(--ease-out);
}
.hero--video.is-scroll-hero .hero__phase[data-phase-hidden="true"]{pointer-events:none;visibility:hidden}

/* 48px / 60px line, 0.48px tracking, Extra Light then Medium. */
.hero--video .hero__title{
  font-family:var(--font-heading);
  font-size:clamp(var(--fs-28), 3.2vw + 0.4rem, var(--fs-48));
  font-weight:var(--weight-extralight);
  line-height:1.25;
  letter-spacing:0.48px;
  color:var(--c-text-hero);
  text-transform:none;
  max-width:none;
}
.hero--video .hero__sub{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  font-weight:var(--weight-regular);
  line-height:24px;
  color:var(--c-text-hero);
  max-width:408px;
}
.hero--video .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-12)}

/* Short viewports - a phone held sideways, or a small desktop window.
   min-height cannot shrink content that does not fit, and at these heights the stacked
   copy pushes the buttons past the fold. So the rhythm compresses instead: a smaller
   wordmark, tighter padding, and above 720px wide the bottom row splits back into the
   design's two columns, which halves the height it needs. */
@media (max-height:640px){
  .hero--video .hero__stage{
    padding-block:calc(var(--header-offset) + var(--space-12)) var(--space-24);
  }
  .hero__wordmark{
    font-size:clamp(var(--fs-24), 5.6vw, var(--fs-40));
    line-height:1.1;
  }
  .hero__phase--outro{gap:var(--space-16)}
  .hero__aside{gap:var(--space-12)}
  .hero--video .hero__title{
    font-size:clamp(var(--fs-20), 2.4vw + 0.3rem, var(--fs-28));
    line-height:1.2;
  }
  .hero--video .hero__sub{font-size:var(--fs-14);line-height:1.35}
  /* Trimming the button padding keeps the pair on one row, which is how the design
     shows them, rather than spending another 60px of a very short screen on a wrap. */
  .hero--video .hero__actions{gap:var(--space-8)}
  .hero--video .hero__actions .btn{padding-inline:var(--space-20);min-height:48px}
}
@media (max-height:640px) and (min-width:720px){
  .hero__phase--outro{
    grid-template-columns:minmax(0,1fr) minmax(0,360px);
    justify-content:space-between;
    gap:var(--space-24);
    align-items:center;
  }
  .hero--video .hero__sub{max-width:360px}
}

.hero__cue{
  position:absolute;left:50%;bottom:var(--space-16);z-index:1;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-8);
  font-family:var(--font-body);font-size:var(--fs-12);
  letter-spacing:2px;text-transform:uppercase;
  color:var(--c-text-muted);
  opacity:var(--cue, 1);
  transition:opacity var(--dur-base) linear;
}
.hero__cue-line{width:1px;height:var(--space-32);background:linear-gradient(to bottom, var(--c-crimson), rgba(var(--rgb-accent),0))}
@media (max-width:1023px){ .hero__cue{display:none} }

@media (prefers-reduced-motion:reduce){
  .hero--video.is-scroll-hero .hero__track{height:auto}
  .hero--video.is-scroll-hero .hero__stage{position:relative}
  .hero--video.is-scroll-hero .hero__phase{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:none}
  .hero__letter{opacity:1;transform:none}
  .hero__cue{display:none}
}

/* ============================================================
   BRAND STATEMENT + HEADLINE NUMBERS
   Centred claim and paragraph, a divided row of numbers, then a
   ghost button. A drone sits bleeding off the top right.
   ============================================================ */
/* ------------------------------------------------------------
   The pinned sequence. The section is a tall track; the stage inside it sticks for the
   length of that track, and everything moves within the stage. All three drone placements,
   the connectors and the callouts sit on the design's own 1440 x 647 canvas, so every
   coordinate below is a percentage of that and the arrangement scales instead of clipping.
   ------------------------------------------------------------ */
.brand-statement{position:relative;padding:0}
.seq__track{position:relative}
.seq__stage{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  isolation:isolate;
  padding-block:var(--space-80);
}
.seq__canvas{
  position:relative;
  width:100%;
  aspect-ratio:1440 / 647;
  margin-inline:auto;
}

/* Pinned only once the script has taken over, so the no-JS render stays a normal section. */
.brand-statement.is-sequenced .seq__track{height:var(--seq-track, 300vh)}
.brand-statement.is-sequenced .seq__stage{position:sticky;top:0}

/* The drone. It rests here - 1158 x 647 at x 141, Figma 115:4120 - and the script moves it
   out to the other two placements. Transform only, so nothing reflows while it travels. */
.seq__drone{
  position:absolute;
  left:9.792%;              /*  141 / 1440 */
  top:0;
  width:80.417%;            /* 1158 / 1440 */
  height:100%;              /*  647 / 647 */
  transform-origin:50% 50%;
  pointer-events:none;
  z-index:1;
}
.seq__drone img{display:block;width:100%;height:100%;object-fit:fill}
.brand-statement.is-sequenced .seq__drone{will-change:transform}

/* A still photograph never reads as airborne, however well it travels. A slow bob on the
   image itself gives it that, and because it is a child of the element the script drives, the
   two transforms compose instead of overwriting each other. Percentages, so the bob scales
   with the drone rather than looking coarse when it is small. */
@keyframes bpp-drone-hover{
  0%,100%{transform:translate3d(0, -0.9%, 0)}
  50%    {transform:translate3d(0,  0.9%, 0)}
}
.brand-statement.is-sequenced .seq__drone img{
  animation:bpp-drone-hover 6.5s ease-in-out infinite;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .brand-statement.is-sequenced .seq__drone img{animation:none}
}

/* Measured, never painted: where the drone starts and where it ends up. Keeping them in the
   stylesheet means the script has no coordinates of its own to drift out of step. */
.seq__mark{position:absolute;visibility:hidden;pointer-events:none}
.seq__mark--rest{
  left:78.681%;             /* 1133 / 1440 */
  top:5.409%;               /*   35 /  647 */
  width:33.542%;            /*  483 / 1440 */
  height:41.731%;           /*  270 /  647 */
}
.seq__mark--left{
  left:-19.931%;            /* -287 / 1440 */
  top:7.977%;               /* 51.61 / 647 */
  width:67.5%;              /*  972 / 1440 */
  height:84.080%;           /*  544 /  647 */
}

/* The copy sits over the canvas and fades up out of the way as the drone flies. */
.seq__copy{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;
  opacity:var(--copy, 1);
  transform:translateY(calc((1 - var(--copy, 1)) * -40px));
}
.brand-statement.is-sequenced .seq__copy{will-change:opacity, transform}
.brand-statement.is-sequenced .seq__copy[data-gone="true"]{pointer-events:none;visibility:hidden}

/* Connectors. Figma centres a line of its true length inside a bounding box and turns it
   about that centre; rotating about the left edge instead lands it on the wrong side. */
.seq__lines{position:absolute;inset:0;z-index:1;pointer-events:none}
.seq-line{position:absolute;display:flex;align-items:center;justify-content:center;opacity:var(--in, 1)}
.seq-line__rot{display:block;flex:none}
.seq-line__rot img{display:block;width:100%;height:auto}

/* The three callouts. */
.seq__points{position:absolute;inset:0;z-index:2}
.seq-point{
  position:absolute;
  display:flex;gap:var(--space-24);align-items:flex-start;
  opacity:var(--in, 1);
  transform:translateX(calc((1 - var(--in, 1)) * var(--space-24)));
}
.brand-statement.is-sequenced .seq-point{will-change:opacity, transform}
.seq-point__body{display:flex;flex-direction:column;gap:var(--space-8);color:var(--c-text);min-width:0}
.seq-point__title{
  font-family:var(--font-heading);
  font-size:var(--fs-h4);          /* 24 / 30, 0.24 tracking */
  font-weight:var(--weight-medium);
  line-height:30px;
  letter-spacing:0.24px;
}
.seq-point__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px}

/* Narrow screens have no room for the canvas arrangement: the section becomes an ordinary
   stack, the drone sits under the copy and the callouts list beneath it. */
@media (max-width:1199px){
  .brand-statement.is-sequenced .seq__track{height:auto}
  .brand-statement.is-sequenced .seq__stage{position:relative}
  .seq__stage{display:block;min-height:0;padding-block:var(--space-80)}
  .seq__canvas{aspect-ratio:auto;display:flex;flex-direction:column;gap:var(--space-40)}
  .seq__copy{position:static;opacity:1;transform:none;visibility:visible;display:block}
  .seq__drone{position:static;width:100%;height:auto;order:2}
  .seq__drone img{height:auto;object-fit:contain}
  .seq__lines,.seq__mark{display:none}
  .seq__points{position:static;order:3;display:grid;gap:var(--space-32);padding-inline:var(--container-pad)}
  .seq-point{position:static;width:auto !important;opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .brand-statement.is-sequenced .seq__track{height:auto}
  .brand-statement.is-sequenced .seq__stage{position:relative}
  .seq__copy{opacity:1;transform:none;visibility:visible}
  .seq-point,.seq-line{opacity:1;transform:none}
}
.brand-statement__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-40);max-width:var(--container-inner);margin-inline:auto;position:relative;z-index:1}
.brand-statement__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center}
.brand-statement__claim{
  font-size:var(--fs-h2);
  line-height:1.25;            /* 60px at the design's 48px */
  letter-spacing:0.16px;
  text-transform:capitalize;   /* authored in sentence case, set in Title Case */
  max-width:698px;
}
.brand-statement__text{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:24px;
  color:var(--c-text);
  max-width:698px;             /* the same measure as the claim */
}

.stat-row{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
@media (min-width:768px){ .stat-row{grid-template-columns:repeat(3,minmax(0,1fr))} }
.stat-row__item{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding-block:15px var(--space-16);
}
@media (min-width:768px){
  .stat-row__item + .stat-row__item{border-left:1px solid var(--c-border-mid)}
}
.stat-row__value{
  font-family:var(--font-display);
  font-size:var(--fs-48);
  font-weight:var(--weight-medium);
  line-height:52px;
  color:var(--c-text);
  font-variant-numeric:tabular-nums;
}
.stat-row__affix{color:var(--c-crimson)}
.stat-row__label{
  font-family:var(--font-label);
  font-size:var(--fs-body);
  font-weight:var(--weight-regular);
  line-height:25.6px;
  color:var(--c-text);
}

/* ============================================================
   FEATURE ORBIT
   A drone with hairline connectors running out to three captions.
   The design places these on a 1440 x 647 canvas; every coordinate below is
   that position expressed as a percentage, so the composition holds its
   proportions at any width instead of clipping. Below 1200 it becomes a stack.
   ============================================================ */
.orbit{position:relative;overflow:hidden;padding:0}
.orbit__stage{position:relative;width:100%;margin-inline:auto}
@media (min-width:1200px){
  .orbit__stage{aspect-ratio:1440/647}
}
.orbit__art{display:block;width:100%;height:auto}
@media (min-width:1200px){
  /* Figma places it at -287 / 51.61, 972 x 544 on the 1440 x 647 canvas. The height has to
     be stated: the source file is square, so height:auto renders it 972 x 972 - overflowing
     the band and cropping the drone. */
  .orbit__art{
    position:absolute;
    left:-19.931%;            /* -287 / 1440 */
    top:7.977%;               /*  51.61 / 647 */
    width:67.5%;              /*  972 / 1440 */
    height:84.080%;           /*  544 / 647 - height resolves against the stage's height */
    object-fit:fill;
  }
}
.orbit__lines{display:none}
@media (min-width:1200px){
  .orbit__lines{display:block;position:absolute;inset:0;pointer-events:none}
  .orbit__lines img{position:absolute;height:auto;transform-origin:left center}
}
.orbit__items{display:grid;gap:var(--space-32);padding:var(--space-48) var(--container-pad) 0}
@media (min-width:1200px){
  .orbit__items{display:block;padding:0}
}
.orbit-item{display:flex;gap:var(--space-24);align-items:flex-start}
@media (min-width:1200px){
  .orbit-item{position:absolute}
  .orbit-item--1{left:66.67%;top:13.76%;width:27.78%}
  .orbit-item--2{left:60.28%;top:44.98%;width:29.44%}
  .orbit-item--3{left:47.50%;top:76.04%;width:27.78%}
}
.orbit-item__body{display:flex;flex-direction:column;gap:var(--space-8);color:var(--c-text);min-width:0}
.orbit-item__title{
  font-family:var(--font-heading);
  font-size:var(--fs-h4);
  font-weight:var(--weight-medium);
  line-height:30px;
  letter-spacing:0.24px;
}
.orbit-item__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px}

/* ============================================================
   ECOSYSTEM GRID
   Two-up glass cards: 500px image, then title, copy and a link.
   ============================================================ */
.eco{background:var(--c-bg-deep);padding-block:var(--section-pad-lg)}
.eco__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center}
.eco__heading{
  font-size:var(--fs-h2);
  line-height:1.25;               /* 60px at the design's 48px */
  letter-spacing:0.16px;
  text-transform:capitalize;      /* authored in sentence case, set in Title Case */
  max-width:808px;
}
.eco__grid{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:var(--space-40);margin-top:var(--space-60, 60px);
}
@media (min-width:700px){ .eco__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.eco-card{
  display:flex;flex-direction:column;gap:var(--space-40);
  background:var(--c-surface-glass);
  border-radius:var(--r-card);
  padding-bottom:var(--space-40);
  overflow:hidden;
}
.eco-card__media{position:relative;aspect-ratio:620/500;width:100%;overflow:hidden;background:var(--c-bg-alt)}
.eco-card__media img{
  width:100%;height:100%;object-fit:cover;
  /* settles out of a slight push-in as its card arrives */
  transform:scale(1.06);
  scale:1;
  transition:transform 1.1s var(--ease-out) calc(var(--i, 0) * 90ms),
             scale var(--dur-slow) var(--ease-out);
}
/* The arena card is two photographs in the design: the lit cage beneath, and the pitch laid
   over it at its own partial alpha. Rendering only the top one loses the cage behind it. */
.eco-card__media--stack img{position:absolute;inset:0}
.eco-card__media--stack .eco-card__layer{left:-3.75%;width:107.5%;height:100%}
.eco-card__media--stack .eco-card__layer + img{object-position:bottom}
.eco-card__body{display:flex;flex-direction:column;gap:var(--space-16);padding-inline:var(--space-40)}
.eco-card__title{
  font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--weight-medium);
  line-height:30px;letter-spacing:0.24px;color:var(--c-text);
  transition:color var(--dur-base) var(--ease-out);
}
.eco-card__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;color:var(--c-text);max-width:400px}

/* Four across. The design draws these two-up at 620 wide; in one row each card is nearer
   280, so the inner spacing comes down with it - 40px of inset either side of a 280px card
   would leave the copy in a 200px gutter. */
@media (min-width:1200px){
  .eco__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .eco-card{gap:var(--space-24);padding-bottom:var(--space-24)}
  .eco-card__body{padding-inline:var(--space-24);gap:var(--space-12)}
}

/* ------------------------------------------------------------
   Motion. Framer Motion is a React library and this theme has neither React nor a build
   step, so the behaviour it is known for is reproduced directly: the section's children
   enter once when it scrolls into view, one after another, on a spring rather than a plain
   ease. The overshoot in the curve is what makes it read as a spring settling instead of a
   fade sliding to a stop. Stagger comes from --i on each child, so it is not capped at the
   four steps the shared .reveal delays allow.
   ------------------------------------------------------------ */
.eco .reveal{
  transform:translateY(var(--space-40)) scale(.985);
  transition-duration:var(--dur-slower);
  transition-timing-function:var(--ease-spring);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.eco .reveal.is-in{transform:none}

/* Hover. The entrance owns `transform` on both the card and its picture, so hover uses the
   standalone `translate` and `scale` properties instead: they compose with a transform
   rather than overwriting it, and carry their own timing - otherwise every hover would
   inherit the entrance's 700ms and its stagger delay, and feel broken. */
.eco .eco-card{
  translate:0 0;
  transition:transform var(--dur-slower) var(--ease-spring) calc(var(--i, 0) * 90ms),
             opacity var(--dur-slower) var(--ease-spring) calc(var(--i, 0) * 90ms),
             translate var(--dur-base) var(--ease-out),
             background-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}

@media (hover:hover){
  .eco .eco-card:hover{
    translate:0 -8px;
    background:rgba(var(--rgb-white),.14);
    box-shadow:0 24px 60px rgba(var(--rgb-void),.55);
  }
  .eco-card:hover .eco-card__media img{scale:1.05}
  .eco-card:hover .tlink{color:var(--c-accent)}
  .eco-card:hover .tlink img{translate:var(--space-4) 0}
}

/* A card is one link target, so the keyboard gets the same treatment as the pointer. */
.eco .eco-card:focus-within{
  translate:0 -8px;
  background:rgba(var(--rgb-white),.14);
  box-shadow:0 24px 60px rgba(var(--rgb-void),.55);
}
.eco-card:focus-within .eco-card__media img{scale:1.05}

.eco-card.is-in .eco-card__media img{transform:none}

@media (prefers-reduced-motion:reduce){
  .eco .reveal,.eco .reveal.is-in{transform:none;transition:none}
  .eco-card__media img,.eco-card.is-in .eco-card__media img{transform:none;transition:none}
  .eco .eco-card,.eco .eco-card:hover,.eco .eco-card:focus-within{translate:none;transition:none}
  .eco-card:hover .eco-card__media img,.eco-card:focus-within .eco-card__media img{scale:1}
}

/* ============================================================
   TARGET SECTOR
   Sticky intro on the left; numbered glass cards on the right, each
   with a checklist and an image.
   ============================================================ */
.sector__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-60, 60px)}
/* No align-items:start here. A sticky element travels inside its containing block, and with
   the column shrunk to its own content there is nowhere to travel - the intro would scroll
   away with the page. Letting the column stretch to the row gives it the full height of the
   card list to stay fixed against. */
@media (min-width:1024px){ .sector__layout{grid-template-columns:542px minmax(0,1fr)} }
.sector__intro{display:flex;flex-direction:column;gap:var(--space-16)}
@media (min-width:1024px){ .sector__sticky{position:sticky;top:calc(var(--header-offset) + var(--space-40))} }
.sector__heading{font-size:var(--fs-h2);line-height:1.25;letter-spacing:0.16px}
.sector__text{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text)}

.sector__list{display:flex;flex-direction:column;gap:var(--space-40)}
.sector-card{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40);
  /* The glass tint over the page's own black rather than straight onto it. It renders
     identically at rest, but the card is opaque - a 10% white card cannot hide the one
     stacked behind it. */
  background:linear-gradient(var(--c-surface-glass-2), var(--c-surface-glass-2)), var(--c-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-card);
  padding:var(--space-16);
}

/* ------------------------------------------------------------
   The stack. Each card comes to rest a little lower than the one before, so the cards
   already read stay visible as an edge behind the current one. Sticky does all of it - with
   no JavaScript the cards still pile up correctly, and the script only adds the recede.

   The recede rides on `scale` and `translate`, the standalone properties, because the
   entrance reveal already owns `transform` on these cards; the two compose rather than
   overwrite. Below 1024 the layout is a single column and the cards simply stack in flow.
   ------------------------------------------------------------ */
@media (min-width:1024px){
  .sector-card{
    position:sticky;
    top:calc(var(--header-offset) + var(--space-40) + var(--i, 0) * 14px);
    scale:calc(1 - var(--cover, 0) * 0.05);
    translate:0 calc(var(--cover, 0) * -10px);
  }
  /* Dimmed by an overlay rather than a filter: it composites, and a filter on a sticky
     element creates a containing block that would break the sticking. */
  .sector-card::after{
    content:"";
    position:absolute;inset:0;
    border-radius:inherit;
    background:var(--c-bg);
    opacity:calc(var(--cover, 0) * 0.55);
    pointer-events:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .sector-card{position:static;scale:1;translate:none}
  .sector-card::after{opacity:0}
}
@media (min-width:768px){ .sector-card{grid-template-columns:329px minmax(0,1fr)} }
.sector-card__body{display:flex;flex-direction:column;gap:var(--space-40)}
.sector-card__head{display:flex;flex-direction:column;gap:var(--space-8);color:var(--c-text-soft)}
.sector-card__index{
  font-family:var(--font-display);font-size:var(--fs-12);font-weight:var(--weight-regular);
  line-height:22px;letter-spacing:2px;text-transform:uppercase;
}
.sector-card__title{
  font-family:var(--font-heading);font-size:var(--fs-h4);font-weight:var(--weight-light);
  line-height:30px;letter-spacing:0.24px;
}
.sector-card__title b{font-weight:var(--weight-medium);display:block}
.sector-card__text{font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px}
.sector-card__list{display:flex;flex-direction:column;gap:var(--space-8)}
.sector-card__list li{
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;color:var(--c-text-soft);
}
.sector-card__list li + li{border-top:1px solid var(--c-border-mid);padding-top:var(--space-8)}
.sector-card__media{border-radius:var(--r-md);overflow:hidden;min-height:240px;background:var(--c-bg-alt)}
.sector-card__media img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   FOUNDER
   Framed portrait with the name overlaid; copy and a pull quote.
   ============================================================ */
.founder{padding-block:var(--section-pad-lg)}
.founder__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-80)}
/* Figma sets the two columns to items-start; the copy is centred against the plate here
   instead, which reads better now that the plate is a fixed 610 x 780 and the copy is a good
   deal shorter than it. */
@media (min-width:1024px){
  .founder__layout{grid-template-columns:610px minmax(0,1fr);align-items:center}
}
/* The plate is one finished picture - frame, backdrop and name are all part of the file - so
   nothing is drawn around it. Its own transparent margin carries the shadow, which is why it
   is not clipped or given a radius here. */
.founder__figure{margin:0}
.founder__figure img{display:block;width:100%;height:auto}

.founder__body{display:flex;flex-direction:column;gap:var(--space-16)}
.founder__heading{font-size:var(--fs-h3);line-height:1.25;letter-spacing:0.4px}
.founder__body p{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text)}
.founder__quote{
  border-left:6px solid var(--c-crimson);
  padding-left:var(--space-24);
  margin:var(--space-8) 0 0;
}
.founder__quote p{
  font-family:var(--font-body);font-style:italic;font-weight:var(--weight-medium);
  font-size:var(--fs-body);line-height:24px;color:var(--c-text);max-width:478px;
}

/* ============================================================
   TESTIMONIAL
   An oversized quotation mark over a centred statement.
   ============================================================ */
.testimonial{padding-block:var(--section-pad-lg)}
.fquote{display:flex;flex-direction:column;align-items:center;margin:0;text-align:center}
.fquote__mark{
  font-family:var(--font-quote);font-style:italic;font-weight:var(--weight-light);
  /* Carried from the design. The self-hosted Fraunces subset does not actually ship these
     axes - setting WONK changes nothing measurable here - so the slanted double-slash comes
     from the straight quote character in the italic, not from the axis. Kept because it is
     what the design specifies and a fuller Fraunces build would honour it. */
  font-variation-settings:'SOFT' 0, 'WONK' 1;
  font-size:clamp(var(--fs-80), 12.5vw, var(--fs-180));   /* 12.5vw reaches the design's 180 at 1440 */
  line-height:1;color:var(--c-crimson);
  margin-bottom:-0.36em;
}
.fquote__text{
  font-family:var(--font-heading);font-weight:var(--weight-extralight);
  font-size:clamp(var(--fs-20), 2.4vw, var(--fs-34));
  line-height:1.47;letter-spacing:2px;color:var(--c-text);
  max-width:1072px;margin:0;
}

.fquote__attr{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);margin-top:var(--space-24)}
.fquote__name{
  font-family:var(--font-body);font-size:var(--fs-18);font-weight:var(--weight-semibold);
  line-height:26px;letter-spacing:1px;color:var(--c-text);
}
.fquote__rule{width:32px;height:1px;background:var(--c-crimson);margin-block:8px 4px}
.fquote__role{
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;
  letter-spacing:2px;text-transform:uppercase;color:var(--c-text);
}

/* ============================================================
   EXPERIENCE ZONE
   Copy and a spec list on the left, a picture on the right.
   ============================================================ */
.xzone{padding-block:var(--section-pad-lg)}
.xzone__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40)}
/* Two equal columns and no gap between them: the design sets both to flex-1 with nothing
   in between, and the air beside the copy is simply the text not filling its half. */
@media (min-width:1024px){
  .xzone__layout{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;align-items:stretch}
}
/* The design stacks these at 358: head 174, then 24, the specs 64, then 40, the button 56.
   A flat gap between all three would put 40 where the design has 24. */
.xzone__body{display:flex;flex-direction:column;gap:var(--space-40);align-items:flex-start}
.xzone__group{display:flex;flex-direction:column;gap:var(--space-24);align-items:flex-start;width:100%}
.xzone__head{display:flex;flex-direction:column;gap:var(--space-16)}
.xzone__heading{font-size:var(--fs-h3);font-weight:var(--weight-medium);line-height:1.25;letter-spacing:0.4px;text-transform:capitalize}
/* The design breaks this passage by hand, which holds it to roughly a 490 measure inside
   its 640 column. Set as a max-width so it still reflows rather than carrying hard breaks. */
.xzone__text{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text);
  max-width:515px;
}
.xzone__specs{display:flex;flex-direction:column;gap:var(--space-16);width:100%;max-width:357px}
.xzone__spec{display:flex;align-items:center;justify-content:space-between;gap:var(--space-16)}
.xzone__spec span{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text-soft)}
/* The picture fills its half and stretches to the copy's height. The design holds it at
   134.08% of that height, pulled up a quarter, which crops to the middle of the frame -
   reproduced with cover and a matching object-position rather than by stretching the
   photograph, whose own 4:3 does not match the box. */
/* The picture takes its height from the copy beside it, as the design does - 640 x 358 there.
   The image is taken out of flow to make that possible: left in flow, a 4:3 photograph in a
   640 column lays out 480 tall and drives the whole row, which is what it was doing. Stacked
   below 1024 there is no copy to match, so the design's own box shape stands in. */
.xzone__media{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--c-bg-alt);
  aspect-ratio:640 / 358;
}
@media (min-width:1024px){ .xzone__media{aspect-ratio:auto} }
.xzone__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 56%;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-block:var(--section-pad-lg)}
.faq__head{display:flex;flex-direction:column;align-items:center;gap:var(--space-16);text-align:center}
.faq__heading{font-size:var(--fs-h2);font-weight:var(--weight-medium);line-height:1.25;letter-spacing:0.48px;text-transform:capitalize;max-width:808px}
.faq__list{
  display:flex;flex-direction:column;gap:var(--space-24);
  width:100%;max-width:860px;margin:var(--space-40) auto 0;
  border-top:0;
}
.faq__item{border-bottom:1px solid var(--c-border-mid);padding:var(--space-12) var(--space-8);overflow:hidden}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);
  text-align:left;padding:0;
  font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-light);
  line-height:24px;letter-spacing:normal;color:var(--c-text);
  transition:color var(--dur-base) var(--ease-out);
}
.faq__q:hover{color:var(--c-accent)}
.faq__icon{flex:none;width:16px;height:16px;position:relative;margin-top:0}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  /* Crimson, as the exported plus and minus are - drawn here rather than shipped as two
     images so the one can rotate into the other. */
  width:14px;height:1.5px;background:var(--c-crimson);
  transform:translate(-50%,-50%);
  transition:transform var(--dur-base) var(--ease-out);
}
.faq__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq__a{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.faq__a > div{min-height:0}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a-inner{
  padding-top:var(--space-12);
  font-family:var(--font-body);font-weight:var(--weight-extralight);
  font-size:var(--fs-caption);line-height:22px;color:var(--c-text);max-width:695px;
}
@media (prefers-reduced-motion:reduce){ .faq__a{transition:none} }

/* ============================================================
   FINAL CTA - full-bleed picture behind centred copy
   ============================================================ */
.final-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  text-align:center;
  padding-block:var(--section-pad-lg);
}
.final-cta__bg{position:absolute;inset:0;z-index:-1}
.final-cta__bg img{width:100%;height:100%;object-fit:cover}
/* The wash the design lays over the picture. */
.final-cta__bg::after{content:"";position:absolute;inset:0;background:rgba(var(--rgb-void),.2)}
.final-cta__inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-24)}
.final-cta__heading{font-size:var(--fs-h3);line-height:1.25;letter-spacing:0.4px;text-transform:capitalize}
.final-cta__text{font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;color:var(--c-text);max-width:502px}
.final-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:center}

/* ============================================================
   PAGE HERO - inner pages
   ============================================================ */
.page-hero{
  position:relative;
  padding-top:calc(var(--header-offset) + var(--space-64));
  padding-bottom:var(--space-64);
  border-bottom:1px solid var(--c-border);
  background:
    radial-gradient(90% 100% at 20% 0%, rgba(var(--rgb-navy),.52) 0%, rgba(var(--rgb-void),0) 70%),
    var(--c-bg);
  overflow:hidden;
}
@media (min-width:1024px){
  .page-hero{padding-top:calc(var(--header-offset) + var(--space-96));padding-bottom:var(--space-96)}
}
.page-hero__inner{max-width:64ch}
.page-hero__title{margin-top:var(--space-8)}
.page-hero__lede{margin-top:var(--space-24)}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)}
.page-hero .breadcrumbs{margin-bottom:var(--space-24)}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust__grid{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);
}
@media (min-width:640px){ .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .trust__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-40)} }

/* ============================================================
   SPLIT FEATURE - copy + media
   ============================================================ */
.split__copy .lede{margin-top:var(--space-24)}
.split__copy .checklist{margin-top:var(--space-32)}
.split__copy .split__actions{margin-top:var(--space-32);display:flex;flex-wrap:wrap;gap:var(--space-12)}

.viz{
  position:relative;
  aspect-ratio:4/3;
  background:
    radial-gradient(80% 70% at 50% 50%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 72%),
    var(--c-bg-alt);
  border:1px solid var(--c-border);
  border-radius:var(--r-hairline);
  overflow:hidden;
  display:grid;place-items:center;
}
.viz svg{width:100%;height:100%}
.viz__net{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(var(--rgb-accent),.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--rgb-accent),.07) 1px, transparent 1px);
  background-size:var(--space-24) var(--space-24);
}
.viz__tag{
  position:absolute;
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--c-text-dim);
  background:rgba(var(--rgb-void),.72);
  border:1px solid var(--c-border);
  padding:var(--space-4) var(--space-8);
}
.viz__tag--tl{top:var(--space-16);left:var(--space-16)}
.viz__tag--br{bottom:var(--space-16);right:var(--space-16)}

/* ============================================================
   PRODUCT FEATURE - BeeZeta1
   ============================================================ */
.product-feature{
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 68%),
    var(--c-bg);
  border-block:1px solid var(--c-border);
}
.product-feature__head{max-width:56ch;margin-bottom:var(--space-48)}
@media (min-width:1024px){ .product-feature__head{margin-bottom:var(--space-64)} }
.product-feature__layout{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48);align-items:center;
}
@media (min-width:1024px){
  .product-feature__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-64)}
}
.product-stage{
  position:relative;aspect-ratio:1;
  display:grid;place-items:center;
  border:1px solid var(--c-border);
  background:radial-gradient(60% 60% at 50% 50%, rgba(var(--rgb-navy),.52) 0%, rgba(var(--rgb-void),0) 74%), var(--c-bg-alt);
}
.product-stage img,.product-stage svg{width:86%;height:auto}
.product-stage__float{animation:float 7s var(--ease-inout) infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--space-12) * -1))}}
@media (prefers-reduced-motion:reduce){ .product-stage__float{animation:none} }
.product-stage__corner{position:absolute;width:var(--space-24);height:var(--space-24);border:1px solid var(--c-accent);opacity:.5}
.product-stage__corner--tl{top:var(--space-12);left:var(--space-12);border-right:0;border-bottom:0}
.product-stage__corner--tr{top:var(--space-12);right:var(--space-12);border-left:0;border-bottom:0}
.product-stage__corner--bl{bottom:var(--space-12);left:var(--space-12);border-right:0;border-top:0}
.product-stage__corner--br{bottom:var(--space-12);right:var(--space-12);border-left:0;border-top:0}
.spec-chip{
  position:absolute;
  display:flex;flex-direction:column;gap:var(--space-4);
  border-left:1px solid var(--c-accent-high);
  padding-left:var(--space-8);
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--c-text-dim);
}
.spec-chip b{font-family:var(--font-heading);font-size:var(--fs-body);color:var(--c-text);letter-spacing:var(--tracking-normal);text-transform:none}
.spec-chip--tl{top:var(--space-32);left:var(--space-32)}
.spec-chip--br{bottom:var(--space-32);right:var(--space-32);border-left:0;border-right:1px solid var(--c-accent-high);padding-left:0;padding-right:var(--space-8);text-align:right;align-items:flex-end}
@media (max-width:639px){ .spec-chip{display:none} }

.feature-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-16)}
@media (min-width:640px){ .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24)} }
.product-feature__cta{margin-top:var(--space-32)}

/* ============================================================
   SOLUTIONS
   ============================================================ */
.solutions{background:var(--c-bg-alt);border-block:1px solid var(--c-border)}
.solutions__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-48)}
@media (min-width:1024px){ .solutions__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32);margin-top:var(--space-64)} }
.sol-card{
  border:1px solid var(--c-border);
  border-radius:var(--r-hairline);
  background:var(--c-bg);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.sol-card:hover{border-color:var(--c-border-strong);transform:translateY(-4px)}
.sol-card__visual{
  position:relative;aspect-ratio:16/9;
  background:radial-gradient(70% 80% at 50% 40%, rgba(var(--rgb-navy),.48) 0%, rgba(var(--rgb-void),0) 72%), var(--c-bg-alt);
  display:grid;place-items:center;overflow:hidden;
}
.sol-card__visual img{width:100%;height:100%;object-fit:cover}
.sol-card__badge{
  position:absolute;top:var(--space-16);left:var(--space-16);
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  background:rgba(var(--rgb-void),.80);border:1px solid var(--c-border);
  color:var(--c-text-muted);
  padding:var(--space-4) var(--space-8);
}
.sol-card__body{padding:var(--space-24);display:flex;flex-direction:column;flex:1}
@media (min-width:1024px){ .sol-card__body{padding:var(--space-32)} }
.sol-card__body p{color:var(--c-text-muted);margin-top:var(--space-12);line-height:var(--lh-loose)}
.sol-card__body .tlink{margin-top:auto;padding-top:var(--space-24)}

/* ============================================================
   WHY / DIFFERENTIATOR
   ============================================================ */
.why__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-64)}
@media (min-width:768px){ .why__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Bordered pillar cards, each led by a red icon badge. */
.why-item{
  border:1px solid var(--c-border);
  border-radius:var(--r-card);
  padding:var(--space-32);
  transition:border-color var(--dur-base) var(--ease-out);
}
.why-item:hover{border-color:var(--c-border-strong)}
.why-item__title{
  margin-top:var(--space-32);
  font-family:var(--font-body);
  font-size:var(--fs-lead);
  font-weight:var(--weight-semibold);
  line-height:1.3;
  letter-spacing:normal;
}
.why-item p{color:var(--c-text-muted);margin-top:var(--space-12);font-size:var(--fs-caption);line-height:1.6}

/* ============================================================
   EXPERIENCE CENTRE
   ============================================================ */
.experience{background:var(--c-bg-alt);border-block:1px solid var(--c-border)}
.experience__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48);align-items:center}
@media (min-width:1024px){ .experience__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--space-80)} }
.experience__for{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:var(--space-32)}
.experience__actions{margin-top:var(--space-32)}
.loc-card{
  border:1px solid var(--c-border-strong);
  background:var(--c-bg);
  padding:var(--space-32);
}
.loc-card__k{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;
  color:var(--c-accent);margin-bottom:var(--space-16);
}
.loc-card address{
  font-family:var(--font-heading);font-size:var(--fs-h5);
  font-weight:var(--weight-medium);line-height:var(--lh-snug);
  letter-spacing:var(--tracking-tight);
}
.loc-card__meta{margin-top:var(--space-32);display:grid;gap:var(--space-16)}
.loc-card__meta > div{
  display:flex;justify-content:space-between;gap:var(--space-16);
  border-top:1px solid var(--c-border);padding-top:var(--space-12);
}
.loc-card__meta span{font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-dim);text-transform:uppercase;letter-spacing:var(--tracking-wide)}
.loc-card__meta b{font-size:var(--fs-body);font-weight:var(--weight-medium);text-align:right}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24)}
@media (min-width:1024px){ .quotes{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-32)} }
.quote{
  border:1px solid var(--c-border);
  background:var(--c-surface);
  padding:var(--space-32);
  display:flex;flex-direction:column;
}
@media (min-width:1024px){ .quote{padding:var(--space-40)} }
.quote__mark{
  font-family:var(--font-heading);font-size:var(--fs-h1);
  line-height:var(--lh-tight);color:var(--c-accent);opacity:.4;
  margin-bottom:var(--space-8);
}
.quote blockquote{
  margin:0;font-family:var(--font-heading);
  font-size:var(--fs-h4);font-weight:var(--weight-medium);
  line-height:var(--lh-snug);letter-spacing:var(--tracking-tight);
}
.quote--sub blockquote{font-size:var(--fs-h5)}
.quote__translate{color:var(--c-text-muted);margin-top:var(--space-16);font-size:var(--fs-body);line-height:var(--lh-loose)}
.quote__attr{margin-top:auto;padding-top:var(--space-32)}
.quote__attr b{display:block;font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-semibold)}
.quote__attr span{display:block;margin-top:var(--space-4);font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-dim)}

/* ============================================================
   LEARNING HUB / POST GRID
   ============================================================ */
.hub__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-24);margin-top:var(--space-48)}
@media (min-width:640px){ .hub__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .hub__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32);margin-top:var(--space-64)} }
.post-card{
  border:1px solid var(--c-border);
  background:var(--c-bg);
  display:flex;flex-direction:column;height:100%;
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.post-card:hover{border-color:var(--c-border-strong);transform:translateY(-4px)}
.post-card__thumb{
  aspect-ratio:16/9;overflow:hidden;
  background:radial-gradient(70% 80% at 50% 50%, rgba(var(--rgb-navy),.44) 0%, rgba(var(--rgb-void),0) 72%), var(--c-bg-alt);
  display:grid;place-items:center;
}
.post-card__thumb img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:var(--space-24);display:flex;flex-direction:column;flex:1}
.post-card__k{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--c-accent);margin-bottom:var(--space-12);
}
.post-card__title{font-size:var(--fs-h5)}
.post-card__excerpt{color:var(--c-text-muted);margin-top:var(--space-12);line-height:var(--lh-loose)}
.post-card__meta{
  margin-top:auto;padding-top:var(--space-24);
  font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--c-text-dim);
}

/* ============================================================
   CTA BAND - compact mid-page conversion strip
   ============================================================ */
.cta-band{
  border:1px solid var(--c-border-strong);
  background:linear-gradient(120deg, rgba(var(--rgb-navy),.60) 0%, rgba(var(--rgb-void),.20) 60%), var(--c-bg-alt);
  padding:var(--space-32);
  display:grid;gap:var(--space-24);align-items:center;
}
@media (min-width:1024px){
  .cta-band{grid-template-columns:minmax(0,1fr) auto;padding:var(--space-48);gap:var(--space-40)}
}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--space-12)}

/* ============================================================
   PROCESS / STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32);margin-top:var(--space-48)}
@media (min-width:768px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-40);margin-top:var(--space-64)} }
.step{position:relative;border-top:1px solid var(--c-border);padding-top:var(--space-24)}
.step__num{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-widest);color:var(--c-accent);
  margin-bottom:var(--space-16);
}
.step p{color:var(--c-text-muted);margin-top:var(--space-12);line-height:var(--lh-loose)}

/* ============================================================
   CONTACT
   ============================================================ */
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48)}
@media (min-width:1024px){ .contact__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-64)} }
.contact__panel{border:1px solid var(--c-border);background:var(--c-bg-alt);padding:var(--space-32)}
.contact__channel{border-top:1px solid var(--c-border);padding-top:var(--space-20);margin-top:var(--space-20)}
.contact__channel:first-of-type{border-top:0;padding-top:0;margin-top:0}
.contact__channel .k{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--c-text-dim);
}
.contact__channel a,.contact__channel address{
  display:block;margin-top:var(--space-4);
  font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-medium);
}
.contact__channel a:hover{color:var(--c-accent)}

/* ============================================================
   LOGO WALL
   ============================================================ */
.logo-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24);align-items:center}
@media (min-width:640px){ .logo-wall{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1024px){ .logo-wall{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-40)} }
.logo-wall__item{
  display:grid;place-items:center;
  min-height:var(--space-64);
  filter:grayscale(1);opacity:.6;
  transition:opacity var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out);
}
.logo-wall__item:hover{opacity:1;filter:grayscale(0)}
.logo-wall__item img{max-height:var(--space-48);width:auto;object-fit:contain}

/* ============================================================
   SINGLE POST
   ============================================================ */
.entry__meta{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);color:var(--c-text-dim);
  display:flex;flex-wrap:wrap;gap:var(--space-16);
}
.entry__featured{margin-top:var(--space-48)}
.entry__content{margin-top:var(--space-48)}
.entry__share{
  margin-top:var(--space-64);padding-top:var(--space-32);
  border-top:1px solid var(--c-border);
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-16);
}

/* ============================================================
   SPEC SHOWCASE
   Large image cards, the name and spec row set over the picture.
   ============================================================ */
.spec-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
@media (min-width:1024px){ .spec-grid{gap:var(--space-48)} }

.spec-card{
  position:relative;
  display:grid;place-items:center;
  min-height:var(--space-160);
  aspect-ratio:16/11;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--c-bg-alt);
  isolation:isolate;
}
@media (min-width:768px){ .spec-card{aspect-ratio:16/9} }
.spec-card__media{position:absolute;inset:0;z-index:-1;display:grid;place-items:center}
.spec-card__media img{width:100%;height:100%;object-fit:cover}
.spec-card__media svg{width:min(60%, 320px);height:auto;opacity:.5}
.spec-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(var(--rgb-void),.30) 0%, rgba(var(--rgb-void),.72) 100%);
}
.spec-card__body{text-align:center;padding:var(--space-32)}
.spec-card__title{
  font-family:var(--font-heading);
  font-size:clamp(var(--fs-24), 3.4vw + 0.4rem, var(--fs-48));
  font-weight:var(--weight-bold);
  line-height:1.2;
  letter-spacing:0.02em;
}
.spec-card__specs{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:var(--space-16) var(--space-32);
  margin-top:var(--space-24);
}
.spec-card__specs li{
  display:inline-flex;align-items:center;gap:var(--space-8);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  color:var(--c-text);
}
.spec-card__specs svg{width:var(--icon-16);height:var(--icon-16);color:var(--c-text-muted);flex:none}

/* ============================================================
   PROMO DUO
   ============================================================ */
.promo__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-24);
}
@media (min-width:768px){ .promo__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-32)} }

.promo-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:var(--space-160);
  padding:var(--space-32);
  border:1px solid var(--c-border-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  isolation:isolate;
  background:
    linear-gradient(140deg, rgba(var(--rgb-navy),.62) 0%, rgba(var(--rgb-void),.28) 62%),
    var(--c-bg-alt);
}
@media (min-width:1024px){ .promo-card{padding:var(--space-48);min-height:var(--space-160)} }
.promo-card--crimson{
  background:
    linear-gradient(140deg, rgba(var(--rgb-crimson),.58) 0%, rgba(var(--rgb-void),.30) 62%),
    var(--c-bg-alt);
}
.promo-card__media{position:absolute;inset:0;z-index:-1;opacity:.34}
.promo-card__media img{width:100%;height:100%;object-fit:cover}
.promo-card__title{font-size:var(--fs-h3);letter-spacing:var(--tracking-tight)}
.promo-card__text{margin-top:var(--space-12);color:var(--c-text-muted);line-height:var(--lh-loose);max-width:44ch}
.promo-card__cta{margin-top:var(--space-32)}

/* ============================================================
   TEAM
   ============================================================ */
.team__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--space-24);
}
@media (min-width:640px){ .team__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .team__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32)} }

.team-card{
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  background:var(--c-surface);
  overflow:hidden;
  transition:border-color var(--dur-base) var(--ease-out);
}
.team-card:hover{border-color:var(--c-border-strong)}
.team-card__photo{
  aspect-ratio:4/5;
  display:grid;place-items:center;
  background:
    radial-gradient(70% 60% at 50% 34%, rgba(var(--rgb-navy),.48) 0%, rgba(var(--rgb-void),0) 72%),
    var(--c-bg-alt);
  overflow:hidden;
}
.team-card__photo img{width:100%;height:100%;object-fit:cover}
.team-card__initials{
  font-family:var(--font-heading);
  font-size:var(--fs-display);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-tight);
  color:transparent;
  -webkit-text-stroke:1px rgba(var(--rgb-accent),.44);
}
.team-card__body{padding:var(--space-24)}
.team-card__name{font-size:var(--fs-h6);letter-spacing:var(--tracking-tight)}
.team-card__role{
  margin-top:var(--space-4);
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--c-accent);
}
.team-card__bio{margin-top:var(--space-16);color:var(--c-text-muted);font-size:var(--fs-body);line-height:var(--lh-loose)}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-16);
}
@media (min-width:1024px){
  .gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-24)}
  .gallery__item--lead{grid-column:span 2;grid-row:span 2}
}
.gallery__item{
  margin:0;
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  overflow:hidden;
  aspect-ratio:1;
  background:var(--c-bg-alt);
}
.gallery__item--lead{aspect-ratio:1}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease-out)}
.gallery__item:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){
  .gallery__item img{transition:none}
  .gallery__item:hover img{transform:none}
}


/* ============================================================
   FEATURE LIST
   The heading holds its place on the left while the cards pass on the right.
   ============================================================ */
.features__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-48)}
@media (min-width:1024px){
  .features__layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-80);align-items:start}
}
@media (min-width:1024px){
  .features__sticky{position:sticky;top:calc(var(--header-offset) + var(--space-64))}
}
.features__list{display:grid;gap:var(--space-32)}
@media (min-width:1024px){ .features__list{gap:var(--space-48)} }

.feature-card{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:var(--space-128);
  aspect-ratio:4/3;
  padding:var(--space-32);
  border-radius:var(--r-card);
  overflow:hidden;
  isolation:isolate;
  background:var(--c-bg-alt);
}
@media (min-width:1024px){ .feature-card{aspect-ratio:9/10;padding:var(--space-40)} }
.feature-card__media{position:absolute;inset:0;z-index:-2}
.feature-card__media img{width:100%;height:100%;object-fit:cover}
.feature-card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(var(--rgb-void),.25) 0%, rgba(var(--rgb-void),.55) 46%, rgba(var(--rgb-void),.92) 100%);
}
.feature-card__badge{position:absolute;top:var(--space-24);left:var(--space-24);z-index:1}
.feature-card__text{margin-top:var(--space-12);color:var(--c-text-muted);font-size:var(--fs-body);line-height:1.6;max-width:44ch}