/* ============================================================
   Rubicon Rubber — site styles
   Palette (fixed, from brand kit): teal #016D75 · sea #27B2A2 · sky #43B7FF
   Type: Poppins (200/400/600/800) + IBM Plex Mono (400/500)
   ============================================================ */

:root{
  --teal:  #016D75;
  --sea:   #27B2A2;
  --sky:   #43B7FF;
  --deep:  #04454B;
  --abyss: #02282C;
  --ink:   #0A1B1D;
  --paper: #F7F5F0;
  --paper2:#EFEBE1;
  --line:  #DCD6C8;
  --line-d:rgba(255,255,255,.14);
  --muted: #54696B;
  --mist:  rgba(247,245,240,.78);
  --sans:  'Poppins', sans-serif;
  --mono:  'IBM Plex Mono', monospace;
  --shell: 1160px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:16.5px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; }
a{ color:var(--teal); text-decoration:none; }
p{ margin:0 0 1.1em; }
.shell{ max-width:var(--shell); margin:0 auto; padding:0 clamp(20px,4vw,44px); }

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0 0 1.4rem;
}
.on-dark .eyebrow{ color:var(--sea); }

.display{
  font-weight:200;
  font-size:clamp(2.5rem, 5.6vw, 4.7rem);
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0 0 1.4rem;
}
.display strong{ font-weight:800; }

.title{
  font-weight:200;
  font-size:clamp(1.8rem, 3.4vw, 2.9rem);
  line-height:1.14;
  letter-spacing:-.015em;
  margin:0 0 1.2rem;
}
.title strong{ font-weight:800; }

.lede{
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight:400;
  line-height:1.7;
  max-width:46ch;
}
.on-dark .lede{ color:var(--mist); }
.measure{ max-width:62ch; }
.muted{ color:var(--muted); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:1em 1.9em;
  border:1px solid transparent;
  transition:background .25s, color .25s, border-color .25s;
}
.btn-solid{ background:var(--teal); color:#fff; }
.btn-solid:hover{ background:var(--deep); }
.on-dark .btn-solid{ background:var(--paper); color:var(--teal); }
.on-dark .btn-solid:hover{ background:#fff; }
.btn-ghost{ border-color:var(--teal); color:var(--teal); }
.btn-ghost:hover{ background:var(--teal); color:#fff; }
.on-dark .btn-ghost{ border-color:var(--line-d); color:var(--paper); }
.on-dark .btn-ghost:hover{ border-color:var(--paper); background:transparent; }

.arrow-link{
  font-family:var(--mono);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--teal);
}
.arrow-link::after{ content:" \2192"; transition:margin .2s; }
.arrow-link:hover::after{ margin-left:.35em; }
.on-dark .arrow-link{ color:var(--sky); }

/* ---------- header ---------- */
.site-head{
  background:var(--paper);
  border-bottom:1px solid var(--line);
}
.site-head .shell{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; min-height:78px; flex-wrap:wrap; padding-top:10px; padding-bottom:10px;
}
.brand{ display:flex; align-items:center; gap:12px; color:var(--ink); }
.brand svg{ width:38px; height:38px; }
.logo-img{ height:48px; width:auto; display:block; }
.logo-foot{ height:42px; }
.brand-word{ font-weight:800; font-size:1.05rem; letter-spacing:.02em; line-height:1.1; }
.brand-word span{ display:block; font-weight:200; letter-spacing:.42em; font-size:.62rem; text-transform:uppercase; color:var(--teal); }
.site-nav{ display:flex; align-items:center; gap:clamp(14px,2.6vw,34px); flex-wrap:wrap; }
.site-nav a{
  font-family:var(--mono); font-size:.74rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
  padding:.4em 0; border-bottom:1px solid transparent;
}
.site-nav a:hover{ color:var(--teal); }
.site-nav a[aria-current="page"]{ color:var(--teal); border-bottom-color:var(--teal); }
.site-nav .btn{ padding:.85em 1.5em; }

/* ---------- dark atmosphere ---------- */
.on-dark{ color:var(--paper); background:var(--abyss); position:relative; }
.atmo{
  background:
    radial-gradient(52vw 40vh at 84% -6%, rgba(67,183,255,.13), transparent 60%),
    radial-gradient(46vw 42vh at 4% 108%, rgba(39,178,162,.16), transparent 62%),
    linear-gradient(168deg, var(--deep) 0%, var(--abyss) 58%, #021E22 100%);
}
.atmo::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.022) 26px 27px);
}
.atmo > *{ position:relative; }

/* ---------- hero (home) ---------- */
.hero{ padding:clamp(84px,12vh,150px) 0 clamp(56px,8vh,96px); }
.hero .display{ max-width:15ch; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-top:2.4rem; }

/* staggered load reveal */
@keyframes rise{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
.rise{ opacity:0; animation:rise .8s cubic-bezier(.2,.65,.25,1) forwards; animation-delay:var(--d,0s); }
@media (prefers-reduced-motion: reduce){
  .rise{ animation:none; opacity:1; }
}

/* ---------- trust ledger ---------- */
.ledger{ border-top:1px solid var(--line-d); }
.ledger .shell{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding-top:0; padding-bottom:0;
}
.ledger-cell{
  padding:26px clamp(14px,1.8vw,28px) 30px 0;
  border-left:1px solid var(--line-d);
  padding-left:clamp(14px,1.8vw,28px);
}
.ledger-cell:first-child{ border-left:0; padding-left:0; }
.ledger-cell .k{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sea);
  display:block; margin-bottom:.55em;
}
.ledger-cell .k .idx{ color:var(--sky); margin-right:.7em; }
.ledger-cell p{ margin:0; font-size:.88rem; font-weight:200; color:var(--mist); line-height:1.55; }

/* ---------- router split ---------- */
.router{ background:var(--paper); padding:clamp(72px,9vw,120px) 0; }
.router-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--line); margin-top:3rem; }
.route{
  position:relative; padding:clamp(30px,3.6vw,52px);
  background:var(--paper); color:var(--ink);
  transition:background .3s;
}
.route + .route{ border-left:1px solid var(--line); }
.route .tag{
  font-family:var(--mono); font-size:.68rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--teal);
  display:block; margin-bottom:2.6rem;
}
.route h3{
  font-weight:200; font-size:clamp(1.35rem,2.2vw,1.8rem);
  line-height:1.25; letter-spacing:-.01em; margin:0 0 .9rem; max-width:20ch;
}
.route h3 strong{ font-weight:800; }
.route p{ color:var(--muted); font-size:.98rem; max-width:40ch; }
.route .arrow-link{ margin-top:1.6rem; display:inline-block; }
.route:hover{ background:#FCFBF8; }

/* ---------- numbered rows ---------- */
.rows{ background:var(--paper2); padding:clamp(72px,9vw,120px) 0; }
.row-item{
  display:grid; grid-template-columns:90px 1fr auto; gap:clamp(16px,3vw,44px);
  align-items:baseline; padding:30px 0; border-top:1px solid var(--line);
}
.row-item:last-of-type{ border-bottom:1px solid var(--line); }
.row-item .num{ font-family:var(--mono); font-size:.8rem; font-weight:500; color:var(--teal); letter-spacing:.18em; }
.row-item h3{ font-weight:600; font-size:1.15rem; margin:0 0 .35rem; }
.row-item p{ margin:0; color:var(--muted); font-size:.97rem; max-width:64ch; }

/* ---------- credibility band ---------- */
.band{ padding:clamp(76px,10vw,130px) 0; }
.band .title{ max-width:26ch; }
.band .measure{ color:var(--mist); font-weight:200; font-size:clamp(1.02rem,1.5vw,1.18rem); }

/* ---------- CTA band ---------- */
.cta{
  background:
    repeating-linear-gradient(115deg, transparent 0 26px, rgba(255,255,255,.03) 26px 27px),
    linear-gradient(160deg, var(--teal), var(--deep));
  color:var(--paper);
  padding:clamp(76px,10vw,124px) 0;
  text-align:left;
}
.cta .title{ max-width:22ch; margin-bottom:2rem; }

/* ---------- interior page hero ---------- */
.page-hero{ padding:clamp(64px,9vh,110px) 0 clamp(48px,7vh,84px); }
.page-hero .display{ max-width:18ch; font-size:clamp(2.2rem,4.6vw,3.8rem); }

/* ---------- prose sections ---------- */
.section{ padding:clamp(64px,8vw,110px) 0; }
.section.alt{ background:var(--paper2); }
.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(28px,5vw,80px); }
.split .sticky-side{ align-self:start; }

/* pillar blocks */
.pillar{ padding:34px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:90px 1fr; gap:clamp(16px,3vw,44px); }
.pillar:last-of-type{ border-bottom:1px solid var(--line); }
.pillar .num{ font-family:var(--mono); font-size:.8rem; font-weight:500; color:var(--teal); letter-spacing:.18em; padding-top:.4em; }
.pillar h3{ font-weight:600; font-size:1.25rem; margin:0 0 .6rem; }
.pillar p{ color:var(--ink); max-width:66ch; margin-bottom:.4em; }

/* dark feature panel (how it works) */
.panel{ padding:clamp(72px,9vw,120px) 0; }
.panel .pull{
  font-weight:200; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.4;
  border-left:2px solid var(--sky); padding-left:1.4em; margin:2.6rem 0;
  color:var(--paper); max-width:32ch;
}
.panel .pull strong{ font-weight:800; }
.panel p{ color:var(--mist); max-width:64ch; }

/* four-lens grid */
.lens-grid{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); margin-top:3rem; }
.lens{ padding:clamp(26px,3vw,44px); border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--paper); }
.lens:nth-child(1), .lens:nth-child(2){ border-top:0; }
.lens:nth-child(odd){ border-left:0; }
.lens .k{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:1.1em; }
.lens h3{ font-weight:800; font-size:1.05rem; margin:0 0 .55rem; }
.lens p{ margin:0; color:var(--muted); font-size:.95rem; }

/* ---------- form ---------- */
.form-wrap{ max-width:640px; }
.field{ margin-bottom:2rem; }
.field label{
  display:block; font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:.7em;
}
.field input, .field select, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.65em 0; border-radius:0; outline:none;
  transition:border-color .25s;
}
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--teal) 50%), linear-gradient(135deg, var(--teal) 50%, transparent 50%); background-position:calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{ border-bottom-color:var(--teal); }
.reassure{ font-size:.88rem; color:var(--muted); margin-top:1.6rem; max-width:52ch; }
.hidden{ display:none; }

/* ---------- footer ---------- */
.site-foot{ background:var(--abyss); color:var(--mist); padding:clamp(56px,7vw,84px) 0 40px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,5vw,70px); align-items:start; }
.foot-brand{ display:flex; align-items:center; gap:12px; color:#fff; margin-bottom:1.2rem; }
.foot-brand svg{ width:34px; height:34px; }
.foot-brand .brand-word span{ color:var(--sea); }
.foot-tag{ font-weight:200; font-size:1.05rem; color:var(--mist); max-width:26ch; }
.foot-col .k{ font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--sea); display:block; margin-bottom:1.1em; }
.foot-col a{ display:block; color:var(--mist); font-size:.92rem; padding:.28em 0; }
.foot-col a:hover{ color:#fff; }
.foot-base{
  margin-top:clamp(40px,5vw,64px); padding-top:22px; border-top:1px solid var(--line-d);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(247,245,240,.45);
}

/* ---------- responsive ---------- */
@media (max-width: 920px){
  .ledger .shell{ grid-template-columns:1fr 1fr; }
  .ledger-cell{ border-left:0; padding-left:0; border-top:1px solid var(--line-d); }
  .ledger-cell:nth-child(-n+2){ border-top:0; }
  .router-grid{ grid-template-columns:1fr; }
  .route + .route{ border-left:0; border-top:1px solid var(--line); }
  .split{ grid-template-columns:1fr; }
  .lens-grid{ grid-template-columns:1fr; }
  .lens:nth-child(odd), .lens{ border-left:0; }
  .lens:nth-child(2){ border-top:1px solid var(--line); }
  .foot-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .row-item{ grid-template-columns:1fr; gap:6px; }
  .pillar{ grid-template-columns:1fr; gap:8px; }
  .ledger .shell{ grid-template-columns:1fr; }
  .ledger-cell:nth-child(-n+2){ border-top:1px solid var(--line-d); }
  .ledger-cell:first-child{ border-top:0; }
}