/* ===== GLOBAL RESET ===== */
/* Global reset */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Fix inline image gaps */
img {
  display: block;
  max-width: 100%;
}

/* ===== FONT DECLARATIONS ===== */
@font-face {
  font-family: 'Permanent Marker';
  src: url('Permanent_Marker/PermanentMarker-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caladea';
  src: url('Caladea/Caladea-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caladea';
  src: url('Caladea/Caladea-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Caladea';
  src: url('Caladea/Caladea-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Caladea';
  src: url('Caladea/Caladea-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Raleway';
  src: url('Raleway/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ===== GLOBAL FONT STYLES ===== */
body {
  font-family: 'Caladea', Georgia, serif;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Permanent Marker', cursive;
}

/* PAGE 1 */

.hero {
    position: relative;
    width: 100%;
    height: 100vh; /* full screen */
    overflow: hidden;
  }
  
  /* Container for layered images */
  .hero-images {
    position: relative;
    width: 100%;
    height: 100%;
  }
  
  .hero-images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* cover screen nicely */
  }
  
  /* You can tweak each layer differently */
  .layer1 { z-index: 1; opacity: 1; }
  .layer2 { z-index: 2; opacity: 1; mix-blend-mode: multiply; }
  .layer3 { z-index: 3; opacity: 1; }
  
  /* Text overlay */
  .hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    z-index: 10; /* stays on top of images */
  }

  .hero-text h1 {
    font-size: clamp(40px, 7.5vw, 100px);
    font-weight: normal;
    line-height: 0.9;
    margin: 0 0 0.2em 0;
    letter-spacing: 0.05em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  }

  .hero-text p {
    font-size: clamp(10px, 2vw, 20px);
    margin: 0;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    opacity: 0.95;
  }

  /* END PAGE 1 */
  
  /* BEGIN PAGE 2 */

 /* ===== Tunable tokens for quick alignment ===== */
.who{
    --panel-w: min(1180px, calc(100vw - 120px));
    --panel-h: 560px;
    --panel-top: 70px;
    --panel-radius: 12px;
    --panel-bg: rgba(0,0,0,.68);
  
    --person-h: 600px;          /* portrait height - increased */
    --person-overhang: 0px;     /* align to bottom edge */
    --person-inset: 40px;       /* distance from panel edge to portrait */
    --person-gutter: 280px;     /* increased text-safe gutter width */
  
    --content-pad-top: 80px;    /* space from panel top to title */
    --col-gap: 80px;
  
    --title-size: clamp(42px, 7vw, 92px);
    --name-size: clamp(24px, 3vw, 36px);
    --body-size: clamp(16px, 1.8vw, 20px);
  }
  
  /* Section baseline */
  .who{
    position: relative;
    min-height: calc(var(--panel-top) + var(--panel-h) + 200px);
    overflow: hidden;
  }
  
  /* Full-bleed background image (6) with top scrim */
  .who__bg{
    position:absolute; inset:0;
    background: url("images/6.png") center/cover no-repeat;
    z-index:1;
  }
  .who__bg::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.45) 70%, rgba(0,0,0,.5));
  }
  
  /* Centered frame defines coordinates */
  .who__frame{
    position: relative;
    width: var(--panel-w);
    height: calc(var(--panel-h) + 150px);
    margin: var(--panel-top) auto 0px;
  }
  
  /* Panel sits behind the copy (so inner shadows look right) */
  .who__panel{
    position:absolute; inset:0 var(--person-inset);
    height: var(--panel-h) - 100px;
    background: var(--panel-bg);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--panel-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    backdrop-filter: blur(2px);
    z-index:2;
  }
  
  /* Content above the panel but below portraits */
  .who__content{
    position:absolute; inset:0 var(--person-inset);
    height: var(--panel-h);
    z-index:3;
    color:#fff;
    /* create left/right gutters so text avoids portraits */
    padding-left: calc(var(--person-gutter));
    padding-right: calc(var(--person-gutter));
  }
  
  .who__title{
    text-align:center;
    margin: var(--content-pad-top) auto 32px;
    font-size: 65px;
    line-height:.95;
    letter-spacing:.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  
  .who__grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--col-gap);
  }
  
  .who__name{
    font-family: 'Permanent Marker', cursive;
    font-size: 45px;
    margin: 20px 0 12px;
    text-transform: uppercase;
    letter-spacing:.06em;
  }
  
  /* Position names above each person's head */
  .who__name--positioned {
    position: absolute;
    top: 140px;
    font-family: 'Permanent Marker', cursive;
    font-size: 45px;
    text-transform: uppercase;
    letter-spacing:.06em;
    z-index: 6;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    margin: 0;
    text-align: center;
  }
  
  .who__name--left {
    left: calc(var(--person-inset) + 60px);
    top: 260px;
    width: 200px;
  }
  
  .who__name--right {
    right: calc(var(--person-inset) + 75px);
    top: 260px;
    width: 200px;
  }
  .who__col p{
    font-size: clamp(14px, 1.4vw, 16px);
    line-height:1.15;
    color:#e9edf3;
    margin: 80px 0 0 0;
    max-width: 320px;
  }
  
  /* ===== PORTRAITS ON TOP ===== */
  .who__person{
    position:absolute;
    bottom: -100px;  
    width:auto;
    /* object-fit: contain; */
    z-index:5;                  /* ⬅ ABOVE content/panel */
    pointer-events:none;        /* decorative */
    filter: saturate(.98) brightness(.98);
  }
  .who__person--left  { left:  -2vw; height: 850px; width:auto; bottom: -100px;  }
  .who__person--right { right: -2vw; height: 850px; width:auto; bottom: -100px; }
  
  /* ===== ARROWS & LABELS ABOVE EVERYTHING ===== */
  .who__arrow{
    position:absolute;
    margin-top: 0px;
    top: 100px;                                  /* point to names above heads */
    width: clamp(80px, 10vw, 120px);            /* smaller arrows */
    height:130px;
    z-index:7;                                   /* ⬅ above everything */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
    pointer-events:none;
  }
  .who__arrow--left  { left:  200px; transform: rotate(-10deg); }
  .who__arrow--right { right: 200px; transform: rotate(10deg); }
  
  /* optional pill labels next to arrow tips */
  .who__label{
    position:absolute;
    top: 180px;
    z-index:6;
    padding: 6px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.2);
    background: rgba(0,0,0,.72);
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-size: 14px;
    pointer-events:none;
  }
  .who__label--left  { left:  calc( var(--person-inset) + 180px ); }
  .who__label--right { right: calc( var(--person-inset) + 180px ); }
  
  /* ===== Responsive tightening ===== */
  @media (max-width: 1200px){
    .who{ --person-gutter: 180px; --col-gap: 48px; }
  }
  @media (max-width: 1000px){
    .who{ --person-h: 470px; --person-gutter: 150px; }
  }
  @media (max-width: 860px){
    .who{ --person-gutter: 24px; --person-inset: 28px; --content-pad-top: 96px; }
    .who__grid{ grid-template-columns: 1fr; }
    .who__arrow, .who__label { display:none; } /* hide when cramped */
  }
  @media (max-width: 560px){
    .who{ --panel-h: 520px; --person-h: 380px; }
  }
  
  /* END PAGE 2 */

  /* ===== PAGE 3 ===== */
    .work {
    --frame-w: min(1200px, calc(100vw - 160px));
    --right-w: 420px;
    --card-pad: 20px 24px;
    --card-gap: 20px;

    position: relative;
    min-height: 100vh;
    color: #fff;
    overflow: hidden;
    background: #000;
  }
  
  .work__bg {
    position: absolute;
    inset: 0;
    background: url("images/11.png") center/cover no-repeat;
    opacity: .78;
    z-index: 1;
  }
  
  .work__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.45) 100%);
  }
  
  .work__frame {
    position: relative;
    z-index: 2;
    width: var(--frame-w);
    margin: 0 auto;
    padding: clamp(40px, 8vw, 80px) 0;
    display: grid;
    grid-template-columns: 1fr minmax(360px, var(--right-w));
    align-items: start;
    gap: clamp(40px, 8vw, 100px);
  }
  
  .work__left {
    padding-top: clamp(60px, 12vw, 140px);
    max-width: 600px;
  }
  
  .work__title {
    font-size: 50px;
    line-height: .85;
    margin: 100px 0 12px 0;
    text-transform: uppercase;
  }
  
  .work__intro {
    max-width: 520px;
    font-size: clamp(13px, 1.4vw, 16px);
    line-height: 1.2;
    color: #f2f5fa;
    margin: 12px 0 24px;
  }
  
  .btn {
    display: inline-block;
    padding: 10px 18px;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: lowercase;
    text-decoration: none;
    color: #fff;
  }
  
  .btn--outline {
    border: 2px solid #fff;
    background: transparent;
  }
  
  .work__right {
    margin-top: clamp(100px, 9vw, 120px);
    display: grid;
    grid-auto-rows: max-content;
    gap: var(--card-gap);
  }
  
  .work__card {
    background: transparent;
    border: 2px solid rgba(255,255,255,.9);
    backdrop-filter: blur(1px);
    padding: var(--card-pad);
  }
  
  .work__cardTitle {
    font-size: clamp(20px, 2.8vw, 32px);
    text-transform: uppercase;
    margin: 0 0 6px;
  }
  
  .work__card p {
    margin: 0;
    font-family: 'Raleway';
    font-size: clamp(12px, 1.3vw, 14px);
    line-height: 1.15;
    color: #f1f4f8;
  }
  
  @media (max-width: 980px) {
    .work__frame {
      grid-template-columns: 1fr;
    }
  
    .work__right {
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  /* PAGE 4 */

    .train {
    --frame-w: min(1200px, calc(100vw - 160px));
    --left-w: 420px;
    --card-pad: 20px 24px;
    --card-gap: 20px;

    position: relative;
    min-height: 100vh;
    color: #fff;
    overflow: hidden;
    background: #000;
  }
  
  .train__bg {
    position: absolute;
    inset: 0;
    background: url("images/13.png") center/cover no-repeat;
    opacity: .78;
    z-index: 1;
  }
  
  .train__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.45) 100%);
  }
  
  .train__frame {
    position: relative;
    z-index: 2;
    width: var(--frame-w);
    margin: 0 auto;
    padding: clamp(40px, 8vw, 80px) 0;
    display: grid;
    grid-template-columns: minmax(360px, var(--left-w)) 1fr;
    align-items: start;
    gap: clamp(40px, 8vw, 100px);
  }
  
  .train__left {
    margin-top: clamp(100px, 10vw, 120px);
    display: grid;
    grid-auto-rows: max-content;
    gap: var(--card-gap);
  }
  
  .train__card {
    background: transparent;
    border: 2px solid rgba(255,255,255,.9);
    backdrop-filter: blur(1px);
    padding: var(--card-pad);
  }
  
  .train__cardTitle {
    font-size: clamp(20px, 2.8vw, 32px);
    text-transform: uppercase;
    margin: 0 0 2px;
  }
  
  .train__cardSub {
    font-size: clamp(10px, 1.2vw, 12px);
    opacity: .85;
    margin-bottom: 6px;
  }
  
  .train__card p {
    margin: 0;
    font-family: 'Raleway';
    font-size: clamp(12px, 1.3vw, 14px);
    line-height: 1.15;
    color: #f1f4f8;
  }
  
  .train__right {
    padding-top: clamp(100px, 16vw, 190px);
    max-width: 600px;
  }
  
  .train__title {
    font-size: 50px;
    line-height: .85;
    margin: 100px 0 12px 0;
    text-transform: uppercase;
    text-align: left;
  }
  
  .train__intro {
    font-size: clamp(13px, 1.4vw, 16px);
    line-height: 1.2;
    color: #f2f5fa;
    margin: 12px 0 24px;
  }
  
  .btn {
    display: inline-block;
    padding: 10px 18px;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: lowercase;
    text-decoration: none;
    color: #fff;
  }
  
  .btn--outline {
    border: 2px solid #fff;
    background: transparent;
  }
  
  @media (max-width: 980px) {
    .train__frame {
      grid-template-columns: 1fr;
    }
    .train__left,
    .train__right {
      max-width: 680px;
      margin-left: auto;
      margin-right: auto;
    }
    .train__right {
      order: -1;
      padding-top: clamp(80px, 12vw, 140px);
      text-align: center;
    }
    .train__title { text-align: center; }
  }
  
  /* PAGE 5 */

  .abundance{
    --frame-w: min(1400px, calc(100vw - 80px));
    --split: 50%;
    --tan: #d6b084;
  
    position: relative;
    min-height: 100vh;
    color:#fff;
    background: var(--tan);
    overflow:hidden;
  }
  
  .abundance::before{
    content:"";
    position:absolute; inset:0;
    width: var(--split);
    background:#0c0c0c;
    z-index:1;
  }
  
  .abundance__frame{
    position:relative;
    z-index:2;
    width: var(--frame-w);
    margin: 0 auto;
    padding: clamp(32px, 6vw, 64px) 0;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 6vw, 80px);
    align-items:start;
  }
  
  /* left side */
  .abundance__left{
    position:relative;
    min-height: 72vh;
    padding: clamp(24px, 3vw, 48px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }
  
  .abundance__leftCopy{
    max-width: 400px;
    margin-bottom: 20px;
  }
  
  .abundance__kicker{
    font-size: clamp(24px, 3.5vw, 36px);
    line-height:1.5;
    margin: 0 0 12px;
    text-transform: uppercase;
  }
  
  .abundance__leftCopy p{
    font-size: clamp(13px, 1.4vw, 15px);
    line-height:1.45;
    color:#f2f5fa;
    margin:0;
  }
  
  /* bottom-left image container */
  .abundance__photoWrap{
    margin-top: 30px;
    flex: 1;
    position: relative;
    margin-left: calc(-1 * clamp(80px, 3vw, 48px));
    margin-right: calc(-1 * clamp(80px, 3vw, 48px));
    margin-bottom: calc(-1 * clamp(200px, 3vw, 48px));
  }
  .abundance__photo{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  /* right side */
  .abundance__right{
    color:#1a1a1a;
    padding: clamp(24px, 3vw, 48px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    margin-left: auto;
  }
  
  .abundance__title{
    font-size: clamp(30px, 8vw, 60px);
    line-height:.9;
    margin: clamp(60px, 12vw, 140px) 100px 8px 0px;
    text-transform: uppercase;
    color:#141414;
  }
  
  .abundance__subtitle{
    font-size: clamp(14px, 2vw, 20px);
    line-height:1.2;
    margin: 20px 100px 20px 0px;
    color:#6a5a44;
    text-transform: uppercase;
    letter-spacing:.04em;
    max-width: 300px;


  }
  
  .abundance__right .btn{
    display:inline-block;
    margin: 0 auto !important;
    font-size: 16px;
    letter-spacing:.04em;
    text-decoration:none;
    color:#fff;
  }
  .btn--outline{
    border:2px solid currentColor;
    background:transparent;
  }
  .btn--tan{
    color:#1e140c;
    background: rgba(255,255,255,.6);
    border-color:#fff;
  }
  
  /* book mockup center overlap */
  .abundance__book{
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(820px, 65vw);
    height:auto;
    z-index:3;
    filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
    pointer-events:none;
  }
  
  @media (max-width: 980px){
    .abundance{ --split: 100%; }
    .abundance__frame{
      grid-template-columns: 1fr;
    }
    .abundance__right{
      text-align:left;
    }
    .abundance__book{
      position:relative;
      left:auto; top:auto; transform:none;
      margin: clamp(24px, 6vw, 40px) auto 0;
      display:block;
    }
  }
  
  /* PAGE 6  */
  
  .retreat {
    position: relative;
    min-height: 100vh;
    background: #000;
    color: #fff;
  }
  
  .retreat__bg {
    position: absolute;
    inset: 0;
    background: url("images/20.png") center/cover no-repeat;
    opacity: .78;
    z-index: 1;
  }
  .retreat__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.55) 100%);
  }
  
  .retreat__badge {
    position: absolute;
    top: max(2vh, 16px);
    right: -100px;
    width: 350px;
    height: 300px;
    z-index: 4;
    pointer-events: none;
  }
  
  .retreat__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(60px, 10vw, 120px) clamp(40px, 8vw, 80px);
    text-align: center;
  }
  
  .retreat__title {
    font-size: clamp(36px, 7vw, 70px);
    line-height: .9;
    margin: 160px 0 6px 0;
    text-transform: uppercase;
  }
  
  .retreat__sub {
    font-size: clamp(14px, 1.8vw, 20px);
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .95;
    margin-top: 20px;
    margin-bottom: clamp(16px, 2.5vw, 20px);
  }
  
  .retreat__rule {
    width: min(500px, 50%);
    height: 6px;
    margin: 0 auto clamp(16px, 2.5vw, 20px);
    background: #d6b084;
    opacity: .9;
  }
  
  .retreat__lead {
    font-size: clamp(16px, 1.8vw, 20px);
    margin: 0 0 6px;
  }
  
  .retreat__copy {
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.4;
    max-width: 700px;
    margin: 20px auto clamp(16px, 2.5vw, 20px);
    color: #f1f4f8;
  }
  
  .btn {
    display: inline-block;
    margin: 20px 0 0 0 !important;
    font-size: 16px;
    letter-spacing: .04em;
    text-decoration: none;
    color: #fff;
  }
  .btn--outline {
    border: 2px solid #fff;
    background: transparent;
  }
  .retreat__cta {
    margin-top: 6px;
  }
  
  
  @media (max-width: 840px) {
    .retreat__rule { height: 6px; }
  }
  
  /* PAGE 7 */

  .camp {
    position: relative;
    min-height: 100vh;
    background: #000;
    color: #fff;
  }
  
  .camp__bg {
    position: absolute;
    inset: 0;
    background: url("images/23.png") center/cover no-repeat;
    opacity: 1;
    z-index: 1;
  }
  .camp__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 55%, rgba(0,0,0,.55) 100%);
  }
  
  .camp__badge {
    position: absolute;
    top: max(2vh, 16px);
    right: -100px;
    width: 350px;
    height: 300px;
    z-index: 4;
    pointer-events: none;
  }
  
  .camp__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: clamp(60px, 10vw, 120px) clamp(40px, 8vw, 80px);
    text-align: center;
  }
  
  .camp__title {
    font-size: clamp(36px, 7vw, 70px);
    line-height: .9;
    margin: 160px 0 6px 0;
    text-transform: uppercase;
  }
  
  .camp__sub {
    font-size: clamp(14px, 1.8vw, 20px);
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .95;
    margin-top: 20px;
    margin-bottom: clamp(16px, 2.5vw, 20px);
  }
  
  .camp__rule {
    width: min(500px, 50%);
    height: 6px;
    margin: 0 auto clamp(16px, 2.5vw, 20px);
    background: #d6b084;
    opacity: .9;
  }
  
  .camp__copy {
    font-size: clamp(14px, 1.5vw, 17px);
    line-height: 1.4;
    max-width: 700px;
    margin: 20px auto clamp(16px, 2.5vw, 20px);
    color: #f1f4f8;
  }
  
  .btn {
    display: inline-block;
    padding: 10px 18px;
    font-size: 16px;
    letter-spacing: .04em;
    text-decoration: none;
    color: #fff;
  }
  .btn--outline {
    border: 2px solid #fff;
    background: transparent;
  }
  .camp__cta {
    margin: 20px 0 0 0;
  }
  
  
  @media (max-width: 840px) {
    .camp__rule { height: 6px; }
  }
  
  /* ===== Page 8 base ===== */
.p8 {
    --p8-gap: clamp(20px, 3vw, 36px);
    --p8-max: 1300px;
    --p8-right-bg: #caa679;           /* kraft/tan base */
    --p8-right-ink: #1f1a17;
    --p8-outline: rgba(255,255,255,.9);
    --p8-card-bg: rgba(0,0,0,0);      /* transparent cards with outline */
    background: #000;                 /* global black base */
    color: #fff;
  }
  .p8__wrap {
    max-width: var(--p8-max);
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: var(--p8-gap);
    padding: clamp(20px, 4vw, 48px);
  }
  
  /* ===== Left side: photo + gradient panel ===== */
  .p8__left {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    min-height: 70vh;
  }
  .p8__photo {
    position: absolute;
    inset: 0;
    background: url("images/25.png") center/cover no-repeat;
  }
  .p8__left::after {
    /* subtle darkening over the whole photo to match Canva vibe */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
  }
  
  /* gradient box that sits over the image (for headline) */
  .p8__gradbox {
    position: absolute;
    left: clamp(18px, 3vw, 36px);
    right: clamp(18px, 3vw, 36px);
    bottom: clamp(24px, 6vw, 80px);
    padding: clamp(16px, 3vw, 28px);
    margin: 50px auto 200px auto;
    border-radius: 8px;
    backdrop-filter: blur(1.5px);
    background:
      linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.65) 100%);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  .p8__headline {
    margin: 0;
    font-size: clamp(28px, 6vw, 64px);
    line-height: 1.05;
    text-transform: none; /* use your brand font for the brush script */
    color: #fff;
    z-index: 1;
  }
  
  /* ===== Right side: kraft bg with stacked outline boxes ===== */
  .p8__right {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: var(--p8-right-bg);
    color: var(--p8-right-ink);
    display: grid;
    align-content: start;
    gap: var(--p8-gap);
    padding: clamp(18px, 3.2vw, 28px);
  }
  .p8__right::before {
    /* optional kraft texture overlay (drop in a texture file if you have one) */
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    opacity: .22;                /* adjust or remove if you don't have the file */
    pointer-events: none;
  }
  
  /* cards */
  .p8__card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr; /* title on one side, body on the other */
    gap: clamp(14px, 2vw, 24px);
    padding: clamp(18px, 2.6vw, 26px);
    border-radius: 8px;
    border: 2px solid var(--p8-outline);
    background: var(--p8-card-bg);
    isolation: isolate; /* keep outlines crisp over texture */
  }
  .p8__cardTitle {
    display: grid;
    align-content: center;
    font-size: clamp(18px, 3.2vw, 30px);
    color: #fff;                 /* white brush style on kraft */
    text-transform: none;
  }
  .p8__cardTitle > div { line-height: 1.05; }
  .p8__cardTitle--left  { order: 0; text-align: left;  }
  .p8__cardTitle--right { order: 1; text-align: right; }
  
  .p8__cardBody {
    display: grid;
    align-content: center;
    font-size: clamp(14px, 1.6vw, 18px);
    line-height: 1.6;
    color: #f7f3ee;              /* off-white to match Canva */
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 980px) {
    .p8__wrap {
      grid-template-columns: 1fr;
    }
    .p8__left { min-height: 60vh; }
    .p8__card {
      grid-template-columns: 1fr; /* title stacked over body on mobile */
    }
    .p8__cardTitle--right { text-align: left; order: 0; }
  }
  
  /* PAGE 9 */

  /* Page 9 container: remove any default padding/margin */
  .p9 {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
  }
  /* Banner at the top of Page 9 */
  .p9__top {
    position: relative;
    width: 100%;
    height: clamp(100px, 20vh, 400px); /* adjust as needed */
    overflow: hidden;
  }
  .p9__top img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* ensures the image fills container */
  }
 .p9__texture{
   position:relative;
   width:100%;
   min-height:60vh;
   display:grid;
   place-items:center;
   padding:8vh 4vw;
   margin: 0;
   overflow: hidden;
 }
.p9__teximg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95;z-index:0}
.p9__headline{position:relative;z-index:1;text-align:center;max-width:1200px;margin-inline:auto;padding-top:2rem}
.p9__headline h2{
  font-size:clamp(28px,3.5vw,48px);
  letter-spacing:.02em;
  margin:0 0 .5rem 0;
  font-weight:700;
}
.p9__headline h1{
  font-size:clamp(56px,8vw,120px);
  line-height:1.02;
  margin:0 0 .2em 0;
  font-weight:800;
}
.p9__byline{
  font-size:clamp(14px,1.4vw,22px);
  font-family: Permanent Marker;
  margin:0;
  letter-spacing:.18em;
}

/* ---- Page 10 ---- */
.p10{width:100%}
.p10__surface{
  position:relative;
  min-height:70vh;
  padding:6vh 3vw;
  background:#e7dfd6 url("images/15.png") center/cover repeat;
}

/* centered, framed hero image */
.p10__hero{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  aspect-ratio: 16/7;            /* similar proportions to the design */
  overflow:hidden;
  border-radius:6px;
}
.p10__hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:translateZ(0);
}

/* dark overlay to improve text contrast */
.p10__hero::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(0,0,0,.32);
}

/* stacked headline + subtitle */
.p10__caption{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  z-index:1;
  color:#fff;
  padding:2rem;
}
.p10__caption h1{
  font-weight:800;
  font-size:clamp(36px,6vw,86px);
  line-height:1.02;
  margin:0 0 .35em 0;
  letter-spacing:.02em;
}
.p10__sub{
  margin:0;
  font-size:clamp(16px,2.2vw,28px);
  letter-spacing:.08em;
}

/* breathing room on tall screens */
@media (min-height:900px){
  .p10__surface{padding:9vh 3vw}
}

/* ---- Page 11 ---- */


.p11 {
    width: 100%;
  }
  
  .p11__surface {
    position: relative;
    min-height: 65vh;
    padding: 6vh 3vw;
    background: #e7dfd6 url("images/15.png") center/cover repeat;
  }
  
  .p11__hero {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    aspect-ratio: 16/7;
    overflow: hidden;
    border-radius: 6px;
  }
  
  .p11__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* subtle overlay */
  .p11__hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
  }
  
  .p11__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* 👈 left-align, unlike page 10 */
    justify-content: flex-start;
    text-align: left;
    z-index: 1;
    color: #fff;
    padding: 2rem 2.5rem;
  }
  
  .p11__caption h1 {
    font-weight: 800;
    font-size: clamp(36px, 5vw, 72px);
    margin: 0 0 0.5rem 0;
    line-height: 1.05;
  }
  
  .p11__sub {
    margin: 0;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 400;
    opacity: 0.95;
  }
  
  /* ===== PAGE 12 ===== */

.p12{
    display:grid;
    grid-template-columns: 1fr 1fr;
    min-height: 92vh;
  }
  
  .p12__col{
    position: relative;
  }
  
  .p12__col--left{
    background:#171717; /* deep charcoal */
    color:#f2f2f2;
  }
  
  .p12__col--right{
    background:#ddcdc0; /* warm sand */
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4vw;
  }
  
  .p12__hero{
    max-width:min(720px, 80%);
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
  }
  
  .p12__inner{
    max-width:720px;
    margin: clamp(32px,6vh,80px) auto;
    padding: clamp(16px,1.8vw,32px);
  }
  
  .p12__title{
    margin:0 0 clamp(20px,2.5vh,28px) 50px;
    font-size: clamp(36px,6vw,88px);  /* big hand-painted look */
    font-weight: 800;
    letter-spacing: .5px;
    line-height: .85;
  }
  
  .p12__lede{
    font-size: clamp(16px,1.8vw,22px);
    line-height: 1.2;
    max-width: 50ch;
    margin: 0 150px clamp(28px,4vh,40px) 50px;
    color:#e7e7e7;
  }
  
  .p12__social{
    display:flex;
    align-items:flex-start;
    gap: clamp(14px,1.4vw,18px);
    margin: 0 0 clamp(18px,2.4vh,26px) 50px;
  }
  
  .p12__icon{
    width: clamp(52px,6.2vw,84px);
    height: clamp(52px,6.2vw,84px);
    object-fit: contain;
    flex:0 0 auto;
    filter: brightness(1.1);
  }
  
  .p12__social-text{
    margin-top: 10px;
    display:flex;
    flex-direction:column;
    gap:.3em;
    font-size: clamp(16px,1.6vw,22px);
    line-height:1;
  }
  
  /* --- responsive --- */
  @media (max-width: 980px){
    .p12{
      grid-template-columns: 1fr;   /* stack */
    }
    .p12__col--right{
      min-height: 48vh;
    }
    .p12__inner{
      margin: clamp(28px,6vh,64px) auto;
    }
    .p12__title{
      text-align:left;
    }
  }

  /* ===== MOBILE ELEMENT VISIBILITY ===== */
  /* Hide mobile elements on desktop */
  .work__mobile-cta,
  .train__mobile-cta,
  .abundance__mobile-content {
    display: none;
  }

  /* ===== TABLET/MOBILE CENTER ALIGNMENT ===== */
  @media (max-width: 860px) {

    /* Hero Section */
    .hero-text h1 {
      font-size: clamp(80px, 15vw, 200px) !important;
    }
    .hero-text p {
      font-size: clamp(20px, 4vw, 40px) !important;
    }
    
    /* Who We Are Section - Mobile Layout */
    .who {
      min-height: 100vh !important;
      position: relative !important;
    }
    
    /* Darken background image on mobile */
    .who__bg::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      z-index: 1 !important;
    }
    
    .who__frame {
      position: relative !important;
      z-index: 3 !important;
      height: 100vh !important;
      margin: 0 25px 0 25px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 20px !important;
    }
    
    /* Remove gradient box - make transparent */
    .who__panel {
      background: transparent !important;
      width: 100% !important;
      max-width: 400px !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
      position: static !important;
    }
    
    .who__content {
      position: static !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 30px !important;
      padding: 0 !important;
      width: 100% !important;
    }
    
    .who__title {
      font-size: clamp(36px, 8vw, 48px) !important;
      text-align: center !important;
      margin: 0 0 20px 0 !important;
      color: #fff !important;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    /* Hide images and arrows on mobile */
    .who__person,
    .who__arrow,
    .who__name--positioned {
      display: none !important;
    }
    
    /* Stack the content vertically */
    .who__col {
      position: static !important;
      width: 100% !important;
      max-width: 100% !important;
      text-align: center !important;
    }
    
    /* Add names above each copy block */
    .who__col:first-child::before {
      content: "SAV" !important;
      display: block !important;
      font-family: 'Permanent Marker', cursive !important;
      font-size: clamp(28px, 6vw, 36px) !important;
      text-align: center !important;
      margin: 0 0 15px 0 !important;
      color: #fff !important;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.06em !important;
    }
    
    .who__col:last-child::before {
      content: "JACK" !important;
      display: block !important;
      font-family: 'Permanent Marker', cursive !important;
      font-size: clamp(28px, 6vw, 36px) !important;
      text-align: center !important;
      margin: 0 0 15px 0 !important;
      color: #fff !important;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
      text-transform: uppercase !important;
      letter-spacing: 0.06em !important;
    }
    
    .who__name {
      font-family: 'Permanent Marker', cursive !important;
      font-size: clamp(28px, 6vw, 36px) !important;
      text-align: center !important;
      margin: 0 0 15px 0 !important;
      color: #fff !important;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .who__col p {
      font-size: clamp(16px, 3.5vw, 20px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 0 0 30px 0 !important;
      max-width: 100% !important;
      color: #fff !important;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    }
    
    /* Work With Us Section - Mobile Layout */
    .work {
      min-height: 100vh !important;
    }
    
    .work__frame {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      padding: 40px 20px !important;
      gap: 0 !important;
      max-width: 100% !important;
      margin: 0 auto !important;
    }
    
    .work__left {
      width: 100% !important;
      max-width: 400px !important;
      padding-top: 0 !important;
      text-align: center !important;
      order: 1 !important;
    }
    
    .work__title {
      font-size: clamp(48px, 10vw, 80px) !important;
      text-align: center !important;
      margin: 0 0 20px 0 !important;
    }
    
    .work__intro {
      font-size: clamp(16px, 3.5vw, 20px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 0 0 30px 0 !important;
      max-width: 100% !important;
    }
    
    .work__right {
      width: 100% !important;
      max-width: 400px !important;
      margin-top: 0 !important;
      order: 2 !important;
    }
    
    .work__card {
      margin-bottom: 20px !important;
      padding: 20px !important;
      text-align: center !important;
    }
    
    .work__cardTitle {
      font-size: clamp(24px, 5vw, 32px) !important;
      text-align: center !important;
      margin: 0 0 10px 0 !important;
    }
    
    .work__card p {
      font-size: clamp(14px, 3vw, 16px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 0 !important;
    }
    
    /* Hide original desktop button on mobile */
    .work__left .btn {
      display: none !important;
    }
    
    /* Show mobile button and position it at bottom */
    .work__mobile-cta {
      display: block !important;
      width: 100% !important;
      max-width: 400px !important;
      text-align: center !important;
      margin: 30px auto 0 auto !important;
      order: 3 !important;
    }
    
    .work__mobile-cta .btn {
      display: block !important;
      margin: 0 auto !important;
      text-align: center !important;
    }
    
    /* Train With Us Section - Mobile Layout */
    .train {
      min-height: 100vh !important;
    }
    
    .train__frame {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      padding: 40px 20px !important;
      gap: 0 !important;
      max-width: 100% !important;
      margin: 0 auto !important;
    }
    
    .train__right {
      width: 100% !important;
      max-width: 400px !important;
      padding-top: 0 !important;
      text-align: center !important;
      order: 1 !important;
    }
    
    .train__title {
      font-size: clamp(48px, 10vw, 80px) !important;
      text-align: center !important;
      margin: 0 0 20px 0 !important;
    }
    
    .train__intro {
      font-size: clamp(16px, 3.5vw, 20px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 0 0 30px 0 !important;
      max-width: 100% !important;
    }
    
    .train__left {
      width: 100% !important;
      max-width: 400px !important;
      margin-top: 0 !important;
      order: 2 !important;
    }
    
    .train__card {
      margin-bottom: 20px !important;
      padding: 20px !important;
      text-align: center !important;
    }
    
    .train__cardTitle {
      font-size: clamp(24px, 5vw, 32px) !important;
      text-align: center !important;
      margin: 0 0 8px 0 !important;
    }
    
    .train__cardSub {
      font-size: clamp(12px, 3vw, 14px) !important;
      text-align: center !important;
      margin-bottom: 10px !important;
    }
    
    .train__card p {
      font-size: clamp(14px, 3vw, 16px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 0 !important;
    }
    
    /* Hide original desktop button on mobile */
    .train__right .btn {
      display: none !important;
    }
    
    /* Show mobile button and position it at bottom */
    .train__mobile-cta {
      display: block !important;
      width: 100% !important;
      max-width: 400px !important;
      text-align: center !important;
      margin: 30px auto 0 auto !important;
      order: 3 !important;
    }
    
    .train__mobile-cta .btn {
      display: block !important;
      margin: 0 auto !important;
      text-align: center !important;
    }
    
    /* Wild Abundance Section - Mobile Layout */
    .abundance {
      min-height: 100vh !important;
      position: relative !important;
    }
    
    /* Use the bottom-left image as background on mobile - positioned left of center */
    .abundance::before {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: url('images/17.png') 30% center/cover no-repeat !important;
      z-index: 1 !important;
    }
    
    /* Add dark overlay for text readability */
    .abundance::after {
      content: '' !important;
      position: absolute !important;
      inset: 0 !important;
      background: rgba(0, 0, 0, 0.6) !important;
      z-index: 2 !important;
    }
    
    .abundance__frame {
      position: relative !important;
      z-index: 3 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      padding: 40px 20px !important;
      min-height: 100vh !important;
      justify-content: center !important;
      gap: 30px !important;
    }
    
    /* Hide original left section elements */
    .abundance__left {
      display: none !important;
    }
    
    /* Right side content - now first in order */
    .abundance__right {
      width: 100% !important;
      max-width: 400px !important;
      text-align: center !important;
      order: 1 !important;
      margin-left: 0 !important;
    }
    
    .abundance__title {
      font-size: clamp(48px, 10vw, 80px) !important;
      text-align: center !important;
      margin: 0 0 20px 0 !important;
      color: #fff !important;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .abundance__subtitle {
      font-size: clamp(16px, 3.5vw, 20px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 20px 0 30px 0 !important;
      max-width: 100% !important;
      color: #fff !important;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
    }
    
    .abundance__right .btn {
      margin: 0 auto 0 auto !important;
      display: block !important;
      text-align: center !important;
      background: transparent !important;
      border: 2px solid #fff !important;
      color: #fff !important;
    }
    
    /* Book image - second in order - way bigger */
    .abundance__book {
      width: clamp(800px, 95vw, 900px) !important;
      height: auto !important;
      order: 2 !important;
      margin: 0 !important;
    }
    
    /* Create mobile version of left content - third in order - extended */
    .abundance__mobile-content {
      width: 100% !important;
      max-width: 450px !important;
      text-align: center !important;
      order: 3 !important;
      padding: 20px !important;
    }
    
    .abundance__kicker {
      font-size: clamp(36px, 7vw, 56px) !important;
      text-align: center !important;
      margin: 0 0 25px 0 !important;
      color: #fff !important;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .abundance__leftCopy p {
      font-size: clamp(18px, 4vw, 24px) !important;
      line-height: 1.6 !important;
      text-align: center !important;
      margin: 0 !important;
      color: #fff !important;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.8) !important;
      max-width: 100% !important;
    }
    
    /* Retreat Section - Mobile Layout */
    .retreat {
      min-height: 100vh !important;
    }
    
    /* Hide the badge on mobile */
    .retreat__badge {
      display: none !important;
    }
    
    .retreat__content {
      max-width: 90% !important;
      padding: 40px 20px !important;
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 100vh !important;
    }
    
    .retreat__title {
      font-size: clamp(36px, 8vw, 60px) !important;
      line-height: 0.9 !important;
      margin: 0 0 15px 0 !important;
      text-align: center !important;
    }
    
    .retreat__sub {
      font-size: clamp(16px, 3.5vw, 20px) !important;
      margin: 0 0 20px 0 !important;
      text-align: center !important;
    }
    
    .retreat__rule {
      width: min(200px, 60%) !important;
      height: 4px !important;
      margin: 0 auto 20px auto !important;
    }
    
    .retreat__lead {
      font-size: clamp(18px, 4vw, 24px) !important;
      margin: 0 0 15px 0 !important;
      text-align: center !important;
    }
    
    .retreat__copy {
      font-size: clamp(14px, 3.5vw, 18px) !important;
      line-height: 1.4 !important;
      margin: 0 0 25px 0 !important;
      text-align: center !important;
      max-width: 100% !important;
    }
    
    .retreat__content .btn {
      margin: 0 auto !important;
      font-size: clamp(16px, 3.5vw, 20px) !important;
      padding: 12px 24px !important;
    }
    
    
    /* Training Camp Section - Mobile Layout */
    .camp {
      min-height: 100vh !important;
    }
    
    /* Hide the badge on mobile */
    .camp__badge {
      display: none !important;
    }
    
    .camp__content {
      max-width: 90% !important;
      padding: 40px 20px !important;
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      min-height: 100vh !important;
    }
    
    .camp__title {
      font-size: clamp(36px, 8vw, 60px) !important;
      line-height: 0.9 !important;
      margin: 0 0 15px 0 !important;
      text-align: center !important;
    }
    
    .camp__sub {
      font-size: clamp(16px, 3.5vw, 20px) !important;
      margin: 0 0 20px 0 !important;
      text-align: center !important;
    }
    
    .camp__rule {
      width: min(200px, 60%) !important;
      height: 4px !important;
      margin: 0 auto 20px auto !important;
    }
    
    .camp__copy {
      font-size: clamp(14px, 3.5vw, 18px) !important;
      line-height: 1.4 !important;
      margin: 0 0 25px 0 !important;
      text-align: center !important;
      max-width: 100% !important;
    }
    
    .camp__content .btn {
      margin: 0 auto !important;
      font-size: clamp(16px, 3.5vw, 20px) !important;
      padding: 12px 24px !important;
    }
    
    
    /* Page 8 */
    .p8__headline h1 {
      font-size: clamp(80px, 15vw, 200px) !important;
    }
    .p8__headline p {
      font-size: clamp(32px, 4vw, 48px) !important;
    }
    
    /* Page 9 - Mobile Layout */
    .p9 {
      min-height: 100vh !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* Hide the top image on mobile */
    .p9__top {
      display: none !important;
    }
    
    .p9__texture {
      min-height: 100vh !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 20px !important;
      margin: 0 !important;
    }
    
    .p9__headline {
      text-align: center !important;
      max-width: 90% !important;
      padding: 0 !important;
    }
    
    .p9__headline h1 {
      font-size: clamp(48px, 12vw, 80px) !important;
      line-height: 0.9 !important;
      margin: 0 0 20px 0 !important;
      text-align: center !important;
    }
    
    .p9__byline {
      font-size: clamp(16px, 4vw, 24px) !important;
      text-align: center !important;
      margin: 0 !important;
      line-height: 1.3 !important;
    }
    
    /* Hide blog pages on mobile */
    .p10,
    .p11 {
      display: none !important;
    }
    
    /* Connect With Us Section - Mobile Layout */
    .p12 {
      min-height: auto !important;
      height: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 5px 0 !important;
    }
    
    .p12__col--left {
      width: 100% !important;
      max-width: 400px !important;
      text-align: center !important;
      padding: 5px 20px !important;
    }
    
    .p12__col--right {
      display: none !important;
    }
    
    .p12__inner {
      text-align: center !important;
      margin: 0 auto !important;
    }
    
    .p12__title {
      font-size: clamp(32px, 7vw, 55px) !important;
      text-align: center !important;
      margin: 0 0 5px 0 !important;
      line-height: 0.9 !important;
    }
    
    .p12__lede {
      font-size: clamp(16px, 4vw, 20px) !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin: 0 0 10px 0 !important;
      max-width: 100% !important;
    }
    
    /* Reorganize social media - stack vertically with text under icons */
    .p12__social {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      margin: 0 0 8px 0 !important;
      text-align: center !important;
    }
    
    .p12__icon {
      width: clamp(40px, 8vw, 60px) !important;
      height: auto !important;
      margin: 0 0 5px 0 !important;
    }
    
    .p12__social-text {
      font-size: clamp(14px, 3.5vw, 18px) !important;
      line-height: 1.3 !important;
      text-align: center !important;
      margin: 0 !important;
    }
    
    .p12__social-text div {
      margin: 0 0 5px 0 !important;
    }
    
    /* Button Text */
    .btn {
      font-size: clamp(14px, 1.5vw, 18px) !important;
      padding: 10px 20px !important;
    }
  }
  
  
/* ================= WAITLIST MODAL ================= */
.modal {
  display: none;
  position: fixed;
  z-index: 999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  font-family: 'Caladea', serif;
  position: relative;
  z-index: 1000000;
  margin: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px 16px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-family: 'Permanent Marker', cursive;
  font-size: 24px;
  color: #1e140c;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.modal-close {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.modal-close:hover {
  background: #f5f5f5;
  color: #333;
}

.modal-form {
  padding: 24px 32px 32px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.form-group input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Caladea', serif;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #1e140c;
}

.form-group input::placeholder {
  color: #999;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
}

.btn-primary,
.btn-secondary {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Caladea', serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-primary {
  background: #1e140c;
  color: #fff;
  border: 2px solid #1e140c;
}

.btn-primary:hover {
  background: #2a1f18;
  border-color: #2a1f18;
}

.btn-primary:disabled {
  background: #ccc;
  border-color: #ccc;
  cursor: not-allowed;
}

.btn-secondary {
  background: transparent;
  color: #666;
  border: 2px solid #ddd;
}

.btn-secondary:hover {
  background: #f5f5f5;
  border-color: #bbb;
  color: #333;
}

.modal-message {
  margin-top: 16px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  min-height: 20px;
}

.modal-message.success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.modal-message.error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* Mobile styles for modal */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 20px;
  }
  
  .modal-header {
    padding: 20px 24px 12px;
  }
  
  .modal-header h3 {
    font-size: 20px;
  }
  
  .modal-form {
    padding: 20px 24px 24px;
  }
  
  .form-group input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  .form-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
    padding: 14px 24px;
  }
}