/* Ray-Lane Technologies — the company site.
 *
 * Its OWN stylesheet on purpose. styles.css has --primary and --accent
 * overwritten per tenant by app.js, so a district portal is painted in
 * that district's colours. The company site must never be repainted by
 * anybody, so it carries its own palette and shares nothing.
 *
 * The palette is read out of Colton's own logo (14 Nov):
 *   #0CC0DF  the cyan          13.4% of the mark
 *   #000000  black             14.5%
 *   #FFFFFF  white             71.6%
 * The cyan is about 2.3:1 against white, which fails for body text, so
 * it is used as a GROUND (black on cyan) and as an accent — never for
 * small type. #0995AD and #03363E are the deeper cyans already present
 * in the logo and do the work where contrast matters.
 */
:root{
  --cy:#0CC0DF;
  --cy-deep:#0995AD;
  --cy-dark:#03363E;
  --ink:#0b0b0c;
  --ink-soft:#4a5260;
  --line:#e3e7ec;
  --bg:#fff;
  --bg-soft:#f6f9fb;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
a{color:var(--cy-deep)}
a:hover{color:var(--cy-dark)}
h1,h2,h3{line-height:1.2;margin:0 0 .4em}
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--cy-dark);padding:10px 14px;z-index:20}
.skip:focus{left:8px;top:8px;outline:3px solid var(--cy)}

/* ── the mark ─────────────────────────────────────────────
 * Colton's own logo: RAY-LANE on a cyan banner over a manta ray, with
 * TECHNOLOGIES set on the ray's body. Exported from his Canva file,
 * matted off the white background and trimmed. It carries type inside
 * it, so it needs more height than a plain glyph would - hence a
 * taller header than the usual 60px. */
.rl{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.rl img{height:68px;width:auto;display:block}
@media (max-width:620px){ .rl img{height:50px} }

/* ── header ───────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:92px}
.nav{display:flex;align-items:center;gap:22px}
.nav a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:600}
.nav a:hover{color:var(--cy-dark)}
.nav a{white-space:nowrap}
@media (max-width:620px){
  .nav a.nav-hide{display:none}
  .head-inner{height:72px;gap:12px}
  .nav a{font-size:14px}
}

/* ── buttons ──────────────────────────────────────────── */
.btn{
  display:inline-block;border:1px solid transparent;border-radius:9px;padding:12px 20px;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;text-align:center}
.btn-cy{background:var(--cy);color:#000}
.btn-cy:hover{background:#0ab0cd;color:#000}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#25272b;color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:76px 0 60px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#f2fbfd,#fff)}
.hero h1{font-size:clamp(32px,5.4vw,52px);max-width:17ch;letter-spacing:-.02em}
.hero .lede{font-size:clamp(17px,2.2vw,20px);color:var(--ink-soft);max-width:60ch;margin:18px 0 0}
.kicker{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#000;background:var(--cy);padding:5px 11px;border-radius:999px;margin-bottom:20px}

/* ── sections ─────────────────────────────────────────── */
.sec{padding:62px 0;border-bottom:1px solid var(--line)}
.sec-soft{background:var(--bg-soft)}
.sec h2{font-size:clamp(24px,3.4vw,33px);letter-spacing:-.01em}
.sec .lede{color:var(--ink-soft);max-width:62ch;font-size:17px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cy-deep);margin:0 0 10px}

/* ── cards and grids ──────────────────────────────────── */
.grid{display:grid;gap:18px;margin-top:30px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){ .grid-2,.grid-3{grid-template-columns:1fr} }
.card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff}
.card h3{font-size:19px;margin-bottom:6px}
.card p{margin:0;color:var(--ink-soft)}
.card-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
.card-link:hover{border-color:var(--cy);color:inherit}
.card-more{color:var(--cy-deep);font-weight:700;margin-top:14px;display:inline-block}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin:30px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:18px 20px 18px 62px;border:1px solid var(--line);border-radius:12px;background:#fff}
.steps li::before{
  content:counter(s);position:absolute;left:20px;top:18px;width:28px;height:28px;border-radius:50%;
  background:var(--cy);color:#000;font-weight:800;font-size:14px;display:grid;place-items:center}
.steps b{display:block;margin-bottom:2px}
.steps span{color:var(--ink-soft)}

/* a plain list of facts with a cyan rule */
.facts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.facts li{padding-left:16px;border-left:3px solid var(--cy);color:var(--ink-soft)}
.facts b{color:var(--ink)}

/* ── the people ───────────────────────────────────────── */
.who{display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-top:28px}
@media (max-width:820px){ .who{grid-template-columns:1fr} }
.who .card h3{margin-bottom:2px}
.who .role{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--cy-deep);margin:0 0 10px}

/* ── form ─────────────────────────────────────────────── */
.form{margin-top:26px;max-width:620px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.fld input,.fld textarea,.fld select{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 13px;font:inherit;background:#fff;color:var(--ink)}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:2px solid var(--cy);border-color:var(--cy)}
.fld small{display:block;color:var(--ink-soft);font-size:13px;margin-top:5px}
.form-note{color:var(--ink-soft);font-size:14px;margin-top:14px}

/* ── callout ──────────────────────────────────────────── */
.note{border:1px solid var(--line);border-left:4px solid var(--cy);border-radius:0 12px 12px 0;
  padding:18px 22px;background:#fff;margin-top:26px}
.note p{margin:0;color:var(--ink-soft)}
.note b{color:var(--ink)}

/* ── footer ───────────────────────────────────────────────
 * Light, not dark. The ray in the logo is solid black, so a near-black
 * footer swallowed it completely - and inverting Colton's mark to suit
 * a design choice of mine is the wrong way round. */
.site-foot{padding:38px 0;color:var(--ink-soft);font-size:14px;
  background:var(--bg-soft);border-top:1px solid var(--line)}
.site-foot a{color:var(--cy-deep)}
.foot-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}