/* ============================================================
   KINGDOM BUSINESS CORNER  (/business)
   A second Dominion City Oshawa programme with its own identity:
   deep plum and gold, the pairing the crown is already asking
   for, against cream, coral and mint.
   Scoped to .kbc so none of it reaches the rest of the site, and
   built on the same bones as the Craft page so the two read as
   siblings rather than two unrelated experiments.
   ============================================================ */
.kbc{
  --k-bg:#241A2F;
  --k-bg-2:#2E2140;
  --k-ink:#F4EFE6;
  --k-dim:#A99BB8;
  --k-line:rgba(244,239,230,.14);
  --k-gold:#E8C44A;
  --k-coral:#E8835A;
  --k-mint:#8FD6A8;
  --k-cream:#F4EFE6;
  --k-deep:#19112A;
  --k-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  background:var(--k-bg);color:var(--k-ink);
}
.kbc ::selection{background:var(--k-gold);color:var(--k-deep)}

.k-sec{padding-block:clamp(3rem,6vw,5rem)}
.k-sec-2{background:#2E2140}

.k-label{
  font-family:var(--k-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--k-dim);margin:0 0 1.1rem;
}
.k-h2{
  font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 108;
  font-size:clamp(1.8rem,1.2rem + 2.6vw,3rem);line-height:1.04;letter-spacing:-.03em;margin:0;
}
.k-lede{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.6;color:var(--k-dim);max-width:52ch}

/* ---------------------------------------------------------- hero */
.k-hero{padding-block:clamp(2.6rem,6vw,4.5rem) clamp(3rem,6vw,5rem)}
.k-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 3rem;align-items:start}
@media (max-width:900px){.k-hero-grid{grid-template-columns:1fr}}
.k-hero h1{
  font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 108;
  font-size:clamp(2.6rem,1.5rem + 6.6vw,5.2rem);line-height:.96;letter-spacing:-.04em;
  margin:.2rem 0 0;max-width:11ch;
}
.k-hero h1 em{font-style:normal;color:var(--k-gold)}
.k-hero h1 .k-dot{color:var(--k-coral)}

.k-claims{margin:1.8rem 0 0;display:grid;gap:.5rem}
.k-claim{
  margin:0;font-family:var(--sans);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(1.1rem,1rem + .7vw,1.45rem);
}
.k-claim b{color:var(--k-gold);font-weight:700}
.k-claim s{color:var(--k-coral);text-decoration-thickness:3px}

/* the crown, as on the flyer */
.k-crown{width:min(clamp(78px,10vw,112px),13svh);height:auto;display:block;justify-self:end}
/* Stacked, the crown used to land under the buttons with nothing around it,
   a screen down from the title it belongs to. On a phone it takes the top
   corner instead, out of the flow, the way it sits on the flyer. */
@media (max-width:900px){
  .k-hero-grid{position:relative}
  .k-crown{position:absolute;top:-6px;right:0;width:clamp(58px,16vw,86px)}
  /* The crown is out of the flow, so the eyebrow has to be told it is there.
     Without this the two collide on a narrow phone, where the label is long
     enough to run under it. It wraps rather than overlaps. */
  .k-hero-grid > div > .k-label{padding-right:76px}
}

/* ---------------------------------------------------------- what we cover */
.k-covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
@media (max-width:620px){.k-covers{grid-template-columns:1fr}}
.k-cover{
  border-radius:12px;padding:.95rem 1.15rem;background:var(--tone);color:var(--k-deep);
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:-.01em;
}
.k-cover svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.k-cover p{margin:.3rem 0 0;font-weight:400;font-size:.86rem;line-height:1.45;opacity:.78}
.k-cover > span{display:block}

/* ---------------------------------------------------------- facts */
.k-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(1.8rem,4vw,2.5rem)}
@media (max-width:700px){.k-facts{grid-template-columns:1fr}}
.k-fact dt{font-family:var(--k-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem}
.k-fact dd{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);letter-spacing:-.02em}
.k-fact dd small{display:block;font-weight:400;font-size:.92rem;letter-spacing:0;color:var(--k-dim);margin-top:.35rem}

/* ---------------------------------------------------------- host */
.k-host{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem;align-items:start}
.k-avatar{
  flex:none;width:68px;height:68px;border-radius:50%;background:var(--k-gold);color:var(--k-deep);
  display:grid;place-items:center;font-family:var(--sans);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;
}
.k-host h3{margin:0;font-family:var(--sans);font-weight:800;font-size:1.5rem;letter-spacing:-.025em}
.k-host p{margin:.3rem 0 0;color:var(--k-dim)}

/* ---------------------------------------------------------- join */
.k-join{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.k-join{grid-template-columns:1fr}}
.k-form{display:grid;gap:1.1rem}
.k-field{display:grid;gap:.4rem}
.k-field label{font-family:var(--k-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--k-dim)}
.k-field input,.k-field select,.k-field textarea{
  width:100%;box-sizing:border-box;font:inherit;font-size:.98rem;color:var(--k-ink);
  background:var(--k-deep);border:1px solid var(--k-line);border-radius:10px;padding:.8rem .9rem;
  transition:border-color .18s,box-shadow .18s;
}
.k-field textarea{min-height:110px;resize:vertical}
.k-field input::placeholder,.k-field textarea::placeholder{color:#776A86}
.k-field input:focus,.k-field select:focus,.k-field textarea:focus{
  outline:none;border-color:var(--k-gold);box-shadow:0 0 0 3px rgba(232,196,74,.18);
}
.k-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:520px){.k-row{grid-template-columns:1fr}}

.k-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;
  font:inherit;font-weight:700;font-size:.95rem;letter-spacing:-.01em;
  background:var(--k-gold);color:var(--k-deep);border:2px solid var(--k-gold);
  border-radius:999px;padding:.85rem 1.7rem;text-decoration:none;
  transition:transform .18s cubic-bezier(.22,.74,.3,1),background .18s,border-color .18s;
}
.k-btn:hover{background:#F0D066;border-color:#F0D066;transform:translateY(-2px)}
.k-btn:disabled{opacity:.55;cursor:default;transform:none}
.k-btn-ghost{background:transparent;color:var(--k-ink);border-color:var(--k-line)}
.k-btn-ghost:hover{background:transparent;border-color:var(--k-ink)}
@media (max-width:520px){.k-btn{width:100%}}

.k-status{margin:.2rem 0 0;font-size:.9rem;min-height:1.3em}
.k-status[data-state="error"]{color:var(--k-coral)}
.k-status[data-state="ok"]{color:var(--k-mint)}
.k-note{margin:0;font-size:.82rem;color:var(--k-dim)}
.k-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   ZERO TO 1K
   The flyer's arc, drawn dot by dot: the whole promise of the
   room in one gesture. One 5s cycle, each dot delayed by its
   own --i, then the 1K lands at the end and it starts again.
   ============================================================ */
.k-line{display:block}
.k-arc{margin-top:1.8rem;max-width:640px}
.k-arc svg{display:block;width:100%;height:auto}
.k-trail{fill:var(--k-gold);opacity:.22}
.k-mile circle{fill:var(--k-gold)}
.k-mile text{
  font-family:var(--sans);font-weight:800;letter-spacing:-.03em;
  fill:var(--k-ink);text-anchor:middle;
}
.k-mile-last circle{fill:var(--k-mint)}
.k-mile-last text{fill:var(--k-mint)}

/* Each milestone, then the trail that leads to it, lights in turn: the room's
   whole ambition in one pass, repeating. */
@media (prefers-reduced-motion:no-preference){
  .k-mile{opacity:.18;animation:k-mile 7s linear infinite;animation-delay:calc(var(--i) * .5s)}
  .k-trail{opacity:.05;animation:k-trail 7s linear infinite;animation-delay:calc((var(--i) + .5) * .5s)}
}
@keyframes k-mile{
  0%       {opacity:.18}
  7%,62%   {opacity:1}
  76%,100% {opacity:.18}
}
@keyframes k-trail{
  0%       {opacity:.05}
  7%,62%   {opacity:.5}
  76%,100% {opacity:.05}
}
@keyframes k-rise{from{opacity:0;transform:translateY(20px)}}
@keyframes k-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}

/* ============================================================
   THE SITE CHROME, IN THIS PALETTE
   Same approach as the Craft page: the shared nav and footer
   restated here rather than forked.
   ============================================================ */
.kbc .nav{background:rgba(25,17,42,.9);border-bottom-color:var(--k-line)}
.kbc .nav .mark b{color:var(--k-ink)}
.kbc .nav .mark-text > span{color:var(--k-gold)}
.kbc .nav .mark-logo{--heart:#FFFFFF;--sky:var(--k-deep)}
.kbc .nav-links a{color:#CBC0D6}
.kbc .nav-links a:hover{color:var(--k-ink);border-bottom-color:var(--k-gold)}
.kbc .nav-toggle{border-color:var(--k-line);color:var(--k-ink)}
.kbc .nav-bars i{background:var(--k-ink)}
.kbc .nav .btn-blue,.kbc .nav-menu .btn-blue{background:var(--k-gold);border-color:var(--k-gold);color:var(--k-deep)}
.kbc .nav .btn-blue:hover,.kbc .nav-menu .btn-blue:hover{background:#F0D066;border-color:#F0D066}
.kbc .nav-menu{background:#271B35;border-bottom-color:var(--k-line)}
.kbc .nav-menu a{color:var(--k-ink)}
.kbc .nav-menu li{border-bottom-color:var(--k-line)}
.kbc .menu-contact a{color:var(--k-dim)}

.kbc .foot{background:var(--k-deep);color:var(--k-ink);color-scheme:dark;border-top:1px solid var(--k-line)}
.kbc .foot .mark b{color:var(--k-ink)}
.kbc .foot .mark-text > span{color:var(--k-gold)}
.kbc .foot .mark-logo{--heart:#FFFFFF;--sky:var(--k-deep)}
.kbc .foot-links a{color:var(--k-dim)}
.kbc .foot-links a:hover{color:var(--k-gold);border-bottom-color:var(--k-gold)}
.kbc .socials a{color:var(--k-dim);border-color:var(--k-line);background:transparent}
.kbc .socials a:hover{color:var(--k-gold);border-color:var(--k-gold);background:transparent}
.kbc .branches{border-top-color:var(--k-line)}
.kbc .branch-head .eyebrow{color:var(--k-gold)}
.kbc .branch-head a,.kbc .foot-mail{color:var(--k-dim);border-bottom-color:var(--k-line)}
.kbc .branch-head a:hover,.kbc .foot-mail:hover{color:var(--k-gold);border-bottom-color:var(--k-gold)}
.kbc .branch-grid h4{color:#8A7D98}
.kbc .branch-grid ul{color:var(--k-dim)}
.kbc .branch-grid a:hover{color:var(--k-gold);border-bottom-color:var(--k-gold)}
.kbc .branch-grid li.here{color:var(--k-mint)}
.kbc .branch-grid li.soon{color:#8A7D98}
.kbc .foot-base{border-top-color:var(--k-line);color:#8A7D98}

/* ============================================================
   THE CADENCE
   Three months, the third Saturday marked on each. It lands in
   the same square every month, which is the whole point and the
   thing the old "every Saturday" copy got wrong. Desktop only:
   the phone hero is already as tall as it should be.
   ============================================================ */
.k-hero-art{display:grid;justify-items:end;gap:clamp(.7rem,1.7svh,1.6rem)}
@media (max-width:900px){.k-hero-art{display:contents}}

.k-cal{display:flex;gap:1.1rem}
@media (max-width:900px){.k-cal,.k-cal-cap{display:none}}
.k-month-name{
  margin:0 0 .5rem;font-family:var(--k-mono);font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--k-dim);
}
.k-days{display:grid;grid-template-columns:repeat(7,8px);gap:4px}
.k-days i{width:8px;height:8px;border-radius:2px;background:rgba(244,239,230,.17)}
.k-days .k-off{background:transparent}
.k-days .k-mark{
  background:var(--k-gold);border-radius:3px;
  box-shadow:0 0 0 3px rgba(232,196,74,.18);
}
.k-cal-cap{
  margin:0;font-family:var(--k-mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--k-dim);text-align:right;
}
@media (prefers-reduced-motion:no-preference){
  .k-month:nth-child(1) .k-mark{animation:k-pulse 4.5s ease-in-out infinite}
  .k-month:nth-child(2) .k-mark{animation:k-pulse 4.5s ease-in-out .5s infinite}
  .k-month:nth-child(3) .k-mark{animation:k-pulse 4.5s ease-in-out 1s infinite}
}
@keyframes k-pulse{
  0%,55%,100%{box-shadow:0 0 0 3px rgba(232,196,74,.18)}
  18%        {box-shadow:0 0 0 7px rgba(232,196,74,.3)}
}

/* ============================================================
   A HERO THAT USES THE ROOM
   The arc used to sit inside the left column, which left the
   bottom-right half of a wide screen empty and the arc itself
   looking like a footnote. It spans the grid now, with the
   flyer's coloured blocks under it carrying the colour the
   hero was missing entirely.
   ============================================================ */
.k-full{grid-column:1 / -1}
.k-arc.k-full{max-width:none;margin-top:clamp(1.4rem,2.6vw,2.2rem)}
.k-arc.k-full svg{width:100%}
.k-hero{padding-block:clamp(2.2rem,4.5vw,3.4rem) clamp(2.4rem,4.5vw,3.6rem)}

.k-tags{
  list-style:none;margin:clamp(1.6rem,3vw,2.4rem) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem;
}
.k-tag{
  background:var(--tone);color:var(--k-deep);
  border-radius:999px;padding:.6rem 1.2rem;
  font-family:var(--sans);font-weight:700;font-size:.95rem;letter-spacing:-.01em;
}
@media (prefers-reduced-motion:no-preference){
  .k-tag{animation:k-rise .8s cubic-bezier(.22,.74,.3,1) var(--d,0s) backwards}
}

.k-hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.8rem,3.5vw,2.6rem)}

/* The claims sit under the title now, so they need their own breathing room
   rather than inheriting the gap the arc used to leave behind. */
.k-claims{margin-top:1.6rem}

/* ============================================================
   ONE SCREEN
   Everything the hero says belongs on the hero, so the spacing
   is driven by viewport height rather than width: on a short
   window the gaps close before anything is pushed under the
   fold. Same approach as the landing page's own hero.
   ============================================================ */
@media (min-width:901px){
  .k-hero{
    --kh:clamp(.5rem,1.9svh,1.5rem);
    min-height:calc(100svh - var(--nav-h));
    display:flex;flex-direction:column;justify-content:center;
    padding-block:calc(var(--kh) * 1.6);
  }
  .k-hero h1{font-size:min(clamp(2.6rem,1.5rem + 6.6vw,5.2rem),8.4svh)}
  .k-hero .k-label{margin-bottom:calc(var(--kh) * .7)}
  .k-claims{margin-top:calc(var(--kh) * 1.1)}
  .k-arc.k-full{margin-top:calc(var(--kh) * 1.2)}
  .k-arc.k-full svg{max-height:21svh}
  .k-claim{font-size:min(clamp(1.1rem,1rem + .7vw,1.45rem),2.7svh)}
  .k-tags{margin-top:calc(var(--kh) * 1.3)}
  .k-hero-cta{margin-top:calc(var(--kh) * 1.4)}
  .k-hero-grid{gap:calc(var(--kh) * 1.2) 3rem}
}

/* The capacity, called out the way Craft calls out its twenty. Mint rather
   than gold so it reads against the crown instead of competing with it. */
.k-badge{
  width:min(clamp(92px,11vw,126px),16svh);aspect-ratio:1;border-radius:50%;
  background:var(--k-mint);color:var(--k-deep);
  display:grid;place-items:center;text-align:center;
  font-family:var(--k-mono);line-height:1.1;transform:rotate(-8deg);
}
.k-badge b{
  display:block;font-family:var(--sans);font-weight:800;
  font-size:clamp(1.9rem,3vw,2.5rem);letter-spacing:-.03em;
}
.k-badge span{display:block;font-size:.56rem;letter-spacing:.18em;text-transform:uppercase}
/* It sat on the calendar's corner at first and covered January, so it keeps
   its own place under the months instead. The art column is shorter than the
   headline beside it, so this costs the hero no height. */
.k-cal-row{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.5rem)}
.k-badge{flex:none}
@media (max-width:900px){.k-badge{transform:rotate(-6deg);margin-top:1.4rem}}

.kbc .leaders{--leader-hi:var(--k-gold)}