/* ============================================================
   ONTARIO COMPANY KEY LANDING PAGE
   (core/templates/core/service_pages/ontario-company-key.html)

   Loaded with service-pages.css, which supplies the shared pieces (.cs-grid,
   sticky .cs-rail, cards, chips, quote factors, FAQ grid, reviews, offices,
   related). Everything here is prefixed .ck- and is this page's own look: an
   emerald "secure access" hero with a masked key card, a what-it-unlocks grid,
   three "which situation?" cards, a four-step set-up row and a do/don't panel.

   Palette: emerald #047857 (white text on it is 5.5:1), deep #064e3b, mint
   tints #ecfdf5 / #d1fae5, border #bfe8d2, bright #34d399 and #6ee7b7 for
   decoration only (never small text). Amber (#b45309 on #fffbeb) marks the
   "slower route" and "don't" cards; no red anywhere.
   ============================================================ */

.ck-hero {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    background:
        radial-gradient(700px 340px at 96% -10%, rgba(52, 211, 153, 0.22) 0%, rgba(52, 211, 153, 0) 70%),
        radial-gradient(600px 320px at 0% 105%, rgba(4, 120, 87, 0.10) 0%, rgba(4, 120, 87, 0) 70%),
        linear-gradient(135deg, #f7fffb 0%, #ecfdf5 55%, #d1fae5 100%) !important;
    border-bottom: 1px solid #bfe8d2;
    padding: clamp(1.25rem, 2.5vw, 2rem) 0 0 !important;
}
.ck-hero > .container {
    max-width: none;
    width: 100%;
    padding-left: clamp(1.5rem, 6vw, 7rem);
    padding-right: clamp(1.5rem, 6vw, 7rem);
}
@media (min-width: 1280px) {
    .ck-hero > .container { padding-right: max(clamp(1.5rem, 6vw, 7rem), 108px); }
}

.ck-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: clamp(0.75rem, 2.5vw, 2rem);
}
.ck-crumbs a { display: inline-flex; align-items: center; min-height: 36px; color: #334155; text-decoration: none; }
.ck-crumbs a:hover { color: #047857; }
.ck-crumbs span[aria-current] { color: #0f172a; }
.ck-crumbs span[aria-hidden] { color: #94a3b8; }

.ck-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.ck-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #065f46;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
}
.ck-hero h1 {
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.7rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin: 0 0 1rem;
}
.ck-hero-intro { font-size: 1.06rem; line-height: 1.7; color: #1e293b; margin: 0 0 1.25rem; max-width: 700px; }
.ck-hero-points { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.55rem; }
.ck-hero-points li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; font-weight: 600; color: #1e293b; }
.ck-hero-points .cs-ico {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    padding: 4px;
    border-radius: 50%;
    color: #ffffff;
    background: #047857;
    stroke-width: 3;
}
.ck-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ck-hero-actions .svc-rd-btn { font-size: 0.92rem; padding: 0.8rem 1.4rem; gap: 0.5rem; }
.ck-hero-actions .cs-ico { width: 16px; height: 16px; }

/* Signature visual: the masked key card */
.ck-card {
    width: 100%;
    max-width: 480px;
    justify-self: end;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 70px -28px rgba(6, 78, 59, 0.5), 0 2px 8px rgba(15, 23, 42, 0.05);
}
.ck-card-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.05rem 1.4rem;
    background: linear-gradient(135deg, #064e3b 0%, #065f46 55%, #047857 100%);
}
.ck-card-key {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: #064e3b;
    background: linear-gradient(140deg, #a7f3d0, #34d399);
    border-radius: 12px;
}
.ck-card-key .cs-ico { width: 22px; height: 22px; }
.ck-card-title { display: block; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.2rem; font-weight: 700; color: #ffffff; }
.ck-card-sub { display: block; font-size: 0.8rem; font-weight: 600; color: #d1fae5; margin-top: 0.1rem; }
/* The masked key, drawn like a password field: static, grouped 3 - 3 - 3. */
.ck-field {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.1rem 1.4rem 0.5rem;
    padding: 0.75rem 0.9rem;
    background: #06382b;
    border-radius: 12px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
}
.ck-field-ico { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; color: #064e3b; background: linear-gradient(140deg, #a7f3d0, #34d399); border-radius: 9px; }
.ck-field-ico .cs-ico { width: 17px; height: 17px; }
.ck-field-code { display: flex; flex: 1 1 auto; justify-content: center; gap: 0.9rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 2rem; font-weight: 700; line-height: 0.8; letter-spacing: 0.08em; color: #ecfdf5; }
.ck-field-tag { flex-shrink: 0; padding: 0.2rem 0.55rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #d1fae5; border: 1px solid rgba(167, 243, 208, 0.45); border-radius: 999px; }
.ck-card-cap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0 1.4rem 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #065f46;
}
.ck-card-cap .cs-ico { width: 16px; height: 16px; }
.ck-card-list { list-style: none; margin: 0; padding: 0.4rem 1.4rem 1rem; }
.ck-card-list li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px dashed #cdeedd;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ck-card-list li:last-child { border-bottom: 0; }
.ck-card-ico {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    color: #047857;
    background: #d1fae5;
    border-radius: 10px;
}
.ck-card-ico .cs-ico { width: 18px; height: 18px; }
.ck-card-list strong { display: block; font-size: 0.92rem; font-weight: 700; line-height: 1.3; color: #0f172a; }
.ck-card-list div > span { display: block; font-size: 0.78rem; line-height: 1.4; color: #475569; }
@media (hover: hover) and (pointer: fine) {
    .ck-card-list li:hover { transform: translateX(4px); }
}

.ck-stats {
    list-style: none;
    margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #bfe8d2;
}
.ck-stats li { padding: 1.15rem 1rem 1.3rem; text-align: center; }
.ck-stats li + li { border-left: 1px solid #bfe8d2; }
.ck-stats strong {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #047857;
    line-height: 1.15;
}
.ck-stats span { display: block; font-size: 0.82rem; font-weight: 600; color: #475569; margin-top: 0.2rem; }

/* ---------- Shared tint for this page's icon tiles ---------- */
.ck-incl .cs-tile,
.ck-decides .cs-tile {
    color: #047857;
    background: linear-gradient(140deg, #f0fdf7, #d1fae5);
    border-color: #bfe8d2;
    transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), background 0.25s, color 0.25s;
}

/* ---------- What it unlocks: 2 x 2 tiles ---------- */
.ck-unlocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ck-unlock {
    display: flex;
    gap: 0.95rem;
    align-items: flex-start;
    background: linear-gradient(160deg, #f7fffb 0%, #ffffff 70%);
    border: 1px solid #cdeedd;
    border-radius: 16px;
    padding: 1.1rem 1.15rem 1.2rem;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}
.ck-unlock-ico {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #ffffff;
    background: linear-gradient(140deg, #064e3b, #047857);
    border-radius: 14px;
}
.ck-unlock-ico .cs-ico { width: 24px; height: 24px; }
.ck-unlock h3 { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; }
.ck-unlock p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #334155; }

/* ---------- Three situations ---------- */
.ck-sits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ck-sit {
    --tone: #047857;
    --tone-bg: #ecfdf5;
    --tone-ink: #065f46;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e6ebf2;
    border-top: 6px solid var(--tone);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.15rem;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.ck-sit:nth-child(2) { --tone: #d97706; --tone-bg: #fffbeb; --tone-ink: #92400e; }
.ck-sit:nth-child(3) { --tone: #0284c7; --tone-bg: #f0f9ff; --tone-ink: #075985; }
.ck-sit-badge {
    align-self: flex-start;
    padding: 0.2rem 0.7rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tone-ink);
    background: var(--tone-bg);
    border-radius: 999px;
}
.ck-sit-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0.8rem 0 0.6rem;
    color: var(--tone-ink);
    background: var(--tone-bg);
    border-radius: 12px;
}
.ck-sit-ico .cs-ico { width: 22px; height: 22px; }
.ck-sit h3 { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0 0 0.35rem; }
.ck-sit p { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.55; color: #334155; }
.ck-sit-wait {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    align-self: flex-start;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--tone-ink);
    background: var(--tone-bg);
    border-radius: 999px;
}
.ck-sit-wait .cs-ico { width: 15px; height: 15px; }
.ck-note {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 1rem 0 0;
    padding: 0.95rem 1.1rem;
    background: #ecfdf5;
    border: 1px dashed #34d399;
    border-radius: 14px;
}
.ck-note .cs-ico { flex-shrink: 0; width: 22px; height: 22px; margin-top: 0.1rem; color: #047857; }
.ck-note span { font-size: 0.9rem; line-height: 1.6; color: #1e293b; }

/* ---------- Four steps in a row ---------- */
.ck-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; counter-reset: ck; }
.ck-step {
    position: relative;
    background: #ffffff;
    border: 1px solid #cdeedd;
    border-radius: 16px;
    padding: 1.7rem 0.95rem 1rem;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease;
}
.ck-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -0.85rem;
    width: 0.85rem;
    height: 0;
    border-top: 3px dashed #34d399;
}
.ck-step-num {
    position: absolute;
    top: -16px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(140deg, #064e3b, #047857);
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #bfe8d2;
}
.ck-step-ico { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 0.55rem; color: #047857; background: #d1fae5; border-radius: 11px; }
.ck-step-ico .cs-ico { width: 20px; height: 20px; }
.ck-step h3 { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 0.98rem; font-weight: 700; color: #0f172a; margin: 0 0 0.25rem; }
.ck-step p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: #334155; }

/* ---------- Do / Don't ---------- */
.ck-safe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ck-safe-col { border-radius: 16px; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid; }
.ck-safe-do { background: linear-gradient(160deg, #f0fdf7, #ffffff 80%); border-color: #bfe8d2; }
.ck-safe-dont { background: linear-gradient(160deg, #fffbeb, #ffffff 80%); border-color: #fde68a; }
.ck-safe-col h3 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.8rem; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.1rem; font-weight: 700; color: #0f172a; }
.ck-safe-col h3 .cs-ico { width: 26px; height: 26px; padding: 5px; border-radius: 50%; color: #ffffff; stroke-width: 3; }
.ck-safe-do h3 .cs-ico { background: #047857; }
.ck-safe-dont h3 .cs-ico { background: #b45309; }
.ck-safe-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.ck-safe-col li { position: relative; padding-left: 1.4rem; font-size: 0.9rem; line-height: 1.55; color: #1e293b; }
.ck-safe-col li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.6rem; border-radius: 50%; }
.ck-safe-do li::before { background: #34d399; box-shadow: 0 0 0 3px #d1fae5; }
.ck-safe-dont li::before { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }

/* ---------- Included ---------- */
.ck-incl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1.25rem; }
.ck-incl li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.35rem 0; }
.ck-incl h3 { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 0.98rem; font-weight: 700; color: #0f172a; margin: 0 0 0.2rem; }
.ck-incl p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: #334155; }
.ck-decides {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    background: #ecfdf5;
    border: 1px dashed #34d399;
    border-radius: 14px;
}
.ck-decides strong { display: block; font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.02rem; color: #0f172a; margin-bottom: 0.2rem; }
.ck-decides p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: #1e293b; }

/* ---------- Official sources: clearly clickable button cards ---------- */
.ck-sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ck-source {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 68px;
    padding: 0.7rem 0.8rem 0.7rem 0.9rem;
    color: #064e3b;
    text-decoration: none;
    background: #ffffff;
    border: 1.5px solid #bfe8d2;
    border-radius: 14px;
    box-shadow: 0 2px 0 #cdeedd, 0 8px 18px -14px rgba(6, 78, 59, 0.5);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ck-source-ico { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; color: #047857; background: #d1fae5; border-radius: 11px; }
.ck-source-ico .cs-ico { width: 20px; height: 20px; }
.ck-source-text { flex: 1 1 auto; min-width: 0; }
.ck-source-text strong { display: block; font-size: 0.9rem; font-weight: 700; line-height: 1.3; color: #0f172a; }
.ck-source-text em { display: block; margin-top: 0.1rem; font-style: normal; font-size: 0.78rem; font-weight: 600; color: #065f46; }
.ck-source-go { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; color: #ffffff; background: #047857; border-radius: 50%; transition: transform 0.2s ease, background 0.2s ease; }
.ck-source-go .cs-ico { width: 16px; height: 16px; stroke-width: 2.6; transform: rotate(-45deg); }
.ck-source:focus-visible { outline: 3px solid #6ee7b7; outline-offset: 2px; }
.ck-source:active { transform: translateY(1px); box-shadow: 0 1px 0 #cdeedd; }

/* ---------- Hover ---------- */
@media (hover: hover) and (pointer: fine) {
    .ck-unlock:hover, .ck-sit:hover, .ck-step:hover { transform: translateY(-4px); box-shadow: 0 18px 32px -18px rgba(6, 78, 59, 0.5); }
    .ck-unlock:hover { border-color: #34d399; }
    .ck-incl li:hover .cs-tile {
        transform: rotate(-8deg) scale(1.1);
        color: #ffffff;
        background: linear-gradient(135deg, #064e3b, #047857);
        border-color: transparent;
    }
    .ck-source:hover { border-color: #047857; background: #f7fffb; transform: translateY(-3px); box-shadow: 0 2px 0 #cdeedd, 0 16px 26px -16px rgba(6, 78, 59, 0.6); }
    .ck-source:hover .ck-source-go { background: #064e3b; transform: translate(2px, -2px); }
}
@media (prefers-reduced-motion: reduce) {
    .ck-card-list li, .ck-unlock, .ck-sit, .ck-step, .ck-incl .cs-tile, .ck-source, .ck-source-go { transition: none !important; }
    .ck-card-list li:hover, .ck-unlock:hover, .ck-sit:hover, .ck-step:hover, .ck-incl li:hover .cs-tile, .ck-source:hover, .ck-source:hover .ck-source-go { transform: none !important; }
}

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .ck-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
    .ck-step:not(:last-child)::after { display: none; }
}
@media (max-width: 991px) {
    .ck-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .ck-card { justify-self: start; }
    .ck-sits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .ck-unlocks, .ck-safe, .ck-incl, .ck-sources { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .ck-hero-actions .svc-rd-btn { width: 100%; justify-content: center; }
    .ck-stats { grid-template-columns: minmax(0, 1fr); }
    .ck-stats li + li { border-left: 0; border-top: 1px solid #bfe8d2; }
    .ck-steps { grid-template-columns: minmax(0, 1fr); }
    .ck-field-code { gap: 0.5rem; font-size: 1.6rem; }
    .ck-field-tag { display: none; }
}