:root{
  --lime:#9BBC59;        /* rnm.in brand green */
  --lime-2:#81A734;
  --lime-ink:#55770F;    /* green at text weight */
  --lime-dark:#5A8505;   /* rnm.in heading green */
  --lime-wash:#F2F6E8;

  --navy:#2E2E2E;        /* rnm.in dark contrast tone */
  --slate:#2F4B66;       /* rnm.in heading slate */
  --ink:#363B3E;         /* rnm.in charcoal */
  --ink-2:#4A5560;
  --muted:#666666;       /* rnm.in body text */
  --line:#E9EBEF;        /* rnm.in border */
  --line-soft:#F1F3F6;
  --paper:#FFFFFF;
  --paper-2:#E9EDF3;     /* rnm.in tinted section */

  --shell:1200px;
  --pad:clamp(18px,4.4vw,40px);
  --ease:cubic-bezier(.2,.8,.2,1);
  --disp:'Oswald',ui-sans-serif,system-ui,sans-serif;
  --sans:'Lato',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--sans);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Oswald headings, as on rnm.in: light weight, slightly open tracking */
h1,h2,h3,h4{margin:0;color:var(--slate);font-family:var(--disp);font-weight:500;letter-spacing:.01em;line-height:1.2}
p{margin:0}
::selection{background:var(--lime);color:#fff}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--lime);outline-offset:2px}
/* keep long strings inside their grid tracks on small screens */
.stat,.svc,.why-c,.sec-c,.step,.ind,.quote,.off,.faq{min-width:0}

/* eyebrow */
.eb{font-family:var(--mono);font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--lime-ink);margin-bottom:14px}
.on-dark .eb{color:var(--lime)}

/* reveal (visible by default; JS opts in) */
.rv{opacity:1;transform:none}
.js-rv .rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-rv .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-rv .rv{opacity:1;transform:none;transition:none}}
@media print{.js-rv .rv{opacity:1;transform:none}}

/* ═══════ TOP BAR ═══════ */
.top{background:var(--navy);color:#A8ADB4;font-size:13.5px}
.top-in{max-width:var(--shell);margin:0 auto;padding:9px var(--pad);display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.top b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--lime);font-weight:500;margin-right:7px}
.top a:hover{color:#fff}
.top .soc{margin-left:auto;display:flex;gap:8px}
.top .soc a{width:26px;height:26px;border-radius:50%;background:var(--lime);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;transition:background .2s}
.top .soc a:hover{background:#fff;color:var(--navy)}
@media(max-width:720px){.top{display:none}}

/* ═══════ NAV: white bar with the rnm.in green rule ═══════ */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:3px solid var(--lime)}
.nav-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad);height:78px;display:flex;align-items:center;gap:26px}
/* Logo only. The source art is 93x60, so cap the height and let it
   scale to keep the tiles crisp rather than upscaling past its size. */
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:54px;width:auto}
@media(max-width:940px){.brand img{height:42px}}
/* rnm.in button pattern: 2px border, sharp corners, fills on hover */
.book{border:2px solid var(--lime);color:var(--lime-ink);font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:13px 26px;transition:.25s}
.book:hover{background:var(--lime);color:#fff}
.burger{display:none;margin-left:auto;width:42px;height:38px;background:none;border:1px solid var(--line);cursor:pointer;align-items:center;justify-content:center}
.burger i,.burger i::before,.burger i::after{display:block;width:17px;height:2px;background:var(--ink);position:relative}
.burger i::before,.burger i::after{content:'';position:absolute;left:0}
.burger i::before{top:-5.5px}.burger i::after{top:5.5px}
/* Mobile nav geometry lives in the dark-header block near the end of
   this file, so the light-theme version that used to sit here is gone. */
@media(max-width:940px){
  .burger{display:flex}
}

/* ═══════ HERO: light, photo lifted behind a green-to-white veil ═══════ */
/* Asymmetric split. Copy left, real photo right. Replaces the old
   full-bleed photo, which sat under a 96% white veil and left the
   composition centered and flat. */
.hero{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line)}
.hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,var(--lime-wash) 0%,rgba(242,246,232,0) 60%);
}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(30px,4.4vw,62px);align-items:center;padding-block:clamp(36px,4vw,58px)}
.hero-copy{max-width:37rem}
.hero h1{
  color:var(--slate);font-family:var(--disp);
  font-size:clamp(2rem,3.85vw,3.1rem);font-weight:300;
  letter-spacing:.005em;line-height:1.15;
}
.hero h1 strong{font-weight:600;color:var(--lime-dark)}
.hero-copy>p{margin-top:20px;color:var(--muted);font-size:clamp(1rem,1.16vw,1.09rem);max-width:52ch;line-height:1.72}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-cta .btn{padding-inline:26px}
/* photo panel: offset frame instead of a background wash, so the image reads */
.hero-art{position:relative;isolation:isolate}
.hero-art img{width:100%;aspect-ratio:4/3.3;object-fit:cover;position:relative;z-index:1}
.hero-art::after{
  content:'';position:absolute;inset:0;z-index:0;
  border:1px solid var(--lime);background:var(--lime-wash);transform:translate(15px,15px);
}
@media(max-width:900px){
  .hero-in{grid-template-columns:1fr;gap:30px;padding-block:38px 46px}
  .hero-art{order:-1}
  .hero-art img{aspect-ratio:16/9}
  .hero-art::after{transform:translate(9px,9px)}
}
/* rnm.in button system */
.btn{
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:18px 34px;border:2px solid transparent;cursor:pointer;transition:.25s;border-radius:0;
}
.btn-lime{background:var(--lime);color:#1E2A0C;border-color:var(--lime)}
.btn-lime:hover{background:#8AAB48;border-color:#8AAB48;color:#1E2A0C}
.btn-ghost{border-color:var(--slate);color:var(--slate);background:none}
.btn-ghost:hover{background:var(--slate);color:#fff}
@media(max-width:560px){.hero-cta .btn{width:100%}}

/* ═══════ STATS ═══════ */
/* Asymmetric: one lead figure on brand green, three supporting figures
   in a stacked rail. The old version was four equal hairline columns,
   which gave every number the same weight and read as a template. */
/* Four equal columns. Each tile lifts and its number counts up as the
   band scrolls into view, so the figures land one after another rather
   than all at once. */
.stats{background:var(--navy);color:#fff;overflow:hidden}
.stats-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch;
  border-left:1px solid rgba(255,255,255,.12);
}
.stat{
  position:relative;padding:clamp(30px,3.4vw,46px) clamp(18px,2.1vw,30px);
  border-right:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;justify-content:center;
  align-items:center;text-align:center;
  transition:background .3s var(--ease);
}
/* lime wash sweeps up from the base on hover */
.stat::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--lime);transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease);
}
.stat:hover{background:rgba(155,188,89,.09)}
.stat:hover::after{transform:scaleX(1)}
.stat b{
  display:block;font-family:var(--disp);font-size:clamp(2.3rem,3.7vw,3.3rem);
  font-weight:600;color:#fff;line-height:1;letter-spacing:-.02em;
}
.stat span{display:block;margin-top:11px;font-size:14.6px;color:#A8AEB6;line-height:1.5}

/* entry animation: each tile rises as the section enters the viewport */
.js-rv .stat{opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),background .3s var(--ease)}
.js-rv .stats.in .stat{opacity:1;transform:none}
.js-rv .stats.in .stat:nth-child(1){transition-delay:0s}
.js-rv .stats.in .stat:nth-child(2){transition-delay:.09s}
.js-rv .stats.in .stat:nth-child(3){transition-delay:.18s}
.js-rv .stats.in .stat:nth-child(4){transition-delay:.27s}
@media (prefers-reduced-motion:reduce){
  .js-rv .stat{opacity:1;transform:none;transition:none}
}

.note{text-align:center;font-size:13.5px;color:var(--muted);padding-bottom:26px}
@media(max-width:860px){
  .stats-in{grid-template-columns:1fr 1fr}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}
}
@media(max-width:520px){
  .stats-in{grid-template-columns:1fr}
  .stat{border-bottom:1px solid rgba(255,255,255,.12);padding-block:26px}
  .stat:last-child{border-bottom:0}
}

/* ═══════ CLIENT STRIP ═══════ */
.wall{padding:38px 0 42px;border-bottom:1px solid var(--line);overflow:hidden}
/* plain sentence-case heading, not another uppercase tracked eyebrow */
.wall h2{text-align:center;font-family:var(--sans);font-size:15px;letter-spacing:0;text-transform:none;color:#6B6B6B;font-weight:400;margin-bottom:34px}
.track-mask{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;width:max-content;align-items:center;animation:slide 64s linear infinite}
.track:hover{animation-play-state:paused}
.track img{height:44px;width:auto;margin-inline:34px;object-fit:contain}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .track{animation:none;width:100%;flex-wrap:wrap;justify-content:center;gap:20px 0}
  .track .dup{display:none}
}
@media(max-width:640px){.track img{height:32px;margin-inline:22px}}

/* ═══════ SECTION SHELL ═══════ */
section{scroll-margin-top:86px}
.band{padding:clamp(44px,5.2vw,70px) 0}
.band-tint{background:var(--paper-2)}
.band-dark{background:var(--navy);color:#C4C9CF}
.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:600;letter-spacing:-.028em;line-height:1.22}
.sub{margin-top:16px;color:var(--muted);max-width:62ch;line-height:1.72}
.band-dark .sub{color:#A8AEB6}

/* ═══════ SERVICES ═══════ */
/* Services: intro copy on the left, the five offerings as a checked
   pointer list on the right. The previous card grid forced the intro
   paragraph into a tile slot, where it read as a service that was not
   one. A list also scales if more offerings are added later. */
.svc-head{max-width:64ch;margin-bottom:clamp(26px,3vw,38px)}
.pound,.dollar{
  width:52px;height:52px;display:grid;place-items:center;
  background:var(--lime);color:#1E2A0C;font-family:var(--disp);
  font-size:26px;font-weight:600;margin-bottom:20px;
}
.svc-wrap{
  display:grid;grid-template-columns:.92fr 1.08fr;
  gap:clamp(28px,4vw,58px);align-items:start;
}
/* left rail: the explanatory copy, set apart by a brand rule */
.svc-lede{
  border-left:3px solid var(--lime);padding-left:clamp(18px,2vw,26px);
}
.svc-lede p{font-size:15.4px;line-height:1.74;color:var(--muted)}

/* right rail: the actual list of services */
.svc-list{display:grid;gap:0;border-top:1px solid var(--line)}
.svc{
  position:relative;display:grid;grid-template-columns:26px 1fr;
  gap:0 16px;padding:20px 12px 20px 4px;border-bottom:1px solid var(--line);
  transition:background .25s var(--ease),padding-left .25s var(--ease);
}
.svc:hover{background:var(--lime-wash);padding-left:14px}
/* tick marker, drawn in the brand green */
.svc .tick{
  grid-row:1 / span 2;width:24px;height:24px;margin-top:2px;
  display:grid;place-items:center;background:var(--lime);flex:0 0 auto;
}
.svc .tick svg{width:14px;height:14px;stroke:#1E2A0C;stroke-width:3;fill:none}
.svc h3{font-size:1.06rem;font-weight:600;color:var(--slate);margin-bottom:5px;line-height:1.35}
.svc p{font-size:14.7px;color:var(--muted);line-height:1.62}
@media(max-width:880px){
  .svc-wrap{grid-template-columns:1fr;gap:28px}
}

/* ── CTA row: the brochure is a real button, not a faint text link ── */
.svc-links{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-top:clamp(26px,3vw,36px);
}
.lnk{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);border:2px solid var(--slate);padding:15px 26px;transition:.22s;
}
.lnk:hover{background:var(--slate);color:#fff}
/* highlighted brochure button */
.lnk-2{
  display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--lime);color:#1E2A0C;border:2px solid var(--lime);
  padding:15px 26px;text-decoration:none;transition:.22s;
}
.lnk-2:hover{background:#8AAB48;border-color:#8AAB48;color:#1E2A0C}
.lnk-2 svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;
  animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,72%,100%{transform:translateY(0)}82%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.lnk-2 svg{animation:none}}

@media(max-width:880px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .svc-links{flex-direction:column;align-items:stretch}
  .lnk,.lnk-2{justify-content:center}
}

/* ═══════ WHY ═══════ */
/* Breaks the zigzag: instead of a third left-image/right-text split,
   this is a wide banner image with the three reasons as columns beneath. */
.why-head{max-width:60ch;margin-bottom:clamp(26px,3vw,38px)}
.why-banner{position:relative;overflow:hidden;margin-bottom:clamp(30px,3.6vw,46px)}
.why-banner img{width:100%;aspect-ratio:21/6.6;object-fit:cover}
@media(max-width:700px){.why-banner img{aspect-ratio:16/9}}
.why-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,42px)}
.why-c{padding-top:20px;border-top:2px solid var(--lime)}
.why-c h3{font-size:1.06rem;font-weight:600;margin-bottom:8px}
.why-c p{font-size:14.8px;color:var(--muted);line-height:1.64}
@media(max-width:820px){.why-cards{grid-template-columns:1fr;gap:24px}}

/* ═══════ SECURITY (dark) ═══════ */
/* The band's own background must be dark, not white with a dark scrim
   painted over it. If the photo or the pseudo-element ever fails, the
   white headings inside would otherwise land on white. */
.sec{position:relative;overflow:hidden;background:var(--navy)}
.sec-bg{position:absolute;inset:0;z-index:0}
.sec-bg img{width:100%;height:100%;object-fit:cover;opacity:.13}
/* Dark scrim: the markup in this band uses white headings and the
   .on-dark eyebrow, so the overlay must be dark, not a white wash. */
.sec-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(46,46,46,.95),rgba(46,46,46,.82))}
.sec-in{position:relative;z-index:1}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:38px}
.sec-c{border-top:2px solid var(--lime);padding-top:16px}
.sec-c h4{font-size:1rem;font-weight:600;margin-bottom:7px}
.sec-c p{font-size:14.2px;color:var(--muted);line-height:1.62}
.sec-note{margin-top:30px;font-size:13px;color:var(--muted)}
@media(max-width:880px){.sec-grid{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.sec-grid{grid-template-columns:1fr}}

/* ═══════ PROCESS ═══════ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px}
.step{padding:0 30px;border-left:1px solid var(--line)}
.step:first-child{padding-left:0;border-left:0}
.step b{display:block;font-family:var(--mono);font-size:12.5px;color:var(--lime-ink);letter-spacing:.1em;margin-bottom:14px}
.step h3{font-size:1.14rem;font-weight:600;margin-bottom:8px}
.step p{font-size:14.8px;color:var(--muted);line-height:1.64}
@media(max-width:800px){
  .steps{grid-template-columns:1fr;gap:26px}
  .step{padding:0 0 0 20px;border-left:2px solid var(--line)}
  .step:first-child{padding-left:20px;border-left:2px solid var(--line)}
}

/* ═══════ INDUSTRIES ═══════ */
.inds{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ind{border:1px solid var(--line);background:var(--paper);padding:12px 20px;font-size:14.6px;color:var(--ink-2);transition:.25s}
.ind:hover{border-color:var(--lime);background:rgba(140,198,63,.09);color:var(--ink)}

/* ═══════ TESTIMONIALS ═══════ */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.quote{border:1px solid var(--line);border-left:3px solid var(--lime);padding:26px 28px;background:var(--paper)}
.quote p{font-style:italic;color:var(--ink-2);line-height:1.7;font-size:15.4px}
.quote cite{display:block;margin-top:16px;font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.05em;color:var(--muted)}
@media(max-width:800px){.quotes{grid-template-columns:1fr}}

/* ═══════ OFFICES ═══════ */
.offs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.off{border:1px solid var(--line);border-top:3px solid var(--lime);background:var(--paper);display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.off:hover{border-color:var(--lime);transform:translateY(-3px)}
.off-b{padding:22px 22px 24px;display:flex;flex-direction:column;height:100%}
.off-map{display:none}
.off-link{
  margin-top:auto;padding-top:14px;font-size:13.4px;font-weight:700;
  color:var(--lime-ink);display:inline-flex;align-items:center;gap:6px;
}
.off-link:hover{text-decoration:underline;text-underline-offset:3px}
.off-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.off h3{font-size:1.08rem;font-weight:600;color:var(--lime-ink);margin-bottom:7px}
.off address{font-style:normal;font-size:13.8px;color:var(--muted);line-height:1.62}
.off a:hover{color:var(--lime-ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.offs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.offs{grid-template-columns:1fr}}

/* ═══════ FAQ ═══════ */
.faqs{display:grid;gap:12px;margin-top:34px;max-width:920px}
.faq{border:1px solid var(--line);background:var(--paper)}
.faq summary{
  list-style:none;cursor:pointer;padding:17px 22px;font-size:15.4px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:21px;color:var(--lime-ink);line-height:1;flex-shrink:0;transition:transform .25s var(--ease)}
.faq[open] summary::after{content:'\2013';transform:rotate(0)}
.faq[open]{border-color:var(--lime)}
.faq p{padding:0 22px 20px;font-size:14.8px;color:var(--muted);line-height:1.68}

/* ═══════ CONTACT ═══════ */
.ct{background:var(--paper-2);color:var(--ink-2)}
.ct-in{display:grid;grid-template-columns:1fr .9fr;gap:clamp(32px,5vw,68px);align-items:start}
.ct h2{color:var(--slate);font-size:clamp(1.6rem,3vw,2.3rem);font-weight:600;letter-spacing:-.026em;line-height:1.25}
.ct>div>p{margin-top:16px;color:var(--muted);max-width:44ch;line-height:1.72}
.ct-meta{margin-top:30px;display:grid;gap:13px;font-size:15px}
.ct-meta a{color:var(--ink)}
.ct-meta a:hover{color:var(--lime-ink)}
.ct-meta b{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--lime-ink);display:block;margin-bottom:3px;font-weight:500}
.form{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,3vw,34px)}
.fld{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.fld label{font-size:13.2px;font-weight:600;color:var(--ink)}
.fld input,.fld select,.fld textarea{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid #CFD4D9;padding:13px 14px;width:100%;transition:border-color .2s,box-shadow .2s;
}
.fld textarea{resize:vertical;min-height:104px}
.fld input::placeholder,.fld textarea::placeholder{color:#98A0A9}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(140,198,63,.24)}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#B3402A}
.err{display:none;font-size:12.6px;color:#98351F;font-weight:500}
.fld.bad .err{display:block}
.form .btn{width:100%;margin-top:6px}
.form .btn[aria-busy="true"]{opacity:.7;pointer-events:none}
.sent{display:none;gap:12px;padding:20px;background:rgba(140,198,63,.13);border-left:3px solid var(--lime)}
.sent.show{display:flex}
.sent svg{width:20px;height:20px;color:var(--lime-ink);flex-shrink:0;margin-top:3px}
/* Honeypot. Off-screen rather than display:none, since some bots skip
   hidden inputs. Never focusable, never announced to screen readers. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* server-side / network failure notice, shown only when a submit fails */
.form-fail{display:none;margin-bottom:14px;padding:12px 14px;background:#F9EAE7;
  border-left:3px solid #B3402A;color:#7A2C1B;font-size:14px;line-height:1.55}
.sent b{display:block;color:var(--ink);font-size:15px}
.sent p{font-size:14px;color:var(--muted);margin-top:3px}
@media(max-width:880px){.ct-in{grid-template-columns:1fr}}

/* ═══════ FOOTER ═══════ */
footer{background:var(--navy);color:#9AA3B2;font-size:14px;padding:22px 0}
.f-in{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
footer a:hover{color:var(--lime)}

/* ═══════════════════════════════════════════════════════════════
   US PAGE
   Shares every token above. What differs is structural: the US
   service list is 10 filing types, which is far too many for the
   5-cell bento used on the UK page, so it gets its own treatment.
   ═══════════════════════════════════════════════════════════════ */

/* market switch in the nav, so visitors can move between UK and US */
.mkt{display:flex;align-items:center;border:1px solid var(--line);flex-shrink:0}
.mkt a{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:8px 13px;transition:background .2s,color .2s;
}
.mkt a:hover{color:var(--ink)}
.mkt a.on{background:var(--slate);color:#fff}
@media(max-width:940px){
  .mkt{margin-left:auto;order:-1}
  .nav-in{flex-wrap:nowrap}
}

/* ── US services: grouped columns, not a 10-row hairline list ──
   The filings split naturally into three families. Grouping them
   turns a long scroll into three scannable clusters. */
.fil-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(28px,3.4vw,42px)}
.fil-col{background:var(--paper);padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column}
.fil-col > h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime-ink);font-weight:500;margin-bottom:20px;padding-bottom:14px;
  border-bottom:2px solid var(--lime);
}
.fil{padding:14px 0;border-top:1px solid var(--line-soft)}
.fil:first-of-type{border-top:0;padding-top:0}
.fil h4{font-size:.99rem;font-weight:600;color:var(--slate);margin-bottom:5px;line-height:1.35}
.fil p{font-size:14px;color:var(--muted);line-height:1.6}
@media(max-width:880px){.fil-groups{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fil-groups{grid-template-columns:1fr}}

/* The dollar badge is styled alongside .pound in the services block
   above, so both markets share one solid-lime treatment. */

/* ── US hero: image carries a credential tag, as in the brief ── */
.hero-tag{
  position:absolute;left:0;bottom:0;z-index:2;background:var(--lime);color:#1E2A0C;
  font-size:13.5px;font-weight:700;padding:11px 18px;
}
@media(max-width:900px){.hero-tag{font-size:12.5px;padding:9px 14px}}

/* ═══════════════════════════════════════════════════════════════
   LIVE-SITE HEADER
   Matches rnmconsulting.in: white contact strip, then a dark
   charcoal nav bar carrying the stacked logo and dropdown menu.
   Overrides the earlier .top / .nav rules further up this file.
   ═══════════════════════════════════════════════════════════════ */
:root{ --charcoal:#2E2E2E; }

/* ── white contact strip ─────────────────────────────────────── */
.top{background:#fff;color:var(--ink);font-size:14.5px;border-bottom:1px solid var(--line)}
.top-in{max-width:var(--shell);margin:0 auto;padding:13px var(--pad);
  display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.top .ic{display:inline-flex;align-items:center;gap:9px;color:var(--ink)}
.top .ic svg{width:16px;height:16px;flex:0 0 auto;color:var(--lime);stroke:currentColor}
.top a:hover{color:var(--lime-ink)}
.top .soc{margin-left:auto;display:flex;gap:9px}
.top .soc a{width:31px;height:31px;border-radius:0;background:var(--charcoal);color:#fff;
  display:grid;place-items:center;transition:background .2s}
.top .soc a svg{width:15px;height:15px;fill:currentColor}
.top .soc a:hover{background:var(--lime)}
@media(max-width:900px){
  .top-in{gap:16px;font-size:13.5px;padding-block:10px}
  .top .ic span{display:none}          /* keep icons, drop long text */
  .top .ic.keep span{display:inline}
}

/* ── dark nav bar ────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;background:var(--charcoal);border-bottom:0}
.nav-in{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad);
  min-height:84px;display:flex;align-items:center;gap:22px}
.brand img{height:62px;width:auto}
@media(max-width:940px){.brand img{height:46px}}

.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px;white-space:nowrap}
.nav-links > a,
.nav-item > a{
  display:inline-flex;align-items:center;gap:6px;
  color:#fff;font-size:15.5px;font-weight:700;padding:12px 15px;transition:color .2s;
}
.nav-links > a:hover,.nav-item > a:hover,.nav-item:hover > a{color:var(--lime)}
.nav-links > a.on,.nav-item > a.on{color:var(--lime)}

/* caret on items that have a submenu */
.nav-item > a .car{width:9px;height:9px;flex:0 0 auto;transition:transform .2s}
.nav-item:hover > a .car{transform:rotate(180deg)}

/* ── dropdowns ───────────────────────────────────────────────── */
.nav-item{position:relative}
.sub{
  position:absolute;top:100%;left:0;min-width:250px;background:#fff;
  border-top:3px solid var(--lime);box-shadow:0 14px 34px rgba(20,26,38,.17);
  padding:7px 0;z-index:70;
  /* Kept in the layout but hidden, so the pointer never crosses a dead
     zone on its way down. Toggling display:none instead caused the menu
     to close the moment the cursor left the parent link. */
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s .16s;
}
/* Invisible bridge covering the gap between the link and the panel.
   Measured gap is 22px, so this is deliberately taller. Without it the
   dropdown closes the instant the pointer leaves the link. */
.nav-item > .sub::before{
  content:'';position:absolute;left:0;right:0;top:-28px;height:28px;
}
.nav-item:hover > .sub,
.nav-item:focus-within > .sub{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.sub a{
  display:block;padding:11px 20px;color:var(--ink);font-size:14.6px;
  border-left:3px solid transparent;transition:.18s;white-space:nowrap;
}
.sub a:hover{background:var(--lime-wash);color:var(--lime-ink);border-left-color:var(--lime)}

/* market switch, restyled for the dark bar */
.mkt{border-color:rgba(255,255,255,.28)}
.mkt a{color:#C9CFD6}
.mkt a:hover{color:#fff}
.mkt a.on{background:var(--lime);color:#1E2A0C}

/* burger, recoloured for the dark bar */
.burger{border-color:rgba(255,255,255,.34)}
.burger i,.burger i::before,.burger i::after{background:#fff}

@media(max-width:940px){
  .nav-in{min-height:64px;flex-wrap:nowrap}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--charcoal);padding:4px var(--pad) 16px;display:none;
    max-height:78vh;overflow-y:auto;border-bottom:3px solid var(--lime);
  }
  .nav-links.open{display:flex}
  .nav-links > a,.nav-item > a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13)}
  .nav-item{position:static}
  /* submenus expand inline on mobile rather than hovering */
  .sub{position:static;display:none;min-width:0;box-shadow:none;border-top:0;
    background:rgba(255,255,255,.06);padding:0;
    opacity:1;visibility:visible;transform:none;transition:none}
  .nav-item > .sub::before{display:none}
  .nav-item.open > .sub{display:block}
  /* hover must not open panels on touch screens */
  .nav-item:hover > .sub,
  .nav-item:focus-within > .sub{display:none}
  .nav-item.open:hover > .sub,
  .nav-item.open:focus-within > .sub{display:block}
  .sub a{color:#DDE2E8;padding:11px 0 11px 16px;border-bottom:1px solid rgba(255,255,255,.09)}
  .sub a:hover{background:transparent;color:var(--lime);border-left-color:transparent}
  .nav-item > a .car{margin-left:auto}
}

/* ═══════════════════════════════════════════════════════════════
   ENQUIRY FORM + MODAL
   One form definition, rendered inline in the contact section and
   cloned into a dialog that every CTA opens.
   ═══════════════════════════════════════════════════════════════ */
.form{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,3vw,38px)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.fld.wide{grid-column:1 / -1}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:17px}
.fld label{font-size:13.5px;font-weight:700;color:var(--slate)}
.fld label .req{color:#C0392B;margin-left:2px}

/* input with a leading icon */
.inp{position:relative;display:flex;align-items:center}
.inp > svg{
  position:absolute;left:14px;width:17px;height:17px;pointer-events:none;
  color:var(--lime-ink);stroke:currentColor;fill:none;stroke-width:1.9;
}
.inp > input,.inp > select,.inp > textarea{
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid #D3D8DE;padding:14px 14px 14px 42px;width:100%;border-radius:6px;
  transition:border-color .18s,box-shadow .18s;
}
.inp > textarea{padding-top:14px;resize:vertical;min-height:120px}
.inp.ta > svg{top:16px}
.inp > select{appearance:none;cursor:pointer;padding-right:38px}
/* custom caret, since appearance:none removes the native one */
.inp.sel::after{
  content:'';position:absolute;right:16px;width:9px;height:9px;pointer-events:none;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-3px) rotate(45deg);
}
.inp > :is(input,select,textarea)::placeholder{color:#9AA1AA}
.inp > :is(input,select,textarea):focus{
  outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(155,188,89,.26);
}
.fld.bad .inp > :is(input,select,textarea){border-color:#C0392B}
.err{display:none;font-size:12.6px;color:#A5341F;font-weight:600}
.fld.bad .err{display:block}

/* full-width submit, matching the reference */
.form .btn-submit{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--slate);color:#fff;border:2px solid var(--slate);
  font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.05em;
  padding:17px 26px;cursor:pointer;transition:.22s;margin-top:4px;border-radius:6px;
}
.form .btn-submit:hover{background:#24394D;border-color:#24394D}
.form .btn-submit svg{width:17px;height:17px;fill:currentColor}
.form .btn-submit[aria-busy="true"]{opacity:.72;pointer-events:none}

.form-fail{display:none;margin-bottom:16px;padding:13px 15px;background:#F9EAE7;
  border-left:3px solid #B3402A;color:#7A2C1B;font-size:14px;line-height:1.55;border-radius:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.sent{display:none;gap:12px;padding:22px;background:var(--lime-wash);border-left:3px solid var(--lime);border-radius:4px}
.sent.show{display:flex}
.sent svg{width:21px;height:21px;color:var(--lime-ink);flex-shrink:0;margin-top:3px;
  stroke:currentColor;fill:none;stroke-width:2.2}
.sent b{display:block;color:var(--slate);font-size:15.5px}
.sent p{font-size:14px;color:var(--muted);margin-top:4px}

@media(max-width:620px){.form-grid{grid-template-columns:1fr}}

/* ── modal ───────────────────────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:flex-start;justify-content:center;padding:24px 16px;
  background:rgba(18,24,34,.62);overflow-y:auto;
}
.modal.open{display:flex}
.modal-card{
  position:relative;width:100%;max-width:760px;background:var(--paper);
  margin:auto;box-shadow:0 26px 70px rgba(12,18,28,.4);
  animation:modalIn .28s var(--ease);
}
@keyframes modalIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-card{animation:none}}
.modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:26px clamp(22px,3vw,34px) 0;
}
.modal-head h2{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:600;line-height:1.25}
.modal-head p{margin-top:7px;color:var(--muted);font-size:14.6px;line-height:1.6}
.modal-x{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  background:none;border:1px solid var(--line);cursor:pointer;color:var(--ink);
  font-size:22px;line-height:1;transition:.2s;
}
.modal-x:hover{background:var(--slate);border-color:var(--slate);color:#fff}
.modal .form{border:0;padding:20px clamp(22px,3vw,34px) clamp(24px,3vw,34px)}

/* ═══════════════════════════════════════════════════════════════
   US PAGE DIFFERENTIATION
   The two markets should not read as the same page with swapped
   nouns. UK stays light and airy; US takes a darker, denser
   treatment befitting the heavier compliance subject matter.
   ═══════════════════════════════════════════════════════════════ */

/* hero: dark panel instead of the UK's light wash */
.us-page .hero{background:var(--navy);border-bottom:0}
.us-page .hero::before{
  background:radial-gradient(1100px 520px at 82% 12%, rgba(155,188,89,.20), transparent 62%);
}
.us-page .hero h1{color:#fff}
.us-page .hero h1 strong{color:var(--lime)}
.us-page .hero .eb{color:var(--lime)}
.us-page .hero-copy > p{color:#B6C0CC}
.us-page .hero-art::after{border-color:rgba(155,188,89,.5);background:rgba(155,188,89,.12)}
.us-page .btn-ghost{border-color:#fff;color:#fff}
.us-page .btn-ghost:hover{background:#fff;color:var(--navy)}

/* stats sit on brand green here, inverting the UK's dark band */
.us-page .stats{background:var(--lime)}
.us-page .stats-in{border-left-color:rgba(30,42,12,.22)}
.us-page .stat{border-right-color:rgba(30,42,12,.22)}
.us-page .stat b{color:#1E2A0C}
.us-page .stat span{color:#2E3D14}
/* Hover deepens the tile rather than washing it out, and the underline
   picks up the darker green. A white wash plus a black bar read as a
   rendering fault rather than an intentional state. */
.us-page .stat:hover{background:#8FB248}
.us-page .stat::after{background:#3D5A0E}
@media(max-width:860px){
  .us-page .stat:nth-child(-n+2){border-bottom-color:rgba(30,42,12,.22)}
}
@media(max-width:520px){
  .us-page .stat{border-bottom-color:rgba(30,42,12,.22)}
}

/* filing groups get numbered headers and a tinted lead column */
.us-page .fil-col{counter-increment:filgroup}
.us-page .fil-col > h3::before{
  content:counter(filgroup, decimal-leading-zero);
  font-family:var(--disp);font-size:15px;color:var(--slate);
  margin-right:10px;letter-spacing:0;
}
.us-page .fil-groups{counter-reset:filgroup}
.us-page .fil-col:first-child{background:var(--lime-wash)}

/* section rhythm: the US page alternates tinted bands more strongly */
.us-page .band-tint{background:#EEF2F7}

/* Security band runs dark, so its type is light. Declared here rather
   than as inline styles so the two can never drift apart again. */
.sec .h2{color:#fff}
.sec .sec-c h4{color:#fff}
.sec .sec-c p{color:#C8CDD3}

/* Security band type, sized for the dark ground it now sits on. */
.sec .sec-c p{color:#D2D7DD}
.sec .eb{color:#B9D585}

/* Nav CTA sits on the dark bar, so the lime-ink used elsewhere (2.61
   against #2E2E2E) is too dark. Brand lime clears AA at 6.29. */
.nav-links .book{
  border:2px solid var(--lime);color:var(--lime);
  margin-left:8px;padding:11px 22px;font-size:13px;
}
.nav-links .book:hover{background:var(--lime);color:#1E2A0C}
@media(max-width:940px){
  .nav-links .book{margin:12px 0 0;text-align:center;justify-content:center;display:block}
}

/* With the CTA added, nine items no longer fit one line at 1600px.
   Tighten the menu's own spacing so the bar stays single-row; the
   burger still takes over below 940px. */
.nav-links > a,
.nav-item > a{padding:12px 11px;font-size:15px}
.nav-links{gap:0}
@media(max-width:1180px){
  .nav-links > a,.nav-item > a{padding:12px 9px;font-size:14.4px}
  .nav-links .book{padding:10px 16px;font-size:12.5px;margin-left:6px}
}
@media(max-width:940px){
  .nav-links > a,.nav-item > a{padding:13px 0;font-size:15.5px}
}