:root{
    --cork-1: #9c6b3f;
    --cork-2: #7c5230;
    --cork-3: #6b4526;
    --cream: #f7ecd8;
    --cream-edge: #ecdcc0;
    --ink: #2a2016;
    --ink-soft: #5b4a38;
    --thread: #b8433c;
    --pin-metal: #d8d0c4;

    --orange-bg: #fbe6cf;
    --orange-text: #a15b1f;
    --orange-border: #e8c49a;

    --blue-bg: #dfe9f5;
    --blue-text: #2f5c8a;
    --blue-border: #b9cee6;

    --purple-bg: #ead9ef;
    --purple-text: #7c4a8c;
    --purple-border: #d7bcdf;
  }

  html{ scroll-behavior: smooth; }


  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior: auto; }
  }

  .wrap{
    max-width: 100%;
    margin: 0 auto;
    padding: 80px 24px 120px;
    position: relative;
  }

  .board-header{
    text-align: center;
    max-width: 640px;
    margin: 0 auto 88px;
  }

  .board-eyebrow-pin{
    width: 30px;
    height: 30px;
    margin: 0 auto 18px;
    color: var(--pin-metal);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.35));
  }

  .board-eyebrow-label{
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #e2b688;
    margin: 0 0 14px;
  }

  .board-header h1{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2.1rem, 4.5vw, 3.1rem);
    line-height: 1.08;
    margin: 0 0 16px;
    color: #fbf3e6;
    text-wrap: balance;
  }

  /* ---- board / thread layer ---- */
  .board{
    position: relative;
  }

  .thread-svg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
  }

  .thread-path{
    fill: none;
    stroke: var(--thread);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 10 8;
    opacity: 0.95;
  }

  .thread-glow{
    fill: none;
    stroke: var(--thread);
    stroke-width: 8;
    stroke-linecap: round;
    opacity: 0.18;
    filter: blur(1.5px);
  }

  .thread-marker{
    fill: #ffd9a8;
    filter: drop-shadow(0 0 6px rgba(255,217,168,0.95)) drop-shadow(0 0 1px #fff);
    opacity: 0;
  }

  /* ---- steps layout ---- */
  .steps{
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 64px;
  }

  .step-row{
    display: flex;
    width: 100%;
  }
  .step-row.align-start{ justify-content: flex-start; }
  .step-row.align-end{ justify-content: flex-end; }
  .step-row.align-center{ justify-content: center; }

  .card{
    width: 100%;
    max-width: 300px;
    opacity: 0;
    will-change: transform, opacity;
  }

  .card-inner{
    background: #fffdf9;
    padding: 10px;
    border-radius: 20px;
    box-shadow: 0 18px 30px -12px rgba(20,12,4,0.55), 0 2px 4px rgba(20,12,4,0.15);
    position: relative;
  }

  .pin-icon{
    width: 26px;
    height: 26px;
    margin: -26px auto 10px;
    display: block;
    color: var(--pin-metal);
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.4));
  }

  .card-body{
    border-radius: 13px;
    border: 1px solid;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    background-clip: padding-box;
  }

  .theme-orange .card-body{ background: var(--orange-bg); border-color: var(--orange-border); }
  .theme-blue .card-body{ background: var(--blue-bg); border-color: var(--blue-border); }
  .theme-purple .card-body{ background: var(--purple-bg); border-color: var(--purple-border); }

  .theme-orange .step-number{ color: var(--orange-text); }
  .theme-blue .step-number{ color: var(--blue-text); }
  .theme-purple .step-number{ color: var(--purple-text); }

  .step-number{
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    margin-bottom: 12px;
    transform: rotate(-3deg);
    display: inline-block;
  }

  .card-body h3{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--ink);
  }

  .card-body p{
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
  }

  /* desktop zigzag offsets */
  @media (min-width: 860px){
    .step-row:nth-child(1){ padding-left: 4%; }
    .step-row:nth-child(2){ padding-right: 6%; margin-top: -10px;}
    .step-row:nth-child(3){ padding-left: 10%; margin-top: -10px;}
    .step-row:nth-child(4){ padding-right: 2%; margin-top: -10px;}
    .step-row:nth-child(5){ padding-left: 18%; margin-top: -10px;}

    .card{ transform: rotate(var(--r, 0deg)); }
    .step-row:nth-child(odd) .card{ --r: 5deg; }
    .step-row:nth-child(even) .card{ --r: -5deg; }
  }

  @media (max-width: 859px){
    .steps{ gap: 40px; }
    .step-row{ justify-content: center !important; padding: 0 !important; margin-top: 0 !important; }
    .card{ max-width: 380px; }
    .thread-svg{ display: none; }
  }

  .footnote{
    text-align: center;
    margin-top: 90px;
    font-size: 0.85rem;
    color: rgba(251,243,230,0.5);
  }




/* 2 — the scrub owns these; no CSS transition on top of it. */
.about-page .about-us-hero::before,
.about-page .about-us-hero::after {
  transition: none !important;
  will-change: transform, opacity;
}

@media (max-width: 991px) {
  .about-page .about-us-hero {
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100lvh !important;
  }
}
 
/* 3 — no backdrop blur on phones/tablets. */
@media (max-width: 991px) {
  .site-header::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
 
/* Pinned hero: iOS Safari honours overflow: clip better than hidden, and the
   explicit containment keeps the circle's transform from leaking layout work
   into the whole page. */
.about-page .about-us-hero {
  contain: layout paint;
  overflow: clip;
}
 
/* The pin spacer GSAP inserts should never pick up section-padding margins. */
.about-page .pin-spacer {
  margin: 0 !important;
  padding: 0 !important;
}