/* ==========================================================================
   SourceOwls homepage design system.
   This is the APPROVED "Ignition" design, selected by Dean 2026-08-24 and
   folded out of concepts/ignition.html into the real homepage on 2026-08-24.
   Palette, type, radius and the hero mechanic are SETTLED. Do not re-open them.
   Everything below the "MERGED COMPONENTS" banner is new styling for content
   that lives on index.html and had no equivalent in the concept file.
   Context: docs/STATE.md
   ========================================================================== */

@font-face{font-family:"Archivo";src:url("../assets/fonts/archivo-var.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../assets/fonts/plexsans-var.woff2") format("woff2");font-weight:400 600;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#010D1A;--panel:#07203C;--line:rgba(255,255,255,.12);
  --a1:#00D0F5;--a2:#FF8A1E;--a3:#29ABE2;
  --ink:#fff;--dim:rgba(255,255,255,.68);--faint:rgba(255,255,255,.44);
  --rad:2px;
  --disp:"Archivo",sans-serif;--body:"Plex Sans",system-ui,sans-serif;--mono:"Plex Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
/* Grain. Flat dark fills read as cheap plastic on a good monitor; a fine noise
   floor gives them the tooth of print. Generated inline as an SVG turbulence data
   URI, so it costs no request and no image file. Deliberately monochrome via the
   colour matrix, or it tints the navy. */
body{margin:0;color:var(--dim);font:17px/1.62 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  background-size:200px 200px}
/* NOT background-attachment:fixed. A fixed background forces a full repaint on
   every scroll frame, which is a well known jank source, and at a 200px tile the
   grain looks identical either way. */
img,svg{display:block;max-width:100%} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--disp);color:var(--ink);letter-spacing:-.035em;line-height:1;text-wrap:balance}
h2{font-size:clamp(32px,3.6vw,50px);font-weight:800}
h3{font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.22}
.shell{width:100%;max-width:1240px;margin-inline:auto;padding-inline:34px}
.bay{padding-block:112px}
:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.eb{font:500 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--a1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);
  font-size:15px;font-weight:600;line-height:1;padding:16px 26px;border-radius:var(--rad);cursor:pointer;border:0;
  transition:transform .16s var(--ease),background-color .16s var(--ease),box-shadow .16s var(--ease)}
.btn .ar{transition:transform .16s var(--ease)} .btn:hover .ar{transform:translateX(4px)}
.b1{background:var(--a2);color:#08121C} .b1:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.b2{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.34)}
.b2:hover{background:rgba(255,255,255,.07)}

/* skip link, so keyboard users land past the rail */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--a2);color:#08121C;
  padding:12px 18px;border-radius:var(--rad);font:600 14px/1 var(--body)}
.skip:focus{left:14px;top:14px}

/* ---------- nav ---------- */
.nav{position:absolute;inset:0 0 auto 0;z-index:40}
.nav-in{display:flex;align-items:center;gap:18px;height:80px}
.brand{display:flex;align-items:center}
.brand img{height:44px;width:auto}
.foot .brand img{height:40px}
.nlinks{margin-left:auto;display:flex;gap:0}
.nlinks a{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:12px 9px;transition:color .16s;white-space:nowrap}
.nlinks a:hover{color:#fff}
.nlogin{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);padding:12px 2px;transition:color .16s;white-space:nowrap}
.nlogin:hover{color:#fff}
/* Never let the header call to action wrap. If it ever stops fitting, it should
   break the layout check loudly rather than quietly become a three line block. */
.nav-in .btn{white-space:nowrap}

/* ---------- hero take off ---------- */
.hero{position:relative;overflow:hidden;padding:186px 0 150px;min-height:92vh;text-align:center;display:flex;align-items:center}
.wash{position:absolute;inset:-10% -10% -30%;z-index:0;pointer-events:none;overflow:hidden}
.wash i{position:absolute;border-radius:50%;filter:blur(78px);display:block;mix-blend-mode:screen}
.w1{width:1180px;height:820px;left:-16%;bottom:-30%;background:radial-gradient(circle,#00D0F5b3,#00D0F540 44%,transparent 70%);animation:w1 30s ease-in-out infinite alternate}
.w2{width:1020px;height:720px;right:-14%;bottom:-26%;background:radial-gradient(circle,#29ABE2a6,#29ABE238 46%,transparent 72%);animation:w2 38s ease-in-out infinite alternate}
.w3{width:820px;height:600px;left:34%;bottom:-22%;background:radial-gradient(circle,#FF8A1E99,#FF8A1E30 46%,transparent 72%);animation:w1 34s ease-in-out infinite alternate-reverse}
@keyframes w1{to{transform:translate3d(90px,-56px,0) scale(1.15)}}
@keyframes w2{to{transform:translate3d(-80px,-40px,0) scale(1.2)}}

/* Range rings. Not a pattern laid over the hero but geometry that belongs to it:
   they share an origin with the beam, so the beam reads as bearing and these as
   distance, the way a plotting display works. Alternating solid and dashed is what
   makes them read as instrumentation rather than as decorative curves.
   Masked clear of the headline, and faded at the far edges so they never terminate
   on a hard line. STATIC, as the rest of this background is. */
.hero-arcs{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 66% 56% at 50% 43%,transparent 18%,#000 44%,#000 82%,transparent 100%);
  mask-image:radial-gradient(ellipse 66% 56% at 50% 43%,transparent 18%,#000 44%,#000 82%,transparent 100%)}

.hero-in{position:relative;z-index:2;width:100%}
.hero-in::before{content:"";position:absolute;z-index:-1;inset:-8% -6% -12%;
  background:radial-gradient(58% 62% at 50% 52%,#010D1Ad9,#010D1A80 46%,transparent 76%)}
.hl{position:relative;display:inline-block;margin:26px 0 0;white-space:nowrap;
  font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.94;color:#fff;
  font-size:clamp(38px,8.9vw,128px)}
.hl .w{display:inline-block;vertical-align:baseline}
/* the word before the pointer dissolves into the beam, bottoming out at half
   strength so the "it" stays readable */
.hl .fade{-webkit-mask-image:linear-gradient(76deg,#000 42%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.66) 86%,rgba(0,0,0,.5) 100%);
  mask-image:linear-gradient(76deg,#000 42%,rgba(0,0,0,.88) 68%,rgba(0,0,0,.66) 86%,rgba(0,0,0,.5) 100%)}
.ptr{position:relative;display:inline-block;width:.96em;height:.96em;
  vertical-align:-.13em;margin:0 -.01em;animation:fly 1.5s var(--ease) .35s both}
.ptr svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  transform:rotate(90deg);filter:drop-shadow(0 0 34px #FF8A1Ee6)}
/* afterburner: burns continuously after the pointer settles. Hot at the nozzle,
   widening and cooling behind. Two plumes, deliberately out of sync. */
.ptr::before{content:"";position:absolute;right:64%;top:68%;width:2.3em;height:.34em;
  transform-origin:100% 50%;transform:translateY(-50%) rotate(-24deg);
  background:linear-gradient(270deg,#fff 0%,#FF8A1E 16%,#FF8A1E99 44%,transparent 96%);
  filter:blur(7px);border-radius:50%;animation:burn .42s ease-in-out infinite alternate}
.ptr::after{content:"";position:absolute;right:64%;top:68%;width:1.05em;height:.17em;
  transform-origin:100% 50%;transform:translateY(-50%) rotate(-24deg);
  background:linear-gradient(270deg,#fff 0%,#fff 22%,#FF8A1E 60%,transparent 100%);
  filter:blur(2.5px);border-radius:50%;animation:burn .3s ease-in-out infinite alternate-reverse}
@keyframes burn{from{opacity:.62;transform:translateY(-50%) rotate(-24deg) scaleX(.86)}
  to{opacity:1;transform:translateY(-50%) rotate(-24deg) scaleX(1.1)}}
/* flies in ONCE, lower left to upper right, then holds. It does not loop. */
@keyframes fly{
  0%{opacity:0;transform:translate3d(-2.6em,1.9em,0) scale(.5)}
  16%{opacity:1}
  100%{opacity:1;transform:none}
}
/* the beam the pointer drags in behind it, aimed down and to the left.
   FIXED. It never moves or redraws. Only the pointer and its burn animate. */
.trail{position:absolute;z-index:1;right:41%;top:55%;width:104%;height:250px;
  transform-origin:100% 50%;transform:rotate(-24deg);
  background:linear-gradient(270deg,#FF8A1E00 0%,#FF8A1Ed9 6%,#00D0F58c 34%,#29ABE245 66%,transparent 96%);
  filter:blur(56px);pointer-events:none;mix-blend-mode:screen}
.trail.b{height:84px;filter:blur(16px);opacity:.62;
  background:linear-gradient(270deg,#FF8A1E00 0%,#ffffffe6 5%,#FF8A1Eb3 22%,#00D0F559 52%,transparent 88%)}
.trail.c{height:20px;filter:blur(5px);opacity:.8;
  background:linear-gradient(270deg,#FF8A1E00 0%,#ffffff 4%,#FF8A1Ecc 16%,transparent 60%)}

/* text-wrap:pretty stops the last line dropping to a single orphan word, which
   the hero paragraph does at this measure without it. */
.sub{margin:30px auto 0;max-width:60ch;font-size:19px;line-height:1.6;color:var(--dim);text-wrap:pretty}
/* Hero copy runs hook, then mechanism, then promise. The hook and the promise are
   lifted out of the body colour so the three read as three, not as one block. */
.sub .lede{display:block;margin-bottom:13px;font-size:21px;line-height:1.42;
  color:#fff;font-weight:600;letter-spacing:-.015em}
.sub .kicker{display:block;margin-top:15px;font-size:17px;line-height:1.5;
  color:rgba(255,255,255,.9);font-weight:600;letter-spacing:-.005em}
.acts{display:flex;gap:13px;margin-top:38px;flex-wrap:wrap;justify-content:center}
.hq{margin:46px auto 0;max-width:60ch;padding-top:24px;border-top:1px solid var(--line);
  font-size:16px;color:var(--dim)}
.hq b{display:block;margin-top:11px;font:500 12px/1.5 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:500}
.hq b span{color:var(--a2)}

/* ---------- strip ---------- */
.strip{border-block:1px solid var(--line);background:rgba(255,255,255,.02)}
.strip-in{display:flex;flex-wrap:wrap;gap:0}
.st{flex:1 1 200px;padding:28px 26px;border-right:1px solid var(--line)}
.st:last-child{border-right:0}
.st u{display:block;text-decoration:none;font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--a1);margin-bottom:9px}
.st p{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:-.02em;color:#fff;line-height:1.2}

/* ---------- generic head ---------- */
.head{margin-bottom:66px;text-align:center}
.head .eb{display:block;margin-bottom:15px}
.head p{margin:20px auto 0;max-width:60ch;font-size:18px;color:var(--dim)}

/* ---------- steps ---------- */
.steps{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.sc{padding:34px 30px 38px;border-radius:var(--rad);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.sc u{display:block;text-decoration:none;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--a1);margin-bottom:22px}
.sc h3{margin-bottom:10px} .sc p{font-size:15.5px;color:var(--dim)}

/* ---------- value cards ---------- */
/* Structure borrowed from the reference Dean supplied, rendered in the house
   language rather than copied: SQUARE 2px corners, not the reference's rounded
   ones, because radius is settled across the site. Cyan is the informational
   accent everywhere here; amber stays reserved for actions so the calls to
   action keep their monopoly on it. */
/* Six tracks, not three. Five cards into three columns leaves a hole in the last
   row; spanning two tracks each for the first three and three tracks each for the
   last two fills both rows edge to edge and reads deliberate rather than short. */
.feat{display:grid;gap:20px;grid-template-columns:repeat(6,1fr);margin-top:20px}
.fc{grid-column:span 2}
.fc:nth-child(4),.fc:nth-child(5){grid-column:span 3}
.fc{position:relative;isolation:isolate;overflow:hidden;
  padding:34px 30px 38px;border-radius:var(--rad);
  border:1px solid var(--line);background:var(--panel);
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease)}
/* The glow. isolation:isolate makes the card its own stacking context, so a
   z-index:-1 child sits ABOVE the panel fill but BEHIND the text. overflow:hidden
   then crops it, so the light pools inside the card instead of bleeding out. */
.fc::before{content:"";position:absolute;z-index:-1;top:-70px;left:-70px;
  width:300px;height:300px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,208,245,.34),rgba(41,171,226,.12) 45%,transparent 72%);
  filter:blur(38px);opacity:.6;
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
/* a second, colder pool in the far corner stops the panel reading flat */
.fc::after{content:"";position:absolute;z-index:-1;right:-90px;bottom:-90px;
  width:260px;height:260px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(41,171,226,.22),transparent 70%);
  filter:blur(44px);opacity:.5;transition:opacity .32s var(--ease)}
.fc:hover{transform:translateY(-4px);border-color:rgba(0,208,245,.45);
  box-shadow:0 22px 52px rgba(0,0,0,.55)}
.fc:hover::before{opacity:1;transform:scale(1.16)}
.fc:hover::after{opacity:.85}

/* icon tile: square like everything else, cyan hairline, lights up with the card */
.ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:26px;
  border-radius:var(--rad);background:rgba(0,208,245,.10);
  border:1px solid rgba(0,208,245,.30);
  transition:background-color .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease)}
.ic svg{width:24px;height:24px;stroke:var(--a1);fill:none;
  transition:stroke .26s var(--ease),filter .26s var(--ease)}
.fc:hover .ic{background:rgba(0,208,245,.18);border-color:rgba(0,208,245,.58);
  box-shadow:0 0 24px rgba(0,208,245,.30)}
.fc:hover .ic svg{stroke:#fff;filter:drop-shadow(0 0 9px rgba(0,208,245,.8))}

/* Brand watermark, first card only. z-index:-1 keeps it in the glow layer, above
   the panel fill and behind the text, so it can never touch legibility. It bleeds
   off the corner opposite the icon and lifts a little with the card. */
.fc .wm{position:absolute;z-index:-1;right:-34px;bottom:-30px;width:168px;height:auto;
  opacity:.055;pointer-events:none;transition:opacity .32s var(--ease)}
.fc:hover .wm{opacity:.1}

.fc h3{margin-bottom:11px}
.fc p{font-size:15.5px;color:var(--dim)}

/* ---------- quotes ---------- */
.qs{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
/* Same system as the value cards, tuned WARM. These are client voices, not
   technical claims, and the amber rule was already their accent, so the glow leads
   amber and answers with the cold blue rather than leading cyan. */
.qc{position:relative;isolation:isolate;overflow:hidden;
  padding:32px 28px 34px;border-radius:var(--rad);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:20px;background:var(--panel);
  transition:transform .26s var(--ease),border-color .26s var(--ease),box-shadow .26s var(--ease)}
/* the accent rule, which draws itself out a little on hover */
.qc::before{content:"";display:block;width:22px;height:2px;background:var(--a2);
  transition:width .26s var(--ease)}
/* both pools in one layer, since ::before is already spoken for by the rule */
.qc::after{content:"";position:absolute;z-index:-1;inset:-60px;pointer-events:none;
  background:radial-gradient(300px 300px at 14% 10%,rgba(255,138,30,.22),transparent 66%),
             radial-gradient(280px 280px at 90% 94%,rgba(41,171,226,.20),transparent 70%);
  filter:blur(34px);opacity:.6;
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.qc:hover{transform:translateY(-4px);border-color:rgba(255,138,30,.34);
  box-shadow:0 22px 52px rgba(0,0,0,.55)}
.qc:hover::before{width:38px}
.qc:hover::after{opacity:1;transform:scale(1.08)}
.qc blockquote{margin:0;font-size:15.5px;line-height:1.65;color:var(--dim)}
.qc figcaption{margin-top:auto}
.qc .who{display:block;font-family:var(--disp);font-weight:700;font-size:15.5px;color:#fff;letter-spacing:-.02em}
.qc .role{display:block;margin-top:3px;font:500 11.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--faint)}

/* ---------- industries ---------- */
.ind{display:grid;grid-template-columns:60px 1fr auto;gap:34px;align-items:center;
  padding:32px 0;border-top:1px solid var(--line);transition:transform .26s var(--ease)}
.ind:last-of-type{border-bottom:1px solid var(--line)}
.ind:hover{transform:translateX(10px)}
.ind u{text-decoration:none;font:500 12px/1 var(--mono);color:var(--a1)}
.ind h3{font-size:26px}
.ind p{margin-top:7px;font-size:15px;color:var(--dim);max-width:62ch}
.ind .tagline{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--a2);white-space:nowrap}

/* ---------- close ---------- */
.close{position:relative;overflow:hidden;text-align:center;padding-block:130px}
.close h2{font-size:clamp(38px,5.4vw,72px)}
.close .sub{margin-left:auto;margin-right:auto}
.close .acts{justify-content:center}

/* ==========================================================================
   MERGED COMPONENTS
   Content carried over from the previous homepage that the concept file had no
   equivalent for. Styled in the same language: 2px radius, mono eyebrows,
   hairline rules, amber accent.
   ========================================================================== */

/* ---------- industry role lists ---------- */
.ind-roles{margin-top:14px;font:500 12px/1.95 var(--mono);letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);max-width:64ch}
.ind-roles span::after{content:" · ";color:rgba(255,255,255,.26)}
.ind-roles span:last-child::after{content:""}
.inds-ft{margin-top:36px;font-size:15.5px;color:var(--faint);max-width:80ch}

/* ---------- provider types ---------- */
/* The top and bottom rules live on the CONTAINER, not on the cells. Five cells in
   a three column grid leave the last row short, and a bottom border drawn per cell
   then stops halfway across and reads as a broken edge. */
.net{display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.net-cell{padding:32px 22px 36px;border-right:1px solid var(--line)}
.net-cell:last-child{border-right:0}
.net-rule{width:22px;height:2px;background:var(--a2);margin-bottom:20px}
.net-cell h3{font-size:17px;margin-bottom:11px}
.net-cell p{font-size:14.5px;line-height:1.55;color:var(--dim)}

/* ---------- engineering grid ---------- */
/* A measured lattice for the flat bands, in the same hairline vocabulary as the
   section rules and the industry rows. Masked to an ellipse so it fades out rather
   than tiling to a hard edge, which is what makes a grid look like a stock
   background instead of a drawn one. */
.grid-band{position:relative}
.grid-band > *{position:relative;z-index:1}
.grid-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:78px 78px;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 12%,transparent 74%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 50%,#000 12%,transparent 74%)}

/* ---------- page watermark ---------- */
/* Deliberately ONE, in one band. Repeated down the page it stops being a mark and
   becomes a pattern. It sits at z-index 0 with the content lifted above it, and the
   section clips it, so it can bleed off the edge without widening anything. */
.wmk{position:relative;overflow:hidden}
.wmk > .shell{position:relative;z-index:1}
.page-wm{position:absolute;z-index:0;pointer-events:none;
  /* Centred and WHOLE. The earlier version was cropped off the top right corner,
     which reads as a mistake rather than a decision. Sitting complete and centred
     behind a centred heading reads as a crest. Bigger, so correspondingly fainter:
     at this size anything above about 5 percent starts competing with the copy. */
  left:50%;top:50%;width:min(860px,80vw);height:auto;opacity:.045;
  transform:translate(-50%,-50%);
  /* Motion borrowed from the hero washes rather than invented: same slow ease,
     same alternate breath, just slower still. A second motion language on one page
     is one too many. Killed outright under prefers-reduced-motion. */
  animation:wmdrift 46s ease-in-out infinite alternate}
/* Travel is deliberately small. At 1060px the mark was as tall as the band itself,
   so the moment the breath scaled up it clipped the top edge, which is the exact
   thing it was cropped for in the first place. Sized to leave headroom at the
   extreme of the animation, not just at rest.
   Resized again once the stray "S" fragment was cropped out of logo-mark.png: that
   changed the mark's aspect ratio from 298x148 to 275x148, so the same CSS width
   produced a 39px taller image and clipping came straight back. Any change to that
   asset means re-measuring this. */
@keyframes wmdrift{
  from{transform:translate(-50%,-50%) scale(1)}
  to{transform:translate(-50%,-52%) scale(1.05)}
}

/* ---------- for recruiters ---------- */
.rec{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.rec .eb{display:block;margin-bottom:15px}
.rec h2{max-width:15ch}
.rec-note{margin-top:24px;font-size:17px;color:var(--dim);max-width:54ch}
.rec .acts{margin-top:38px;justify-content:flex-start;align-items:center}
.quote{margin:0;padding:36px 34px;border-radius:var(--rad);border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
.quote p{font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.34;
  letter-spacing:-.025em;color:#fff}
.quote footer{margin-top:20px;font:500 11.5px/1.5 var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--a2)}
.lnk{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--a1);transition:gap .16s var(--ease)}
.lnk:hover{gap:12px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:52px 0 40px}
.foot-top{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;
  padding-bottom:38px;border-bottom:1px solid var(--line)}
.foot-line{font-size:15.5px;color:var(--dim)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 30px;padding:42px 0 40px}
.foot-h{margin:0 0 17px;font-family:var(--mono);font-size:11.5px;font-weight:500;line-height:1.4;
  letter-spacing:.16em;text-transform:uppercase;color:var(--a1)}
.foot-list li{margin-bottom:11px}
.foot-list li:last-child{margin-bottom:0}
.foot-list a{font-size:14.5px;color:var(--dim);transition:color .16s}
.foot-list a:hover{color:#fff}
.foot-end{padding-top:32px;border-top:1px solid var(--line);
  font:500 12px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint)}

/* ==========================================================================
   NARROW VIEWPORTS
   Desktop is the settled design. These layers adapt it down without changing
   any of it: same palette, same type, same hero mechanic.
   ========================================================================== */

/* ---------- small laptop, the header row runs out of room ---------- */
@media(max-width:1200px){
  .nav-in{gap:14px}
  .nlinks a{padding:12px 7px}
  /* Affiliate is the first thing out of the header because it is the least used
     of the five and it still sits in the footer. Without this the call to action
     is squeezed until it wraps. */
  .nlinks a[href*="affiliate"]{display:none}
}

/* ---------- laptop, five provider columns get too tight ---------- */
@media(max-width:1080px){
  .feat{grid-template-columns:repeat(2,1fr)}
  .fc,.fc:nth-child(4),.fc:nth-child(5){grid-column:auto}
  .net{grid-template-columns:repeat(3,1fr)}
  .net-cell:nth-child(3n){border-right:0}
  /* cells 4 and 5 start the second row and need a divider above them */
  .net-cell:nth-child(n+4){border-top:1px solid var(--line)}
}

/* ---------- tablet, multi column grids collapse ---------- */
@media(max-width:900px){
  .steps,.qs,.feat{grid-template-columns:1fr}
  .ind{grid-template-columns:1fr;gap:12px} .nlinks{display:none} .nlogin{display:none}
  .net{grid-template-columns:1fr}
  /* stacked cells: the right border becomes a stray vertical line */
  .net-cell{border-right:0}
  .net-cell:nth-child(3n){border-right:0}
  /* one per row now, so every cell after the first needs a divider above it */
  .net-cell:nth-child(n+2){border-top:1px solid var(--line)}
  .rec{grid-template-columns:1fr;gap:40px}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .bay{padding-block:88px}
  .hero{padding:150px 0 110px;min-height:0}
  .close{padding-block:100px}
}

/* ---------- phone ---------- */
@media(max-width:640px){
  .shell{padding-inline:20px}
  .bay{padding-block:68px}
  .close{padding-block:78px}
  .head{margin-bottom:42px}
  .head p{font-size:16.5px}

  /* header: the logo shrinks so the call to action stays on one line.
     Measured, not guessed: below this the button wraps to three lines. */
  .nav-in{height:66px;gap:12px}
  .brand img{height:26px}
  .nav-in .btn{padding:14px 16px;font-size:12.5px;white-space:nowrap}

  .hero{padding:112px 0 76px}
  .sub{font-size:17px;margin-top:24px}
  .sub .lede{font-size:18px}
  .acts{margin-top:30px}
  /* full width buttons give a proper tap target and a deliberate edge */
  .hero .acts,.close .acts{flex-direction:column;align-items:stretch}
  .hero .acts .btn,.close .acts .btn{width:100%}
  .hq{margin-top:36px;font-size:15px}

  /* credentials stack, so the divider has to move from right to bottom */
  .st{flex:1 1 100%;padding:22px 0;border-right:0;border-bottom:1px solid var(--line)}
  .st:last-child{border-bottom:0}

  .sc{padding:28px 24px 30px}
  .sc u{margin-bottom:16px}
  .fc{padding:28px 24px 30px}
  .ic{width:46px;height:46px;margin-bottom:20px}
  .qc{padding:26px 22px 28px;gap:16px}


  .ind{padding:26px 0}
  .ind h3{font-size:23px}
  /* on desktop this sits opposite the heading and reads as a label.
     Stacked underneath it is just the heading repeated, so it goes. */
  .ind .tagline{display:none}
  .ind:hover{transform:none}
  .inds-ft{margin-top:28px;font-size:14.5px}

  .net-cell{padding:26px 0 30px}
  .rec-note{font-size:16px}
  .quote{padding:26px 22px}
  .quote p{font-size:19px}

  .foot{padding:40px 0 32px}
  .foot-top{padding-bottom:30px}
  .foot .brand img{height:30px}
  .foot-line{font-size:14.5px}
  .foot-grid{gap:32px 20px;padding:34px 0 32px}
  /* bigger tap targets than the desktop line height gives */
  .foot-list a{display:inline-block;padding:4px 0}
  .foot-list li{margin-bottom:6px}
  .foot-end{padding-top:26px}
}

/* The headline is locked to one line and .hero clips its overflow, so below
   roughly 400px the 38px clamp floor gets silently cut off rather than wrapping.
   The headline runs about 8.05x its font size. 10.6vw fits it exactly, with zero
   pixels to spare, so 10vw is used instead to leave real clearance for font
   rendering variance. Verified at 320, 360 and 390. */
@media(max-width:400px){
  .hl{font-size:clamp(26px,10vw,38px)}
}

/* ---------- small phone ---------- */
@media(max-width:380px){
  .shell{padding-inline:16px}
  .brand img{height:24px}
  .nav-in .btn{padding:13px 13px;font-size:12px}
  .foot-grid{gap:28px 14px}
}

/* ==========================================================================
   FOR EMPLOYERS PAGE
   An INTERIOR page, deliberately not a second homepage. Dean 2026-08-25: the
   first build reused the homepage's architecture, and reusing the architecture
   is what made it read as a second front door no matter how the copy changed.

   Same brand language: palette, the three self hosted faces, the 2px radius,
   --ease, the grain. What is NOT reused, because these are the homepage's shape:
     full bleed hero with the beam  -> a compact masthead
     centred section heads          -> left aligned, named
     value card GRID                -> a single stacked column beside a rail
     full bleed close               -> a panel ending the column
   And what makes it interior: a breadcrumb, a sticky contents rail, one measured
   column.

   REVISED 2026-08-25, second pass. The drafting marks are gone. Dean did not
   want the line work: no column guides, no ruler ticks, no hairline rules
   stacked down the page. In their place, the homepage's own language, which is
   light and depth rather than line: soft colour fades in the background, the
   brand mark set large and faint behind the page, and every list item lifted
   into a panel that responds when you touch it.
   ========================================================================== */

/* ---------- masthead ---------- */
/* A page header, not a hero. No beam, no oversized headline. Presence comes from
   space, the light behind it and the type. */
.pgh{position:relative;overflow:hidden;padding:148px 0 0}
.pgh-in{display:grid;grid-template-columns:1.22fr .78fr;gap:74px;align-items:start;
  padding-bottom:62px}
.pgh-mark{width:48px;height:2px;background:var(--a2);margin-bottom:26px;
  box-shadow:0 0 18px rgba(255,138,30,.55)}
.crumb{display:flex;align-items:center;gap:11px;margin-bottom:46px;
  font:500 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.crumb a{color:var(--faint);transition:color .16s var(--ease)}
.crumb a:hover{color:var(--a1)}
.crumb i{font-style:normal;color:rgba(255,255,255,.26)}
.crumb b{font-weight:500;color:var(--a1)}
.pgh h1{margin:0;max-width:17ch;font-family:var(--disp);font-weight:800;color:#fff;
  font-size:clamp(31px,4vw,52px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.standfirst{margin-top:24px;max-width:56ch;font-size:19px;line-height:1.58;
  color:var(--dim);text-wrap:pretty}
.standfirst b{color:#fff;font-weight:600}
.pgh-acts{display:flex;align-items:center;gap:28px;margin-top:34px;flex-wrap:wrap}

/* Document metadata. No dividers: the label colour and the spacing separate
   these perfectly well, and three more rules is three more lines. */
.spec > div{padding:0 0 22px}
.spec > div:last-child{padding-bottom:0}
.spec u{display:block;margin-bottom:7px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--a1)}
.spec p{font-size:15px;line-height:1.45;color:#fff;font-weight:500}

/* ---------- background light ---------- */
/* The homepage's washes, moved down the page and slowed right down. Three pools
   only, each large and soft enough to read as atmosphere rather than as a shape.
   Same elements, same easing and the same alternate breath as the hero, so the
   two pages share one motion language rather than inventing a second. */
.emp main{position:relative}
.fades{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fades i{position:absolute;display:block;border-radius:50%;filter:blur(130px);
  mix-blend-mode:screen;will-change:transform}
.f1{width:1120px;height:780px;right:-14%;top:-300px;
  background:radial-gradient(circle,#00D0F5a6,#00D0F533 45%,transparent 70%);
  animation:w2 52s ease-in-out infinite alternate}
.f2{width:920px;height:660px;left:-22%;top:30%;
  background:radial-gradient(circle,#29ABE266,#29ABE21a 48%,transparent 74%);
  animation:w1 64s ease-in-out infinite alternate}
.f3{width:1040px;height:720px;right:-16%;bottom:-180px;
  background:radial-gradient(circle,#FF8A1E63,#FF8A1E1a 48%,transparent 72%);
  animation:w2 58s ease-in-out infinite alternate-reverse}

/* The brand mark, set large and faint behind the page exactly as the homepage
   does it, drifting on the same slow breath. ONE only: repeated down a page it
   stops being a mark and becomes wallpaper. Sits low, so the page resolves on
   the crest rather than opening on it. */
.page-crest{position:absolute;z-index:0;left:50%;bottom:13%;width:min(880px,84vw);
  height:auto;opacity:.05;pointer-events:none;transform:translateX(-50%);
  animation:crestdrift 54s ease-in-out infinite alternate}
@keyframes crestdrift{
  from{transform:translateX(-50%) scale(1)}
  to{transform:translateX(-50%) translateY(-2.2%) scale(1.045)}
}

/* Content sits above the light. */
.pgh,.doc{position:relative;z-index:1}

/* ---------- document body: rail plus one measured column ---------- */
.doc{display:grid;grid-template-columns:216px 1fr;gap:78px;align-items:start;
  padding-block:64px 92px}
/* NOTE: never give .doc overflow:hidden. It is the scroll ancestor of the rail,
   and an overflow ancestor silently kills position:sticky. */
.rail{position:sticky;top:40px}
.rail > u{display:block;margin-bottom:16px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.rail ol{counter-reset:r}
.rail li{counter-increment:r}
.rail ol a{display:grid;grid-template-columns:27px 1fr;align-items:baseline;
  padding:9px 0;font-size:15px;line-height:1.32;color:var(--dim);
  transition:color .2s var(--ease),transform .2s var(--ease)}
.rail ol a::before{content:counter(r,decimal-leading-zero);
  font:500 11.5px/1.5 var(--mono);letter-spacing:.1em;color:var(--a1);
  transition:text-shadow .2s var(--ease)}
.rail ol a:hover{color:#fff;transform:translateX(4px)}
.rail ol a:hover::before{text-shadow:0 0 12px rgba(0,208,245,.9)}
.rail-cta{margin-top:26px}

/* min-width:0 or a long word in a grid child refuses to shrink and pushes the
   whole layout wider than the viewport. */
.doc-main{min-width:0;max-width:72ch}

.sec + .sec{margin-top:82px}
.sec-n{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.sec-n u{text-decoration:none;font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--a1);white-space:nowrap;
  text-shadow:0 0 16px rgba(0,208,245,.45)}
.sec h2{max-width:20ch;font-size:clamp(26px,2.9vw,38px);line-height:1.08;letter-spacing:-.03em}
.sec-intro{margin-top:17px;max-width:64ch;font-size:17px;line-height:1.6;
  color:var(--dim);text-wrap:pretty}

/* Section numerals, ghosted behind their own marker. Read from data-n, so the
   numeral cannot drift out of step with the rail beside it. */
.sec{position:relative}
.sec > *{position:relative;z-index:1}
.sec::before{content:attr(data-n);position:absolute;z-index:0;left:-6px;top:-64px;
  font-family:var(--disp);font-weight:800;font-size:168px;line-height:1;
  letter-spacing:-.055em;color:rgba(255,255,255,.028);
  pointer-events:none;-webkit-user-select:none;user-select:none}

/* ---------- panels ---------- */
/* Every list item on this page is a panel now rather than a row between rules.
   Stacked one per row in the measured column, which is what keeps this from
   becoming the homepage's card GRID again: same treatment, different geometry.
   The lift is small and the light is what actually moves. */
.pan{position:relative;isolation:isolate;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(158deg,rgba(255,255,255,.052),rgba(255,255,255,.013));
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
/* isolation:isolate makes the panel its own stacking context, so a z-index:-1
   child sits ABOVE the panel fill but BEHIND the text, and overflow crops it, so
   the light pools inside the panel instead of bleeding out. */
.pan::before{content:"";position:absolute;z-index:-1;top:-110px;left:-90px;
  width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(0,208,245,.30),rgba(41,171,226,.10) 46%,transparent 72%);
  filter:blur(46px);opacity:.5;
  transition:opacity .36s var(--ease),transform .36s var(--ease)}
.pan:hover{transform:translateY(-3px);border-color:rgba(0,208,245,.42);
  box-shadow:0 20px 46px rgba(0,0,0,.5)}
.pan:hover::before{opacity:1;transform:scale(1.2)}

/* ---------- the five steps ---------- */
.lad{margin-top:34px;display:grid;gap:14px}
.ls{display:grid;grid-template-columns:46px 1fr;gap:20px;align-items:start;
  padding:26px 30px 28px}
.ls u{padding-top:5px;text-decoration:none;font:500 12px/1 var(--mono);
  letter-spacing:.16em;color:var(--a1);transition:text-shadow .3s var(--ease)}
.ls:hover u{text-shadow:0 0 14px rgba(0,208,245,.9)}
.ls h3{margin-bottom:9px;font-size:19px}
.ls p{font-size:17px;line-height:1.6;color:var(--dim)}

/* ---------- what the account manager does ---------- */
/* Icon inline at text size, with no tile behind it. A small rounded icon tile
   stacked above a heading is the universal generated feature card. */
.dfs{margin-top:34px;display:grid;gap:14px}
.df{display:grid;grid-template-columns:24px 1fr;gap:20px;align-items:start;
  padding:26px 30px 28px}
.df .di{display:block;margin-top:2px}
.df .di svg{width:20px;height:20px;stroke:var(--a1);fill:none;
  transition:filter .3s var(--ease)}
.df:hover .di svg{filter:drop-shadow(0 0 10px rgba(0,208,245,.85))}
.df h3{margin-bottom:9px;font-size:19px}
.df p{font-size:17px;line-height:1.6;color:var(--dim)}

/* ---------- the measure ---------- */
.aside{margin-top:34px;padding:32px 32px 28px}
.aside > u{display:block;margin-bottom:22px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--a1)}
.aside > div{padding:19px 0 0}
.aside > div:first-of-type{padding-top:0}
.aside b{display:block;margin-bottom:6px;font-family:var(--disp);font-weight:700;
  font-size:17px;letter-spacing:-.02em;color:#fff}
.aside p{font-size:15px;line-height:1.5;color:var(--dim)}
.sec-ft{margin-top:34px;max-width:44ch;font-family:var(--disp);font-weight:700;
  font-size:19px;line-height:1.36;letter-spacing:-.024em;color:#fff}

/* ---------- client words ---------- */
/* Warm rather than cool. These are client voices, not technical claims, and the
   amber rule was already their accent, so the light leads amber here. */
.pqs{margin-top:34px;display:grid;gap:14px}
.pq{padding:28px 30px 30px}
.pq::before{background:radial-gradient(circle,rgba(255,138,30,.26),rgba(255,138,30,.07) 46%,transparent 72%)}
.pq:hover{border-color:rgba(255,138,30,.34)}
.pq .rule{display:block;width:26px;height:2px;background:var(--a2);margin-bottom:19px;
  transition:width .3s var(--ease),box-shadow .3s var(--ease)}
.pq:hover .rule{width:42px;box-shadow:0 0 14px rgba(255,138,30,.7)}
.pq blockquote{margin:0;font-size:17px;line-height:1.6;color:var(--dim)}
.pq figcaption{margin-top:15px}
.pq .who{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:-.02em;color:#fff}
.pq .role{margin-left:11px;font:500 11.5px/1.5 var(--mono);letter-spacing:.05em;color:var(--faint)}

/* ---------- the close ---------- */
.endc{margin-top:82px;padding:46px 46px 48px;
  background:linear-gradient(150deg,rgba(0,208,245,.10),rgba(255,255,255,.014) 62%)}
.endc::before{top:-140px;left:-110px;width:420px;height:420px;opacity:.72}
.endc:hover{transform:none;border-color:rgba(0,208,245,.34);box-shadow:none}
.endc h2{max-width:18ch;font-size:clamp(25px,2.6vw,34px);line-height:1.08;letter-spacing:-.03em}
.endc p{margin-top:16px;max-width:54ch;font-size:17px;line-height:1.6;color:var(--dim)}
.endc .acts{margin-top:30px;justify-content:flex-start}

/* ---------- the network map ---------- */
/* The search at the core, the specialist team ringed around it and linked to
   EACH OTHER, and the wider network they draw from further out. Replaced a left
   to right fan on 2026-08-26: a fan says one to many, which is a broadcast. The
   peer links between the team are what make this read as a network.
   Hairline strokes held to 1px at every scale, so the mesh stays clean rather
   than thickening when the drawing is scaled up. */
.netmap{margin-top:32px;width:100%;max-width:330px;height:auto;
  filter:drop-shadow(0 0 20px rgba(0,208,245,.26))}
.netmap path,.netmap circle{stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round}
@media(max-width:900px){.netmap{display:none}}

/* ---------- narrow viewports, this page only ---------- */
@media(max-width:1080px){
  .doc{grid-template-columns:186px 1fr;gap:48px}
  .pgh-in{grid-template-columns:1fr .82fr;gap:44px}
}
@media(max-width:900px){
  .pgh{padding-top:118px}
  .pgh-in{grid-template-columns:1fr;gap:36px;padding-bottom:44px}
  .doc{grid-template-columns:1fr;gap:0;padding-block:42px 70px}
  /* The rail stops being a sidebar and becomes a contents row above the article. */
  .rail{position:static;margin-bottom:44px}
  .rail ol{display:flex;flex-wrap:wrap;gap:0 26px}
  /* flex:0 0 auto never shrinks, which was fine when every contents item was two
     words. The legal pages carry items like "DISCLOSURES OF PERSONAL INFORMATION
     FOR BUSINESS PURPOSES", and at 320px that one item measured 522px and took
     the whole page sideways with it. Allowed to shrink and wrap instead. */
  .rail li{flex:0 1 auto;min-width:0;max-width:100%}
  .rail ol a{padding:7px 0;gap:7px;min-width:0;overflow-wrap:anywhere}
  .rail-cta{display:none}
  .doc-main{max-width:none}
  .sec + .sec{margin-top:64px}
  .fades i{filter:blur(100px)}
}
@media(max-width:640px){
  .pgh{padding-top:94px}
  .pgh h1{max-width:none}
  .standfirst{font-size:17px}
  .pgh-acts{flex-direction:column;align-items:stretch;gap:18px;margin-top:28px}
  .pgh-acts .btn{width:100%}
  .sec + .sec{margin-top:54px}
  .sec::before{font-size:120px;top:-46px}
  .ls{grid-template-columns:1fr;gap:10px;padding:24px 22px 26px}
  .ls u{padding-top:0}
  .ls p,.df p,.sec-intro,.endc p{font-size:16.5px}
  .df{grid-template-columns:1fr;gap:12px;padding:24px 22px 26px}
  .aside{padding:26px 22px 24px}
  .pq{padding:24px 22px 26px}
  .sec-ft{font-size:18px}
  .endc{margin-top:54px;padding:30px 24px 32px}
  .endc .acts{flex-direction:column;align-items:stretch}
  .endc .acts .btn{width:100%}
  /* A touch device has no hover, so the lift never fires and the panels would
     just be flat boxes. The light stays on instead. */
  .pan::before{opacity:.8}
}

/* --------------------------------------------------------------------------
   FOR RECRUITERS PAGE
   Uses the interior page system above unchanged. Only the pieces that page
   needs and the employers page does not are defined here.
   -------------------------------------------------------------------------- */

/* ---------- the owl tier badges ---------- */
/* The badges are the originals from the old site: black line art on a solid
   WHITE ground, which on this navy would be three white boxes. Rather than
   hand editing the artwork into transparent PNGs, which would make them a
   binary nobody can regenerate, they are corrected in CSS:
     invert(1)             black line art becomes white, white ground goes black
     mix-blend-mode:screen black contributes nothing on a dark ground, so the
                           ground drops out and only the line art survives
   Add a hue rotation per tier and each owl takes the accent it should.
   Reversible, and the asset on disk stays the untouched original. */
/* The badges are now real transparent, tinted PNGs from
   scripts/make-owl-badges.mjs. No invert, no blend mode: inverting turned the
   white highlights inside each owl's eyes black, which is why the faces read as
   having dark holes in them. All three are cropped to their own ink and matched
   in size by that script, so they carry equal visual weight here. */
.owl{display:flex;align-items:flex-end;line-height:0}
.owl img{width:auto;height:100%}
.o-elf img{filter:drop-shadow(0 0 12px rgba(0,208,245,.5))}
.o-true img{filter:drop-shadow(0 0 14px rgba(255,160,56,.55))}

/* The three badges shown small in the masthead, under the spec block, as a
   promise of the section further down. */
.owl-row{display:flex;align-items:center;gap:20px;padding-top:26px}
.owl-row .owl{height:40px}

/* ---------- tier cards ---------- */
/* Three across inside the measured column. The only grid on this page: the
   tiers are a comparison and a comparison has to be read side by side. */
.tiers{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tier{padding:28px 24px 30px;text-align:left}
.tier .owl{height:56px;margin-bottom:20px}
.tier u{display:block;margin-bottom:10px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.tier h3{font-size:21px;margin-bottom:8px}
.tier .ratio{margin-bottom:12px;font:500 12px/1.4 var(--mono);letter-spacing:.04em;color:var(--a1)}
.tier p{font-size:15.5px;line-height:1.55;color:var(--dim)}
/* Each tier takes its own light, so the three read as a ladder rather than as
   three identical boxes. The top tier gets the action colour. */
/* Each tier carries its own light at rest, not only on hover, so the three read
   as a ladder you can see from across the room. A hairline of the tier colour
   along the top edge does most of the work; the pool underneath does the rest. */
.tier::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:2;
  transition:opacity .3s var(--ease)}
.t-owlet{border-color:rgba(174,190,205,.22)}
.t-owlet::before{background:radial-gradient(circle,rgba(174,190,205,.18),transparent 70%);opacity:.6}
.t-owlet::after{background:linear-gradient(90deg,transparent,rgba(174,190,205,.5),transparent)}

.t-elf{border-color:rgba(0,208,245,.3);box-shadow:0 0 34px rgba(0,208,245,.10)}
.t-elf::before{background:radial-gradient(circle,rgba(0,208,245,.34),rgba(0,208,245,.1) 46%,transparent 72%);opacity:.8}
.t-elf::after{background:linear-gradient(90deg,transparent,rgba(0,208,245,.75),transparent)}
.t-elf:hover{border-color:rgba(0,208,245,.62);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 44px rgba(0,208,245,.2)}

/* The top tier is the one a recruiter is meant to want, so it gets the action
   colour and the most light on the page outside a button. */
.t-true{border-color:rgba(255,160,56,.36);box-shadow:0 0 40px rgba(255,160,56,.13)}
.t-true::before{background:radial-gradient(circle,rgba(255,160,56,.4),rgba(255,160,56,.12) 46%,transparent 72%);opacity:.9}
.t-true::after{background:linear-gradient(90deg,transparent,rgba(255,160,56,.85),transparent)}
.t-true:hover{border-color:rgba(255,160,56,.68);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 52px rgba(255,160,56,.26)}
.t-true .ratio{color:var(--a2)}

/* ---------- who recruits here ---------- */
/* The photographs are the only ones on the site, and they are stock. Handled as
   small circular portraits, desaturated and cooled into the palette with a cyan
   hairline ring, so they read as part of the system rather than as pictures
   dropped onto it. Deliberately NOT attached to any named testimonial: putting a
   stock face beside a real recruiter's words would imply it is them. */
/* The portraits used to carry sepia and a 165 degree hue rotation, which turned
   skin teal and gave them the lens look Dean flagged. Skin tone is the one thing
   a colour treatment must not break. Now it is a gentle desaturation and a small
   brightness pull, nothing that shifts hue, with the cyan ring doing the work of
   tying them to the palette instead. */
.port{margin:0;width:118px;height:118px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,208,245,.34),0 0 30px rgba(0,208,245,.16);
  transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.port img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) contrast(1.04) brightness(.92) saturate(.9)}
.port:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(0,208,245,.62),0 0 40px rgba(0,208,245,.28)}
/* One portrait beside a section head, not two in a row. Dean 2026-08-26. */
.sec-head-port{display:flex;align-items:flex-start;gap:26px}
.sec-head-port > div{min-width:0}
.folk{margin-top:32px;display:flex;align-items:center;gap:28px}
.folk-note p{font-size:16.5px;line-height:1.6;color:var(--dim)}

/* ---------- narrow viewports ---------- */
@media(max-width:900px){
  .tiers{grid-template-columns:1fr}
  .tier{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;padding:26px 24px 28px}
  .tier .owl{height:50px;margin-bottom:0;grid-row:span 4}
  .owl-row{padding-top:22px}
}
@media(max-width:640px){
  .folk{flex-direction:column;align-items:flex-start;gap:20px}
  .sec-head-port{flex-direction:column;gap:20px}
  .port{width:92px;height:92px}
  .tier{grid-template-columns:1fr;gap:0}
  .tier .owl{height:48px;margin-bottom:18px;grid-row:auto}
  .tier h3{font-size:19px}
}

/* ---------- background constellation ---------- */
/* The network this page is inviting a recruiter to join, drawn faintly behind
   the words. Same family as the map on the employers page and deliberately so,
   but scattered rather than centred, so it reads as a field you are joining
   instead of a diagram being explained. Held very low: at full strength a node
   field competes with the copy and starts to look like a screensaver. */
.constel{position:absolute;z-index:0;pointer-events:none;
  right:2%;top:14%;width:min(560px,44vw);height:auto;opacity:.3;
  filter:drop-shadow(0 0 14px rgba(0,208,245,.35))}
/* A second, smaller instance low on the opposite side, so the field belongs to
   the whole page rather than to one corner of it. Flipped, so the repeat is not
   obvious. */
.constel.b{right:auto;left:-4%;top:auto;bottom:8%;width:min(430px,36vw);
  opacity:.22;transform:scaleX(-1)}
@media(max-width:900px){.constel{opacity:.18;width:70vw}.constel.b{display:none}}

/* ---------- recruiter resources ---------- */
/* The guides that live in the Mission Control app, surfaced on the homepage so a
   recruiter can reach them without knowing that is where they live. Rows rather
   than cards: this is a directory, and the recruiter block beside it already
   carries the argument. */
.res{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.res .eb{display:block;margin-bottom:14px}
.res ul{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 22px}
/* Two rows in column one, the arrow spanning both in column two. Placed
   EXPLICITLY: left to flow, the label, the description and the arrow each took
   their own cell and the row came out as three things in a line. */
.res a{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;
  align-items:center;column-gap:14px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.res b{grid-column:1;grid-row:1;font-family:var(--disp);font-weight:700;font-size:15.5px;
  letter-spacing:-.015em;line-height:1.25;color:#fff}
.res a > span{grid-column:1;grid-row:2;margin-top:3px;font-size:13.5px;line-height:1.4;color:var(--faint)}
.res svg{grid-column:2;grid-row:1 / span 2;color:var(--a1);opacity:.55;
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
.res a:hover{border-color:rgba(0,208,245,.4)}
.res a:hover b{color:var(--a1)}
.res a:hover svg{opacity:1;transform:translateX(3px)}
@media(max-width:900px){.res ul{grid-template-columns:1fr}}

/* ---------- masthead pull quote ---------- */
/* The .hq pattern from the homepage hero, sitting in the masthead's right column
   under the owls. It replaced a payout curve that Dean did not want on
   2026-08-26: a real recruiter's words do the job a diagram was trying to do,
   and they are content the gate can actually verify. */
.pgh .hq{margin:30px 0 0;max-width:none;padding-top:24px;border-top:1px solid var(--line)}
.pgh .hq b{margin-top:13px}

/* ---------- recruiter resource bar ---------- */
/* Sits directly under the masthead, full shell width. Prominent because of where
   it is and how wide it is, rather than by shouting: a second button up here
   would have competed with the one action the masthead is actually asking for.
   Four across on desktop, two up on tablet, stacked on a phone. */
.resbar-wrap{position:relative;z-index:1;padding-block:6px 0}
.resbar-wrap .eb{display:block;margin-bottom:16px}
/* Back to three on 2026-08-26. Work Your Way was briefly a fourth tile here and
   was promoted out of the bar into a panel of its own above it, because Dean
   wanted it working harder than one tile in four could. */
.resbar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.resbar{grid-template-columns:1fr}}
/* Each tile is the same panel the rest of the page uses, so this reads as part
   of the page rather than as a widget dropped onto it. */
.rb{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;
  gap:0 12px;padding:22px 22px 20px;align-content:start}
.rb-i{grid-column:1;grid-row:1;display:block;margin-bottom:16px}
.rb-i svg{width:22px;height:22px;stroke:var(--a1);fill:none;transition:filter .3s var(--ease)}
.rb b{grid-column:1;grid-row:2;font-family:var(--disp);font-weight:700;font-size:17px;
  letter-spacing:-.02em;line-height:1.2;color:#fff}
.rb-d{grid-column:1;grid-row:3;margin-top:6px;font-size:14px;line-height:1.45;color:var(--faint)}
.rb-a{grid-column:2;grid-row:2;align-self:center;color:var(--a1);opacity:.5;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.rb:hover .rb-a{opacity:1;transform:translateX(4px)}
.rb:hover .rb-i svg{filter:drop-shadow(0 0 10px rgba(0,208,245,.8))}
/* Case Studies leads, and takes the amber: it is the only one of the four that
   is PROOF rather than reference, and the eye should land on it first. */
.rb-proof{border-color:rgba(255,160,56,.34)}
.rb-proof::before{background:radial-gradient(circle,rgba(255,160,56,.34),rgba(255,160,56,.1) 46%,transparent 72%);opacity:.85}
.rb-proof:hover{border-color:rgba(255,160,56,.62);box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 44px rgba(255,160,56,.2)}
.rb-proof .rb-i svg,.rb-proof .rb-a{stroke:var(--a2);color:var(--a2)}
.rb-proof:hover .rb-i svg{filter:drop-shadow(0 0 10px rgba(255,160,56,.85))}

@media(max-width:900px){
  .resbar{grid-template-columns:repeat(2,1fr)}
  .resbar-wrap{padding-top:0}
}
@media(max-width:640px){
  .resbar{grid-template-columns:1fr;gap:12px}
  .rb{padding:20px 20px 18px}
  .rb-i{margin-bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hl .fade{-webkit-mask-image:none;mask-image:none}
  /* Killing the transition is not the same as killing the movement. Without the
     rule below, every hover lift on the site still JUMPED under this setting; it
     just jumped instantly instead of easing. Found 2026-08-25 by hovering with
     reducedMotion on and reading the computed transform back, which is now an
     assertion in scripts/check-layout.mjs rather than a thing to remember.
     The colour and shadow responses are left alone: those are not motion, and a
     surface that stops responding entirely is worse for everyone. */
  .fc:hover,.qc:hover,.ind:hover,.btn:hover,.b1:hover,.pan:hover,
  .rail ol a:hover,.lnk:hover{transform:none}
}

/* ==========================================================================
   AFFILIATE PAGE (V1 step 14). Added 2026-08-26.
   Two things Dean asked for, both built inside the settled design system rather
   than beside it:

   1. The photograph from the old affiliate page, which he liked. It is a
      background LAYER under the masthead, graded into the navy by an overlay so
      it never competes with the headline. Not a foreground image, and not a
      hero it has to share space with.

   2. "Dark on top and lighter on the bottom." There is no light surface
      anywhere in this design system, and inventing one would re-open a decision
      Dean settled on 2026-08-24. So the lift is TONAL: --bg at the masthead
      easing to --panel behind the document. Kept translucent so the body grain
      still reads through it rather than being covered over.
   ========================================================================== */

/* The photograph, and the grade that makes type survivable on top of it. */
.aff .pgh::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("../assets/affiliate-hero.jpg") center 26% / cover no-repeat;
  opacity:.30}
/* Top band is the lighter one so the header logo and nav stay legible; the
   bottom lands exactly on --bg so the masthead dissolves into the page instead
   of ending on a visible edge. */
.aff .pgh::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(1,13,26,.58) 0%,rgba(1,13,26,.78) 46%,var(--bg) 100%)}
.aff .pgh > .shell{position:relative;z-index:2}

/* The tonal lift. Transparent at the top so it starts exactly where the
   masthead's grade finished, and never fully opaque, so the grain survives. */
.aff-lift{position:relative;
  background:linear-gradient(180deg,
    rgba(7,32,60,0) 0%,
    rgba(7,32,60,.34) 28%,
    rgba(7,32,60,.68) 64%,
    rgba(7,32,60,.92) 100%)}

/* Questions. The same panel treatment every other list on an interior page
   uses, with no icon and no numeral, because a question does not need one. */
.qas{margin-top:34px;display:grid;gap:14px}
.qa{padding:26px 30px 28px}
.qa h3{margin-bottom:9px;font-size:19px}
.qa p{font-size:17px;line-height:1.6;color:var(--dim)}

/* A fourth row in the masthead spec column is one more than the recruiter page
   carries, so it gets a little air back at the sizes where the column narrows. */
@media(max-width:1080px){
  .aff .pgh::before{background-position:center 34%}
}
@media(max-width:640px){
  /* Portrait crops the photograph hard. Pull the focus up and lift the grade,
     because on a phone the headline sits directly over the busiest part. */
  .aff .pgh::before{background-position:60% 26%;opacity:.34}
  .aff .pgh::after{background:linear-gradient(180deg,rgba(1,13,26,.62) 0%,rgba(1,13,26,.80) 44%,var(--bg) 100%)}
  .qa{padding:22px 22px 24px}
}

/* ==========================================================================
   BLOG (V1 step 15). Added 2026-08-26.
   "How It Works" came out of the primary nav and this went in, on Dean's
   instruction. Pages are GENERATED by scripts/build-blog.mjs from
   content/blog-posts.mjs; edit the prose there, not the HTML.
   Everything below reuses the interior page furniture. The only genuinely new
   things are the article measure and the post cards.
   ========================================================================== */

/* The tonal lift, shared with the affiliate page rather than duplicated.
   Named plainly now that a second page uses it. */
/* The vertical rhythm has to live HERE, not on the content. .doc carries its own
   padding-block, which is why the affiliate page never showed this; the blog wraps
   .shell directly, so without this the last card sat flush on the seam where the
   lift meets the footer and read as clipped rather than as finished. */
.lift{position:relative;padding-bottom:104px;
  background:linear-gradient(180deg,
    rgba(7,32,60,0) 0%,
    rgba(7,32,60,.34) 28%,
    rgba(7,32,60,.62) 62%,
    rgba(7,32,60,.88) 88%,
    rgba(7,32,60,.72) 100%)}

/* ---------- post cards ---------- */
.bps{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding-top:8px}
.bp{display:flex;flex-direction:column;align-items:flex-start;padding:30px 32px 32px}
.bp-tag{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--a1);margin-bottom:18px}
.bp h2,.bp h3{margin:0 0 12px;font-size:22px;line-height:1.14;letter-spacing:-.03em;
  max-width:24ch}
.bp h3{font-size:19px}
.bp p{margin:0 0 22px;font-size:16px;line-height:1.55;color:var(--dim);max-width:46ch}
.bp-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--a2)}
.bp:hover .ar{transform:translateX(4px)}
.bp .ar{transition:transform .16s var(--ease)}

/* ---------- the article ---------- */
/* A measured column, centred, because an article is read rather than scanned and
   the two column document layout the other interior pages use fights that. */
/* The measure is applied to the PROSE, not to the shell. Constraining the shell
   centres the column and leaves the masthead headline hanging out to its left,
   which reads as a mistake rather than as a choice. */
.art-body,.art-close{max-width:768px}
.pgh-art{grid-template-columns:1fr}
.pgh-art .standfirst{max-width:62ch;font-size:20px}
.art-body .sec{margin-top:52px}
.art-body .sec:first-child{margin-top:8px}
.art-body h2{margin-bottom:20px;font-size:clamp(23px,2.3vw,29px);line-height:1.12;
  letter-spacing:-.028em}
.art-body p{margin-bottom:19px;font-size:18px;line-height:1.68;color:var(--dim);
  text-wrap:pretty}
.art-body p:last-child{margin-bottom:0}
/* The closing line. Display face and full white, so the piece lands on a note
   rather than trailing off into the call to action. */
.art-close{margin:56px 0 0;padding-top:34px;border-top:1px solid var(--line);
  font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.34;
  letter-spacing:-.024em;color:#fff;max-width:44ch}
.also{margin-top:70px}
.also .eb{display:block;margin-bottom:20px}
.also .bps{grid-template-columns:repeat(2,1fr)}

@media(max-width:900px){
  .bps,.also .bps{grid-template-columns:1fr}
  .art-body .sec{margin-top:44px}
}
@media(max-width:640px){
  .bp{padding:26px 24px 28px}
  .bp h2{font-size:20px}
  .art-body p{font-size:17px}
  .art-close{font-size:20px;margin-top:44px}
  .pgh-art .standfirst{font-size:18px}
}

/* ==========================================================================
   BLOG POLISH. 2026-08-26, Dean: make the cards pop, give each article
   something of its own, a background, the brand mark behind the top of the
   copy, and a fade along the page. Clean and subtle.

   ONE IDEA, expressed in several places, rather than several decorations:
   every article gets its own LIGHT. An accent drawn from the settled palette
   and an arrangement of the ambient washes. Three accents by six arrangements
   is eighteen combinations, which is exactly the number of articles, so no two
   read the same and nothing new had to be invented to achieve it.

   Nothing here adds a new animation. The crest reuses crestdrift, which the
   reduced motion block already kills, and the hover lift is .pan's, which is
   already neutralised there too.
   ========================================================================== */

/* The three accents. Set on <body>, read by everything below. */
.art-a1,.acc1{--acc:#00D0F5;--acc-soft:rgba(0,208,245,.30);--acc-line:rgba(0,208,245,.42)}
.art-a2,.acc2{--acc:#FF8A1E;--acc-soft:rgba(255,138,30,.28);--acc-line:rgba(255,138,30,.40)}
.art-a3,.acc3{--acc:#29ABE2;--acc-soft:rgba(41,171,226,.30);--acc-line:rgba(41,171,226,.42)}

/* Six arrangements of the ambient washes. The washes themselves are the ones
   the rest of the site uses; only where they sit changes, so a reader moving
   between articles feels a different room rather than a different building. */
.artv .f1{right:var(--w1r);top:var(--w1t)}
.artv .f2{left:var(--w2l);top:var(--w2t)}
.artv .f3{right:var(--w3r);bottom:var(--w3b)}
.art-v1{--w1r:-14%;--w1t:-300px;--w2l:-22%;--w2t:32%;--w3r:-16%;--w3b:-180px}
.art-v2{--w1r:-26%;--w1t:-220px;--w2l:-14%;--w2t:44%;--w3r:-8%;--w3b:-240px}
.art-v3{--w1r:-6%;--w1t:-340px;--w2l:-28%;--w2t:26%;--w3r:-22%;--w3b:-140px}
.art-v4{--w1r:-20%;--w1t:-260px;--w2l:-8%;--w2t:38%;--w3r:-14%;--w3b:-210px}
.art-v5{--w1r:-10%;--w1t:-290px;--w2l:-24%;--w2t:50%;--w3r:-26%;--w3b:-160px}
.art-v6{--w1r:-30%;--w1t:-240px;--w2l:-18%;--w2t:22%;--w3r:-4%;--w3b:-200px}

/* The accent reaches the masthead through the things already there: the rule
   above the headline, the live crumb, and the wash sitting behind it. */
.artv .pgh-mark{background:var(--acc);box-shadow:0 0 18px var(--acc-soft)}
.artv .crumb b{color:var(--acc)}

/* A single wash behind the masthead in the article's own accent. One, low, and
   clipped by the masthead, so it grades the top of the page rather than
   decorating it. */
.artv .pgh::before{content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:-38%;width:min(1180px,120vw);height:760px;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,var(--acc-soft),transparent 66%);
  filter:blur(30px);opacity:.5}
.artv .pgh > .shell{position:relative;z-index:2}

/* ---------- the brand mark behind the top of the copy ---------- */
/* Dean asked for the crest the other pages carry, but at the TOP of the copy
   rather than low on the page, so it sits behind the opening of the article and
   is gone by the time anyone is reading properly. Same asset, same drift, same
   opacity discipline: at this size anything above about five percent competes
   with the text. */
/* top must stay POSITIVE and clear of the drift. .art-wrap clips, and crestdrift
   both lifts the mark (translateY -2.2% of its own height) and grows it
   (scale 1.045, from the centre, so another half of the growth goes upward). At
   this width that is roughly fourteen pixels of travel above the resting
   position, so anything under about sixteen crops the top of the owls at the
   extreme of the breath. It was -70px and the mark was visibly beheaded.
   Any change to the width or the keyframes means re-measuring this. */
.art-crest{position:absolute;z-index:0;pointer-events:none;
  left:50%;top:20px;width:min(620px,72vw);height:auto;opacity:.05;
  transform:translateX(-50%);
  animation:crestdrift 54s ease-in-out infinite alternate}
.art-wrap{position:relative;overflow:hidden}
.art-wrap > .shell{position:relative;z-index:1}

/* ---------- the fade along the page ---------- */
/* One seam, where the argument finishes and the page turns to asking for
   something. A rule that fades out at both ends rather than a border, because a
   hard line across a dark page is the loudest thing on it. */
.seam{position:relative;height:1px;margin:64px 0 0;border:0;
  background:linear-gradient(90deg,transparent,var(--acc-line),transparent);
  opacity:.5}
/* SUBTRACTED 2026-08-26: the seam carried a small dot at its centre. It was
   added to signal craft rather than to do a job, which is the definition of the
   thing to cut. The fading rule alone reads better and says less. */

/* The section rules inside an article pick the accent up, so the colour is a
   property of the piece rather than a flourish on the masthead. */
.art-body .sec > h2::before{content:"";display:block;width:26px;height:2px;
  margin-bottom:20px;background:var(--acc);opacity:.85}

/* ---------- the cards, made to sit off the page ---------- */
/* Three changes, all small: the resting glow comes up so the card is lit before
   anybody touches it, a one pixel sheen along the top edge catches like a real
   surface, and a soft shadow underneath lifts it off the background. The hover
   was already there and only had to be given somewhere further to travel. */
.bp{box-shadow:0 10px 30px rgba(0,0,0,.34)}
.bp::before{opacity:.66}
.bp::after{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30) 22%,rgba(255,255,255,.30) 78%,transparent)}
.bp:hover{box-shadow:0 26px 60px rgba(0,0,0,.55)}
.bp:hover::before{opacity:1;transform:scale(1.24)}

/* Each card carries the accent of the article behind it, so the index has the
   same rhythm the articles do and a reader arrives somewhere they recognise. */
.bp.a1::before{background:radial-gradient(circle,rgba(0,208,245,.34),rgba(0,208,245,.10) 46%,transparent 72%)}
.bp.a2::before{background:radial-gradient(circle,rgba(255,138,30,.32),rgba(255,138,30,.09) 46%,transparent 72%)}
.bp.a3::before{background:radial-gradient(circle,rgba(41,171,226,.34),rgba(41,171,226,.10) 46%,transparent 72%)}
.bp.a1:hover{border-color:rgba(0,208,245,.46)}
.bp.a2:hover{border-color:rgba(255,138,30,.44)}
.bp.a3:hover{border-color:rgba(41,171,226,.46)}
.bp.a1 .bp-tag{color:#00D0F5}
.bp.a2 .bp-tag{color:#FF8A1E}
.bp.a3 .bp-tag{color:#29ABE2}

@media(max-width:900px){
  .art-crest{width:min(460px,80vw);top:16px}
  .artv .pgh::before{height:560px;top:-30%}
}
@media(max-width:640px){
  /* The shadow is what sells the lift on a phone, where the glow is too small to
     read. The sheen stays; it is one pixel and it costs nothing. */
  .bp{box-shadow:0 8px 22px rgba(0,0,0,.38)}
  .art-crest{width:min(340px,86vw);top:12px;opacity:.045}
  .seam{margin-top:48px}
  .lift{padding-bottom:72px}
}

/* ==========================================================================
   WORK YOUR WAY (V1 step 16). 2026-08-26.
   The old features.html listed eleven capabilities in no order. They are not
   eleven things, they are four stages of one job, so they are drawn as an arc
   with a spine running through it. The spine IS the argument: this is a
   sequence and you are somewhere on it.
   Each stage takes one of the three accents already defined above. The three
   working stages are cool and the payout stage is the only warm one on the
   page, because that is the one the reader came to find.
   No new animation. The markers and panels reuse .pan, whose hover is already
   neutralised in the reduced motion block.
   ========================================================================== */

.stages{position:relative;padding-top:58px}
/* One line, the height of the arc, fading at both ends so it arrives and leaves
   rather than being cut off square. Sits at the centre of the marker column. */
.stages::before{content:"";position:absolute;z-index:0;left:29px;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 7%,var(--line) 91%,transparent)}
.stage{position:relative;z-index:1;display:grid;grid-template-columns:58px 1fr;gap:36px;
  align-items:start;padding-bottom:84px}
.stage:last-child{padding-bottom:0}
/* The ring of background colour is what stops the spine running THROUGH the
   marker. Cheaper and more reliable than trying to break the gradient. */
.stage-n b{display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:var(--bg);border:1px solid var(--acc-line);
  font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--acc);
  box-shadow:0 0 0 7px var(--bg),0 0 30px var(--acc-soft)}
.stage-body > .eb{display:block;margin-bottom:15px;color:var(--acc)}
.stage-body h2{max-width:23ch;font-size:clamp(24px,2.5vw,32px);line-height:1.1;
  letter-spacing:-.03em}
.stage-body .sec-intro{margin-top:15px}
.stage .dfs{margin-top:30px}
/* The accent reaches the panels, so a stage is one colour rather than a coloured
   marker sitting above neutral content. */
.stage .df .di svg{stroke:var(--acc)}
.stage .df:hover .di svg{filter:drop-shadow(0 0 10px var(--acc-soft))}
.stage .pan::before{background:radial-gradient(circle,var(--acc-soft),transparent 68%)}
.stage .pan:hover{border-color:var(--acc-line)}

/* The stage list doubles as the contents, so it has to read as navigable. */
.spec p a{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:2px;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.spec p a:hover{color:var(--a1);border-bottom-color:var(--a1)}

.wy-seam{margin-top:86px}
.wy-quote{margin-top:56px;max-width:760px}

@media(max-width:900px){
  .stages::before{left:22px}
  .stage{grid-template-columns:44px 1fr;gap:24px;padding-bottom:64px}
  .stage-n b{width:44px;height:44px;font-size:12px;box-shadow:0 0 0 6px var(--bg),0 0 22px var(--acc-soft)}
}
@media(max-width:640px){
  /* The spine goes. At this width the marker column eats a third of the line
     length and the arc is obvious from the numerals alone, so the line is the
     thing to cut rather than the thing to shrink again. */
  .stages::before{display:none}
  .stages{padding-top:40px}
  .stage{grid-template-columns:1fr;gap:18px;padding-bottom:56px}
  .stage-n b{width:40px;height:40px;box-shadow:0 0 20px var(--acc-soft)}
  .stage-body h2{max-width:none}
  .wy-seam{margin-top:60px}
}

/* ==========================================================================
   PORTRAITS. 2026-08-26, Dean asked for the faces from the old features page.
   They are genuine cut outs with a real alpha channel, so they composite onto
   the navy instead of arriving in a white box, and each one gets a soft accent
   pool behind it so it is lit by the page rather than pasted onto it.
   AMBIENT ONLY. Never captioned and never beside a quote: a stock face next to
   a real recruiter's words implies it is them, which is the rule the recruiter
   page already follows for its two photographs.
   ========================================================================== */

.wy-face{position:absolute;z-index:1;pointer-events:none;height:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.55))}
/* The pool of light each portrait stands in. Drawn on the parent rather than the
   image, because a filter on the image would blur the person too. */
.wy .pgh::after,.wy-endc::after{content:"";position:absolute;z-index:0;
  border-radius:50%;pointer-events:none;filter:blur(60px)}

/* ---- masthead portrait ---- */
/* IN FLOW, in the masthead’s second column, not absolute against the viewport
   edge. Absolute put it as far right as the window went and no further left, which
   is exactly what Dean was seeing. As a grid cell it sits where the stage list
   used to, and it stacks under the copy on a phone for free. */
.wy-shot{position:relative;justify-self:center;align-self:center;
  margin:0;display:flex;align-items:center;justify-content:center}
/* The pool of light, on the WRAPPER. The circle itself clips its own overflow, so
   a glow drawn inside it would be cut off at the rim. */
.wy-shot::before{content:"";position:absolute;z-index:0;left:50%;top:50%;
  width:150%;height:150%;transform:translate(-50%,-50%);border-radius:50%;
  pointer-events:none;filter:blur(42px);
  background:radial-gradient(circle,rgba(0,208,245,.34),rgba(41,171,226,.12) 48%,transparent 72%)}
.wy-portrait{position:relative;z-index:1;width:300px;height:300px;
  border-radius:50%;overflow:hidden;
  border:1px solid rgba(0,208,245,.36);
  box-shadow:0 0 0 9px rgba(1,13,26,.5),
             0 0 64px rgba(0,208,245,.26),
             0 26px 60px rgba(0,0,0,.55)}
.wy-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  display:block}
/* The rim eased into the navy: sharp where her face is, soft where the picture
   meets the page, so it is not a bright disc cut out of the dark. */
.wy-portrait::after{content:"";position:absolute;inset:0;border-radius:50%;
  pointer-events:none;box-shadow:inset 0 0 44px 6px rgba(1,13,26,.62)}
@media(max-width:1080px){.wy-portrait{width:250px;height:250px}}
@media(max-width:900px){
  /* Stacked under the copy. Smaller, because at this width it is punctuation
     rather than a second column. */
  .wy-shot{justify-self:start}
  .wy-portrait{width:210px;height:210px}
}

/* ---- the close ---- */
/* Absolute, not a grid cell. As a grid cell she floated in the middle of a card
   whose height is set by the copy, and no amount of align-self fixed it. Pinned
   to the bottom right with the card reserving her column, she stands ON the card
   edge, which is the thing that reads as deliberate. */
.wy-endc{position:relative;overflow:hidden;padding-right:330px}
.wy-endc::after{right:-30px;bottom:-90px;width:400px;height:300px;
  background:radial-gradient(ellipse,rgba(255,138,30,.26),transparent 70%)}
.wy-close{position:absolute;right:30px;bottom:0;width:276px}
@media(max-width:900px){
  .wy-endc{padding-right:46px;padding-bottom:0}
  .wy-close{position:static;display:block;width:206px;margin:30px auto 0}
}

/* The remaining cut out is clipped by the card it stands on, and a flat slice
   through somebody's waist reads as a mistake, so its bottom fades out. The
   masthead portrait is framed now and needs no such help. */
.wy-close{
  -webkit-mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.35) 93%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 74%,rgba(0,0,0,.35) 93%,transparent 100%)}

/* ==========================================================================
   WORK YOUR WAY PANEL, on the recruiter page. Promoted 2026-08-26 from one tile
   in the resource bar to a panel of its own above it, because it is the only one
   of those links that is ours and it answers the question a recruiter asks
   straight after the pitch.
   ========================================================================== */
.wyb-wrap{padding-top:8px;padding-bottom:46px}
/* 320 rather than 270 since 2026-08-26: the photograph here is landscape and a
   narrow portrait slot threw most of it away. */
.wyb{display:grid;grid-template-columns:320px 1fr;gap:0;align-items:stretch;
  overflow:hidden;padding:0}
.wyb-img{margin:0;position:relative;overflow:hidden;min-height:100%}
.wyb-img img{width:100%;height:100%;object-fit:cover;object-position:58% 30%;
  display:block}
/* The photograph is a rectangle of daylight in a dark page, so it is graded into
   the panel from the right rather than being allowed to end on a hard edge. */
/* This photograph is daylight in a dark page, considerably brighter than the one
   it replaced, so it needs holding down or it becomes the only thing on the
   screen. Graded from the right so it dissolves into the panel rather than
   ending on an edge, and lifted overall so it sits in the page. */
.wyb-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(1,13,26,.34) 0%,rgba(1,13,26,.18) 42%,rgba(7,32,60,.88) 100%)}
.wyb-body{padding:38px 42px 40px;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center}
.wyb-body .eb{margin-bottom:14px}
.wyb-body h2{max-width:20ch;font-size:clamp(23px,2.3vw,30px);line-height:1.1;
  letter-spacing:-.03em}
.wyb-body p{margin-top:15px;max-width:52ch;font-size:16.5px;line-height:1.58;
  color:var(--dim)}
/* Amber, and the only amber in this part of the page, which is what makes it the
   thing the eye goes to. */
.wyb-go{margin-top:24px;display:inline-flex;align-items:center;gap:9px;
  font:600 14px/1 var(--body);color:#08121C;background:var(--a2);
  padding:13px 20px;border-radius:var(--rad);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease)}
.wyb:hover .wyb-go{transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wyb:hover .wyb-go .ar{transform:translateX(4px)}
.wyb-go .ar{transition:transform .16s var(--ease)}
.wyb::before{background:radial-gradient(circle,rgba(255,138,30,.26),transparent 70%)}
.wyb:hover{border-color:rgba(255,138,30,.42)}
@media(max-width:900px){
  .wyb{grid-template-columns:1fr}
  .wyb-img{max-height:240px}
  .wyb-img img{object-position:56% 32%}
  .wyb-img::after{background:linear-gradient(180deg,rgba(1,13,26,.24) 0%,rgba(7,32,60,.88) 100%)}
  .wyb-body{padding:28px 26px 30px}
}

/* The brand mark, behind stage two of Work Your Way. Same asset, same drift and
   same opacity discipline as .art-crest on the articles; the only difference is
   what it is anchored to. Negative z-index keeps it under the copy: .stage is a
   positioned element with a z-index, so this cannot escape below the page. */
.wy-crest{position:absolute;z-index:-1;left:50%;top:6%;
  width:min(620px,72vw);height:auto;opacity:.05;pointer-events:none;
  transform:translateX(-50%);
  animation:crestdrift 54s ease-in-out infinite alternate}
@media(max-width:900px){.wy-crest{width:min(440px,82vw);top:3%}}
@media(max-width:640px){.wy-crest{width:min(330px,86vw);opacity:.045}}

/* ==========================================================================
   CONTACT. 2026-08-26. Three routes rather than one form: somebody hiring,
   somebody wanting to recruit and somebody wanting to refer are three different
   conversations and only one of them wants a call. Each card takes one of the
   accents already defined, so the three read as siblings rather than as a list.
   ========================================================================== */
.ctas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding-top:8px}
.cta-card{display:flex;flex-direction:column;align-items:flex-start;
  padding:34px 32px 34px}
.cta-card .eb{display:block;margin-bottom:16px;color:var(--acc)}
.cta-card h2{margin-bottom:13px;font-size:24px;line-height:1.1;letter-spacing:-.03em;
  max-width:16ch}
.cta-card p{font-size:16px;line-height:1.58;color:var(--dim);max-width:40ch}
.cta-acts{margin-top:auto;padding-top:26px;display:flex;flex-direction:column;
  align-items:flex-start;gap:16px}
.cta-card .pan::before,.cta-card::before{background:radial-gradient(circle,var(--acc-soft),transparent 70%)}
.cta-card:hover{border-color:var(--acc-line)}

/* ---- anything else ---- */
.direct{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start;
  padding-top:56px}
.direct h2{margin-top:14px;font-size:clamp(24px,2.4vw,31px);line-height:1.1;
  letter-spacing:-.03em}
.direct-mail{margin-top:26px}
.direct-mail .lnk{font-size:15px;letter-spacing:.04em;text-transform:none;
  color:var(--a1)}
/* The details, set as the same labelled rows the mastheads use, so a reader who
   has seen any other page on this site already knows how to read them. */
.direct-meta > div{padding:0 0 22px}
.direct-meta > div:last-child{padding-bottom:0}
.direct-meta u{display:block;margin-bottom:7px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--a1)}
.direct-meta p{font-size:15px;line-height:1.55;color:#fff;font-weight:500}
.direct-meta a{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.direct-meta a:hover,.spec p a:hover{color:var(--a1);border-bottom-color:var(--a1)}

@media(max-width:1080px){
  .ctas{grid-template-columns:1fr}
  .cta-card h2,.cta-card p{max-width:none}
  .direct{grid-template-columns:1fr;gap:40px}
}
@media(max-width:640px){
  .cta-card{padding:28px 24px 28px}
  .direct{padding-top:44px}
}

/* ==========================================================================
   COOKIE CONSENT + LEGAL PAGES. 2026-08-26.
   The banner is built by js/consent.js. It sits bottom left rather than across
   the whole viewport: a full width bar on a dark site reads as a system error,
   and covering the page is what makes people click Accept to make it go away,
   which is not consent in any meaningful sense.
   ========================================================================== */

.ck{position:fixed;z-index:90;left:22px;bottom:22px;width:min(430px,calc(100vw - 44px));
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.ck-shown{opacity:1;visibility:visible;transform:none}
.ck-in{position:relative;isolation:isolate;overflow:hidden;padding:26px 26px 24px;
  border:1px solid var(--line);border-radius:var(--rad);
  background:linear-gradient(158deg,rgba(10,32,56,.99),rgba(4,18,34,.99));
  box-shadow:0 30px 70px rgba(0,0,0,.62);
  max-height:min(78vh,720px);overflow-y:auto}
.ck-in::before{content:"";position:absolute;z-index:-1;top:-120px;left:-90px;
  width:320px;height:320px;border-radius:50%;pointer-events:none;filter:blur(46px);
  background:radial-gradient(circle,rgba(0,208,245,.26),transparent 70%)}
.ck-head h2{margin:0 0 12px;font-size:19px;letter-spacing:-.025em}
.ck-body{font-size:14.5px;line-height:1.6;color:var(--dim)}
/* Collapsed by default: the second paragraph is the detail, and Show more is
   what the copy itself promises. */
.ck-more{margin-top:12px;font-size:14.5px;line-height:1.6;color:var(--dim);display:none}
.ck-open .ck-more{display:block}
.ck-links{margin-top:14px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ck-policy{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--a1);border-bottom:1px solid rgba(0,208,245,.4);padding-bottom:3px}
.ck-showmore{background:none;border:0;cursor:pointer;padding:0;
  font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ck-showmore:hover{color:#fff}

/* Preferences: hidden until Customize, because three toggles on first sight is
   a form, and a form is not what someone arriving on a website wants. */
.ck-prefs{display:none;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.ck-custom .ck-prefs{display:block}
.ck-row + .ck-row{margin-top:14px}
.ck-lab{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;cursor:pointer}
.ck-lab input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--a1);cursor:pointer}
.ck-lab input:disabled{cursor:default;opacity:.6}
.ck-txt b{display:block;font-family:var(--disp);font-weight:700;font-size:14px;
  letter-spacing:-.015em;color:#fff}
.ck-txt span{display:block;margin-top:3px;font-size:13px;line-height:1.5;color:var(--dim)}

.ck-acts{margin-top:20px;display:flex;gap:9px;flex-wrap:wrap}
.ck-btn{cursor:pointer;border:0;border-radius:var(--rad);
  font:600 13.5px/1 var(--body);padding:12px 15px;
  transition:background-color .16s var(--ease),box-shadow .16s var(--ease),color .16s var(--ease)}
.ck-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.ck-ghost:hover{background:rgba(255,255,255,.07)}
.ck-accept{background:var(--a2);color:#08121C;margin-left:auto}
.ck-accept:hover{box-shadow:0 8px 24px rgba(0,0,0,.45)}
/* Save only exists once you are customising; before that it would be a fourth
   button with nothing to save. */
.ck-save{display:none;background:var(--a1);color:#04121e}
/* Once the preferences are open, Customize has nothing left to do and a fourth
   button wraps Accept All onto a row of its own, which reads as a mistake. */
.ck-custom .ck-customize{display:none}
.ck-custom .ck-save{display:inline-block}

/* The reopen control the copy promises. Only appears once a choice is stored,
   so it never sits behind the banner it opens. */
.ck-fab{position:fixed;z-index:89;right:20px;bottom:20px;width:46px;height:46px;
  border-radius:50%;border:1px solid var(--line);cursor:pointer;font-size:20px;line-height:1;
  background:rgba(7,32,60,.94);box-shadow:0 12px 30px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s,transform .16s var(--ease)}
.ck-fab-show{opacity:1;visibility:visible}
.ck-fab:hover{transform:translateY(-2px)}

@media(max-width:640px){
  .ck{left:12px;right:12px;bottom:12px;width:auto}
  .ck-in{padding:22px 20px 20px}
  .ck-acts{gap:8px}
  .ck-btn{flex:1 1 auto;padding:13px 12px}
  .ck-accept{margin-left:0}
  .ck-fab{right:12px;bottom:12px}
}

/* ---------- legal documents ---------- */
/* Long, dense, and read rather than scanned. A measured column, generous line
   height, and headings that are findable without being loud. */
.legal-date{margin-top:20px;font:500 12px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--a1)}
/* These documents quote full URLs (Google’s opt out page, the analytics
   partners page) as unbroken strings. On a phone they were pushing the whole
   page sideways: measured 573px of content in a 360px window before this.
   Legal text has to survive a narrow screen, so long tokens break rather than
   overflow. Applied to the content only, never to the site chrome. */
.legal{max-width:74ch;padding-top:8px;overflow-wrap:break-word}
.legal a,.legal li,.legal p{overflow-wrap:anywhere}
.legal h2{margin:52px 0 16px;font-size:clamp(20px,2vw,25px);line-height:1.15;
  letter-spacing:-.025em;scroll-margin-top:110px}
.legal h2:first-child{margin-top:0}
.legal h3{margin:34px 0 12px;font-size:17px;letter-spacing:-.015em;scroll-margin-top:110px}
.legal p{margin-bottom:16px;font-size:16px;line-height:1.72;color:var(--dim);text-wrap:pretty}
.legal ul,.legal ol{margin:0 0 18px;padding-left:0}
.legal li{position:relative;margin-bottom:11px;padding-left:22px;
  font-size:16px;line-height:1.7;color:var(--dim)}
.legal li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:1px;
  background:var(--a1);opacity:.75}
.legal ol{counter-reset:legal}
.legal ol li{counter-increment:legal}
.legal ol li::before{content:counter(legal);top:0;width:auto;height:auto;background:none;
  font:500 12px/1.7 var(--mono);color:var(--a1)}
.legal-end{margin-top:72px}
@media(max-width:640px){
  .legal p,.legal li{font-size:15.5px}
  .legal h2{margin-top:40px}
}

/* ==========================================================================
   DEAN GARAMELLA, personal page. 2026-08-27.
   Structure borrowed from the reference Dean sent; the feel is deliberately
   NOT that page. Where a personal brand site usually goes light, dense and
   busy, this one keeps the firm's dark palette and lets the portrait and one
   warm accent carry the personality. It reads as a person on this site rather
   than as a different site wearing the same logo.
   Almost everything below reuses machinery already here: the portrait frame
   from Work Your Way, the stage spine, the panels, the accents.
   ========================================================================== */

/* The masthead runs portrait-right, and unlike the Work Your Way one this
   portrait survives at every width: on a personal page the face IS the page,
   so it stacks rather than disappearing. */
.dg-top{grid-template-columns:1.15fr .85fr;align-items:center}
.dg .pgh{padding-bottom:0}
.dg-shot .wy-portrait{width:280px;height:280px}
.dg-shot::before{background:radial-gradient(circle,rgba(255,138,30,.30),rgba(0,208,245,.12) 48%,transparent 72%)}
.dg-shot .wy-portrait{border-color:rgba(255,138,30,.38)}
.dg .eb{display:block;margin-bottom:16px}
.dg .pgh h1{font-size:clamp(38px,5.4vw,68px);max-width:none;line-height:.98}

/* The quick facts, sitting under the masthead as a band rather than beside it,
   because four of them in a column beside a portrait crowds the face. */
.dg-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:44px 0 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.dg-facts u{display:block;margin-bottom:8px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--a1)}
.dg-facts p{font-size:15.5px;line-height:1.45;color:#fff;font-weight:500;padding-bottom:22px}
.dg-stages{padding-top:66px}

/* ---------- the resources hub ---------- */
/* The part Dean asked to be comprehensive and to grow. Four columns of linked
   lists, each with a one line reason: a bare list of names is a bookmark dump,
   and the reason is the only thing that makes it worth reading. */
.dg-res{padding-top:64px}
.dg-res > .eb{display:block;margin-bottom:15px}
.dg-res h2{max-width:20ch;font-size:clamp(25px,2.6vw,34px);line-height:1.08;
  letter-spacing:-.03em}
.dg-res .sec-intro{margin-top:16px;max-width:66ch}
.res-grid{margin-top:38px;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.res-col{padding:30px 30px 26px}
.res-h{display:block;margin-bottom:20px;font:500 11.5px/1 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.res-col ul{display:grid;gap:17px}
.res-col li{display:block}
.res-col li a{display:inline-block;font-family:var(--disp);font-weight:700;
  font-size:16.5px;letter-spacing:-.02em;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:2px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.res-col li a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.res-col li span{display:block;margin-top:6px;font-size:14.5px;line-height:1.5;
  color:var(--dim)}

/* ---------- the close ---------- */
.dg-end{margin-top:76px}
.dg-contact{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dg-contact u{display:block;margin-bottom:7px;text-decoration:none;
  font:500 11.5px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--a1)}
.dg-contact p{font-size:15.5px;line-height:1.5;color:#fff;font-weight:500}
.dg-contact a{border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.dg-contact a:hover{color:var(--a1);border-bottom-color:var(--a1)}

@media(max-width:1080px){
  .dg-facts{grid-template-columns:repeat(2,1fr)}
  .res-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .dg-top{grid-template-columns:1fr;gap:38px}
  /* The portrait leads on a phone rather than trailing the copy: it is the one
     element that says whose page this is. */
  .dg-shot{order:-1;justify-self:start}
  .dg-shot .wy-portrait{width:190px;height:190px}
  .dg-stages{padding-top:48px}
  .dg-res{padding-top:52px}
  .dg-contact{grid-template-columns:1fr;gap:20px}
}
@media(max-width:640px){
  .dg-facts{grid-template-columns:1fr;padding-top:34px}
  .dg-facts p{padding-bottom:16px}
  .res-col{padding:26px 24px 24px}
}

/* A monogram, not a stock face. There is no photograph of Dean Heinrich on any
   SourceOwls property, and putting a stranger from a stock library in the frame
   where a real person belongs is worse than admitting the gap. Sized and framed
   exactly like the portrait beside it, so the day a headshot arrives it is one
   line to swap and nothing else moves. */

/* ---- the contact form, on the two partner pages ---- */
/* Built in the settled palette rather than browser defaults: a default input on
   a dark page renders as a white slab and undoes the whole design. */
.cform{margin:26px 0 0;display:grid;gap:14px;max-width:620px}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform label{display:grid;gap:7px}
.cform label>span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.cform label>span em{font-style:normal;text-transform:none;letter-spacing:0;opacity:.7}
.cform input,.cform textarea{width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:var(--rad);
  padding:13px 14px;transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.cform textarea{resize:vertical;min-height:132px;line-height:1.55}
.cform input:hover,.cform textarea:hover{background:rgba(255,255,255,.07)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:rgba(0,208,245,.66);
  background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(0,208,245,.14)}
.cform button{justify-self:start;margin-top:2px}
.cform button[disabled]{opacity:.55;cursor:default;transform:none}
/* The honeypot. Off-screen rather than display:none, because a bot that skips
   hidden fields still fills this one, which is the entire point. */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-note{margin:4px 0 0;font-size:14px;line-height:1.5;min-height:1.2em}
.cf-note.ok{color:var(--a1)}
.cf-note.bad{color:var(--a2)}
@media(max-width:640px){.cf-row{grid-template-columns:1fr}}

/* ---- article dates ---- */
/* Small, monospaced and quiet: a date is provenance, not a headline. */
.art-date{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.bp-date{display:block;margin:0 0 10px;font-family:var(--mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

/* ---- the comparison table ---- */
/* Wide content must scroll inside its own box, never make the page scroll. */
.cmp-wrap{padding:78px 0}
.cmp-scroll{margin-top:26px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp-scroll:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.cmp{width:100%;min-width:640px;border-collapse:collapse;font-size:15px;line-height:1.5}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--a1);border-bottom:1px solid rgba(0,208,245,.3)}
.cmp tbody th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:400;white-space:nowrap}
.cmp td{color:var(--dim)}
.cmp tbody tr:hover td{color:var(--ink)}
.cmp tbody td:first-of-type{color:var(--ink)}
/* visually hidden, still read aloud */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.art-by{color:var(--a1);text-decoration:none;border-bottom:1px solid rgba(0,208,245,.3)}
.art-by:hover{border-bottom-color:var(--a1)}
.art-sep{display:inline-block;width:3px;height:3px;border-radius:50%;
  background:var(--faint);margin:0 9px;vertical-align:middle}