/* ==========================================================================
   GENERATED FILE - DO NOT EDIT

   Built by tools/build-css.py from, in this order:
     fonts.css
     cirq.css
     phase1.css

   Edit those. Run `python tools/build-css.py` and commit the result; CI
   checks that this file matches its sources and fails if it does not.
   ========================================================================== */

/* ---- fonts.css ------------------------------------------------------- */
/* ==========================================================================
   THE CIRQ — brand typeface

   Avenir Next, from the supplied brand pack. Five weights, Latin subset,
   self-hosted as WOFF2: about 147 KB in total and no third-party request, so
   the site no longer reaches out to Google Fonts at all.

   Licensing note for the record: the pack contains the desktop .ttc. Webfont
   embedding is a separate Monotype licence and should be bought before launch.
   Swapping back is a one-line change to --sans in cirq.css.
   ========================================================================== */

@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/avenirnext-400.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/avenirnext-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/avenirnext-600.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/avenirnext-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Avenir Next';
  src:url('../fonts/avenirnext-800.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
}

/* ---- cirq.css -------------------------------------------------------- */
/* ==========================================================================
   THE CIRQ
   The client's own design language — dark ground, Avenir Next, rose pill
   buttons, accent-coloured headline words, floating sphere background.

   Built mobile-first: every layout is ONE column by default and columns are
   ADDED at breakpoints. No layout lives in inline styles.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* the client's palette, used the way they use it */
  --ink:#262628;
  --cream:#FFF4EE;
  --rose:#D95F73;
  --peri:#C5C1E0;
  --citron:#D5DC7D;
  --sand:#C9B19C;

  /* Rose has to do two jobs that pull in opposite directions: it fills the
     primary button, where cream sits on top of it and wants it darker, and it
     colours small accent text on the dark ground, which wants it lighter. One
     value cannot do both — the brand rose measured 3.33 under a cream label
     and 4.20 as 11px text. So it is split three ways, here and in light mode:

       --rose        the brand colour, for borders, hovers and large text
       --rose-fill   solid backgrounds a cream label sits on   (4.59)
       --rose-ink    small text, on the ground, a tinted section
                     or a chip                                 (4.6+)

     peri, citron and sand need none of this on dark: they measure 5.18 to
     10.33 and already clear everything. */
  --rose-fill:#C63E58;
  --rose-ink:#EF7589;

  --bg:#262628;
  --bg-deep:#1c1c1f;
  --tint:rgba(89,89,89,.24);      /* their alternating section wash */
  --panel:rgba(255,244,238,.045);
  --panel-2:rgba(255,244,238,.08);
  --glass:rgba(51,51,51,.19);     /* their secondary button */
  --tx:#FFF4EE;
  --tx-2:rgba(255,244,238,.72);
  --tx-3:#C9B19C;                 /* their muted copy colour */
  --tx-inv:#262628;
  --line:rgba(255,244,238,.12);
  --line-2:rgba(255,244,238,.24);

  /* the brand face, self-hosted; Avenir is the macOS sibling, then system */
  --sans:'Avenir Next','Avenir',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:30px; --r-full:100px;

  --pad:20px;
  --wrap:1280px;
  --hdr:64px;

  --shadow-1:0 2px 8px rgba(0,0,0,.28);
  --shadow-2:0 10px 34px -12px rgba(0,0,0,.55);
  --shadow-3:0 26px 60px -20px rgba(0,0,0,.75);

  --ease:cubic-bezier(.22,1,.36,1);
}
@media (min-width:600px){ :root{ --pad:32px; --hdr:72px; } }
@media (min-width:1024px){ :root{ --pad:44px; --hdr:80px; } }
@media (min-width:1400px){ :root{ --pad:60px; } }

/* optional light mode — an addition, not their default */
/* V3 revision 8: light mode was a faded copy of dark mode rather than its own
   thing. The brand accents are built for a dark ground — peri #C5C1E0 is a
   pale lilac that all but disappears on cream — so light mode now carries its
   own, deeper set, sampled from the direction reference supplied with the
   revision: lavender #8778B9 in the headline, body copy near-black, and the
   sphere field given back its depth instead of being held at 30% opacity.
   The ground stays warm cream; nothing here goes near stark white. */
[data-theme="light"]{
  --bg:#FBF2EA;
  --bg-deep:#F2E6DA;
  --tint:rgba(37,37,40,.055);
  --panel:rgba(37,37,40,.055);
  --panel-2:rgba(37,37,40,.09);
  --glass:rgba(37,37,40,.07);

  /* accents re-cut for a light ground. Rose and citron darken enough to hold
     their own against cream; peri becomes a real lavender rather than a tint
     of one. Dark mode keeps the originals. */
  --rose:#C63E58;
  --peri:#7E6FB0;
  --citron:#7E8A23;
  --sand:#9A7C62;

  /* Display accents above are sized for headlines and buttons, where WCAG's
     large-text threshold of 3:1 applies. The same colours on an 11px tag or
     eyebrow need 4.5:1 and do not reach it — rose measured 4.38 on the ground
     and 3.68 on its own tint, peri 3.97 and 3.42, citron 3.42 and 2.99, sand
     3.50 and 3.05. So small text uses a darker cut of each, chosen by solving
     for 4.5:1 against both the cream ground and the tint the chip sits on.
     The headline keeps the lighter lavender, which is what the reference
     image shows. Dark mode needs none of this: the same accents on a near
     black ground clear 4.5 comfortably. */
  --rose-fill:#C63E58;
  --rose-ink:#B32B45;
  --peri-ink:#665798;
  --citron-ink:#5A6600;
  --sand-ink:#795B41;

  --tx:#1F1F22;
  --tx-2:rgba(31,31,34,.82);
  --tx-3:#6B5341;
  --tx-inv:#FBF2EA;
  --line:rgba(37,37,40,.20);
  --line-2:rgba(37,37,40,.36);
  --shadow-1:0 2px 8px rgba(58,44,36,.10);
  --shadow-2:0 10px 34px -14px rgba(58,44,36,.28);
  --shadow-3:0 26px 60px -22px rgba(58,44,36,.40);
}

/* The tint triplets drive chip and avatar backgrounds. They are the light
   accents' RGB, so they need re-cutting too or a "peri" chip on cream stays
   the old pale lilac while its text has moved. */
[data-theme="light"] .t-rose{--t:198,62,88}
[data-theme="light"] .t-peri{--t:126,111,176;--tc:var(--peri-ink)}
[data-theme="light"] .t-citron{--t:126,138,35;--tc:var(--citron-ink)}
[data-theme="light"] .t-sand{--t:154,124,98;--tc:var(--sand-ink)}
[data-theme="light"] .tinted{background:rgba(var(--t),.13)}

/* Where an accent carries small text, it uses --rose-ink rather than --rose.
   Those are set on the rules themselves further down, so they are not fighting
   specificity or source order from up here.

   light mode only: the other three accents need darker cuts there, and none
   on dark, where they already clear 4.5 */
[data-theme="light"] .plate .pc .by .tlink{color:var(--peri-ink)}
[data-theme="light"] .legal a{color:var(--peri-ink)}
[data-theme="light"] .mini-ok{border-color:rgba(126,138,35,.55);color:var(--citron-ink)}
[data-theme="light"] .mini-ok:hover{background:rgba(126,138,35,.12)}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);background:var(--bg);color:var(--tx);
  font-size:16px;line-height:1.7;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background .45s var(--ease),color .45s var(--ease);
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:4px}
::selection{background:var(--rose-fill);color:var(--cream)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg)}

/* ---------- 3. Sphere background (their signature) ---------- */
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* Change log V2 revision 5: there used to be a .veil here — three tinted
   radial gradients laid over the canvas. The client's own page has nothing
   at all over #bg-canvas (checked: no overlay element, no pseudo-element, no
   background-image on html, body or the header), so the tint was washing the
   spheres out of the deep black they are meant to sit in. The background is
   now the canvas on the page ground and nothing else. */
.page{position:relative;z-index:2}

/* ---------- 4. Layout primitives ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap-n{max-width:900px}
.sec{padding-block:56px;position:relative}
@media (min-width:768px){ .sec{padding-block:88px} }
@media (min-width:1024px){ .sec{padding-block:118px} }
.sec-tint{background:var(--tint)}
.sec-top0{padding-top:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--rose-fill);color:var(--cream);padding:12px 20px}
.skip:focus{left:0}

.stack{display:grid;gap:20px}
.stack-l{display:grid;gap:32px}

.cols{display:grid;gap:16px}
@media (min-width:600px){ .cols-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:768px){ .cols{gap:22px} .cols-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:768px) and (max-width:1023px){ .cols-4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .cols{gap:26px} .cols-4{grid-template-columns:repeat(4,1fr)} }

.split{display:grid;gap:32px}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:52px;align-items:start}
  .split-wide{grid-template-columns:1.3fr 1fr}
  .split-narrow{grid-template-columns:1fr 1.3fr}
  .split-mid{align-items:center}
}

/* ---------- 5. Type (their treatment) ---------- */
.eyebrow{
  display:block;font-size:11px;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--rose-ink);
}
h1,h2,h3,h4{font-weight:700;line-height:1.12;letter-spacing:-.01em}
.h-xl{font-size:clamp(36px,8.4vw,80px);font-weight:700;line-height:1.06;letter-spacing:-.02em}
.h-lg{font-size:clamp(30px,5.6vw,65px);font-weight:700;line-height:1.08;letter-spacing:-.018em}
.h-md{font-size:clamp(22px,3.4vw,30px);font-weight:700;line-height:1.2}
.h-sm{font-size:clamp(17px,2.2vw,21px);font-weight:700;line-height:1.25}
/* their signature: the second word of a heading carries an accent colour */
.w-peri{color:var(--peri)} .w-citron{color:var(--citron)}
.w-rose{color:var(--rose)} .w-sand{color:var(--sand)}
.upper{text-transform:uppercase}

.lede{font-size:16px;line-height:1.75;color:var(--tx-2);max-width:60ch}
@media (min-width:768px){ .lede{font-size:17px} }
.lede-l{font-size:17px;line-height:1.6;color:var(--tx);max-width:46ch;font-weight:500}
@media (min-width:768px){ .lede-l{font-size:22px} }
.small{font-size:14.5px;line-height:1.65;color:var(--tx-2)}
.tiny{font-size:12.5px;line-height:1.55;color:var(--tx-3)}
.muted{color:var(--tx-3)}
.cap{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}
.mono{font-variant-numeric:tabular-nums}
.c-rose{color:var(--rose)}.c-peri{color:var(--peri)}
.c-citron{color:var(--citron)}.c-sand{color:var(--sand)}

/* tint helpers */
.t-rose{--t:198,62,88;--tc:var(--rose-ink)}
.t-peri{--t:197,193,224;--tc:var(--peri)}
.t-citron{--t:213,220,125;--tc:var(--citron)}
.t-sand{--t:201,177,156;--tc:var(--sand)}
.tinted{background:rgba(var(--t),.14)}
.dot{width:7px;height:7px;border-radius:50%;background:rgb(var(--t));flex:none}

.lead{display:grid;gap:14px;margin-bottom:30px}
.lead .eyebrow{margin-bottom:2px}
@media (min-width:900px){
  .lead{grid-template-columns:1fr auto;align-items:end;gap:34px;margin-bottom:44px}
  .lead p{max-width:40ch;justify-self:end}
}

/* ---------- 6. Buttons (their pills) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border-radius:var(--r-full);
  font-size:14.5px;font-weight:600;white-space:nowrap;
  background:var(--rose-fill);color:var(--cream);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
  box-shadow:0 6px 20px -10px rgba(199,102,115,.7);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px -12px rgba(199,102,115,.85)}
.btn:active{transform:translateY(0)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-2{background:var(--glass);color:var(--tx);border:1px solid var(--line-2);box-shadow:none;
  backdrop-filter:blur(10px)}
.btn-2:hover{background:var(--panel-2);box-shadow:none}
.btn-light{background:var(--cream);color:var(--ink);box-shadow:none}
.btn-light:hover{box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}
.btn-s{min-height:40px;padding:0 18px;font-size:13px}
.btn-l{min-height:54px;padding:0 32px;font-size:15px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:539px){ .btn-row > .btn{flex:1 1 100%} }

.tlink{display:inline-flex;align-items:center;gap:9px;min-height:40px;
  font-size:14px;font-weight:600;color:var(--tx);transition:gap .3s var(--ease),color .3s}
.tlink:hover{gap:13px;color:var(--rose)}

/* ---------- 7. Header (their nav) ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--hdr);display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),transform .4s var(--ease)}
.hdr.stuck{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:0 1px 0 var(--line)}
.hdr.away{transform:translateY(-102%)}
.hdr-in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:12px}

/* The official wordmark, not typed text (change log 8). It is drawn as a mask
   filled with currentColor, so one file serves every brand colour and the logo
   simply follows the text colour in light and dark. There is no badge, border,
   container or background shape behind it — the mask is the whole logo.

   Change log V2 revision 2: the ring around "cirq" is gone from the artwork,
   and the box is sized to the letters rather than to a mostly-empty 850x425
   canvas. The word now renders at 108x30 on desktop, matching the size the
   client's own site draws it at and roughly 40% larger than the ~79x21 it was
   actually reaching before, comfortably past the 10-15% asked for. */
.mark{display:inline-block;width:100px;height:28px;flex:none;color:var(--tx);
  background-color:currentColor;
  -webkit-mask:url("../brand/thecirq-wordmark.svg?v=84") no-repeat left center;
  mask:url("../brand/thecirq-wordmark.svg?v=84") no-repeat left center;
  -webkit-mask-size:contain;mask-size:contain}
@media (min-width:768px){ .mark{width:108px;height:30px} }
.mark:hover{color:var(--rose)}
.mark:focus-visible{outline:2px solid var(--rose);outline-offset:4px;border-radius:4px}
/* Masks drop the artwork from the accessibility tree, so the name is carried
   by visually-hidden text inside the link. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.nav{display:none}
@media (min-width:1060px){
  .nav{display:flex;align-items:center;gap:2px;margin-left:22px}
  .nav a{padding:9px 14px;border-radius:var(--r-full);font-size:14px;font-weight:500;color:var(--tx-2);
    transition:color .25s,background .25s}
  .nav a:hover{color:var(--tx);background:var(--panel)}
  .nav a.on{color:var(--tx)}
  .nav a.on::after{content:"";display:block;width:5px;height:5px;border-radius:50%;background:var(--rose-fill);
    margin:3px auto 0}
}
.tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.ico{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  color:var(--tx-2);transition:background .25s,color .25s}
.ico:hover{background:var(--panel);color:var(--tx)}
.ico .cnt{position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--rose-fill);color:var(--cream);font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1}
.ico .cnt[hidden]{display:none}
.hdr .btn{display:none}
@media (min-width:1060px){ .hdr .btn{display:inline-flex;margin-left:6px} }
.kbd{font-size:10px;font-weight:600;padding:2px 6px;border-radius:5px;background:var(--panel-2);color:var(--tx-3)}

.burger{width:42px;height:42px;border-radius:50%;position:relative}
.burger:hover{background:var(--panel)}
@media (min-width:1060px){ .burger{display:none} }
.burger i{position:absolute;left:12px;width:18px;height:1.8px;background:var(--tx);border-radius:2px;
  transition:.4s var(--ease)}
.burger i:nth-child(1){top:16px}
.burger i:nth-child(2){top:24px;width:12px}
.burger.on i:nth-child(1){top:20px;rotate:45deg}
.burger.on i:nth-child(2){top:20px;width:18px;rotate:-45deg}

.drawer{position:fixed;inset:0;z-index:190;background:var(--bg-deep);visibility:hidden;opacity:0;
  padding:calc(var(--hdr) + 20px) var(--pad) 28px;display:flex;flex-direction:column;
  transition:opacity .35s var(--ease),visibility .35s;overflow-y:auto}
.drawer.on{visibility:visible;opacity:1}
.drawer a.dl{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:26px;font-weight:700;letter-spacing:-.02em;
  padding:16px 0;border-bottom:1px solid var(--line);color:var(--tx);
  opacity:0;translate:0 16px;transition:opacity .45s var(--ease),translate .45s var(--ease)}
.drawer.on a.dl{opacity:1;translate:0 0}
.drawer a.dl em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--tx-3)}
.drawer .dfoot{margin-top:auto;padding-top:26px;display:grid;gap:10px}

/* ---------- 8. Hero ---------- */
.hero{padding-top:calc(var(--hdr) + 44px);padding-bottom:52px;position:relative}
@media (min-width:768px){ .hero{padding-top:calc(var(--hdr) + 78px);padding-bottom:84px} }
@media (min-width:1024px){ .hero{min-height:88svh;display:flex;align-items:center} }
.hero .wrap{width:100%}
.hero .h-xl{margin:18px 0 20px}
.hero .lede{margin-bottom:30px}
/* Change log V2 revision 3: the three floating profile cards that sat to the
   right are gone, so the hero is one column. It is centred and capped rather
   than run to the full wrap width, because a 1280px line of body copy is
   nobody's idea of readable. The stats bar is a sibling, not a child, so it
   still spans the full width below. */
.hero-grid{display:grid;gap:36px}
.hero-col{max-width:56rem;margin-inline:auto;text-align:center}
.hero-col .btn-row{justify-content:center}

/* V3 revision 1: the headline sits on two lines and only two — "Find Your"
   then "Creative Circle" — at every width. Each half is its own block, so the
   break is structural rather than left to how wide the window happens to be:
   it cannot collapse onto one line on a large screen or spill to three on a
   small one. The h-xl scale is already fluid, so "Creative Circle" still fits
   its line down to 320px. */
.hero-col .h-xl .ln{display:block}

/* display:grid in the rule below beats the browser's own [hidden]{display:none},
   so without this the bar still lays out at 2px with its own background and
   draws a stray hairline across the hero whenever the figures are hidden. */
.stats[hidden]{display:none}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:34px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
@media (min-width:600px){
  .stats{grid-template-columns:repeat(4,1fr)}
  /* set by dataCounters once it knows how many figures are on screen */
  .stats[data-cols="1"]{grid-template-columns:1fr}
  .stats[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
  .stats[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
}
.stats div{background:var(--bg);padding:16px 14px}
.stats b{display:block;font-size:27px;font-weight:700;line-height:1;letter-spacing:-.02em}
@media (min-width:768px){ .stats b{font-size:32px} }
.stats span{display:block;margin-top:7px;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3)}

/* hero side: stacked profile cards */

/* ---------- 9. Discipline marquee ---------- */
.strip{border-block:1px solid var(--line);padding-block:15px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.strip-track{display:flex;width:max-content;animation:marq var(--marq,46s) linear infinite}
.strip:hover .strip-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.strip a{display:inline-flex;align-items:center;gap:9px;padding:0 20px;white-space:nowrap;
  font-size:16px;font-weight:600;color:var(--tx-2);transition:color .25s}
@media (min-width:768px){ .strip a{font-size:18px;padding:0 26px} }
.strip a:hover{color:var(--rose)}
.strip a sup{font-size:10px;font-weight:700;color:var(--tx-3)}

/* ---------- 10. Cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;
  backdrop-filter:blur(8px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
@media (min-width:768px){ .card{padding:28px} }
.card-hov:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-2)}

/* numbered process step — their coloured headings */
.step{display:grid;gap:12px;align-content:start}
.step .sn{font-size:44px;font-weight:800;line-height:1;letter-spacing:-.04em;
  -webkit-text-stroke:1.4px var(--tc);color:transparent;opacity:.9}
.step h3{font-size:26px;font-weight:700;color:var(--tc);letter-spacing:-.015em}
@media (min-width:768px){ .step h3{font-size:30px} }

/* discipline tile */
.tile{display:flex;align-items:center;gap:13px;padding:17px;border-radius:var(--r-m);
  background:var(--panel);border:1px solid var(--line);min-height:66px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.tile .ti{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:15px;font-weight:700;color:var(--tc)}
.tile b{font-size:14px;font-weight:700;flex:1;min-width:0}
.tile .n{font-size:13px;font-weight:700;color:var(--tx-3);font-variant-numeric:tabular-nums}

/* ---------- 11. Freelancer card (their layout) ---------- */
.people{display:grid;gap:16px}
@media (min-width:560px){ .people{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .people{grid-template-columns:repeat(3,1fr);gap:22px} }
@media (min-width:1280px){ .people-4{grid-template-columns:repeat(4,1fr)} }

.person{position:relative;display:flex;flex-direction:column;gap:15px;padding:22px;border-radius:var(--r-l);
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(8px);text-align:left;
  cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
.person .p-top{display:flex;align-items:center;gap:13px}
.person .av{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:20px;font-weight:700;color:var(--tc)}
.person .p-id{min-width:0;flex:1}
.person .p-name{display:flex;align-items:center;gap:7px;font-size:17px;font-weight:700;letter-spacing:-.01em;
  line-height:1.2}
.person .p-sub{font-size:12px;font-weight:600;color:var(--tx-3);margin-top:4px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.person .p-sub .sep{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7}
.person .p-bio{font-size:14px;line-height:1.6;color:var(--tx-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.person .p-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:15px;border-top:1px solid var(--line);margin-top:auto}
.person .p-rate{font-size:15px;font-weight:700}
.person .p-rate small{font-size:10.5px;font-weight:600;color:var(--tx-3);margin-left:3px}
.vf{width:15px;height:15px;flex:none;color:var(--citron)}

.avail{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-2)}
.avail i{width:6px;height:6px;border-radius:50%;background:var(--citron);flex:none;
  box-shadow:0 0 8px var(--citron)}
.avail.limited i{background:var(--sand);box-shadow:0 0 8px var(--sand)}
.avail.booked i{background:var(--tx-3);box-shadow:none}

.save{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:var(--tx-3);border:1px solid var(--line);
  transition:color .25s,background .25s,border-color .25s}
.save:hover{color:var(--rose);border-color:var(--rose)}
.save.on{background:var(--rose-fill);border-color:var(--rose-fill);color:var(--cream)}

.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:11px;font-weight:600;padding:6px 12px;border-radius:var(--r-full);
  background:var(--panel-2);color:var(--tx-2);border:1px solid transparent}
.tag-t{background:rgba(var(--t),.14);color:var(--tc);border-color:rgba(var(--t),.32)}

/* ---------- 12. Featured work ---------- */
.plates{display:grid;gap:16px}
@media (min-width:700px){ .plates{grid-template-columns:repeat(6,1fr);gap:22px} }
.plate{display:block;border-radius:var(--r-l);overflow:hidden;background:var(--panel);
  border:1px solid var(--line);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.plate:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--line-2)}
@media (min-width:700px){
  .plate:nth-child(1){grid-column:span 4}
  .plate:nth-child(2){grid-column:span 2}
  .plate:nth-child(3){grid-column:span 2}
  .plate:nth-child(4){grid-column:span 2}
  .plate:nth-child(5){grid-column:span 2}
}
.plate .ph{display:block;position:relative;aspect-ratio:16/11;background:var(--pl);overflow:hidden}
.plate:nth-child(1) .ph{aspect-ratio:16/9}
.plate .flag{display:block;position:absolute;top:12px;left:12px;padding:6px 12px;border-radius:var(--r-full);
  background:rgba(20,20,22,.6);backdrop-filter:blur(8px);border:1px solid rgba(252,244,238,.2);
  color:#FCF4EE;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.plate .pc{padding:16px 18px 18px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.plate .pc b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.plate .pc em{display:block;margin-top:6px;font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)}
.plate .pc .k{font-size:12.5px;font-weight:700;color:var(--tx-3);flex:none}

/* mobile: swipeable carousel */
@media (max-width:699px){
  .plates{grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:12px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none}
  .plates::-webkit-scrollbar{display:none}
  .plate{scroll-snap-align:start}
}

/* ---------- 13. Directory ---------- */
.dir{display:grid;gap:24px}
@media (min-width:1000px){ .dir{grid-template-columns:250px 1fr;gap:44px;align-items:start} }
.filters{display:none}
@media (min-width:1000px){
  .filters{display:block;position:sticky;top:calc(var(--hdr) + 16px);
    max-height:calc(100svh - var(--hdr) - 36px);overflow-y:auto;padding-right:4px}
}
@media (max-width:999px){
  .filters.on{display:block;position:fixed;inset:auto 0 0 0;z-index:210;background:var(--bg-deep);
    border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -18px 50px -18px rgba(0,0,0,.7);
    max-height:84svh;overflow-y:auto;padding:8px var(--pad) 24px;animation:sheet .38s var(--ease)}
  .filters.on::before{content:"";display:block;width:44px;height:4px;border-radius:99px;
    background:var(--line-2);margin:8px auto 16px}
  .sheet-bd{position:fixed;inset:0;z-index:205;background:rgba(0,0,0,.55);animation:fade .3s var(--ease)}
}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
.fg{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fg:last-of-type{border:0;margin-bottom:0}
.fg h3,.fg h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:12px}
.ck{display:flex;align-items:center;gap:11px;min-height:40px;font-size:14px;color:var(--tx-2);cursor:pointer;
  transition:color .2s}
.ck:hover{color:var(--tx)}
.ck input{appearance:none;width:19px;height:19px;flex:none;border:1.6px solid var(--line-2);border-radius:6px;
  position:relative;transition:.2s}
.ck input:checked{background:var(--rose-fill);border-color:var(--rose)}
.ck input:checked::after{content:"";position:absolute;left:6px;top:2px;width:4px;height:9px;
  border:solid var(--cream);border-width:0 2px 2px 0;rotate:45deg}
.ck .n{margin-left:auto;font-size:11.5px;color:var(--tx-3);font-variant-numeric:tabular-nums}
.rr{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--tx-3);margin-bottom:10px}
input[type=range]{width:100%;appearance:none;height:4px;border-radius:99px;background:var(--line-2)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--rose-fill);cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.5)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--rose-fill);cursor:pointer}

.dbar{display:grid;gap:12px;margin-bottom:16px}
@media (min-width:640px){ .dbar{grid-template-columns:1fr auto auto;align-items:center} }
.srch{position:relative}
.srch input{width:100%;min-height:50px;padding:0 16px 0 46px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line);font-size:15px;
  transition:border-color .25s,box-shadow .25s}
.srch input::placeholder{color:var(--tx-3)}
.srch input:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(199,102,115,.18)}
.srch .ic{position:absolute;left:17px;top:50%;translate:0 -50%;color:var(--tx-3);pointer-events:none}
.sel{position:relative}
.sel select{appearance:none;min-height:50px;width:100%;padding:0 40px 0 18px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line);font-size:13.5px;font-weight:600;cursor:pointer}
.sel select:focus{outline:none;border-color:var(--rose)}
.sel select option{background:var(--bg-deep);color:var(--tx)}
.sel::after{content:"";position:absolute;right:18px;top:50%;translate:0 -70%;width:6px;height:6px;
  border-right:1.6px solid var(--tx-3);border-bottom:1.6px solid var(--tx-3);rotate:45deg;pointer-events:none}
.ftog{display:inline-flex}
@media (min-width:1000px){ .ftog{display:none} }
.rline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--tx-3)}
.rline b{font-size:19px;font-weight:700;color:var(--tx)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 10px 0 14px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--tx)}
.chip button{font-size:13px;line-height:1;color:var(--tx-3);padding:4px}
.chip button:hover{color:var(--rose)}
.empty{padding:56px 20px;text-align:center;background:var(--panel);border:1px dashed var(--line-2);border-radius:var(--r-l);grid-column:1/-1}/* span the whole grid: as one cell it rendered as a tall narrow column
   beside empty space, which looks like a broken card rather than a message */
.skel{height:172px;border-radius:var(--r-l);border:1px solid var(--line);background:var(--panel);
  position:relative;overflow:hidden}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(252,244,238,.05) 50%,transparent 70%);
  background-size:220% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-220% 0}}

/* ---------- 14. Forms ---------- */
.field{display:grid;gap:8px;margin-bottom:20px}
.field label{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--tx-2)}
.field label .rq{color:var(--rose-ink)}
.field input,.field textarea,.field select{
  width:100%;min-height:50px;padding:13px 16px;border-radius:var(--r-m);
  background:var(--panel);border:1px solid var(--line);font-size:15.5px;
  transition:border-color .25s,box-shadow .25s}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px;background-repeat:no-repeat}
.field select option{background:var(--bg-deep);color:var(--tx)}
.field textarea{min-height:130px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--rose);
  box-shadow:0 0 0 3px rgba(199,102,115,.18)}
.field input::placeholder,.field textarea::placeholder{color:var(--tx-3)}
.field .er{font-size:12px;font-weight:600;color:var(--rose-ink);display:none}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--rose)}
.field.bad .er{display:block}
.f2{display:grid}
@media (min-width:600px){ .f2{grid-template-columns:1fr 1fr;gap:0 20px} }

.pick{display:flex;flex-wrap:wrap;gap:9px}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick label{display:inline-flex;align-items:center;min-height:42px;padding:0 17px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line);cursor:pointer;font-size:13px;font-weight:600;
  color:var(--tx-2);transition:.25s var(--ease)}
.pick label:hover{border-color:var(--line-2);color:var(--tx)}
.pick input:checked + label{background:var(--rose-fill);border-color:var(--rose-fill);color:var(--cream)}
.pick input:focus-visible + label{outline:2px solid var(--rose);outline-offset:2px}

.steps{display:flex;align-items:center;gap:6px;margin-bottom:28px;overflow-x:auto;scrollbar-width:none;
  padding-bottom:2px}
.steps::-webkit-scrollbar{display:none}
.steps .st{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--tx-3);
  white-space:nowrap;flex:none}
.steps .st .b{width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  border:1px solid var(--line);transition:.3s}
.steps .st.on{color:var(--tx)}
.steps .st.on .b{background:var(--rose-fill);border-color:var(--rose-fill);color:var(--cream)}
.steps .st.done .b{background:var(--citron);border-color:var(--citron);color:var(--ink)}
.steps .ln2{width:14px;height:1px;background:var(--line-2);flex:none}
.pane{display:none}
.pane.on{display:block;animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.fnav{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:28px;
  padding-top:22px;border-top:1px solid var(--line)}
/* pill buttons are nowrap; on small phones stack them so they cannot overflow */
@media (max-width:539px){ .fnav .btn{flex:1 1 100%} }
.prail{height:4px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:28px}
.prail i{display:block;height:100%;background:var(--rose-fill);transform-origin:left;transition:transform .5s var(--ease)}

/* ---------- 15. Overlays ---------- */
.ov{position:fixed;inset:0;z-index:300;display:none}
.ov.on{display:block}
.ov-bd{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ov-p{position:absolute;left:0;right:0;bottom:0;max-height:92svh;overflow-y:auto;
  background:var(--bg-deep);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-3);
  animation:sheet .4s var(--ease)}
@media (min-width:768px){
  .ov{display:none;place-items:center;padding:var(--pad)}
  .ov.on{display:grid}
  .ov-p{position:relative;inset:auto;margin:0 auto;width:100%;max-width:660px;max-height:88svh;
    border:1px solid var(--line);border-radius:var(--r-xl);animation:pop .4s var(--ease)}
}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.99)}to{opacity:1;transform:none}}
.ov-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--panel-2);color:var(--tx-2);transition:.3s}
.ov-x:hover{background:var(--rose-fill);color:var(--cream);rotate:90deg}

.cmd .ov-p{max-width:580px}
@media (min-width:768px){ .cmd.on{align-items:start} .cmd .ov-p{margin-top:9svh} }
.cmd-in{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)}
.cmd-in input{flex:1;font-size:16px;min-height:30px}
.cmd-in input:focus{outline:none}
.cmd-l{padding:8px;max-height:56svh;overflow-y:auto}
.cmd-s{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);padding:12px 12px 6px}
.cmd-i{display:flex;align-items:center;gap:13px;width:100%;min-height:52px;padding:8px 12px;border-radius:var(--r-m);
  text-align:left;transition:background .2s}
.cmd-i:hover,.cmd-i.cur{background:var(--panel)}
.cmd-i .ci{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:14px;font-weight:700;color:var(--tc);background:var(--panel-2)}
.cmd-i b{display:block;font-size:14.5px;font-weight:600}
.cmd-i span{font-size:11.5px;color:var(--tx-3)}
.cmd-f{display:flex;gap:16px;padding:12px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--tx-3)}

.ph-hd{padding:26px 22px 22px;position:relative;background:rgba(var(--t),.12);border-bottom:1px solid var(--line)}
@media (min-width:768px){ .ph-hd{padding:30px 30px 24px} }
.ph-top{display:flex;align-items:center;gap:15px}
.ph-hd .av{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:23px;font-weight:700;color:var(--tc)}
.ph-hd .nm{font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1.15;
  display:flex;align-items:center;gap:8px}
.mrow{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:16px;font-size:12px;color:var(--tx-2)}
.ph-bd{padding:24px 22px 26px;display:grid;gap:22px}
@media (min-width:768px){ .ph-bd{padding:26px 30px 30px} }
.ph-bd h4{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:11px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.trio div{background:var(--bg-deep);padding:15px 12px;text-align:center}
.trio b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1}
.trio span{display:block;margin-top:6px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tx-3)}
.strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.strip3 i{display:block;aspect-ratio:1;border-radius:var(--r-m)}

.toasts{position:fixed;left:50%;bottom:20px;translate:-50% 0;z-index:400;display:grid;gap:8px;
  justify-items:center;pointer-events:none;width:calc(100% - 32px);max-width:420px}
.toast{display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r-full);
  background:var(--cream);color:var(--ink);font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-3);animation:tin .4s var(--ease);max-width:100%}
.toast i{width:7px;height:7px;border-radius:50%;background:var(--rose-fill);flex:none}
@keyframes tin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.toast.out{animation:tout .3s var(--ease) forwards}
@keyframes tout{to{opacity:0;transform:translateY(10px)}}

/* ---------- 16. Misc ---------- */
.checks{display:grid}
.checks li{display:flex;gap:13px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--tx-2)}
.checks li:last-child{border:0}
.checks .k{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(var(--t),.12);color:var(--tc);font-size:11px;font-weight:700;margin-top:2px}

.quote p{font-size:19px;line-height:1.5;font-weight:500;letter-spacing:-.01em}
@media (min-width:768px){ .quote p{font-size:23px} }
.quote footer{display:flex;align-items:center;gap:13px;padding-top:18px;margin-top:20px;border-top:1px solid var(--line)}
.quote footer b{font-size:14px;font-weight:700}
.quote .qav{width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-weight:700;font-size:15px;color:var(--tc)}
.quote footer span{font-size:12px;color:var(--tx-3)}

.acc{border-top:1px solid var(--line)}
.ai{border-bottom:1px solid var(--line)}
.aq{width:100%;display:flex;align-items:center;gap:16px;padding:20px 0;text-align:left;
  font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.35;transition:color .3s}
@media (min-width:768px){ .aq{font-size:19px;padding:24px 0} }
.aq:hover{color:var(--rose)}
.aq .pm{margin-left:auto;width:30px;height:30px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  position:relative;transition:.35s}
.aq .pm::before,.aq .pm::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;translate:-50% -50%}
.aq .pm::before{width:11px;height:1.6px}
.aq .pm::after{width:1.6px;height:11px;transition:transform .4s var(--ease)}
.ai.on .aq{color:var(--rose)}
.ai.on .aq .pm{background:var(--rose-fill);border-color:var(--rose-fill);color:var(--cream)}
.ai.on .aq .pm::after{transform:scaleY(0)}
.aa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.ai.on .aa{grid-template-rows:1fr}
.aa>div{overflow:hidden}
.aa p{padding-bottom:24px;color:var(--tx-2);font-size:15px;max-width:68ch}

.cta{border-radius:var(--r-xl);padding:44px 24px;text-align:center;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(10px)}
@media (min-width:768px){ .cta{padding:72px 44px} }
.cta::before{content:"";position:absolute;inset:-40%;z-index:-1;filter:blur(60px);opacity:.42;
  background:conic-gradient(from 0deg,rgba(199,102,115,.5),rgba(199,197,237,.4),rgba(213,218,139,.4),rgba(199,102,115,.5))}
.cta .btn-row{justify-content:center;margin-top:26px}
.cta .lede{margin-inline:auto}

.rowlist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.rowlist a,.rowlist .ri{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--bg);padding:17px 18px;transition:background .25s}
.rowlist a:hover{background:var(--panel)}
.rowlist .rk{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.rowlist .rv{font-size:16px;font-weight:700;text-align:right}

/* ---------- 17. Footer ---------- */
.ftr{position:relative;z-index:2;margin-top:56px;background:rgba(0,0,0,.2);border-top:1px solid var(--line);
  padding-top:48px;backdrop-filter:blur(10px)}
[data-theme="light"] .ftr{background:rgba(37,37,40,.04)}
@media (min-width:768px){ .ftr{margin-top:88px;padding-top:68px} }
.ftr-grid{display:grid;gap:32px}
@media (min-width:600px){ .ftr-grid{grid-template-columns:1fr 1fr;gap:34px 24px} }
@media (min-width:1000px){ .ftr-grid{grid-template-columns:1.7fr repeat(3,1fr);gap:46px} }
.ftr h5,.ftr .fh{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:16px}
.ftr li{margin-bottom:10px}
.ftr li a{font-size:14px;color:var(--tx-2);transition:color .25s}
.ftr li a:hover{color:var(--rose)}
.ftr .fb p{font-size:14px;color:var(--tx-2);max-width:34ch;margin:16px 0 20px}
.socs{display:flex;gap:9px}
.socs a{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--tx-2);transition:.3s}
.socs a:hover{background:var(--rose-fill);border-color:var(--rose-fill);color:var(--cream)}
.fsub{display:flex;gap:9px;margin-top:18px}
.fsub input{flex:1;min-width:0;min-height:46px;padding:0 16px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line);font-size:14px}
.fsub input:focus{outline:none;border-color:var(--rose)}
.fbtm{margin-top:38px;padding:22px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 20px;
  align-items:center;justify-content:space-between;font-size:12.5px;color:var(--tx-3)}
.fbtm .lk{display:flex;align-items:center;gap:18px;flex-wrap:wrap}/* the email is a 36px tap target with its text centred inside; without
   align-items the plain span beside it stretches and its text sits at the
   top of that height, so the two read as being on different baselines */
.fbtm a:hover{color:var(--rose)}

/* ---------- 18. Motion ---------- */
[data-rv]{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
[data-rv].in{opacity:1;transform:none}
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);
  background:var(--rose-fill);z-index:250}
.totop{position:fixed;right:16px;bottom:16px;z-index:180;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;background:var(--rose-fill);color:var(--cream);box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
@media (min-width:1000px){ .totop{right:26px;bottom:26px} }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-rv]{opacity:1;transform:none}
}

/* ---------- 19. Non-layout utilities ---------- */
.center{text-align:center}
.mt-s{margin-top:12px}.mt-m{margin-top:22px}.mt-l{margin-top:38px}
.mb-s{margin-bottom:12px}.mb-m{margin-bottom:22px}.mb-l{margin-bottom:38px}
.mx-auto{margin-inline:auto}
.hide-lg{display:block}
@media (min-width:1000px){ .hide-lg{display:none} }

/* ==========================================================================
   20. PORTALS (admin / customer / user)
   Same bubble design language. Mobile-first: the sidebar becomes a bottom tab
   bar and tables become stacked cards.
   ========================================================================== */

/* --- sign-in --- */
.auth{min-height:100svh;display:grid;place-items:center;padding:calc(var(--hdr) + 32px) var(--pad) 48px}
.auth-box{width:100%;max-width:600px}
.role-grid{display:grid;gap:12px;margin-top:26px}
@media (min-width:700px){ .role-grid{grid-template-columns:repeat(3,1fr)} }
.role{display:grid;gap:10px;justify-items:center;text-align:center;padding:26px 18px;border-radius:var(--r-l);
  background:var(--panel);border:1px solid var(--line);cursor:pointer;
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.role:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--shadow-2)}
.role .ri{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  font-size:19px;font-weight:700;color:var(--tc)}
.role b{font-size:15.5px;font-weight:700}
.role span{font-size:12.5px;color:var(--tx-3);line-height:1.5}

/* --- shell --- */
.pshell{display:grid;min-height:100svh}
@media (min-width:1000px){ .pshell{grid-template-columns:250px 1fr} }

.pside{display:none}
@media (min-width:1000px){
  .pside{display:flex;flex-direction:column;gap:8px;position:sticky;top:0;height:100svh;
    padding:22px 18px;border-right:1px solid var(--line);background:rgba(0,0,0,.18);backdrop-filter:blur(10px)}
}
[data-theme="light"] .pside{background:rgba(37,37,40,.03)}
.pside .mark{margin-bottom:14px}
.pnav{display:grid;gap:4px}
.pnav a,.pnav button{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 14px;
  border-radius:var(--r-m);font-size:14px;font-weight:600;color:var(--tx-2);width:100%;text-align:left;
  transition:background .25s,color .25s}
.pnav a:hover,.pnav button:hover{background:var(--panel);color:var(--tx)}
.pnav a.on{background:var(--panel-2);color:var(--tx)}
.pnav a.on .pi{color:var(--rose)}
.pnav .pi{width:20px;flex:none;display:grid;place-items:center;color:var(--tx-3)}
.pside-foot{margin-top:auto;display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--line)}

.pmain{min-width:0;display:flex;flex-direction:column}
.pbar{position:sticky;top:0;z-index:120;display:flex;align-items:center;gap:12px;
  min-height:62px;padding:10px var(--pad);border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px)}
.pbar h1{font-size:17px;font-weight:700;letter-spacing:-.01em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:768px){ .pbar h1{font-size:20px} }
.pbar .pb-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.chipuser{display:flex;align-items:center;gap:9px;min-height:40px;padding:0 12px 0 6px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line);font-size:12.5px;font-weight:600;white-space:nowrap}
.chipuser .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--tc);flex:none}
@media (max-width:539px){ .chipuser span{display:none} .chipuser{padding:0 6px} }

.pbody{padding:22px var(--pad) 96px;flex:1}
@media (min-width:1000px){ .pbody{padding-bottom:44px} }
.psec{margin-bottom:22px}
.psec:last-child{margin-bottom:0}

/* mobile bottom tabs */
.ptabs{position:fixed;left:0;right:0;bottom:0;z-index:150;display:grid;grid-auto-flow:column;
  background:color-mix(in srgb,var(--bg-deep) 94%,transparent);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:1000px){ .ptabs{display:none} }
.ptabs a{display:grid;justify-items:center;gap:3px;padding:9px 4px 10px;min-height:58px;
  font-size:10px;font-weight:600;color:var(--tx-3);transition:color .25s}
.ptabs a.on{color:var(--rose-ink)}

/* --- stat cards --- */
.pstats{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .pstats{grid-template-columns:repeat(4,1fr);gap:16px} }
.pstat{padding:16px;border-radius:var(--r-l);background:var(--panel);border:1px solid var(--line)}
.pstat b{display:block;font-size:26px;font-weight:700;line-height:1;letter-spacing:-.02em}
@media (min-width:768px){ .pstat b{font-size:31px} }
.pstat span{display:block;margin-top:7px;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tx-3)}
.pstat .d{margin-top:9px;font-size:12px;font-weight:600;color:var(--tc)}

/* --- panels --- */
.panelbox{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.ph-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line)}
.ph-row h2{font-size:15.5px;font-weight:700}
.ph-row .r{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.pbox-in{padding:18px}

/* --- data table that becomes cards on phones --- */
.dtable{width:100%;border-collapse:collapse}
.dtable th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.dtable td{padding:14px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.dtable tr:last-child td{border-bottom:0}
.dtable .nm{font-weight:700}
.dtable .acts{display:flex;gap:8px;flex-wrap:wrap}
@media (min-width:768px){ .dtable .acts{justify-content:flex-end} }
@media (max-width:767px){
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable thead{display:none}
  .dtable tr{border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:12px;
    padding:6px 14px;background:var(--bg)}
  .dtable tr:last-child{margin-bottom:0}
  .dtable td{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 0;border-bottom:1px solid var(--line);text-align:right}
  .dtable td:last-child{border-bottom:0}
  .dtable td[data-l]::before{content:attr(data-l);flex:none;font-size:11px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);text-align:left}
}

/* --- badges --- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap;
  background:rgba(var(--t),.16);color:var(--tc);border:1px solid rgba(var(--t),.3)}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* --- inline actions --- */
.mini{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;
  border-radius:var(--r-full);font-size:12.5px;font-weight:600;border:1px solid var(--line-2);
  color:var(--tx);background:transparent;transition:.25s var(--ease);white-space:nowrap}
.mini:hover{background:var(--panel-2)}
.mini-ok{border-color:rgba(213,218,139,.5);color:var(--citron)}
.mini-ok:hover{background:rgba(213,218,139,.14)}
.mini-no{border-color:rgba(198,62,88,.55);color:var(--rose-ink)}
.mini-no:hover{background:rgba(198,62,88,.12)}

/* --- availability switch --- */
.seg3{display:grid;grid-auto-flow:column;gap:4px;padding:4px;border-radius:var(--r-full);
  background:var(--panel-2);border:1px solid var(--line)}
.seg3 button{min-height:40px;padding:0 12px;border-radius:var(--r-full);font-size:12.5px;font-weight:600;
  color:var(--tx-2);transition:.25s}
.seg3 button.on{background:var(--rose-fill);color:var(--cream)}

/* --- meter --- */
.meter{height:8px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:var(--citron);border-radius:99px;transition:width .6s var(--ease)}

/* --- empty state --- */
.pempty{padding:40px 18px;text-align:center;color:var(--tx-3);font-size:14px}

/* --- portal list rows --- */
.plist{display:grid}
.plist .pitem{display:grid;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.plist .pitem:last-child{border-bottom:0}
@media (min-width:768px){ .plist .pitem{grid-template-columns:1fr auto;align-items:center;gap:18px} }
.plist .pi-t{font-size:15px;font-weight:700}
.plist .pi-m{font-size:12.5px;color:var(--tx-3);margin-top:5px;display:flex;flex-wrap:wrap;gap:6px 14px}
.plist .pi-b{font-size:13.5px;color:var(--tx-2);margin-top:8px;line-height:1.6}
.plist .pi-a{display:flex;gap:8px;flex-wrap:wrap}

/* --- portal surfaces ---------------------------------------------------
   The marketing pages can be airy, but portal tables sit on top of the
   bubble field. Give portal panels a calmer, more opaque ground so data
   stays readable, and settle the canvas behind them.                     */
.pshell .panelbox,
.pshell .pstat{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px)}
.pshell .pside{background:color-mix(in srgb,var(--bg-deep) 82%,transparent)}
.pshell .dtable tr{background:transparent}
@media (max-width:767px){ .pshell .dtable tr{background:color-mix(in srgb,var(--bg) 92%,transparent)} }
body:has(.pshell) #bg{opacity:.5}
body:has(.auth) #bg{opacity:.75}

/* Light mode is an addition, not the client's default. Pale spheres on a cream
   ground swallow the copy, so settle the field right back in that theme. */
[data-theme="light"] #bg{opacity:.92}
body:has(.pshell)[data-theme="light"] #bg,
[data-theme="light"] body:has(.pshell) #bg{opacity:.5}

/* The blanket reduced-motion rule above stops every animation, which leaves the
   client's signature elements dead. Their build has no reduced-motion handling
   at all; rather than copy that, keep these two alive but markedly calmer. */
@media (prefers-reduced-motion:reduce){
  .strip-track{animation-duration:120s !important;animation-iteration-count:infinite !important}
  .grain{animation:none}
}

/* ---- phase1.css ------------------------------------------------------ */
/* ==========================================================================
   THE CIRQ — Phase 1 change log
   Components added or reshaped by the developer change log. Loaded after
   cirq.css on every public page; built from the same tokens.
   ========================================================================== */

/* ---------- 13 / 23. profile cards without a day rate ---------- */
.p-yrs{font-size:13px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.p-yrs small{font-weight:600;color:var(--tx-3);font-size:11.5px}
.pv{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-3);padding:5px 11px;border-radius:var(--r-full);
  background:var(--panel);border:1px dashed var(--line-2)}
.person:has(.pv){border-style:dashed}
.drate{font-size:12.5px;font-weight:700;color:var(--tx-3);font-variant-numeric:tabular-nums}

/* a plain-language notice inside a panel or modal */
.notice{padding:13px 15px;border-radius:var(--r-m);background:rgba(var(--t),.10);
  border:1px solid rgba(var(--t),.32);color:var(--tx-2);font-size:13px;line-height:1.6}

/* ---------- 14. Request to Connect ---------- */
.ov-sm .ov-p{max-width:620px}
.cform{padding:4px 0}
.cform .f2{display:grid;gap:0 18px}
@media (min-width:600px){ .cform .f2{grid-template-columns:1fr 1fr} }
.opt{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--tx-3);text-transform:none}
.attached{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:20px;
  border-radius:var(--r-m);background:rgba(var(--t),.09);border:1px solid rgba(var(--t),.3)}
.attached .av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:var(--tx-inv)}
.attached b{display:block;font-size:14px;font-weight:700}
.attached>span:nth-child(2){flex:1;min-width:0}
.attached>span:nth-child(2)>span{display:block;font-size:12px;color:var(--tx-3);margin-top:2px}

/* ---------- 16. brief attachment ---------- */
.drop{position:relative;display:block;border:1.5px dashed var(--line-2);border-radius:var(--r-m);
  background:var(--panel);transition:border-color .2s,background .2s}
.drop:hover,.drop:focus-within{border-color:var(--rose);background:var(--panel-2)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop .dz{display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  min-height:96px;padding:18px;text-align:center;pointer-events:none}
.drop .dz b{font-size:14px;font-weight:700;word-break:break-all}
.drop .dz .hint{font-size:12px;color:var(--tx-3)}
.field.bad .drop{border-color:var(--rose)}

/* confirmation that replaces the form once a brief is sent */
.sent{display:grid;justify-items:center;text-align:center;gap:2px;padding:34px 18px}
.sent .tick{width:54px;height:54px;border-radius:50%;margin-bottom:14px;display:grid;place-items:center;
  background:rgba(var(--t),.16);border:1px solid rgba(var(--t),.42)}
.sent .tick::after{content:"";width:17px;height:9px;border:2.4px solid var(--tc);
  border-top:0;border-right:0;rotate:-45deg;translate:0 -2px}
.sent .lede{max-width:44ch}

/* ---------- 24 / 25. Featured Work ---------- */
/* The plate was an <a>; it is an <article> with a real play button now. What
   must NOT change is the card itself — cirq.css owns the mosaic: the card
   rounds and clips its own corners, the thumbnail sits flush to the top with
   no radius of its own, and the text keeps the card's internal padding.
   Overriding the aspect ratio and dropping that padding to 2px is what put
   the titles hard against the card edge. */
/* Grid items stretch to the tallest in their row by default. With a mosaic
   of different-sized cards that left the short ones with a large empty area
   below the button — the dead corner. Each card is its own height now. */
.plates{align-items:start}
.plate{display:flex;flex-direction:column;gap:0}
.plate>.ph{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--pl,var(--panel));overflow:hidden}
.plate>.ph:focus-visible{outline:2px solid var(--rose);outline-offset:-3px}
/* play affordance — it is a button, so it must look like one */
.plate .pl{position:absolute;left:50%;top:50%;translate:-50% -50%;width:58px;height:58px;border-radius:50%;
  background:rgba(20,20,20,.5);backdrop-filter:blur(6px);border:1.5px solid rgba(252,244,238,.5);
  display:grid;place-items:center;transition:transform .32s var(--ease),background .32s}
.plate .pl::after{content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--cream);border-top:9px solid transparent;border-bottom:9px solid transparent}
.plate>.ph:hover .pl{transform:translate(-50%,-50%) scale(1.09);background:rgba(199,102,115,.82)}
/* the card's own padding, as it was */
.plate .pc{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:16px 18px 10px}
.plate .pc>span:first-child{min-width:0}
.plate .pc em{display:block;font-style:normal;margin-top:5px}
.plate .pc .by{margin-top:7px}
.plate .pc .by .tlink{font-size:12.5px;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--peri);text-decoration:underline;text-underline-offset:3px}
.plate .pc .k{margin-left:auto;font-size:11px;font-weight:700;color:var(--tx-3);font-variant-numeric:tabular-nums}
.plate>.btn{align-self:flex-start;margin:0 18px 18px}

/* on-site player, so the visitor never leaves The Cirq */
.ov-v .ov-p{max-width:900px;padding:0;overflow:hidden}
.ov-v .ov-c{padding:0}
.vframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vframe.empty{display:grid;place-items:center;background:var(--pl,var(--bg-deep))}
.vframe.empty span{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(252,244,238,.72)}
.vmeta{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding:18px 22px 22px}
.vmeta>div{flex:1;min-width:190px}
.vmeta .btn{flex:none}

/* ---------- 22. a counter with nothing behind it hides itself ---------- */
.stats>div[hidden],.trio>div[hidden]{display:none}

/* ---------- 23. preview-profile banner on the directory ---------- */
.pvnote{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;margin-bottom:20px;
  border-radius:var(--r-m);background:var(--panel);border:1px dashed var(--line-2)}
.pvnote .i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,177,156,.2);color:var(--sand);font-size:12px;font-weight:700}
.pvnote p{font-size:13px;color:var(--tx-2);line-height:1.6}

/* ---------- 7. footer social links ---------- */
.fsoc{display:flex;gap:8px;margin-top:16px}
.fsoc a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);color:var(--tx-2);
  transition:color .2s,border-color .2s,background .2s}
.fsoc a:hover{color:var(--rose);border-color:rgba(217,95,115,.45);background:var(--panel-2)}

/* ---------- tap targets in the footer ----------
   Footer list links and the contact line rendered 18px tall, under the 24px
   minimum target size. Padding lifts them to a comfortable 36px without
   changing the visual rhythm, since the list gap absorbs it. */
.ftr li{margin-bottom:2px}
.ftr li a{display:inline-flex;align-items:center;min-height:36px;padding:2px 0}
.fbtm .lk a{display:inline-flex;align-items:center;min-height:36px}

/* ---------- header fit on phones ----------
   The official wordmark is wider than the typed logo it replaced (158px vs
   ~120px), which pushed the hamburger 49px off-screen at 375px and made the
   mobile menu unreachable. Two changes bring it back: a smaller mark on
   phones, and dropping the two icons that duplicate links already inside the
   drawer (shortlist goes to the directory, sign-in is in the drawer footer). */
@media (max-width:599px){
  .mark{width:90px;height:25px}
  .tools .ico[href="directory.html"],
  .tools .ico[href="login.html"]{display:none}
}

/* ---------- mobile menu must never be invisible ----------
   The drawer links started at opacity:0 and were revealed by a staggered
   transition. If that transition never completes — reduced motion, a
   throttled or hidden tab, a delay that never elapses — the menu opens with
   its links missing and the site has no navigation on a phone.

   So the links are visible by default, and the entrance animation is layered
   on only where motion is welcome. Same effect for most people, no way to end
   up with an empty menu. */
.drawer a.dl{opacity:1;translate:0 0}
@media (prefers-reduced-motion:no-preference){
  .drawer a.dl{opacity:0;translate:0 16px;
    transition:opacity .45s var(--ease),translate .45s var(--ease)}
  .drawer.on a.dl{opacity:1;translate:0 0}
}

/* ---------- sign in and sign up ---------- */
.auth-seg{display:inline-flex;gap:3px;padding:3px;border-radius:var(--r-full);
  background:var(--panel);border:1px solid var(--line)}
.auth-seg button{min-height:40px;padding:0 18px;border-radius:var(--r-full);font:inherit;
  font-size:13.5px;font-weight:600;background:none;border:0;color:var(--tx-2);cursor:pointer}
.auth-seg button.on{background:var(--rose-fill);color:var(--cream)}
.auth-seg button:not(.on):hover{color:var(--tx)}

.pw{position:relative;display:block}
.pw input{padding-right:74px}
.pw .peek{position:absolute;right:8px;top:50%;translate:0 -50%;min-height:34px;padding:0 12px;
  border-radius:var(--r-full);background:var(--panel-2);border:1px solid var(--line);
  color:var(--tx-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.pw .peek:hover{color:var(--tx);border-color:var(--line-2)}

.meter{height:5px;border-radius:99px;background:var(--panel-2);overflow:hidden;margin-top:9px}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:var(--rose-fill);
  transition:width .3s var(--ease),background .3s}
.meter i.mid{background:var(--sand)}
.meter i.ok{background:var(--citron)}

.formerr{margin:2px 0 16px;padding:11px 14px;border-radius:var(--r-m);
  background:rgba(217,95,115,.12);border:1px solid rgba(217,95,115,.4);
  color:var(--rose);font-size:13px;font-weight:600;line-height:1.5}

/* a text button that reads as a link inside body copy */
button.tlink{background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--peri);text-decoration:underline;text-underline-offset:3px}
button.tlink:hover{color:var(--rose)}

/* ---------- legal pages ---------- */
.legal{max-width:70ch}
.legal h2{font-size:21px;font-weight:700;letter-spacing:-.015em;margin:38px 0 12px;color:var(--tx)}
.legal h2:first-of-type{margin-top:6px}
.legal h3{font-size:15px;font-weight:700;margin:22px 0 8px;color:var(--tx-2)}
.legal p{font-size:15px;line-height:1.75;color:var(--tx-2);margin-bottom:14px}
.legal ul{margin:0 0 18px;padding-left:20px}
.legal li{font-size:15px;line-height:1.75;color:var(--tx-2);margin-bottom:8px;list-style:disc}
.legal li::marker{color:var(--rose)}
.legal b{color:var(--tx);font-weight:700}
.legal a{color:var(--peri);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--rose)}
.legal code{font-size:13px;padding:2px 6px;border-radius:6px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--tx-2)}
.legal .notice{margin-bottom:30px}
.ltable{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:14px}
.ltable th{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line-2);
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3)}
.ltable td{padding:12px;border-bottom:1px solid var(--line);color:var(--tx-2);line-height:1.6;
  vertical-align:top}
.ltable tr:last-child td{border-bottom:0}
@media (max-width:599px){
  .ltable,.ltable tbody,.ltable tr,.ltable td{display:block;width:100%}
  .ltable thead{display:none}
  .ltable tr{border:1px solid var(--line);border-radius:var(--r-m);margin-bottom:10px;padding:4px 10px}
  .ltable td{border-bottom:1px solid var(--line)}
  .ltable td:last-child{border-bottom:0}
}

/* ---------- Phase 2: membership tiers (hidden until enabled) ---------- */
.tier{position:relative;display:flex;flex-direction:column}
.tier.best{border-color:rgba(var(--t),.55)}
.tier .best-tag{position:absolute;top:-11px;left:22px}
.tier .price{margin:10px 0 18px}
.tier .price b{font-size:32px;font-weight:700;letter-spacing:-.03em;color:var(--tc)}
.tier .price span{margin-left:8px;font-size:13px;color:var(--tx-3)}
.tier .checks{flex:1}
.plate .flag.paid{background:rgba(217,95,115,.9);color:var(--cream);border-color:transparent}

/* ---------- directory grid must be allowed to shrink ----------
   A grid item defaults to min-width:auto, so the results column refused to go
   below the intrinsic width of its cards and pushed the page 39px wide at
   1024. minmax(0,1fr) lets it shrink to its share, which is what 1fr was
   meant to mean. Same fix for the two-column splits, which have the same
   latent problem at their own breakpoints. */
@media (min-width:1000px){
  .dir{grid-template-columns:250px minmax(0,1fr)}
}
/* Every grid item, everywhere. A grid item's default min-width is the width
   of its own content, so any card with a long word, a wide table or a fixed
   image can push its track — and the whole page — wider than the viewport.
   Setting it to 0 makes 1fr mean "an equal share" as intended. This is the
   single most common cause of horizontal scroll on a grid layout. */
.dir > *,
.cols > *, .people > *, .split > *, .f2 > *, .ftr-grid > *, .lead > *,
.stats > *, .trio > *, .plates > *, .pstats > *, .role-grid > *,
.triage > *, .agrid > *, .swrap > *, .seg3 > *{min-width:0}

/* The filter panel's own heading. It was a span; it is a real h2 now so the
   filter groups below it can be h3 and the page has no heading-level jump. */
.filters .rline h2.cap{margin:0;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx-3)}

/* The forced password panel sits above everything, including the portal's own
   drawers, and cannot be dismissed by clicking away. */
.pwgate{z-index:500}
.pwgate .ov-bd{cursor:default}

/* ==========================================================================
   Shared portal components. These live here rather than in admin.css
   because all three dashboards use them, and admin.css is only loaded by
   the admin console — which is why the freelancer's work cards first
   rendered as a run-on line of unstyled text.
   ========================================================================== */
/* ---------- assignments ---------- */
.jobs{display:grid;gap:12px;padding:16px}
.job{padding:16px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line)}
.job-t{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.job-t>div{flex:1;min-width:0}
.job-t b{display:block;font-size:15px;font-weight:700}
.job-t span{display:block;margin-top:3px;font-size:12.5px;color:var(--tx-3)}
.job p.small{margin-bottom:10px;color:var(--tx-2)}
.job-m{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--tx-3)}
.job-a{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.due{font-weight:600}
.due.soon{color:var(--sand)}
.due.late{color:var(--rose)}

/* ---------- pending profile changes ---------- */
.pendbox{background:rgba(199,197,237,.09);border-bottom:1px solid var(--line)}
.pendbox p{font-size:13.5px;line-height:1.6;color:var(--tx-2)}
.pendbox b{color:var(--tx)}
.difflist{margin-top:12px;display:grid;gap:8px}
.difflist li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;list-style:none;
  font-size:13px;padding:9px 12px;border-radius:var(--r-s);background:var(--panel)}
.difflist .dk{flex:none;min-width:130px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tx-3)}
.difflist .dv{word-break:break-word}
.difflist .old{color:var(--tx-3);text-decoration:line-through}
.difflist .new{color:var(--citron);font-weight:600}
.difflist .da{color:var(--tx-3)}

/* ---------- support tickets ---------- */
.tickets{display:grid;gap:14px;padding:16px}
.ticket{padding:16px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line)}
.ticket.fresh{border-color:rgba(217,95,115,.45)}
.msgs{display:grid;gap:9px;margin:12px 0}
.msg{padding:11px 14px;border-radius:var(--r-m);max-width:92%}
.msg p{font-size:13.5px;line-height:1.6;white-space:pre-wrap}
.msg span{display:block;margin-top:5px;font-size:11px;color:var(--tx-3)}
.msg.me{background:var(--panel-2);justify-self:end}
.msg.them{background:rgba(199,197,237,.12);border:1px solid rgba(199,197,237,.28)}

/* ---------- progress timeline ---------- */
.tline{display:grid;gap:0;padding:4px 0}
.tline li{position:relative;display:flex;gap:14px;padding:0 0 20px 0;list-style:none}
.tline li:last-child{padding-bottom:0}
.tline li::before{content:"";position:absolute;left:7px;top:18px;bottom:-2px;width:2px;
  background:var(--line)}
.tline li:last-child::before{display:none}
.tline li.done::before{background:rgba(213,220,125,.45)}
.tline .tl-d{position:relative;z-index:1;flex:none;width:16px;height:16px;border-radius:50%;
  margin-top:2px;background:var(--bg-deep);border:2px solid var(--line-2)}
.tline li.done .tl-d{background:var(--citron);border-color:var(--citron)}
.tline li.now .tl-d{border-color:var(--rose);box-shadow:0 0 0 4px rgba(217,95,115,.18)}
.tline li>div{flex:1;min-width:0}
.tline b{display:block;font-size:14px;font-weight:700;color:var(--tx-3)}
.tline li.done b,.tline li.now b{color:var(--tx)}
.tline span{display:block;margin-top:2px;font-size:12.5px;color:var(--tx-3);line-height:1.5}
.tline em{display:block;margin-top:4px;font-style:normal;font-size:11.5px;font-weight:600;
  color:var(--citron)}
.tline li.now em{color:var(--rose)}

/* ---------- announcements ---------- */
.anns{display:grid;gap:12px;padding:16px}
.ann{padding:15px 17px;border-radius:var(--r-m);background:rgba(var(--t),.09);
  border:1px solid rgba(var(--t),.3)}
.ann b{display:block;font-size:14.5px;font-weight:700}
.ann p{margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--tx-2)}
.ann span{display:block;margin-top:8px;font-size:11.5px;color:var(--tx-3)}

/* The activity feed is used by all three dashboards, not just the admin. */
/* ---------- activity feed ---------- */
.feed{display:grid;gap:0;padding:6px 18px 18px}
.feed .it{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.feed .it:last-child{border-bottom:0}
.feed .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--tc);margin-top:6px}
.feed .m{font-size:13.5px;line-height:1.55}
.feed .m b{font-weight:700}
.feed .w{margin-top:3px;font-size:11.5px;color:var(--tx-3)}


/* ---------- notifications ---------- */
.bellwrap{position:relative}
.bell{position:relative}
.bell.has{color:var(--rose)}
.bell .cnt{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;background:var(--rose-fill);color:var(--cream);font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--bg-deep)}
.bellpop{position:absolute;right:0;top:calc(100% + 10px);z-index:220;width:min(360px,calc(100vw - 32px));
  max-height:min(460px,70svh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg-deep);border:1px solid var(--line-2);border-radius:var(--r-l);
  box-shadow:var(--shadow-3)}
.bellpop .bh{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-deep);z-index:1}
.bellpop .bh b{font-size:14px;font-weight:700}
.bellpop .bh span{margin-left:auto;font-size:11px;font-weight:700;color:var(--tx-3)}
.bellpop .bl{padding:6px}
.bellpop .bi{display:flex;gap:11px;padding:11px 12px;border-radius:var(--r-m);color:inherit}
.bellpop .bi:hover{background:var(--panel-2)}
.bellpop .bi.new{background:rgba(217,95,115,.08)}
.bellpop .bd{flex:none;width:8px;height:8px;border-radius:50%;background:var(--tc);margin-top:6px}
.bellpop .bi>span{flex:1;min-width:0}
.bellpop .bi b{display:block;font-size:13.5px;font-weight:700;line-height:1.4}
.bellpop .bi em{display:block;margin-top:2px;font-style:normal;font-size:12.5px;color:var(--tx-2);
  line-height:1.5}
.bellpop .bi i{display:block;margin-top:4px;font-style:normal;font-size:11px;color:var(--tx-3)}
.bellpop .bempty{padding:26px 18px;text-align:center;font-size:13px;color:var(--tx-3);line-height:1.6}
.ticket.muted{opacity:.55}

/* ---------- chip pickers ---------- */
.chipbox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:50px;
  padding:9px 12px;border-radius:var(--r-m);background:var(--panel);border:1px solid var(--line)}
.chipbox:focus-within{border-color:var(--rose);box-shadow:0 0 0 3px rgba(217,95,115,.18)}
.chipset{display:contents}
.chipbox .chip{display:inline-flex;align-items:center;gap:7px;min-height:32px;
  padding:0 6px 0 12px;border-radius:var(--r-full);background:rgba(199,197,237,.16);
  border:1px solid rgba(199,197,237,.34);font-size:13px;font-weight:600}
.chipbox .chip button{width:22px;height:22px;border-radius:50%;border:0;background:none;
  color:var(--tx-3);font-size:11px;line-height:1;cursor:pointer;display:grid;place-items:center}
.chipbox .chip button:hover{background:rgba(217,95,115,.2);color:var(--rose)}
.chipin{flex:1;min-width:140px;border:0!important;background:none!important;
  min-height:32px!important;padding:0!important;box-shadow:none!important;font-size:14px}
.chipin:focus{outline:none;box-shadow:none!important}
.chipsugg{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-top:10px}
.chipsugg>span{font-size:11.5px;color:var(--tx-3);margin-right:2px}
.chipadd{min-height:30px;padding:0 11px;border-radius:var(--r-full);background:var(--panel);
  border:1px dashed var(--line-2);color:var(--tx-2);font:inherit;font-size:12.5px;cursor:pointer}
.chipadd:hover{border-style:solid;border-color:var(--citron);color:var(--citron)}
.chipadd[hidden]{display:none}
.field.bad .chipbox{border-color:var(--rose)}

/* ---------- V3 revision 4: mandatory Terms acceptance ----------
   A real checkbox rather than a styled div, so it is keyboard-reachable,
   announces its state to a screen reader and works with the form's own
   validation. The tick target is 22px and the whole label is clickable,
   which is what makes it usable on a phone. */
.agree{margin-top:4px}
.chk{display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  font-size:14.5px;line-height:1.55;color:var(--tx-2)}
.chk input{appearance:none;-webkit-appearance:none;flex:none;
  width:22px;height:22px;margin:0;border:1px solid var(--line-2);
  border-radius:6px;background:var(--panel);cursor:pointer;
  display:grid;place-items:center;transition:background .15s,border-color .15s}
.chk input::after{content:"";width:11px;height:6px;border-left:2px solid var(--cream);
  border-bottom:2px solid var(--cream);transform:rotate(-45deg) scale(0);
  transition:transform .15s}
.chk input:checked{background:var(--rose-fill);border-color:var(--rose)}
.chk input:checked::after{transform:rotate(-45deg) scale(1)}
.chk input:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.chk:hover input{border-color:var(--line-2)}
.chk a{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.chk a:hover{color:var(--rose)}
.agree.bad .chk input{border-color:var(--rose)}

/* ---------- V3 revision 6: profile portfolio, video and stills ----------
   One grid handles all three cases. With a video and stills the video takes
   the full width and the stills sit under it; with one kind only, the grid
   just fills. Every tile is 16:9 so a row never goes ragged. */
.pfgrid{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px}
@media (min-width:560px){ .pfgrid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pfgrid.mixed .pf-v{grid-column:1/-1}
.pf{position:relative;display:block;width:100%;padding:0;border:0;overflow:hidden;
  border-radius:var(--r-m);background:transparent}
.pf-img{display:block;width:100%;aspect-ratio:16/9;background:var(--pl,var(--panel));
  border:1px solid var(--line)}
.pf-s .pf-img{background:var(--tint,var(--panel))}
.pfgrid.mixed .pf-v .pf-img{aspect-ratio:16/7}
.pf-v{cursor:pointer}
.pf-v:hover .pf-img{border-color:var(--line-2)}
.pf-v:focus-visible{outline:2px solid var(--rose);outline-offset:3px}

/* the play control: unmistakably a video, not a still */
.pf-play{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;
  border-radius:50%;background:rgba(10,10,12,.62);border:1px solid rgba(255,244,238,.34);
  display:grid;place-items:center;transition:background .18s,transform .18s;backdrop-filter:blur(3px)}
.pf-play::after{content:"";width:0;height:0;margin-left:3px;
  border-left:15px solid var(--cream);border-top:9px solid transparent;border-bottom:9px solid transparent}
.pf-v:hover .pf-play{background:var(--rose-fill);border-color:var(--rose);transform:scale(1.06)}
.pf-tag{position:absolute;left:9px;bottom:9px;padding:3px 9px;border-radius:var(--r-full);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(10,10,12,.62);color:var(--cream);border:1px solid rgba(255,244,238,.2)}
[data-theme="light"] .pf-tag,[data-theme="light"] .pf-play{background:rgba(38,38,40,.72)}