/* ===== Black Ink — "Rich reference" component layer =====
   Rides on top of app.css (uses its :root tokens). Matches Rich's design
   language: mint panels alternating with grayscale photography, green pill
   buttons, VouchedFor block, contact form, two-panel footer. Ink hero stays. */

.r-sec{padding:clamp(64px,10vh,140px) var(--pad);position:relative}
.r-wrap{max-width:var(--maxw);margin:0 auto}
.r-narrow{max-width:760px;margin:0 auto;text-align:center}
.r-eyebrow{font-family:var(--mono);text-transform:uppercase;letter-spacing:.2em;font-size:var(--s--1);color:var(--ink-faint);display:inline-block}
.r-h{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.05;font-size:var(--s3);text-wrap:balance}
.r-lede{font-size:var(--s1);line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.r-body{font-size:var(--s0);line-height:1.62;color:var(--ink-faint)}
.r-body + .r-body{margin-top:1.05em}

/* green pill button */
.r-pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);text-transform:uppercase;
  letter-spacing:.12em;font-size:var(--s--1);background:var(--green);color:var(--ink0);border:0;cursor:pointer;
  border-radius:999px;padding:15px 28px;text-decoration:none;transition:box-shadow .3s,transform .3s}
.r-pill:hover{box-shadow:0 16px 40px -12px rgba(100,250,164,.7);transform:translateY(-1px)}

/* two-column split, full-bleed panels */
.r-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
@media(max-width:820px){.r-split{grid-template-columns:1fr}}

/* mint panel */
.r-mint{background:var(--grad);color:var(--ink0);padding:clamp(34px,5vw,68px);display:flex;flex-direction:column;justify-content:center}
.r-mint a{color:var(--ink0)}

/* grayscale photo placeholder / real image */
.r-photo{position:relative;background:linear-gradient(135deg,#cfd1cd 0%,#e7e7e2 100%);min-height:clamp(300px,42vw,540px);display:grid;place-items:center;overflow:hidden}
.r-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.r-photo__tag{position:relative;z-index:1;font-family:var(--mono);text-transform:uppercase;letter-spacing:.16em;font-size:var(--s--1);color:rgba(21,22,27,.45)}
.r-band{width:100%;min-height:clamp(320px,44vw,560px)}

/* VouchedFor block */
.r-vf{margin-top:clamp(24px,4vh,40px)}
.r-vf__logo{font-family:var(--sans);font-weight:700;font-size:var(--s2);letter-spacing:-.02em;line-height:1}
.r-vf__logo em{font-style:normal;font-weight:400;opacity:.65}
.r-vf__meta{font-size:var(--s0);line-height:1.5;margin-top:12px;opacity:.85}
.r-stars{letter-spacing:2px;font-size:var(--s1);margin-top:6px}
.r-stars b{font-weight:600;font-size:var(--s0);margin-left:8px;letter-spacing:0}

/* contact form */
.r-form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.r-form .r-full{grid-column:1/-1}
.r-form label{display:block;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:var(--s--1);color:var(--ink-faint);margin-bottom:6px}
.r-form input,.r-form textarea{width:100%;font-family:var(--sans);font-size:var(--s0);padding:14px 16px;border:1px solid var(--rule-2);border-radius:2px;background:#fff;color:var(--ink)}
.r-form input:focus,.r-form textarea:focus{outline:2px solid var(--green);outline-offset:1px;border-color:transparent}
.r-form textarea{min-height:130px;resize:vertical}
.r-consent{display:flex;gap:10px;align-items:flex-start}
.r-consent input{width:16px;flex:0 0 16px;margin-top:3px}

/* two-panel footer (mint | dark with brand tag) */
.r-foot{display:grid;grid-template-columns:1.15fr .85fr}
@media(max-width:820px){.r-foot{grid-template-columns:1fr}}
.r-foot__mint{background:var(--grad);color:var(--ink0);padding:clamp(40px,6vw,76px)}
.r-foot__mint a{color:var(--ink0);text-decoration:none}
.r-foot__mint a:hover{text-decoration:underline}
.r-foot__links{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em;font-size:var(--s--1);margin-top:26px;line-height:2}
.r-foot__legal{font-family:var(--mono);font-size:10px;line-height:1.7;opacity:.72;margin-top:24px;max-width:52ch}
.r-foot__dark{position:relative;overflow:hidden;background:#26292e;min-height:260px;display:grid;place-items:center;padding:0}
.r-foot__dark img{width:100%;height:100%;object-fit:cover;display:block}
.r-foot__tag{background:var(--green);color:var(--ink0);font-family:var(--sans);font-weight:700;font-size:clamp(1.4rem,3vw,2.2rem);
  letter-spacing:-.02em;padding:16px 30px;border-radius:3px 26px 3px 26px;transform:rotate(-4deg);box-shadow:0 30px 60px -22px rgba(0,0,0,.55)}
.r-turbo{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:10px;margin-top:26px;opacity:1;text-decoration:none;color:var(--ink0)!important}

/* ===== Rich nav — brand left, links hard right (no CTA pill) =====
   Scoped to #nav + !important to beat app.css's own nav rules. */
#nav.nav{display:flex !important;align-items:center;justify-content:flex-start !important;gap:22px}
#nav .nav__links{margin-left:auto !important;display:flex !important;align-items:center;gap:clamp(12px,1.6vw,28px);flex-wrap:wrap;justify-content:flex-end}
#nav .nav__links a{font-family:var(--mono) !important;text-transform:uppercase !important;letter-spacing:.09em !important;font-size:var(--s--1) !important;white-space:nowrap;text-shadow:none !important}
#nav .nav__cta{display:none !important}
@media(max-width:900px){ #nav .nav__links{display:none !important} }

/* keep the mobile drawer off desktop */
@media(min-width:901px){ #navMenu{display:none !important} }

/* ===== Contact — single screen: ink blobs behind, form card on top ===== */
.r-contact{position:relative;min-height:100svh;display:grid;place-items:center;padding:clamp(96px,14vh,150px) var(--pad) clamp(48px,7vh,80px);overflow:hidden;background:var(--grad);isolation:isolate}
.r-contact__card{position:relative;z-index:2;width:min(660px,100%);background:rgba(255,255,255,.88);backdrop-filter:blur(9px);border:1px solid rgba(21,22,27,.1);border-radius:4px;padding:clamp(26px,4vw,46px);box-shadow:0 50px 100px -34px rgba(0,0,0,.4)}
.r-contact__meta{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;font-size:var(--s--1);color:var(--ink-faint);margin-top:22px;line-height:1.8}
.r-contact__meta a{color:var(--ink)}

/* testimonial carousel (Rich's mint panel) */
.r-vf-nav{display:flex;justify-content:space-between;margin-bottom:24px}
.r-vf-arrow{background:none;border:0;color:var(--ink0);font-size:var(--s2);line-height:1;padding:0;cursor:pointer;opacity:.4;transition:opacity .2s}
.r-vf-arrow:hover{opacity:1}
.r-vf-track{min-height:172px}
.r-vf-slide{display:none}
.r-vf-slide.is-active{display:block;animation:vfFade .5s ease}
@keyframes vfFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* mobile perf: ink divs get a mint fallback so WebGL can be skipped on phones */
[data-liquid]{background:var(--grad)}

/* ===== Photographic page hero (Rich: About / Contact / Careers) ===== */
.r-hero-photo{position:relative;min-height:clamp(340px,52vh,560px);display:flex;align-items:center;overflow:hidden;background:linear-gradient(135deg,#c9cbc7,#e7e7e2)}
.r-hero-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);z-index:0}
.r-hero-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(92,246,160,.92),rgba(92,246,160,.25) 44%,rgba(21,22,27,.28) 100%)}
.r-hero-photo__in{position:relative;z-index:2;padding:0 var(--pad);max-width:var(--maxw);margin:0 auto;width:100%}
.r-hero-photo__n{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:var(--s0);color:var(--ink0);font-weight:600}
.r-hero-photo__h{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2rem,5vw,3.4rem);color:var(--ink0);margin-top:12px;max-width:16ch}
.r-hero-photo__tag{position:absolute;right:16px;bottom:12px;z-index:2;font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:var(--s--1);color:rgba(21,22,27,.45)}

/* team grid: centre the rows so an incomplete last row is balanced, not left-aligned with a right-side gap */
.team__grid{display:flex !important;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,22px)}
.team__grid > .member{flex:none;width:clamp(150px,calc(20% - 20px),230px)}

/* ===== inner-page heroes ===== */
.r-hero-ink{position:relative;min-height:clamp(300px,46vh,480px);display:flex;align-items:center;overflow:hidden;background:var(--grad)}
.r-hero-ink>[data-liquid]{position:absolute;inset:0;z-index:0}
.r-hero-ink__in,.r-hero-photo__in{position:relative;z-index:2;padding:0 var(--pad);max-width:var(--maxw);margin:0 auto;width:100%}
.r-hero-ink__n{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;font-size:var(--s0);color:var(--ink0);font-weight:600}
.r-hero-ink__h{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;line-height:1.03;font-size:clamp(2rem,5vw,3.6rem);color:var(--ink0);margin-top:12px;max-width:15ch}
/* ===== service icon cards ===== */
.r-svc-ico{display:block;width:44px;height:44px;color:var(--ink0);margin-bottom:22px}
.r-cards-c{display:flex !important;flex-wrap:wrap;justify-content:center;gap:clamp(14px,1.6vw,22px)}
.r-cards-c > .card{flex:none;width:clamp(250px,calc(33.333% - 16px),360px)}
.r-svc-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* ===== areas checklist ===== */
.r-check{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:700px){.r-check{grid-template-columns:1fr}}
.r-check li{display:flex;gap:12px;align-items:flex-start;font-size:var(--s0);color:var(--ink0)}
.r-check li::before{content:"\2713";flex:0 0 22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:var(--ink0);color:var(--green);font-size:12px;font-weight:700}
/* ===== careers role rows ===== */
.r-role{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:26px 0;border-top:1px solid var(--rule)}
.r-roles .r-role:last-child{border-bottom:1px solid var(--rule)}
.r-role__t{font-size:var(--s1);font-weight:600;letter-spacing:-.01em}
.r-role__t span{color:var(--ink-faint);font-weight:400}

/* mobile: centre the hero content in a slightly shorter hero so it's balanced and the marquee peeks in */
@media(max-width:768px){
  #hero.hero{min-height:86svh !important;justify-content:center !important;padding-top:clamp(84px,11vh,112px) !important;padding-bottom:clamp(20px,3vh,30px) !important}
  #hero .hero__grid{margin:0 auto clamp(34px,6vh,58px) !important}
  #hero .hero__foot{margin:0 auto !important}
}