/* ── the architectural field, for the inner page heroes ───────────────
   The homepage hero is a full viewport with centred copy, so its logos
   live in the outer columns of a six-by-five grid. These heroes are
   short, and their copy spans all nine columns hard against the bottom
   edge, so there are no outer columns to use. The only reliably empty
   area is the band of top padding above the headline.

   That is what the logo row occupies. Its height is derived from the
   SAME padding value the hero uses, so it ends exactly where the copy
   begins: no measurement, no guess, and no way for a mark to sit behind
   a heading however long that heading runs on a given page.

   The gridlines themselves cover the whole hero, copy included. */

.pfield{position:absolute;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));}
.pf-cell{position:relative;min-width:0;min-height:0;
  border-right:1px solid var(--pf-line,rgba(255,255,254,.064));
  border-bottom:1px solid var(--pf-line,rgba(255,255,254,.064));}
.pf-cell:nth-of-type(6n){border-right:0;}
.pf-cell:nth-of-type(n+13){border-bottom:0;}
/* a surveyor's tick at three crossings, as on the homepage */
.pf-cell.mk::after{content:'';position:absolute;right:-4px;bottom:-4px;width:9px;height:9px;
  background:linear-gradient(var(--pf-tick,rgba(255,255,254,.26)),var(--pf-tick,rgba(255,255,254,.26))) center/9px 1px no-repeat,
    linear-gradient(var(--pf-tick,rgba(255,255,254,.26)),var(--pf-tick,rgba(255,255,254,.26))) center/1px 9px no-repeat;}

/* ── the middle row ───────────────────────────────────────────────────
   Row 2 of the three, restricted to its right-hand third. The headline
   block spans the hero's first six of nine columns, which at every
   desktop width ends left of the 66.7% line, so a mark placed from
   there rightwards cannot sit behind it. The supporting line below is
   bottom-aligned and now sits lower still; a mark is capped at 66% of
   the band and centred, which leaves roughly 30px of air above it. */
.pf-mid{position:absolute;left:66.667%;right:0;top:33.333%;height:33.333%;
  z-index:1;pointer-events:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}

/* 90px clears the fixed header; 14px keeps the row off the headline */
.pf-marks{position:absolute;left:0;right:0;top:90px;z-index:1;pointer-events:none;
  height:calc(clamp(150px,16vw,220px) - 104px);
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));}
.pf-mark{position:relative;min-width:0;pointer-events:auto;}
.pf-mark.rv{transform:none;}
.pf-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding-inline:clamp(8px,1.3vw,22px);}
/* one grey for every mark, transparency preserved — the same treatment
   the homepage field uses */
.pf-l img{max-width:88%;max-height:66%;width:auto;height:auto;object-fit:contain;
  filter:var(--pf-mark,brightness(0) invert(.86));}
.pf-in{opacity:.2;transition:opacity .45s var(--ease,cubic-bezier(.165,.84,.44,1));}
.pf-out{opacity:0;}
.pf-mark:hover .pf-in{opacity:.55;}

/* backwards, not both: the fill must not outrank the hover transition */
@keyframes pfInA{from{opacity:0;}to{opacity:.2;}}
@keyframes pfInB{from{opacity:0;}to{opacity:.2;}}
@keyframes pfOutA{from{opacity:.2;}to{opacity:0;}}
@keyframes pfOutB{from{opacity:.2;}to{opacity:0;}}
.pf-in.sw-a{animation:pfInA .42s var(--ease,cubic-bezier(.165,.84,.44,1)) backwards;}
.pf-in.sw-b{animation:pfInB .42s var(--ease,cubic-bezier(.165,.84,.44,1)) backwards;}
.pf-out.sw-a{animation:pfOutA .42s var(--ease,cubic-bezier(.165,.84,.44,1)) backwards;}
.pf-out.sw-b{animation:pfOutB .42s var(--ease,cubic-bezier(.165,.84,.44,1)) backwards;}

/* Below 1000 the hero's top padding drops to around 60px of usable band
   once the header is cleared — too little to show a logo at a readable
   size. The architecture stays; the marks stand down, as they do on the
   homepage at phone width. */
@media (max-width:1000px){
  .pf-marks,.pf-mid{display:none;}
  .pf-cell.mk::after{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .pf-in,.pf-out{animation:none;}
  .pf-out{display:none;}
  .pf-mark.rv{opacity:1;transform:none;transition:none;}
}

/* ── the rings, shared with the homepage hero ─────────────────────────
   Opt in with class="rings" on a hero band (Portfolio, Who We Back, Team,
   BY Accelerate). The same drawing as the homepage: nine 1px warm-grey
   rings centred near the right edge, sized in vw, starting at the rule
   under the navigation, faded by one elliptical radial mask that keeps
   them clearest at their centre and dissolves them toward the middle and
   toward the top and bottom. Painted inside the band only, behind its
   field and copy. Desktop only, as on the homepage.
   The y arithmetic places the centre at --ring-cy of the whole band even
   though this box starts 96px down: offset = (cy - .5)·d - (1 - cy)·96px. */
@media (min-width:1001px){
  .rings::before{
    --ring-cx:97vw; --ring-d:120vw; --ring-fade-x:50vw; --ring-fade-y:56%;
    content:'';position:absolute;left:0;right:0;top:96px;bottom:0;z-index:0;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='none' stroke='%239a948d' stroke-opacity='.42'%3E%3Ccircle cx='600' cy='600' r='80' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='128' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='176' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='224' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='272' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='320' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='368' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='416' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='464' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
      calc(var(--ring-cx) - var(--ring-d) / 2) calc(56% + var(--ring-d) * .06 - 42px)/var(--ring-d) var(--ring-d) no-repeat;
    -webkit-mask:radial-gradient(ellipse var(--ring-fade-x) var(--ring-fade-y) at var(--ring-cx) calc(56% - 42px),
      #000 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.3) 58%,transparent 100%);
    mask:radial-gradient(ellipse var(--ring-fade-x) var(--ring-fade-y) at var(--ring-cx) calc(56% - 42px),
      #000 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.3) 58%,transparent 100%);}
}

/* ── the rings on phones (640px and below) ────────────────────────────
   Opt in with class="rings-m" on a hero band (all five main pages). The
   same drawing, drawn larger so only a few wide arcs show, centred outside
   the top-right corner of the hero below the navigation rule. One radial
   mask anchored at that corner holds them at about half the desktop strength
   there and dissolves them toward the left, the centre and the
   bottom. --rm-fx/--rm-fy set how far the fade reaches; a page whose copy
   sits lower can give it more room. Painted inside the band only,
   decorative, behind everything; tablet shows none, as before. */
@media (max-width:640px){
  .rings-m::before{
    --rm-d:340vw; --rm-fx:64vw; --rm-fy:112px; --rm-cx:122vw; --rm-cy:26vw;
    content:'';position:absolute;left:0;right:0;top:96px;bottom:0;z-index:0;pointer-events:none;
    /* centre at --rm-cx across and --rm-cy down from the box top, outside the
       right edge so only arcs show: offset = centre - d/2 */
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='none' stroke='%239a948d' stroke-opacity='.42'%3E%3Ccircle cx='600' cy='600' r='80' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='128' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='176' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='224' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='272' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='320' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='368' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='416' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='464' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
      calc(var(--rm-cx) - var(--rm-d) / 2) calc(var(--rm-cy) - var(--rm-d) / 2)/var(--rm-d) var(--rm-d) no-repeat;
    /* the corner fade, intersected with a short fade-in at the top edge so
       the arcs never start on a hard line */
    -webkit-mask:radial-gradient(ellipse var(--rm-fx) var(--rm-fy) at 100% 0,
      rgba(0,0,0,.5) 0%,rgba(0,0,0,.32) 35%,rgba(0,0,0,.1) 70%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 36px);
    -webkit-mask-composite:source-in;
    mask:radial-gradient(ellipse var(--rm-fx) var(--rm-fy) at 100% 0,
      rgba(0,0,0,.5) 0%,rgba(0,0,0,.32) 35%,rgba(0,0,0,.1) 70%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 36px);
    mask-composite:intersect;}
}

/* ── the light hero, on all five main pages ───────────────────────────
   Opt in with class="hero-light" on the hero band (Home, Portfolio, Who We
   Back, Team, BY Accelerate). Warm white with the faintest warm fall toward
   stone at the far corner, running from the top of the page behind the
   clear navigation bar; charcoal gridlines and ticks at a whisper, and the
   rings redrawn in sand. Two classes, so these outrank the pages' own .band
   and .band-sand rules, which load after this sheet. Each page's sheet sets
   its own hero type. */
.band.hero-light{
  --pf-line:rgba(35,35,35,.086);--pf-tick:rgba(35,35,35,.244);--hero-vline:rgba(35,35,35,.086);
  background:linear-gradient(125deg,#fffffe 0%,#faf9f7 45%,#f3f0eb 100%);}
/* the rings: same nine circles, same place, same fade, in sand */
.hero-light .hero::before,.hero-light.rings::before,.hero-light.rings-m::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='none' stroke='%23BAAA91' stroke-opacity='.198'%3E%3Ccircle cx='600' cy='600' r='80' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='128' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='176' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='224' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='272' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='320' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='368' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='416' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='464' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");}
/* the inner heroes' type: charcoal heading, the italic in sand */
.hero-light .phero h1{color:#232323;}
.hero-light .phero h1 .it{color:#BAAA91;}
.hero-light .phero .sec-title{color:#55514e;}
.hero-light .phero-lede{color:#555555;}