/* ============================================================
   OLSC TORONTO — Raklet Custom CSS
   Paste into:  Admin → Settings → Custom CSS  →  Save
   ------------------------------------------------------------
   The injected hero + cards use the .olsc- namespace so they
   will not collide with Raklet's own classes. Section (3) is
   an OPTIONAL global recolour — keep or delete per-rule.
   ============================================================ */

/* 1) FONTS  (same @import technique as Raklet's custom-fonts guide) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* 2) BRAND TOKENS */
:root{
  --olsc-red:#C8102E;
  --olsc-red-deep:#7A0C1C;
  --olsc-red-dark:#4A0712;
  --olsc-gold:#F4D24A;
  --olsc-gold-deep:#D8B431;
  --olsc-ink:#15171C;
  --olsc-ink-soft:#5B6270;
  --olsc-line:#E7E9EE;
}

/* 3) OPTIONAL GLOBAL RECOLOUR --------------------------------
   Much of this is also doable no-code in the Branding section.
   Raklet runs on Bootstrap 4, so these hit Bootstrap-style
   classes. Delete any rule that fights your current theme. */
body{ font-family:'Inter',system-ui,sans-serif; }
h1,h2,h3,.h1,.h2,.h3{ font-family:'Archivo',sans-serif; }

.btn-primary,
.btn-success{
  background-color:var(--olsc-red) !important;
  border-color:var(--olsc-red) !important;
}
.btn-primary:hover,
.btn-success:hover{
  background-color:var(--olsc-red-deep) !important;
  border-color:var(--olsc-red-deep) !important;
}
a{ color:var(--olsc-red); }

/* 4) INJECTED HERO + CARDS  (self-contained, namespaced) ----- */
.olsc-mount, .olsc-mount *{ box-sizing:border-box; }
.olsc-mount{ font-family:'Inter',system-ui,sans-serif; }

.olsc-hero{
  position:relative; overflow:hidden; border-radius:24px;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(244,210,74,.30), transparent 55%),
    linear-gradient(150deg,var(--olsc-red) 0%, var(--olsc-red-deep) 58%, var(--olsc-red-dark) 100%);
  color:#fff; padding:46px 48px; margin:8px 0 26px;
  display:flex; gap:40px; align-items:center;
  box-shadow:0 18px 40px -22px rgba(20,23,28,.45);
}
.olsc-hero::before{
  content:"YNWA"; position:absolute; right:-6px; bottom:-34px;
  font-family:'Archivo',sans-serif; font-weight:900; font-size:190px;
  letter-spacing:-6px; color:rgba(255,255,255,.05);
  pointer-events:none; line-height:1;
}
.olsc-hero__copy{ flex:1; min-width:0; position:relative; z-index:2; }
.olsc-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Archivo',sans-serif; font-weight:800; font-size:12px;
  letter-spacing:2px; color:var(--olsc-gold); text-transform:uppercase; margin-bottom:18px;
}
.olsc-eyebrow::before{ content:""; width:26px; height:2px; background:var(--olsc-gold); display:inline-block; }
.olsc-hero h1{
  font-family:'Archivo',sans-serif; font-weight:900;
  font-size:clamp(32px,4vw,52px); line-height:1.03; letter-spacing:-1px;
  margin:0 0 20px; color:#fff;
}
.olsc-hero p{
  font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.86);
  max-width:520px; margin:0 0 14px;
}
.olsc-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.olsc-pill{
  font-family:'Archivo',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.3px;
  padding:9px 16px; border-radius:999px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18); color:#fff;
}
.olsc-pill--gold{ background:var(--olsc-gold); color:var(--olsc-red-dark); border-color:var(--olsc-gold-deep); }

.olsc-art{
  width:46%; max-width:430px; flex:none; position:relative; z-index:2;
  border-radius:16px; overflow:hidden; border:6px solid rgba(255,255,255,.14);
  box-shadow:0 22px 50px -20px rgba(0,0,0,.6);
}
.olsc-art svg{ display:block; width:100%; height:auto; }
.olsc-glow{ transform-origin:center; animation:olsc-pulse 4.5s ease-in-out infinite; }

.olsc-quick{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:26px 0; }
.olsc-qcard{
  background:#fff; border:1px solid var(--olsc-line); border-radius:16px;
  padding:20px; box-shadow:0 1px 0 rgba(20,23,28,.04), 0 10px 30px -18px rgba(20,23,28,.25);
  transition:.16s; cursor:pointer;
}
.olsc-qcard:hover{ transform:translateY(-3px); border-color:#dfe2ea; }
.olsc-qcard .olsc-qico{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(200,16,46,.09); color:var(--olsc-red); margin-bottom:14px;
}
.olsc-qcard h3{ font-family:'Archivo',sans-serif; font-weight:800; font-size:15px; margin:0 0 5px; color:var(--olsc-ink); }
.olsc-qcard p{ font-size:13px; color:var(--olsc-ink-soft); margin:0; line-height:1.5; }

@keyframes olsc-pulse{ 0%,100%{opacity:.55;} 50%{opacity:.95;} }

/* responsive */
@media (max-width:1080px){
  .olsc-quick{ grid-template-columns:repeat(2,1fr); }
  .olsc-hero{ flex-direction:column; align-items:flex-start; }
  .olsc-art{ width:100%; max-width:none; }
}
@media (max-width:560px){
  .olsc-quick{ grid-template-columns:1fr; }
  .olsc-hero{ padding:30px 22px; }
}
@media (prefers-reduced-motion:reduce){ .olsc-glow{ animation:none; } }