/* texture.css: grain, halftone, hand-drawn accents, ticket/press-pass cards, perforated seams, stickers.
   To remove the whole look: delete the <link> to this file in each page (or revert the commit). */

/* ---- 1. Hand-drawn yellow accents ---- */
.scrawl {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C28 2 58 9 96 5 S156 8 198 3' fill='none' stroke='%23FFCB01' stroke-width='4.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") no-repeat 0 100% / 100% .3em;
  padding-bottom: .16em;
}
.scrawl--azure {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C28 2 58 9 96 5 S156 8 198 3' fill='none' stroke='%23043137' stroke-width='4.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
}
.circled { position: relative; display: inline-block; z-index: 0; }
.circled::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -.14em -.3em -.1em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M14 38 C8 12 84 4 142 8 C192 12 200 40 190 56 C178 76 88 78 40 70 C12 64 4 44 16 26 C22 18 34 14 48 12' fill='none' stroke='%23FFCB01' stroke-width='4.5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%;
}

/* ---- 2. Grain + halftone on dark and yellow sections ---- */
.hero, .page-hero, .brands, .cs-framework, .cs-journey .j-to, .site-footer, .cta-final, .topbar { position: relative; isolation: isolate; }
.hero, .page-hero, .brands, .cs-framework, .cs-journey .j-to, .site-footer {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .11 0 0 0 -.015'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.cta-final, .cs-journey .j-from {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0 0 0 -.02'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero::after, .page-hero::after, .cs-framework::after, .cs-journey .j-to::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; right: 0; width: min(48vw, 560px); height: 100%;
  background: radial-gradient(circle, rgba(255,203,1,.3) 2.2px, transparent 2.8px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 90%); mask-image: linear-gradient(to left, #000, transparent 90%);
}
.cta-final::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: 0; left: 0; width: min(40vw, 460px); height: 100%;
  background: radial-gradient(circle, rgba(4,49,55,.22) 2.2px, transparent 2.8px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(to right, #000, transparent 90%); mask-image: linear-gradient(to right, #000, transparent 90%);
}
.hero { overflow: hidden; }

/* ---- 3. Perforated ticket seams between sections ---- */
.work, .about, .process, .course, .cs-problem, .cs-months, .cs-proof, .cs-invest, .cs-fit, .cta-final, .site-footer, .cs-faq, .yt { position: relative; }
.work { --perf: var(--azure); } .about { --perf: var(--paper); } .process { --perf: var(--white); }
.course { --perf: var(--paper); } .yt { --perf: var(--white); } .cta-final { --perf: var(--paper); }
.site-footer { --perf: var(--yellow); }
.cs-problem { --perf: var(--azure); } .cs-months { --perf: var(--azure); } .cs-proof { --perf: var(--paper); }
.cs-faq { --perf: var(--white); } .cs-invest { --perf: var(--paper); }
.about::before, .process::before, .course::before, .yt::before, .cta-final::before,
.cs-problem::before, .cs-months::before, .cs-proof::before, .cs-faq::before, .cs-invest::before {
  content: ""; position: absolute; z-index: 3; pointer-events: none; left: 0; right: 0; top: -9px; height: 18px;
  background: radial-gradient(circle at 12px 9px, var(--perf) 6.5px, transparent 7px) 0 0 / 28px 18px repeat-x;
}
.cs-invest { --perf: var(--paper); }
.cta-final--center { --perf: var(--white); }

/* ---- 4. Press-pass testimonials ---- */
.quote { position: relative; padding-top: 52px; }
.quote::before {
  content: ""; position: absolute; top: 15px; left: 50%; width: 56px; height: 13px; margin-left: -28px; border-radius: 8px;
  background: var(--paper); border: 3px solid var(--azure); box-sizing: border-box;
}
.quote figcaption { border-top: 2px dashed currentColor; padding-top: .9rem; }
.cs-proof .quote::after {
  content: "ALL ACCESS"; position: absolute; top: 14px; left: 26px; font-size: .68rem; font-weight: 600; letter-spacing: .2em; color: var(--yellow);
}

/* ---- 5. Ticket-stub cards (Creative Strategy toolkit) ---- */
.toolkit { counter-reset: tk; }
.toolkit article {
  counter-increment: tk; position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr); padding: 0; overflow: visible;
}
.toolkit .icon {
  grid-row: 1 / 3; width: auto; height: auto; margin: 0; border: 0; border-right: 3px dashed var(--yellow); border-radius: 15px 0 0 15px;
  background: var(--azure); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 1.7rem; padding: 14px 0;
}
.toolkit .icon::after { content: "No. " counter(tk, decimal-leading-zero); font-family: var(--body); font-size: .6rem; font-weight: 600; letter-spacing: .12em; color: var(--yellow); }
.toolkit article h3 { padding: 22px 22px 0; margin: 0 0 .4rem; }
.toolkit article p { padding: 0 22px 22px; }
.toolkit article::before, .toolkit article::after {
  content: ""; position: absolute; left: 61px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); z-index: 2;
}
.toolkit article::before { top: -17px; clip-path: inset(50% 0 0 0); }
.toolkit article::after { bottom: -17px; clip-path: inset(0 0 50% 0); }
@media (max-width: 480px) { .toolkit article { grid-template-columns: 64px minmax(0, 1fr); } .toolkit article::before, .toolkit article::after { left: 47px; } }

/* ---- 6. Stickers ---- */
.stk {
  position: absolute; z-index: 4; display: inline-block; transform: rotate(var(--r, -7deg)); background: var(--yellow); color: var(--azure);
  font-family: var(--head); font-weight: 800; font-size: clamp(.85rem, 1.6vw, 1.05rem); line-height: 1.05; text-transform: uppercase; letter-spacing: .02em;
  padding: 9px 14px; border: 3px solid var(--azure); border-radius: 12px; box-shadow: 4px 4px 0 var(--azure-deep); white-space: nowrap; pointer-events: none;
}
.stk--white { background: var(--white); }
.receipts, .process .wrap, .cta-final .wrap, .dots, .cs-months .wrap { position: relative; }
.receipts .stk { top: -6px; right: 4px; --r: 6deg; }
.process .stk { top: 4px; right: 4px; --r: 5deg; }
.cta-final .stk { top: -6px; right: 4px; --r: 7deg; background: var(--white); }
.dots .stk { left: 16px; bottom: 18px; --r: -8deg; }
.cs-months .stk { right: 4px; bottom: 6px; --r: 4deg; }
@media (max-width: 700px) { .receipts .stk, .process .stk, .cta-final .stk { top: -22px; } .cs-months .stk { bottom: -22px; } }
.receipts .stk { top: -34px; }
@media (max-width: 700px) { .receipts .stk { top: -38px; } .process .stk { top: -26px; } .cta-final .stk { top: -30px; } }
.dots .stk { left: 31%; bottom: 14px; --r: -5deg; }
.cs-months .stk { top: -34px; bottom: auto; right: 4px; --r: 5deg; }
@media (max-width: 700px) { .cs-months .stk { top: -34px; bottom: auto; } }
.cs-months .stk { top: -56px; }
@media (max-width: 700px) { .cs-months .stk { top: -40px; } }
.cta-final .scrawl { padding-bottom: 0; background-size: 100% .18em; background-position: 0 96%; }
.cta-final:not(.cta-final--center) .scrawl--azure {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'><path d='M2 6 C28 2 58 9 96 5 S156 8 198 3' fill='none' stroke='%23FFFFFF' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/></svg>");
  background-size: 100% .16em; background-position: 0 90%;
}
.cs-months { padding-top: clamp(104px, 10vw, 136px); }
.cs-months .stk { top: -60px; }
@media (max-width: 700px) { .cs-months { padding-top: 96px; } .cs-months .stk { top: -52px; } }

/* ---- 7. Doodles (arrows + sparkles) and highlighter swipes ---- */
.doodle { position: absolute; pointer-events: none; color: var(--yellow); }
.hero-actions, .cta-wrap { position: relative; display: inline-block; }
.hero-actions { display: flex; }
.hero-actions .cta-final .cta-wrap .cs-invest .hero h1 { position: relative; }
.hero h1 .doodle-spark { width: 54px; height: 54px; right: -6px; top: -34px; transform: rotate(8deg); }
.page-hero--center .wrap { position: relative; }
.doodle-spark--l, .doodle-spark--r { width: 64px; height: 64px; top: -6px; }
.doodle-spark--l { left: 6%; transform: rotate(-10deg); }
.doodle-spark--r { right: 6%; transform: rotate(14deg) scale(.8); }
.hl {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'><path d='M1 6 C40 2 120 3 199 5 L197 17 C140 19 60 18 3 16 Z' fill='%23FFCB01' fill-opacity='.7'/></svg>") no-repeat 0 78% / 100% .62em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; margin: 0 -.12em;
}
@media (max-width: 900px) { .hl { background-size: 100% .8em; background-position: 0 70%; }
.cta-final .cta-wrap .hl { background-size: 100% 1.1em; background-position: 0 55%; }
.bf-vs, .bf-hero { position: relative; }
.bf-curriculum { --perf: var(--azure); } .bf-about { --perf: var(--white); }
.bf-curriculum::before { content: ""; position: absolute; z-index: 3; pointer-events: none; left: 0; right: 0; top: -9px; height: 18px; background: radial-gradient(circle at 12px 9px, var(--perf) 6.5px, transparent 7px) 0 0 / 28px 18px repeat-x; }
.bf-curriculum { position: relative; }
.cs-proof .quote::after { color: currentColor; opacity: .75; }