/* ============================================================
   Avelle — Hair by Kathely case study.
   Editorial layout in Avelle's own brand palette (see the token
   block below). The only Kathely colours on the page are inside
   the screenshots and the showreel, which are captures of her
   site. Everything is scoped under .kc so the shared nav and
   footer from framer.css are untouched.
   ============================================================ */

.kc{
  /* Avelle brand tokens, mapped onto the editorial roles this page uses.
     Sourced from framer.css :root — page canvas #F4F5FB, ink #1C1629,
     purple #524EF0, deep #2B18A6 — so the page matches the rest of the site. */
  --ivory:#F4F5FB;                     /* page canvas   (was ivory)     */
  --cream:#FFFFFF;                     /* banded section (was cream)    */
  --pearl:#FFFFFF;                     /* cards         (was pearl)     */
  --cocoa:#1C1629;                     /* headings      (was cocoa)     */
  --taupe:rgba(28,22,41,.72);          /* body copy     (was taupe)     */
  --mocha:rgba(28,22,41,.5);           /* captions      (was mocha)     */
  --gold:#524EF0;                      /* accent        (was gold)      */
  --champagne:#A489FE;                 /* soft accent   (was champagne) */
  --espresso:#2B18A6;                  /* dark panels   (was espresso)  */
  --sand:rgba(43,24,166,.14);          /* hairlines     (was sand)      */

  --display:'Satoshi','DM Sans',sans-serif;
  --label:'Inter',system-ui,sans-serif;

  background:var(--ivory);
  color:var(--taupe);
  margin:0;
  padding:0 0 1px;                 /* contains child margins */
  overflow-x:clip;
}

.kc-wrap{max-width:1080px;margin:0 auto;padding:0 1.75rem}
.kc-wrap--narrow{max-width:760px}

/* ---------- shared type ---------- */
.kc .kc-eyebrow{
  font-family:var(--label);font-size:.72rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:.75rem;margin:0 0 1.4rem
}
.kc-eyebrow::after{content:"";flex:1;height:1px;background:var(--sand)}
.kc-eyebrow--center{justify-content:center}
.kc-eyebrow--center::after{display:none}

.kc h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.9rem,3.8vw,2.7rem);line-height:1.1;
  letter-spacing:-.035em;color:var(--cocoa);margin:0 0 1.4rem
}
.kc h3{
  font-family:var(--display);font-weight:500;
  font-size:1.18rem;line-height:1.3;letter-spacing:-.02em;color:var(--cocoa);margin:0 0 .5rem
}
.kc p{font-size:1.02rem;line-height:1.75;margin:0 0 1.15rem;color:var(--taupe)}
.kc p:last-child{margin-bottom:0}
.kc strong{color:var(--cocoa);font-weight:600}
.kc a{color:var(--gold);text-underline-offset:3px}

.kc .kc-lead{font-size:1.16rem;line-height:1.7;color:var(--cocoa)}

/* ---------- back link ---------- */
.kc-back{
  display:inline-block;margin:2.2rem 0 0;font-family:var(--label);
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mocha);text-decoration:none;transition:color .2s
}
.kc-back:hover{color:var(--gold)}

/* ---------- hero ---------- */
.kc-hero{padding:2.4rem 0 3.4rem}
.kc-hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.3rem,5.6vw,3.9rem);line-height:1.04;
  letter-spacing:-.04em;color:var(--cocoa);margin:0 0 1.5rem;max-width:16ch
}
.kc-hero h1 em{font-style:normal;color:var(--gold)}
.kc-hero .kc-lead{max-width:60ch}

.kc-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--sand)
}
.kc-meta dt{
  font-family:var(--label);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mocha);margin:0 0 .45rem
}
.kc-meta dd{margin:0;font-size:.98rem;color:var(--cocoa);font-weight:500}

/* ---------- framed screenshot ---------- */
/* margin-bottom only — the shorthand would reset .kc-wrap's `margin:0 auto`
   and knock these blocks out of centre when both classes share an element. */
.kc-shot{margin-bottom:4.5rem}
.kc-shot figure{margin:0}
.kc-shot-frame{
  border-radius:14px;overflow:hidden;background:var(--pearl);
  border:1px solid var(--sand);
  box-shadow:0 30px 60px -30px rgba(43,24,166,.22),0 4px 14px -6px rgba(43,24,166,.10)
}
.kc-shot-bar{
  display:flex;align-items:center;gap:.45rem;padding:.7rem .95rem;
  background:var(--cream);border-bottom:1px solid var(--sand)
}
.kc-shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--sand);flex:none}
.kc-shot-bar span{
  margin-left:.6rem;font-family:var(--label);font-size:.72rem;
  letter-spacing:.06em;color:var(--mocha)
}
.kc-shot img{display:block;width:100%;height:auto}
.kc-shot figcaption{
  margin-top:.9rem;font-family:var(--label);font-size:.78rem;
  letter-spacing:.06em;color:var(--mocha);text-align:center
}

/* ---------- showreel ---------- */
.kc-reel{margin-bottom:4.5rem}
.kc-reel figure{margin:0}
.kc-reel video{display:block;width:100%;height:auto;background:var(--cream)}

/* ---------- tall page shots ----------
   The full-page captures run to ~9000px. Rather than scale them into
   illegibility, each sits in a fixed-height window anchored to the top and
   pans down on hover — a free "scroll the page" effect with no JS. */
.kc-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;margin-top:2.5rem}
.kc-pane figure{margin:0}
.kc-pane .kc-shot-frame{overflow:hidden}
.kc-pane img{
  display:block;width:100%;height:440px;object-fit:cover;object-position:50% 0;
  transition:object-position 6s cubic-bezier(.4,0,.35,1)
}
.kc-pane:hover img,.kc-pane:focus-within img{object-position:50% 100%}
.kc-pane figcaption{
  margin-top:.9rem;font-family:var(--label);font-size:.78rem;
  letter-spacing:.06em;color:var(--mocha)
}
.kc-pane figcaption b{color:var(--cocoa);font-weight:500}

/* ---------- desktop + phone pairing ---------- */
.kc-devices{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:end;margin-top:2.5rem}
.kc-phone{
  border-radius:34px;overflow:hidden;background:var(--cocoa);padding:9px;
  box-shadow:0 30px 60px -28px rgba(43,24,166,.30)
}
.kc-phone img{display:block;width:100%;height:auto;border-radius:26px}

/* ---------- stat band ---------- */
.kc-stats{background:var(--cream);border-block:1px solid var(--sand);padding:3.4rem 0}
.kc-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.kc-stat-num{
  font-family:var(--display);font-weight:500;font-size:clamp(2.4rem,4.6vw,3.2rem);
  line-height:1;letter-spacing:-.04em;color:var(--gold);margin-bottom:.5rem
}
.kc-stat-label{
  font-family:var(--label);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--taupe)
}
.kc-stat + .kc-stat{border-left:1px solid var(--sand)}

/* ---------- sections ---------- */
.kc-section{padding:5rem 0}
.kc-section--cream{background:var(--cream);border-block:1px solid var(--sand)}
.kc-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}

/* ---------- marked list ---------- */
.kc-list{list-style:none;margin:0;padding:0}
.kc-list li{
  position:relative;padding:0 0 .9rem 1.6rem;margin-bottom:.9rem;
  border-bottom:1px solid var(--sand);font-size:.98rem;line-height:1.6
}
.kc-list li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.kc-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)
}

/* ---------- pull quote ---------- */
.kc-quote{padding:4.5rem 0;color:#fff;text-align:center;
  background:radial-gradient(80% 120% at 50% -20%, rgba(150,177,255,.5), rgba(150,177,255,0) 60%),
             linear-gradient(145deg,#2B18A6 0%,#524EF0 100%)}
.kc-quote blockquote{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(1.4rem,3vw,2rem);line-height:1.28;letter-spacing:-.03em;color:#fff;
  max-width:24ch;margin-inline:auto
}
.kc-quote blockquote::before{
  content:"";display:block;width:34px;height:1px;
  background:rgba(255,255,255,.55);margin:0 auto 1.8rem
}
.kc-quote cite{
  display:block;margin-top:1.8rem;font-family:var(--label);font-style:normal;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.85)
}

/* ---------- numbered ladder ---------- */
.kc-ladder{counter-reset:kc;list-style:none;margin:0;padding:0}
.kc-ladder li{
  counter-increment:kc;position:relative;padding:1.35rem 0 1.35rem 4rem;
  border-bottom:1px solid var(--sand)
}
.kc-ladder li:last-child{border-bottom:0}
.kc-ladder li::before{
  content:counter(kc,decimal-leading-zero);position:absolute;left:0;top:1.35rem;
  font-family:var(--display);font-size:1.5rem;color:var(--champagne);line-height:1
}
.kc-ladder h3{margin-bottom:.35rem}
.kc-ladder p{font-size:.95rem;margin:0}

/* ---------- approach cards ---------- */
.kc-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2.5rem}
.kc-card{
  background:var(--pearl);border:1px solid var(--sand);border-radius:12px;padding:2rem 1.8rem;
  transition:transform .3s ease,box-shadow .3s ease
}
.kc-card:hover{transform:translateY(-3px);box-shadow:0 18px 34px -20px rgba(43,24,166,.20)}
.kc-card-num{
  font-family:var(--display);font-size:1.1rem;color:var(--gold);
  margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px solid var(--sand)
}
.kc-card p{font-size:.95rem;margin:0}

/* ---------- journal index ---------- */
.kc-index{list-style:none;margin:2.5rem 0 0;padding:0;columns:2;column-gap:3rem}
.kc-index li{letter-spacing:-.02em;
  break-inside:avoid;padding:.85rem 0;border-bottom:1px solid var(--sand);
  font-family:var(--display);font-size:1.14rem;color:var(--cocoa);line-height:1.35
}

/* ---------- spec table ---------- */
.kc-spec{width:100%;border-collapse:collapse;margin-top:2.5rem;text-align:left}
.kc-spec th,.kc-spec td{padding:1rem 0;border-bottom:1px solid var(--sand);vertical-align:top}
.kc-spec th{
  font-family:var(--label);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mocha);font-weight:500;width:34%
}
.kc-spec td{color:var(--cocoa);font-size:.98rem}

/* ---------- honest note ---------- */
.kc-note{
  background:var(--pearl);border:1px solid var(--sand);border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0;padding:2.2rem 2.2rem
}
.kc-note h3{margin-bottom:.8rem}

/* ---------- closing CTA ---------- */
.kc-cta{color:#fff;padding:5.5rem 0;text-align:center;
  background:radial-gradient(80% 120% at 50% -20%, rgba(150,177,255,.5), rgba(150,177,255,0) 60%),
             linear-gradient(145deg,#2B18A6 0%,#524EF0 100%)}
.kc-cta h2{color:#fff;max-width:20ch;margin-inline:auto}
.kc-cta p{color:rgba(255,255,255,.75);max-width:52ch;margin:0 auto 2.4rem}
.kc-btn{
  display:inline-flex;align-items:center;gap:.7rem;padding:15px 34px;border-radius:100px;
  background:#fff;color:var(--espresso);text-decoration:none;
  font-family:var(--label);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  transition:transform .2s ease,background .2s ease
}
.kc-btn:hover{transform:translateY(-2px);background:var(--champagne)}
.kc-cta-alt{margin-top:1.6rem;font-size:.9rem}
.kc-cta-alt a{color:rgba(255,255,255,.9)}

/* ---------- reveal ---------- */
.kc-reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.kc-reveal.kc-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .kc-reveal{opacity:1;transform:none;transition:none}
  .kc-card:hover,.kc-btn:hover{transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .kc-gallery{grid-template-columns:minmax(0,1fr)}
  .kc-pane img{height:340px}
  .kc-devices{grid-template-columns:minmax(0,1fr);gap:2rem;justify-items:center}
  .kc-phone{max-width:280px}
  .kc-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .kc-cards{grid-template-columns:minmax(0,1fr)}
  .kc-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 1rem}
  .kc-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 1rem}
  .kc-stat:nth-child(3){border-left:0}
  .kc-index{columns:1}
  .kc-section{padding:3.8rem 0}
}
@media (max-width:520px){
  .kc-wrap{padding:0 1.25rem}
  .kc-stat + .kc-stat{border-left:0}
  .kc-ladder li{padding-left:3rem}
  .kc-note{padding:1.6rem 1.4rem}
}