/* ============================================================
   CRAFT FOR GOOD  (/craft)
   A Dominion City Oshawa programme with its own identity: near
   black, a warm off-white, and six accent colours — one per
   stage of product building. Everything is scoped to .craft so
   none of it reaches the rest of the site, which keeps its navy.
   The nav and footer stay as they are, so the page still reads
   as part of dcoshawa.com rather than a separate site.
   ============================================================ */
.craft{
  --c-bg:#121212;
  --c-bg-2:#191919;
  --c-ink:#F6F3EC;
  --c-dim:#A8A39A;
  --c-line:rgba(246,243,236,.14);
  --c-amber:#F0A832;
  --c-coral:#F0795A;
  --c-lilac:#B9A5F5;
  --c-sky:#6BA8E8;
  --c-mint:#7DD8B0;
  --c-lime:#D6F055;
  --c-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  background:var(--c-bg);color:var(--c-ink);
}
.craft ::selection{background:var(--c-amber);color:#121212}

.c-sec{padding-block:clamp(3rem,6vw,5rem)}
.c-sec-2{background:var(--c-bg-2)}

/* the letterspaced mono label that runs above each block */
.c-label{
  font-family:var(--c-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c-dim);margin:0 0 1.1rem;
}
.c-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;
}
.c-lede{font-size:clamp(1.02rem,.98rem + .3vw,1.2rem);line-height:1.6;color:var(--c-dim);max-width:52ch}

/* ---------------------------------------------------------- hero */
.c-hero{position:relative;overflow:hidden;padding-block:clamp(2.6rem,6vw,4.5rem) clamp(3rem,6vw,5rem)}
.c-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start}
@media (max-width:860px){.c-hero-grid{grid-template-columns:1fr}}
.c-hero h1{
  font-family:var(--sans);font-weight:800;font-variation-settings:"wdth" 108;
  font-size:clamp(3rem,1.6rem + 8vw,6.4rem);line-height:.92;letter-spacing:-.045em;
  margin:.2rem 0 0;max-width:12ch;
}
.c-hero h1 em{font-style:normal;color:var(--c-amber)}
.c-hero h1 .c-dot{color:var(--c-coral)}
.c-hero .c-lede{margin-top:1.6rem;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);color:var(--c-ink);max-width:30ch}

/* the three campuses this is aimed at */
.c-schools{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;margin:1.6rem 0 0;padding:0;font-weight:600;font-size:.95rem}
.c-schools li{display:flex;align-items:center;gap:.5rem}
.c-schools i{width:9px;height:9px;border-radius:50%;flex:none}

/* "only 20 spots", as the badge on the flyer */
.c-badge{
  flex:none;width:clamp(116px,14vw,150px);aspect-ratio:1;border-radius:50%;
  background:var(--c-lime);color:#121212;display:grid;place-items:center;text-align:center;
  font-family:var(--c-mono);line-height:1.1;transform:rotate(-8deg);
}
.c-badge b{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(2.1rem,3.4vw,2.8rem);letter-spacing:-.03em}
.c-badge span{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase}
@media (max-width:860px){.c-badge{transform:rotate(-6deg)}.c-badge-wrap{justify-self:start}}

/* ---------------------------------------------------------- stages */
.c-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
@media (max-width:900px){.c-stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.c-stages{grid-template-columns:1fr}}
.c-stage{
  border:2px solid var(--tone);border-radius:14px;padding:1rem 1.1rem 1.15rem;
  background:color-mix(in srgb,var(--tone) 9%,transparent);
}
.c-stage h3{
  margin:0;display:flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--tone);
}
.c-stage svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c-stage p{margin:.5rem 0 0;font-size:.88rem;line-height:1.5;color:var(--c-dim)}

/* ---------------------------------------------------------- facts */
.c-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){.c-facts{grid-template-columns:1fr}}
.c-fact dt{font-family:var(--c-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem}
.c-fact dd{margin:0;font-family:var(--sans);font-weight:700;font-size:clamp(1.25rem,1.1rem + .8vw,1.7rem);letter-spacing:-.02em}
.c-fact dd small{display:block;font-weight:400;font-size:.92rem;letter-spacing:0;color:var(--c-dim);margin-top:.35rem}

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

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

.c-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(--c-amber);color:#121212;border:2px solid var(--c-amber);
  border-radius:999px;padding:.85rem 1.7rem;text-decoration:none;
  transition:transform .18s cubic-bezier(.22,.74,.3,1),background .18s,border-color .18s;
}
.c-btn:hover{background:#F7B94E;border-color:#F7B94E;transform:translateY(-2px)}
.c-btn:disabled{opacity:.55;cursor:default;transform:none}
.c-btn-ghost{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.c-btn-ghost:hover{background:transparent;border-color:var(--c-ink)}
@media (max-width:520px){.c-btn{width:100%}}

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


/* ============================================================
   THE SITE CHROME, IN THIS PALETTE
   The nav and footer markup is shared with the rest of the site,
   so rather than fork it, everything that assumes navy or paper
   is restated here under .craft. Same furniture, different room.
   ============================================================ */
.craft .nav{background:rgba(18,18,18,.88);border-bottom-color:var(--c-line)}
.craft .nav .mark b{color:var(--c-ink)}
.craft .nav .mark-text > span{color:var(--c-amber)}
.craft .nav .mark-logo{--heart:#FFFFFF;--sky:#121212}
.craft .nav-links a{color:#CBC6BD}
.craft .nav-links a:hover{color:var(--c-ink);border-bottom-color:var(--c-amber)}
.craft .nav-toggle{border-color:var(--c-line);color:var(--c-ink)}
.craft .nav-bars i{background:var(--c-ink)}
/* the shared CTA is the site's blue; here it is the programme's amber */
.craft .nav .btn-blue,.craft .nav-menu .btn-blue{
  background:var(--c-amber);border-color:var(--c-amber);color:#121212;
}
.craft .nav .btn-blue:hover,.craft .nav-menu .btn-blue:hover{background:#F7B94E;border-color:#F7B94E}
.craft .nav-menu{background:#161616;border-bottom-color:var(--c-line)}
.craft .nav-menu a{color:var(--c-ink)}
.craft .nav-menu li{border-bottom-color:var(--c-line)}
.craft .menu-contact a{color:var(--c-dim)}

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

/* ============================================================
   THE HERO, ARRIVING
   One pass on load rather than on scroll: the hero is the first
   thing on the page, so there is nothing to wait for. Everything
   lands on its own values, so if the animation is cut short the
   hero is simply itself.
   ============================================================ */
.c-line{display:block}
@media (prefers-reduced-motion:no-preference){
  .craft [data-rise]{animation:c-rise .85s cubic-bezier(.22,.74,.3,1) var(--d,0s) backwards}
  .c-badge{animation:c-pop .75s cubic-bezier(.3,1.45,.5,1) .55s backwards}
  .c-badge-wrap{animation:c-float 7s ease-in-out 1.4s infinite}
  /* the one bit of colour that keeps moving, very slowly */
  .c-hero h1 em{
    background:linear-gradient(100deg,var(--c-amber) 0%,#FFD98A 42%,var(--c-amber) 84%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:c-sheen 9s ease-in-out 1.2s infinite;
  }
}
@keyframes c-rise{from{opacity:0;transform:translateY(20px)}}
@keyframes c-pop{from{opacity:0;transform:rotate(-26deg) scale(.55)}}
@keyframes c-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes c-drift{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-10px,12px) rotate(4deg)}}
@keyframes c-sheen{0%,70%,100%{background-position:0% 0}35%{background-position:100% 0}}

/* ============================================================
   THE BUILD WINDOW
   The page promises "from first idea to production-ready", so
   the hero shows it rather than asserting it: one window that
   cycles through the six stages, a scribble resolving into a
   shipped interface, then starting over.

   One 12s cycle shared by every layer. Each carries --i and the
   same keyframe, so a layer is only on screen during its own
   two-second slice and the whole thing stays in step without a
   line of JavaScript.
   ============================================================ */
.c-hero-art{position:relative;width:min(360px,100%);justify-self:end}
@media (max-width:860px){.c-hero-art{justify-self:start;margin-top:1.6rem;width:100%}}

.c-build svg{display:block;width:100%;height:auto;overflow:visible}
/* Capping the height alone letterboxes it: the box stays full width, the
   drawing centres inside it, and the caption below no longer lines up with
   the window. Letting the width follow the height keeps the box the size of
   the drawing, so the two share a left edge. */
@media (max-width:560px){.c-build svg{width:auto;max-width:100%;max-height:210px}}
.c-build .win{fill:#0D0D0D;stroke:rgba(246,243,236,.22);stroke-width:1.5}
.c-build .bar{stroke:rgba(246,243,236,.18);stroke-width:1.5}
.c-build .ph{opacity:0}
.c-build .ln{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* the caption stacks in one cell so the box never changes height */
.c-build-cap{
  display:grid;margin:.9rem 0 0;min-height:1.4em;
  font-family:var(--c-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
}
.c-build-cap span{grid-area:1/1;opacity:0}

@media (prefers-reduced-motion:no-preference){
  .c-build .ph,.c-build-cap span{
    animation:c-phase 12s linear infinite;
    animation-delay:calc(var(--i) * 2s);
  }
}
/* Without motion the window is simply the finished thing, which is the
   point the hero is making anyway. */
@media (prefers-reduced-motion:reduce){
  .c-build .ph[style*="--i:5"],.c-build-cap span[style*="--i:5"]{opacity:1}
}
@keyframes c-phase{
  0%      {opacity:0}
  2%, 14% {opacity:1}
  16%,100%{opacity:0}
}

/* the badge now sits over the window's corner, the way it does on the flyer */
.c-hero-art .c-badge-wrap{position:absolute;top:-34px;right:-20px;z-index:2}
/* On a phone the badge used to drop below the window, which left it stranded
   a screen and a half down with nothing around it. It keeps the corner at
   every width instead, and shrinks rather than moves. */
@media (max-width:860px){
  .c-hero-art .c-badge-wrap{top:-24px;right:-4px}
  .c-badge{width:clamp(88px,24vw,116px)}
}

.craft .leaders{--leader-hi:var(--c-amber)}

/* The word after "Craft for" cycles. The line is held on one row so a longer
   word never reflows the headline mid-type — but only where there is room for
   the longest of them. On a phone "for Purpose." cannot fit beside "for" at
   any headline size worth having, so below 620px it is allowed to wrap and
   the word takes its own line instead of running off the edge. */
@media (min-width:621px){.c-hero h1 .c-line:last-child{white-space:nowrap}}
.c-rot{font-style:normal;color:var(--c-amber)}
.c-caret{
  display:inline-block;width:.055em;height:.72em;margin-left:.04em;
  vertical-align:baseline;background:var(--c-amber);
}
.c-rot[data-typing="false"] .c-caret{animation:c-caret 1.06s steps(1) infinite}
@keyframes c-caret{0%,49%{opacity:1}50%,99%{opacity:0}}
@media (prefers-reduced-motion:reduce){.c-caret{display:none}}

/* The hero used to say what the cohort was and never when it ran — you had to
   reach "the practical part" to find a start date. It leads now. */
.c-when{
  margin:clamp(1.2rem,2.4vw,1.7rem) 0 0;display:grid;gap:.2rem;
  font-size:clamp(1rem,.96rem + .3vw,1.12rem);line-height:1.4;
}
.c-when b{
  font-family:var(--sans);font-weight:800;letter-spacing:-.02em;color:var(--c-amber);
  font-size:clamp(1.15rem,1rem + .7vw,1.45rem);
}
.c-when span{color:var(--c-dim)}

/* Dinner is a real draw for a 4-to-7 on a Sunday, so it is named in the hero
   rather than left to the detail further down. */
.c-when-eat{color:var(--c-coral);font-weight:700}

/* The commitment tick. Required, so it has to read as part of the form rather
   than as fine print someone scrolls past. */
.c-check{
  display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;cursor:pointer;
  padding:.9rem 1rem;border-radius:12px;font-size:.93rem;line-height:1.5;
  background:#0D0D0D;border:1px solid var(--c-line);
  transition:border-color .18s,background .18s;
}
.c-check:hover{border-color:rgba(240,168,50,.45)}
.c-check:has(input:checked){border-color:var(--c-amber);background:rgba(240,168,50,.07)}
.c-check input{margin-top:.2rem;width:17px;height:17px;accent-color:var(--c-amber)}
.c-check small{display:block;margin-top:.3rem;font-size:.82rem;color:var(--c-dim)}
.c-check-hi{color:var(--c-amber);font-weight:700}

/* The two ways through the form: come to the room, or ask to be told when an
   online cohort exists. Neither is pre-selected — the in-person one is a
   commitment, and a commitment nobody actively made is not one. */
.c-choice{border:0;padding:0;margin:0;display:grid;gap:.6rem;min-width:0}
.c-choice legend{
  padding:0;float:left;width:100%;margin-bottom:.55rem;
  font-family:var(--c-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--c-dim);
}
.c-choice legend + *{clear:both}
.c-check input[type=radio]{border-radius:50%}