/* ============================================================
   RISE DIRECT — risedirect.com
   Brand dials
   ============================================================ */
:root{
  --orange:      #C24B0F;
  --orange-deep: #A03D0A;
  --charcoal:    #383838;
  --ink:         #262626;
  --grey:        #6E6E6E;
  --grey-light:  #B9B9B4;
  --mist:        #F4F4F1;
  --line:        #E4E4DF;
  --white:       #FFFFFF;
  --font-display:'Archivo', 'Inter', sans-serif;
  --font-body:   'Inter', sans-serif;
  --max:         1180px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--orange);text-decoration:none;}
a:hover{color:var(--orange-deep);}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* ---------- The spark — angular quad from the logomark ---------- */
.spark{
  display:inline-block;width:16px;height:20px;background:var(--orange);
  clip-path:polygon(28% 0, 100% 0, 78% 82%, 0 100%);
  flex:none;
}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:50;background:var(--white);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
header.site .logo img{height:38px;width:auto;}
nav.main{display:flex;gap:32px;align-items:center;}
nav.main a{
  font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--charcoal);
}
nav.main a:hover{color:var(--orange);}
nav.main a.btn{color:var(--white);}

.btn{
  display:inline-block;background:var(--orange);color:var(--white);
  font-weight:700;font-size:14px;letter-spacing:.04em;
  padding:12px 26px;border:none;cursor:pointer;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition:background .15s ease;
}
.btn:hover{background:var(--orange-deep);color:var(--white);}
.btn.ghost{
  background:transparent;color:var(--charcoal);
  box-shadow:inset 0 0 0 2px var(--charcoal);
}
.btn.ghost:hover{background:var(--charcoal);color:var(--white);}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--white);
  padding:110px 0 130px;
}
.hero .eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:28px;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(44px, 7.2vw, 92px);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--charcoal);
  text-transform:uppercase;
  max-width:12ch;
}
.hero h1 .o{color:var(--orange);}
.hero p.lede{
  margin-top:30px;max-width:52ch;font-size:19px;color:var(--grey);
}
.hero .cta-row{margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;}
.hero .mark{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%) rotate(8deg);
  width:min(46vw, 560px);opacity:.05;pointer-events:none;user-select:none;
}

/* ---------- Charcoal stat band ---------- */
.band{
  background:var(--charcoal);color:var(--white);
  clip-path:polygon(0 0, 100% 28px, 100% 100%, 0 100%);
  padding:88px 0 64px;
}
.band .grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.band .stat .num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(36px,4.5vw,58px);line-height:1;color:var(--white);
}
.band .stat .num em{font-style:normal;color:var(--orange);}
.band .stat .label{
  margin-top:10px;font-size:13px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey-light);
}

/* ---------- Sections ---------- */
section.block{padding:110px 0;}
section.block.mist{background:var(--mist);}
.kicker{
  display:flex;align-items:center;gap:10px;
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--orange);margin-bottom:18px;
}
h2.title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.015em;
  color:var(--charcoal);max-width:22ch;
}
p.sub{margin-top:20px;max-width:60ch;font-size:17px;color:var(--grey);}

/* ---------- Capability cards ---------- */
.cards{
  margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.card{
  background:var(--white);border:1px solid var(--line);
  padding:36px 32px 40px;position:relative;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(56,56,56,.12);}
.card .spark{margin-bottom:22px;width:20px;height:25px;}
.card h3{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:19px;letter-spacing:.02em;color:var(--charcoal);margin-bottom:12px;
}
.card p{font-size:15px;color:var(--grey);}

/* ---------- Split feature ---------- */
.split{
  margin-top:70px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
}
.split .panel{
  background:var(--charcoal);color:var(--white);padding:52px 48px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}
.split .panel .row{
  display:flex;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.12);
}
.split .panel .row:last-child{border-bottom:none;}
.split .panel .row .spark{margin-top:5px;}
.split .panel .row h4{
  font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;
}
.split .panel .row p{font-size:14px;color:var(--grey-light);}

/* ---------- SMS teaser ---------- */
.sms-teaser{
  background:var(--mist);border:1px solid var(--line);
  padding:56px;display:flex;align-items:center;justify-content:space-between;gap:40px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%);
}
.sms-teaser h3{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:26px;color:var(--charcoal);margin-bottom:10px;
}
.sms-teaser p{color:var(--grey);max-width:52ch;font-size:15px;}

/* ---------- Footer ---------- */
footer.site{
  background:var(--charcoal);color:var(--grey-light);padding:80px 0 40px;
}
footer.site .top{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:48px;align-items:start;
}
footer.site img.stacked{height:120px;width:auto;filter:brightness(0) invert(1);opacity:.92;}
footer.site h5{
  color:var(--white);font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:18px;
}
footer.site ul{list-style:none;}
footer.site li{margin-bottom:10px;font-size:14px;}
footer.site a{color:var(--grey-light);}
footer.site a:hover{color:var(--white);}
footer.site .legal{
  margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:12.5px;color:#9a9a95;
}

/* ---------- Interior pages (opt-in / privacy) ---------- */
.page-head{
  background:var(--charcoal);color:var(--white);padding:80px 0 90px;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
}
.page-head h1{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,5vw,54px);line-height:1.05;letter-spacing:-.015em;
}
.page-head p{margin-top:16px;color:var(--grey-light);max-width:60ch;}
.page-body{padding:70px 0 110px;}
.page-body .narrow{max-width:760px;}
.page-body h2{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:20px;color:var(--charcoal);margin:44px 0 14px;letter-spacing:.02em;
}
.page-body h2:first-child{margin-top:0;}
.page-body p, .page-body li{font-size:15.5px;color:#4a4a4a;margin-bottom:14px;}
.page-body ul{padding-left:22px;margin-bottom:14px;}

/* ---------- Opt-in form ---------- */
form.optin{
  margin-top:36px;background:var(--mist);border:1px solid var(--line);
  padding:44px;clip-path:polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}
form.optin label.field{
  display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--charcoal);margin:22px 0 8px;
}
form.optin label.field:first-child{margin-top:0;}
form.optin input[type=text],
form.optin input[type=tel],
form.optin input[type=email]{
  width:100%;padding:13px 16px;font-size:15px;font-family:var(--font-body);
  border:1px solid var(--line);background:var(--white);color:var(--ink);
}
form.optin input:focus{border-color:var(--orange);outline:none;}
.consent{
  display:flex;gap:12px;align-items:flex-start;margin:28px 0 8px;
}
.consent input[type=checkbox]{
  width:20px;height:20px;margin-top:2px;accent-color:var(--orange);flex:none;
}
.consent span{font-size:13.5px;color:#4a4a4a;line-height:1.55;}
form.optin .btn{margin-top:26px;}
.form-note{font-size:12.5px;color:var(--grey);margin-top:18px;}
.confirm{
  display:none;margin-top:26px;padding:18px 22px;background:var(--white);
  border-left:4px solid var(--orange);font-size:14.5px;color:var(--charcoal);
}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .band .grid{grid-template-columns:1fr;gap:32px;}
  .cards{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;gap:40px;}
  .sms-teaser{flex-direction:column;align-items:flex-start;padding:40px 32px;}
  footer.site .top{grid-template-columns:1fr;gap:40px;}
  nav.main a:not(.btn){display:none;}
  .hero{padding:70px 0 90px;}
  section.block{padding:80px 0;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .card, .btn{transition:none;}
}