/* =============================================================
   Afterwork, site-wide styles
   Brand owner: Iwana Johannsen (afterwork.one)
   Combines design tokens, component styles, and page-specific extensions.
   ============================================================= */

/* Self-hosted variable fonts (no Google Fonts request — GDPR compliant) */
@font-face {
  font-family: 'Inter Tight';
  src: url('assets/fonts/inter-tight.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('assets/fonts/nunito.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette */
  --aw-cream:        #FCF8F5;
  --aw-cobalt:       #1D40BA;
  --aw-lavender:     #C4CAE6;
  --aw-lime:         #D9FB99;

  /* Neutrals */
  --aw-white:        #FFFFFF;
  --aw-cream-50:     #FDFBF9;
  --aw-cream-100:    #FCF8F5;
  --aw-cream-200:    #F4EDE5;
  --aw-cream-300:    #E6DDD1;
  --aw-ink-900:      #0E1A44;
  --aw-ink-700:      #2A3564;
  --aw-ink-500:      #5E6A96;
  --aw-ink-300:      #A7AFC9;

  /* Semantic */
  --bg:              #ffffff;
  --bg-raised:       var(--aw-white);
  --bg-sunken:       var(--aw-cream-200);
  --bg-brand:        var(--aw-cobalt);
  --bg-brand-soft:   var(--aw-lavender);
  --bg-highlight:    var(--aw-lime);
  --fg:              #000000;
  --fg-on-brand:     #FFFFFF;
  --fg-brand:        var(--aw-cobalt);
  --border:          rgba(29, 64, 186, 0.14);
  --border-strong:   rgba(29, 64, 186, 0.28);
  --border-subtle:   rgba(29, 64, 186, 0.08);
  --link:            var(--aw-cobalt);

  /* Type stacks */
  --font-display:    'Inter Tight', 'Nunito', system-ui, sans-serif;
  --font-body:       'Avenir', 'Avenir Next', 'Nunito', system-ui, sans-serif;

  /* Type scale */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  17px;
  --fs-md:    19px;
  --fs-lg:    22px;
  --fs-xl:    28px;
  --fs-2xl:   36px;
  --fs-3xl:   48px;
  --fs-4xl:   64px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radii */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(14, 26, 68, 0.06);
  --shadow-md:  0 6px 20px rgba(14, 26, 68, 0.08);
  --shadow-lg:  0 18px 48px rgba(14, 26, 68, 0.12);
  --shadow-brand: 0 10px 30px rgba(29, 64, 186, 0.22);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* =============================================================
   Page routing (single-file multi-page)
   ============================================================= */
.aw-page { display: block; }
.aw-page.is-hidden { display: none; }

/* =============================================================
   Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #fff; color: #000; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100vh; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; color: var(--aw-cobalt); letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 var(--space-4); text-wrap: balance; }
h1 { font-size: var(--fs-4xl); font-weight: 900; letter-spacing: -0.025em; }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }

::selection { background: var(--aw-lime); color: var(--aw-cobalt); }

/* Keyboard focus indicator — uses currentColor so it works on any background */
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

/* Skip-to-content link — visible only when keyboard-focused */
.aw-skip-link { position: absolute; top: 12px; left: 12px; background: var(--aw-cobalt); color: #fff; padding: 12px 20px; font-family: var(--font-display); font-weight: 700; font-size: 14px; text-decoration: none; z-index: 200; border-radius: 8px; transform: translateY(calc(-100% - 24px)); transition: transform 220ms var(--ease-out); }
.aw-skip-link:focus { transform: translateY(0); outline: 2px solid var(--aw-lime); outline-offset: 2px; }
#main-content { scroll-margin-top: 80px; }

/* =============================================================
   Layout primitives
   ============================================================= */
.aw-container { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.aw-section { padding: 96px 0; }
.aw-section-title { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; text-wrap: balance; color: var(--aw-cobalt); }
.aw-section-title em { font-style: normal; background: linear-gradient(transparent 62%, var(--aw-lime) 62%, var(--aw-lime) 92%, transparent 92%); padding: 0 4px; font-weight: 800; }
.aw-section-title-light { color: #fff; }
.aw-section-lede { font-size: 17px; line-height: 1.55; color: #000; margin: 0 0 56px; font-weight: 400; }

/* =============================================================
   Nav
   ============================================================= */
.aw-nav { position: sticky; top: 0; z-index: 40; background: transparent; transition: background 220ms var(--ease-out), backdrop-filter 220ms; }
.aw-nav.is-scrolled { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); }
.aw-nav-inner { max-width: 1200px; margin: 0 auto; padding: 16px 32px; display: flex; align-items: center; gap: 32px; }
.aw-nav-brand img { height: 44px; display: block; }
.aw-nav-links { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; flex: 1; }
.aw-nav-links a { color: #000; font-size: 15px; font-weight: 400; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color 140ms; }
.aw-nav-links a:hover { border-bottom-color: var(--aw-lime); }
.aw-nav-links a.is-active { border-bottom-color: var(--aw-cobalt); }

/* Mobile nav: hamburger button (hidden on desktop, shown below 900px) */
.aw-nav-toggle { display: none; background: transparent; border: 0; width: 44px; height: 44px; padding: 0; cursor: pointer; position: relative; margin-left: auto; border-radius: 50%; transition: background 200ms var(--ease-out); }
.aw-nav-toggle:hover { background: var(--aw-cream-200); }
.aw-nav-toggle span { display: block; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--aw-cobalt); border-radius: 2px; transition: transform 280ms var(--ease-out), opacity 200ms var(--ease-out); }
.aw-nav-toggle span:nth-child(1) { top: 15px; }
.aw-nav-toggle span:nth-child(2) { top: 21px; }
.aw-nav-toggle span:nth-child(3) { top: 27px; }
.aw-nav-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.aw-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.aw-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Push the right-aligned controls to the far right when desktop links are hidden */
.aw-nav-cta { margin-left: auto; }

/* Mobile nav: backdrop (covers page while drawer is open) */
.aw-nav-backdrop { position: fixed; inset: 0; background: rgba(14, 26, 68, 0.5); opacity: 0; visibility: hidden; transition: opacity 240ms var(--ease-out), visibility 240ms; z-index: 90; }
.aw-nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* Mobile nav: slide-out drawer (right side) */
.aw-nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 85%; max-width: 320px; background: #fff; transform: translateX(100%); transition: transform 320ms var(--ease-out); z-index: 100; box-shadow: -20px 0 48px rgba(14, 26, 68, 0.18); display: flex; flex-direction: column; overscroll-behavior: contain; }
.aw-nav-drawer.is-open { transform: translateX(0); }
.aw-nav-drawer-inner { display: flex; flex-direction: column; padding: 18px 28px 32px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.aw-nav-drawer-close { align-self: flex-end; background: transparent; border: 0; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; color: var(--aw-cobalt); padding: 0; border-radius: 50%; transition: background 200ms; flex-shrink: 0; }
.aw-nav-drawer-close:hover { background: var(--aw-cream-200); }
.aw-nav-drawer-links { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; }
.aw-nav-drawer-links li { border-bottom: 1px solid var(--border-subtle); }
.aw-nav-drawer-links li:first-child { border-top: 1px solid var(--border-subtle); }
.aw-nav-drawer-links a { display: block; padding: 16px 4px; color: #000; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; text-decoration: none; transition: color 160ms, background 160ms; }
.aw-nav-drawer-links a:hover { color: var(--aw-cobalt); background: var(--aw-cream-200); }
.aw-nav-drawer-links a.is-active { color: var(--aw-cobalt); }
.aw-nav-drawer-cta { margin-top: 28px; align-self: flex-start; }

/* Lock body scroll while drawer is open */
body.aw-nav-locked { overflow: hidden; }

/* =============================================================
   Buttons
   ============================================================= */
.aw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; border: 2px solid transparent; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 200ms var(--ease-out), color 200ms, transform 200ms; }
.aw-btn-sm { padding: 9px 18px; font-size: 13px; }
.aw-btn-md { padding: 13px 24px; font-size: 15px; }
.aw-btn-primary { background: var(--aw-cobalt); color: #fff; }
.aw-btn-primary:hover { background: var(--aw-lime); color: var(--aw-cobalt); transform: translateY(-1px); }
.aw-btn-primary:active { transform: scale(0.98); }
.aw-btn-secondary { background: transparent; color: var(--aw-cobalt); border-color: var(--aw-cobalt); }
.aw-btn-secondary:hover { background: var(--aw-lime); border-color: var(--aw-lime); }
.aw-btn-tertiary { background: transparent; color: var(--aw-cobalt); border-radius: 0; padding: 6px 0; border-bottom: 2px solid var(--aw-lime); }
.aw-btn-tertiary:hover { background: var(--aw-lime); }
.aw-btn-ghost-light { background: transparent; color: #fff; border-color: transparent; }
.aw-btn-ghost-light:hover { opacity: 0.8; }

/* =============================================================
   Eyebrow & utilities
   ============================================================= */
.aw-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--aw-cobalt); margin-bottom: 14px; background: var(--aw-lime); padding: 6px 10px; border-radius: 4px; }
.aw-eyebrow-light { color: var(--aw-lime); background: transparent; padding: 0; }

/* =============================================================
   Hero
   ============================================================= */
.aw-hero { padding: 72px 0 32px; }
.aw-hero-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }

/* Home page hero: cream background */
#page-home .aw-hero-art { background: var(--aw-cream); }

/* Mentoring page hero: equal columns, image matches content height */
#page-mentoring .aw-hero-inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
#page-mentoring .aw-hero-art { aspect-ratio: auto; background: var(--aw-cream); }

/* Afterwork page hero: equal columns, image matches content height */
#page-afterwork .aw-hero-inner { grid-template-columns: 1fr 1fr; align-items: stretch; }
#page-afterwork .aw-hero-art { aspect-ratio: auto; background: #FCF8F5; padding: 0; overflow: hidden; }
#page-afterwork .aw-hero-art img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; transform: scale(1.8); }
.aw-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.08; letter-spacing: -0.02em; color: var(--aw-cobalt); margin: 0 0 20px; text-wrap: balance; max-width: 18ch; }
.aw-hero-title em { font-style: normal; background: linear-gradient(transparent 62%, var(--aw-lime) 62%, var(--aw-lime) 92%, transparent 92%); padding: 0 2px; font-weight: 800; }
.aw-hero-lede { font-size: 17px; line-height: 1.55; color: #000; font-weight: 400; margin: 0 0 32px; }
.aw-hero-subtitle { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; color: var(--aw-cobalt); margin: 0 0 16px; max-width: 32ch; }
.aw-hero-ctas { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.aw-hero-art { aspect-ratio: 1 / 1; background: var(--aw-lavender); border-radius: 28px; display: flex; align-items: center; justify-content: center; padding: 36px; overflow: hidden; position: relative; }
.aw-hero-art::after { content: ''; position: absolute; top: 18px; right: 18px; width: 56px; height: 56px; background: var(--aw-lime); border-radius: 999px; }
.aw-hero-art img { width: 88%; height: 88%; object-fit: contain; position: relative; z-index: 1; mix-blend-mode: multiply; margin: auto; }
.aw-hero-art.is-photo { padding: 0; }
.aw-hero-art.is-photo > img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; filter: grayscale(1); margin: 0; }
.aw-hero-art.is-photo::after { z-index: 2; }

/* =============================================================
   Card grid (homepage 4-up)
   ============================================================= */
.aw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.aw-card { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; transition: transform 220ms var(--ease-out), background 220ms; color: #000; }
.aw-card:hover { transform: translateY(-2px); background: var(--aw-lime); }
.aw-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 4px; color: var(--aw-cobalt); }
.aw-card p { font-size: 14px; line-height: 1.55; color: #000; margin: 0; font-weight: 400; }
.aw-card-link { color: var(--aw-cobalt); font-weight: 800; font-size: 13px; margin-top: auto; text-decoration: none; padding-top: 12px; display: inline-block; border-bottom: 2px solid var(--aw-lime); align-self: flex-start; padding-bottom: 2px; }
.aw-card-link:hover { background: var(--aw-lime); }
.aw-card-lavender { background: var(--aw-lavender); border-color: transparent; }
.aw-card-lavender:hover { background: var(--aw-lime); }

/* =============================================================
   Testimonial
   ============================================================= */
.aw-testimonial { padding: 72px 0; background: #fff; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.aw-testimonial-inner { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: center; }
.aw-testimonial-art { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.aw-avatar { width: 72px; height: 72px; border-radius: 999px; background: var(--aw-cobalt); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 0.02em; position: relative; }
.aw-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.aw-avatar::after { content: ''; position: absolute; bottom: -4px; right: -4px; width: 22px; height: 22px; background: var(--aw-lime); border-radius: 999px; border: 3px solid #fff; }
.aw-testimonial-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--aw-cobalt); }
.aw-testimonial-role { font-size: 14px; color: #000; }
.aw-testimonial-role a { color: var(--aw-cobalt); font-weight: 800; }
.aw-quote { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 22px; line-height: 1.45; color: #000; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--aw-lime); max-width: 52ch; }

/* =============================================================
   Mentoring (cobalt full-bleed) - homepage variant
   ============================================================= */
.aw-mentoring { padding: 96px 0; background: var(--aw-cobalt); color: #fff; }
.aw-mentoring-head { display: grid; grid-template-columns: 1.3fr auto; gap: 40px; align-items: end; margin-bottom: 56px; }
.aw-mentoring .aw-section-title { color: var(--aw-lime); }
.aw-mentoring .aw-section-title em { font-style: normal; background: linear-gradient(transparent 62%, var(--aw-lime) 62%, var(--aw-lime) 92%, transparent 92%); padding: 0 2px; color: var(--aw-cobalt); }
.aw-mentoring-lede { font-size: 19px; line-height: 1.55; color: #fff; font-weight: 400; margin: 0; }
.aw-mentoring-ctas { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.aw-mentoring .aw-btn-primary { background: var(--aw-lime); color: var(--aw-cobalt); }
.aw-mentoring .aw-btn-primary:hover { background: #fff; color: var(--aw-cobalt); }
.aw-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aw-pillar { padding: 24px; border-left: 2px solid var(--aw-lime); }
.aw-pillar h3 { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aw-lime); margin: 0 0 10px; }
.aw-pillar p { font-size: 15px; line-height: 1.55; color: #fff; font-weight: 400; margin: 0; }

/* =============================================================
   Essays grid
   ============================================================= */
.aw-essays-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; margin-bottom: 48px; flex-wrap: wrap; }
.aw-essays-head .aw-section-title { margin: 0; }
.aw-essays-head .aw-section-lede { margin: 0; max-width: 44ch; }
.aw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.aw-essay { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 24px; overflow: hidden; transition: transform 220ms; display: flex; flex-direction: column; }
.aw-essay:hover { transform: translateY(-2px); }
.aw-essay-art { aspect-ratio: 1/1; display: block; padding: 0; background: var(--aw-lavender); position: relative; overflow: hidden; }
.aw-essay-art::before { content: attr(data-tag); position: absolute; top: 14px; left: 14px; background: var(--aw-lime); color: var(--aw-cobalt); font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border-radius: 4px; z-index: 2; }
.aw-essay-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.aw-essay-body { padding: 10px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.aw-essay-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--aw-cobalt); margin: 0 0 10px; }
.aw-essay-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; margin: 8px 0 16px; color: var(--aw-cobalt); }
.aw-essay-body .aw-card-link { margin-top: auto; padding-top: 0; }

/* =============================================================
   Footer
   ============================================================= */
.aw-footer { background: var(--aw-cobalt); color: #fff; padding: 80px 0 0; }
.aw-footer-inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; }
.aw-footer-brand img { height: 48px; margin-bottom: 18px; }
.aw-footer-brand p { font-size: 15px; line-height: 1.55; max-width: 34ch; margin: 0; font-weight: 400; color: #fff; }
.aw-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.aw-footer-cols h6 { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--aw-lime); margin: 0 0 14px; }
.aw-footer-cols a { display: block; color: #fff; font-size: 14px; padding: 4px 0; }
.aw-footer-cols a:hover { color: var(--aw-lime); }
.aw-footer-bottom { max-width: 1160px; margin: 64px auto 0; padding: 24px 32px; border-top: 1px solid rgba(255,255,255,0.25); font-size: 12px; color: #fff; }

/* =============================================================
   Page-specific extensions: Vision Workbook
   ============================================================= */

/* Hero, product meta line */
.aw-product-meta { display: flex; gap: 16px; align-items: center; margin: 0 0 24px; flex-wrap: wrap; }
.aw-product-price { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--aw-cobalt); letter-spacing: -0.02em; }
.aw-product-meta-sep { color: var(--aw-cobalt); opacity: 0.4; }
.aw-product-meta-fact { font-size: 14px; color: #000; }

/* Five-pillar grid (replaces 4-up on the Vision page) */
.aw-pillars-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.aw-pillars-five .aw-pillar { padding: 22px 18px; border-left: 2px solid var(--aw-lime); }
.aw-pillars-five .aw-pillar.is-current { border-left: 3px solid #fff; background: rgba(255,255,255,0.08); border-radius: 0; }
.aw-pillars-five .aw-pillar.is-current h3 { color: #fff; }
.aw-pillar-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #fff; margin: 4px 0 10px; line-height: 1.1; letter-spacing: -0.01em; }
.aw-pillars-five .aw-pillar.is-current .aw-pillar-name { color: var(--aw-lime); font-size: 26px; }
.aw-pillars-five .aw-pillar p { opacity: 0.85; }
.aw-pillars-five .aw-pillar.is-current p { opacity: 1; }

/* Exercises (2x2 grid with big numbers) */
.aw-exercises { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.aw-exercise { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 32px; border: 1.5px solid var(--aw-cobalt); border-radius: 24px; background: #fff; align-items: start; transition: background 220ms; }
.aw-exercise:hover { background: var(--aw-lime); }
.aw-exercise-num { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.9; letter-spacing: -0.04em; color: var(--aw-cobalt); }
.aw-exercise h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--aw-cobalt); margin: 0 0 8px; }
.aw-exercise p { font-size: 15px; line-height: 1.55; color: #000; margin: 0; }

/* Audience grid (3 cards, middle one featured) */
.aw-audience-section { background: #fff; }
.aw-audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.aw-audience-card { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 28px; padding: 32px 32px 36px; display: flex; flex-direction: column; transition: transform 280ms var(--ease-out); }
.aw-audience-card:hover { transform: translateY(-4px); }
.aw-audience-card.is-featured { background: #fff; }
.aw-audience-illo { aspect-ratio: 4/3; background: var(--aw-lavender); border-radius: 20px; margin-bottom: 28px; display: grid; place-items: center; overflow: hidden; }
.aw-audience-illo svg { width: 70%; height: auto; }
.aw-audience-card h3 { font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 1.15; letter-spacing: -0.015em; color: var(--aw-cobalt); margin: 0 0 16px; white-space: nowrap; }
.aw-audience-card p { font-size: 15px; line-height: 1.6; color: #000; margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.aw-audience-card.is-expanded p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.aw-audience-toggle { margin-top: 14px; align-self: flex-start; background: transparent; border: 0; padding: 4px 0; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--aw-cobalt); cursor: pointer; border-bottom: 2px solid var(--aw-lime); transition: background 200ms var(--ease-out); }
.aw-audience-toggle:hover { background: var(--aw-lime); }

/* Testimonial cards (placeholder grid) */
.aw-tcard { padding: 28px; background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 24px; display: flex; flex-direction: column; }
.aw-tcard.is-placeholder { border-style: dashed; border-color: var(--aw-lavender); background: var(--aw-cream-100); }
.aw-tcard .aw-eyebrow { background: transparent; color: var(--aw-cobalt); padding: 0; opacity: 0.85; font-size: 10px; }
.aw-tcard blockquote { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 16px; line-height: 1.5; border-left: 3px solid var(--aw-lime); padding: 0 0 0 16px; margin: 14px 0 16px; color: #000; }
.aw-tcard .name { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--aw-cobalt); }
.aw-tcard .role { font-size: 13px; color: #000; margin-top: 2px; }

/* Final CTA (cobalt full-bleed with workbook card) */
.aw-final-cta { padding: 96px 0; background: var(--aw-cobalt); color: #fff; }
.aw-final-cta-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; max-width: 980px; margin: 0 auto; padding: 0 32px; }
.aw-final-cta-lede { font-size: 19px; line-height: 1.55; color: #fff; margin: 0 0 28px; font-weight: 400; }
.aw-final-cta-fineprint { font-size: 12px; color: var(--aw-lavender); margin-top: 20px; }
.aw-product-card { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); border-radius: 24px; padding: 32px; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: space-between; }
.aw-product-card .top { color: var(--aw-lime); font-size: 11px; letter-spacing: 0.2em; font-weight: 800; }
.aw-product-card .pillar-num { color: var(--aw-lavender); font-size: 12px; letter-spacing: 0.2em; font-weight: 800; margin-bottom: 8px; }
.aw-product-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.95; letter-spacing: -0.03em; color: var(--aw-lime); margin: 0; }
.aw-product-card .sub { color: var(--aw-lavender); font-size: 15px; margin-top: 8px; }
.aw-product-card .author { color: var(--aw-lime); font-size: 12px; }

/* =============================================================
   Page-specific extensions: Afterwork newsletter subpage
   ============================================================= */

/* Hero variant with geometric shapes + photo */
.aw-hero-afterwork { padding: 56px 0 96px; position: relative; overflow: hidden; }
.aw-hero-afterwork-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 0.9fr 1.1fr 220px; gap: 48px; align-items: center; min-height: 620px; }
.aw-hero-shapes { position: relative; height: 600px; }
.aw-shape { position: absolute; }
.aw-shape-cobalt { background: var(--aw-cobalt); }
.aw-shape-lime { background: var(--aw-lime); }
.aw-shape-lavender { background: var(--aw-lavender); }
.aw-hero-afterwork-title { font-family: var(--font-display); font-weight: 900; font-size: 120px; line-height: 0.85; letter-spacing: -0.05em; color: var(--aw-cobalt); margin: 0 0 28px; }
.aw-hero-afterwork-tagline { font-size: 22px; line-height: 1.4; color: #000; margin: 0 0 36px; max-width: 30ch; font-weight: 400; }
.aw-hero-afterwork-cta { margin: 0 0 40px; }
.aw-hero-afterwork-cta .aw-btn { padding: 16px 40px; font-size: 16px; }
.aw-newsletter-callout { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 20px; padding: 26px 30px; max-width: 480px; }
.aw-newsletter-callout h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--aw-cobalt); margin: 0 0 12px; line-height: 1.2; letter-spacing: -0.01em; }
.aw-newsletter-callout p { font-size: 14px; line-height: 1.55; color: #000; margin: 0 0 16px; }
.aw-newsletter-callout .aw-card-link { padding-top: 0; margin-top: 0; }

.aw-hero-afterwork-photo { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.aw-photo-circle { width: 150px; height: 150px; border-radius: 50%; background: var(--aw-lavender); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 56px; color: var(--aw-cobalt); overflow: hidden; letter-spacing: -0.04em; }
.aw-photo-circle img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.aw-photo-byline { font-size: 14px; color: #000; font-weight: 500; text-align: center; }

/* Mentee feedback — slim cobalt strip */
.aw-carousel { padding: 32px 0; background: var(--aw-cobalt); color: #fff; position: relative; }
.aw-carousel-track { max-width: 1100px; margin: 0 auto; padding: 0 80px; text-align: center; position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 56px; }
.aw-carousel-slide { display: none; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.aw-carousel-slide.is-active { display: flex; animation: aw-fade 400ms var(--ease-out); }
@keyframes aw-fade { from { opacity: 0; } to { opacity: 1; } }
.aw-carousel-avatar { display: none; }
.aw-carousel-meta { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aw-cobalt); background: var(--aw-lime); padding: 5px 11px; border-radius: 4px; margin: 0; flex-shrink: 0; white-space: nowrap; }
.aw-carousel-meta a { color: var(--aw-cobalt); text-decoration: underline; text-underline-offset: 4px; font-weight: 800; }
.aw-carousel-meta a:hover { color: var(--aw-cobalt); }
.aw-carousel-mark { display: none; }
.aw-carousel-divider { display: none; }
.aw-carousel-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: -0.005em; color: #fff; margin: 0; max-width: 70ch; text-wrap: balance; }
.aw-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 1.5px solid rgba(255,255,255,0.4); background: transparent; color: #fff; border-radius: 999px; cursor: pointer; padding: 0; transition: background 220ms var(--ease-out), border-color 220ms var(--ease-out); display: grid; place-items: center; }
.aw-carousel-arrow:hover { background: rgba(217,251,153,0.15); border-color: var(--aw-lime); color: var(--aw-lime); }
.aw-carousel-arrow.is-prev { left: 16px; }
.aw-carousel-arrow.is-next { right: 16px; }
.aw-carousel-arrow svg { width: 14px; height: 14px; }
.aw-carousel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.aw-carousel-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.5); background: transparent; cursor: pointer; padding: 0; transition: background 220ms, border-color 220ms; }
.aw-carousel-dot.is-active { background: var(--aw-lime); border-color: var(--aw-lime); }

/* Home-page testimonial carousel — cobalt variant for contrast */
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card { background: var(--aw-cobalt); color: #fff; padding: 56px 0 40px; margin-top: 48px; }
#page-home #what-i-offer { padding-top: 64px; }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-quote { color: #fff; border-left-color: var(--aw-lime); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-testimonial-name { color: #fff; }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-testimonial-role { color: rgba(255,255,255,0.8); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-testimonial-role a { color: var(--aw-lime); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-avatar { background: var(--aw-lavender); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-avatar::after { border-color: var(--aw-cobalt); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-avatar-incognito line,
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-avatar-incognito path { stroke: var(--aw-cobalt); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-avatar-incognito rect { fill: var(--aw-cobalt); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-carousel-arrow { border-color: rgba(255,255,255,0.5); color: #fff; }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-carousel-arrow:hover { background: var(--aw-lime); border-color: var(--aw-lime); color: var(--aw-cobalt); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-carousel-dot { border-color: rgba(255,255,255,0.5); }
#page-home .aw-carousel.aw-carousel-card,
#page-workbook .aw-carousel.aw-carousel-card .aw-carousel-dot.is-active { background: var(--aw-lime); border-color: var(--aw-lime); }

/* Newsletter stats — slim cobalt credibility strip */
.aw-stats-strip { background: var(--aw-cobalt); color: #fff; padding: 28px 0; margin: 56px 0; }
.aw-stats-row { max-width: 1180px; margin: 0 auto; padding: 0 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 48px; align-items: center; font-family: var(--font-display); font-size: 14px; font-weight: 700; }
.aw-stat { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.aw-stat-num { font-size: 22px; font-weight: 900; color: var(--aw-lime); letter-spacing: -0.02em; }
@media (max-width: 700px) {
  .aw-stats-row { gap: 14px 28px; font-size: 13px; }
  .aw-stat-num { font-size: 18px; }
}

/* Carousel — home-page style (white card with avatar + quote), compact */
.aw-carousel.aw-carousel-card { background: #fff; padding: 24px 0 56px; color: #000; }
.aw-carousel.aw-carousel-card .aw-carousel-track { max-width: 1100px; padding: 0 64px; min-height: 0; display: block; text-align: left; }
.aw-carousel.aw-carousel-card .aw-carousel-slide { display: none; align-items: center; justify-content: center; gap: 20px; flex-wrap: nowrap; }
.aw-carousel.aw-carousel-card .aw-carousel-slide.is-active { display: flex; }
.aw-carousel.aw-carousel-card .aw-carousel-divider { display: none; }
.aw-carousel.aw-carousel-card .aw-avatar { flex-shrink: 0; width: 56px; height: 56px; font-size: 18px; }
.aw-carousel.aw-carousel-card .aw-avatar::after { width: 16px; height: 16px; bottom: -2px; right: -2px; border-width: 2px; }
.aw-carousel.aw-carousel-card .aw-avatar-blank { background: var(--aw-lavender); }
.aw-carousel.aw-carousel-card .aw-avatar-incognito { width: 100%; height: 100%; display: block; }
.aw-carousel.aw-carousel-card .aw-testimonial-meta { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; min-width: 140px; }
.aw-carousel.aw-carousel-card .aw-testimonial-name { font-size: 15px; }
.aw-carousel.aw-carousel-card .aw-testimonial-role { font-size: 13px; }
.aw-carousel.aw-carousel-card .aw-quote { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: 17px; line-height: 1.55; color: #000; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--aw-lime); flex: 0 1 auto; max-width: 60ch; text-align: justify; }
.aw-carousel.aw-carousel-card .aw-carousel-arrow { border: 1.5px solid var(--aw-cobalt); color: var(--aw-cobalt); width: 32px; height: 32px; }
.aw-carousel.aw-carousel-card .aw-carousel-arrow:hover { background: var(--aw-cobalt); color: #fff; border-color: var(--aw-cobalt); }
.aw-carousel.aw-carousel-card .aw-carousel-arrow svg { width: 14px; height: 14px; }
.aw-carousel.aw-carousel-card .aw-carousel-arrow.is-prev { left: 16px; }
.aw-carousel.aw-carousel-card .aw-carousel-arrow.is-next { right: 16px; }
.aw-carousel.aw-carousel-card .aw-carousel-dots { margin-top: 16px; }
.aw-carousel.aw-carousel-card .aw-carousel-dot { width: 7px; height: 7px; border: 1.5px solid var(--aw-cobalt); background: transparent; }
.aw-carousel.aw-carousel-card .aw-carousel-dot.is-active { background: var(--aw-cobalt); border-color: var(--aw-cobalt); }
@media (max-width: 900px) {
  .aw-carousel.aw-carousel-card { padding: 32px 0; }
  .aw-carousel.aw-carousel-card .aw-carousel-track { padding: 0 64px; }
  .aw-carousel.aw-carousel-card .aw-carousel-arrow.is-prev { left: 12px; }
  .aw-carousel.aw-carousel-card .aw-carousel-arrow.is-next { right: 12px; }
  .aw-carousel.aw-carousel-card .aw-carousel-slide { flex-wrap: wrap; gap: 14px; justify-content: flex-start; }
  .aw-carousel.aw-carousel-card .aw-quote { font-size: 16px; flex: 1 1 100%; padding-left: 14px; }
}

/* Newsletter intro (subscribe block before "what you'll receive") */
.aw-newsletter-intro { padding: 96px 0 72px; text-align: center; }
.aw-newsletter-intro h2 { color: var(--aw-cobalt); margin: 0 0 20px; }
.aw-newsletter-intro p { font-size: 17px; line-height: 1.55; color: #000; margin: 0 0 32px; }
.aw-substack-embed { display: flex; justify-content: center; margin: 0 0 24px; }
.aw-substack-embed iframe { width: 100%; max-width: 420px; border: 0; border-radius: 16px; background: #fff; display: block; }
.aw-substack-fallback { font-size: 14px; margin: 0; }
.aw-substack-fallback a { color: var(--aw-cobalt); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.aw-substack-fallback a:hover { opacity: 0.7; }

/* What you'll receive — lime full-bleed with row layout */
.aw-receive-bleed { background: var(--aw-lime); padding: 96px 0; }
.aw-receive-bleed-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.aw-receive-bleed h2 { color: var(--aw-cobalt); margin: 0 0 64px; }
.aw-receive-rows { display: flex; flex-direction: column; gap: 40px; }
.aw-receive-row { display: grid; grid-template-columns: 1fr 1.7fr; gap: 56px; align-items: start; }
.aw-receive-row-title h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--aw-cobalt); margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.25; }
.aw-receive-row-title p { font-size: 14px; color: var(--aw-cobalt); font-weight: 500; line-height: 1.4; margin: 0; opacity: 0.85; }
.aw-receive-row-body p { font-size: 15px; line-height: 1.65; color: #000; margin: 0; text-align: justify; }
.aw-receive-closing { margin-top: 56px; }
.aw-receive-closing p { font-size: 16px; line-height: 1.65; color: var(--aw-cobalt); margin: 0; font-weight: 500; text-align: justify; }
.aw-receive-subscribe { margin-top: 56px; text-align: center; }
.aw-receive-subscribe .aw-substack-embed { margin-bottom: 16px; }

/* =============================================================
   Page-specific extensions: Mentoring subpage
   ============================================================= */

/* "What is a portfolio career?" — full-bleed lime section */
.aw-portfolio-bleed { background: var(--aw-lime); }
.aw-portfolio-bleed .aw-section-title { color: var(--aw-cobalt); }
.aw-portfolio-bleed .aw-section-title em { background: none; padding: 0; font-style: normal; }
.aw-portfolio-bleed .aw-section-lede { color: #000; }

/* White cards on lime (used for "What is a portfolio career?") */
.aw-cobalt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.aw-cobalt-card { background: #fff; padding: 40px 36px; border-radius: 24px; display: flex; flex-direction: column; opacity: 0; transform: translateY(40px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.aw-cobalt-grid.is-visible .aw-cobalt-card { opacity: 1; transform: translateY(0); }
.aw-cobalt-grid.is-visible .aw-cobalt-card:nth-child(1) { transition-delay: 0ms; }
.aw-cobalt-grid.is-visible .aw-cobalt-card:nth-child(2) { transition-delay: 180ms; }
.aw-cobalt-grid.is-visible .aw-cobalt-card:nth-child(3) { transition-delay: 360ms; }
.aw-cobalt-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; color: var(--aw-cobalt); margin-bottom: 28px; text-transform: uppercase; }
.aw-cobalt-title { font-family: var(--font-display); font-weight: 900; font-size: 38px; line-height: 1.02; letter-spacing: -0.022em; color: var(--aw-cobalt); margin: 0 0 24px; }
.aw-cobalt-body { font-size: 17px; line-height: 1.6; color: #000; margin: 0; }

@media (max-width: 900px) {
  .aw-cobalt-grid { grid-template-columns: 1fr; }
  .aw-cobalt-title { font-size: 30px; }
}


/* Framework section — compressed cobalt block with white pillar icons */
.aw-framework-cobalt { background: var(--aw-cobalt); color: #fff; padding: 96px 0; }
.aw-framework-cobalt-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; }
.aw-framework-cobalt-head { padding-top: 8px; }
.aw-framework-cobalt-body p { font-size: 17px; line-height: 1.6; color: #fff; opacity: 0.95; margin: 0 0 28px; max-width: 60ch; }
.aw-framework-cobalt-body p strong { color: #fff; }
.aw-framework-cobalt-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.aw-fw-btn-primary { background: var(--aw-lime); color: var(--aw-cobalt); border: 1.5px solid var(--aw-lime); }
.aw-fw-btn-primary:hover { background: #fff; border-color: #fff; color: var(--aw-cobalt); }
.aw-fw-btn-secondary { background: transparent; color: var(--aw-lime); border: 1.5px solid var(--aw-lime); }
.aw-fw-btn-secondary:hover { background: var(--aw-lime); color: var(--aw-cobalt); }

/* Pillar icons row */
.aw-fw-icons { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 32px; }
.aw-fw-icon { flex: 1 1 0; min-width: 88px; border-radius: 18px; background: rgba(217,251,153,0.12); padding: 16px 8px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; transition: background 220ms var(--ease-out), transform 220ms var(--ease-out); }
.aw-fw-icon:hover { background: rgba(217,251,153,0.25); transform: translateY(-3px); }
.aw-fw-icon-img { width: 44px; height: 44px; object-fit: contain; filter: brightness(0) invert(1); }
.aw-fw-icon-num { font-family: var(--font-display); font-size: 10px; font-weight: 800; color: var(--aw-lime); letter-spacing: 0.16em; }
.aw-fw-icon-name { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: #fff; line-height: 1; }
.aw-fw-tab.is-active { background: var(--aw-cobalt); border-color: var(--aw-cobalt); }
.aw-fw-tab.is-active img { opacity: 1; filter: brightness(0) invert(1); }
.aw-fw-tab-num { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.16em; color: var(--aw-cobalt); }
.aw-fw-tab.is-active .aw-fw-tab-num { color: var(--aw-lime); }
.aw-fw-tab-name { font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--aw-cobalt); letter-spacing: -0.01em; }
.aw-fw-tab.is-active .aw-fw-tab-name { color: #fff; }

@media (max-width: 900px) {
  .aw-fw-stage { padding: 32px; }
  .aw-fw-slide { grid-template-columns: 1fr; gap: 32px; }
  .aw-fw-slide h3 { font-size: 36px; }
  .aw-fw-tabs { grid-template-columns: repeat(3, 1fr); }
}

/* Transition Package, lime full-bleed */
/* Portfolio Career Transition Package — split layout with collapsible stages */
.aw-package-bleed { background: var(--aw-lime); padding: 96px 0; }
.aw-package-bleed-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

.aw-package-header { text-align: center; max-width: 880px; margin: 0 auto 64px; }
.aw-package-header .aw-section-title { color: var(--aw-cobalt); font-size: 52px; margin: 0 auto; text-wrap: balance; }

.aw-package-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }

/* Left side: package eyebrow + context paragraph */
.aw-package-ctx { text-align: center; }
.aw-package-eyebrow { display: inline-block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: var(--aw-lime); background: var(--aw-cobalt); padding: 6px 12px; border-radius: 4px; margin-bottom: 20px; }
.aw-package-ctx-body { font-size: 16px; line-height: 1.65; color: #000; margin: 0; text-align: justify; }
.aw-package-ctx-body a { color: var(--aw-cobalt); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.aw-package-ctx-body a:hover { opacity: 0.7; }

/* Right side: collapsible stages */
.aw-package-stages { border-top: 1.5px solid rgba(29,64,186,0.3); }
.aw-package-stage { border-bottom: 1.5px solid rgba(29,64,186,0.3); }
.aw-package-stage-head { display: grid; grid-template-columns: 56px 1fr auto 28px; gap: 24px; align-items: center; padding: 20px 0; cursor: pointer; }
.aw-package-stage-num { font-family: var(--font-display); font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: var(--aw-cobalt); }
.aw-package-stage-name { font-family: var(--font-display); font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--aw-cobalt); margin: 0; transition: color 220ms; }
.aw-package-stage-head:hover .aw-package-stage-name { text-decoration: underline; text-underline-offset: 4px; }
.aw-package-stage-tag { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: var(--aw-lime); background: var(--aw-cobalt); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.aw-package-stage-toggle { width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--aw-cobalt); background: transparent; color: var(--aw-cobalt); display: grid; place-items: center; font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1; flex-shrink: 0; cursor: pointer; padding: 0; transition: transform 320ms var(--ease-out), background 220ms var(--ease-out), color 220ms var(--ease-out); }
.aw-package-stage.is-open .aw-package-stage-toggle { background: var(--aw-cobalt); color: var(--aw-lime); transform: rotate(45deg); }
.aw-package-stage-detail { max-height: 0; overflow: hidden; transition: max-height 360ms var(--ease-out), padding 360ms var(--ease-out); }
.aw-package-stage.is-open .aw-package-stage-detail { max-height: 320px; padding: 0 0 24px 80px; }
.aw-package-stage-detail-inner { font-size: 15px; line-height: 1.6; color: var(--aw-cobalt); max-width: 60ch; }

/* Below the grid */
.aw-package-extras { margin: 64px 0 0; }
.aw-package-extras p { font-size: 15px; line-height: 1.65; color: #000; margin: 0 0 32px; text-align: justify; }
.aw-package-cta-wrap { text-align: center; }

/* Success stories, lime full-bleed with cards */
/* About Iwana — Mentoring page section */
.aw-mentor-about { background: #fff; padding: 96px 0; }
.aw-mentor-about-grid { display: grid; grid-template-columns: 200px 1fr auto; gap: 48px; align-items: center; }
.aw-mentor-photo { width: 200px; height: 200px; background: var(--aw-lavender); border-radius: 999px; overflow: hidden; position: relative; flex-shrink: 0; }
.aw-mentor-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-mentor-text .aw-section-title { font-size: 40px; }
.aw-mentor-text p { font-size: 16px; line-height: 1.65; color: #000; margin: 0 0 16px; max-width: 56ch; }
.aw-mentor-pills { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 220px; }
.aw-mentor-pill { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 999px; padding: 8px 16px; font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--aw-cobalt); white-space: nowrap; }
.aw-mentor-cta { margin-top: 24px; }
@media (max-width: 900px) {
  .aw-mentor-about { padding: 64px 0; }
  .aw-mentor-about-grid { grid-template-columns: 1fr; gap: 28px; justify-items: start; }
  .aw-mentor-photo { width: 160px; height: 160px; }
  .aw-mentor-text .aw-section-title { font-size: 32px; }
  .aw-mentor-pills { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .aw-mentor-pill { white-space: normal; }
}

/* Mentee stories — lime full-bleed, read-more cards */
.aw-stories-bleed { background: var(--aw-lime); padding: 96px 0; }
.aw-stories-bleed-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.aw-stories-bleed .aw-section-title { color: var(--aw-cobalt); text-align: left; }
.aw-stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; align-items: start; }
.aw-story { background: #fff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.aw-story-head { display: flex; gap: 14px; align-items: center; }
.aw-story-avatar { width: 56px; height: 56px; border-radius: 999px; background: var(--aw-lavender); overflow: hidden; flex-shrink: 0; }
.aw-story-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-story-name { font-family: var(--font-display); font-weight: 800; color: var(--aw-cobalt); font-size: 16px; text-decoration: none; display: block; line-height: 1.2; }
.aw-story-name:hover { text-decoration: underline; }
.aw-story-tag { display: inline-block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--aw-cobalt); margin-top: 4px; }
.aw-story-quote { font-size: 15px; line-height: 1.55; color: #000; margin: 0; font-style: italic; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.aw-story.is-expanded .aw-story-quote { display: block; -webkit-line-clamp: unset; overflow: visible; }
.aw-story-context { font-size: 14px; line-height: 1.55; color: #000; margin: 0; display: none; padding-top: 12px; border-top: 1px solid var(--aw-lavender); }
.aw-story-context a { color: var(--aw-cobalt); text-decoration: underline; font-weight: 600; }
.aw-story.is-expanded .aw-story-context { display: block; }
.aw-story-toggle { align-self: flex-start; background: transparent; border: 0; padding: 4px 0; font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--aw-cobalt); cursor: pointer; border-bottom: 2px solid var(--aw-lime); transition: background 200ms var(--ease-out); }
.aw-story-toggle:hover { background: var(--aw-lime); }

/* =============================================================
   Page-specific extensions: Workbook subpage (fresh design)
   ============================================================= */

/* Hero with floating cover and CTA stack */
/* Workbook · Who is this for? — text-only cards with highlighted value statement */
.aw-wb-who { padding: 96px 0; }
.aw-wb-who .aw-section-title { text-align: center; }
.aw-wb-who .aw-section-lede { text-align: justify; max-width: none; margin: 0 0 56px; }
.aw-wb-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.aw-wb-who-card { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 24px; padding: 32px 28px; display: flex; flex-direction: column; gap: 16px; }
.aw-wb-who-eye { display: inline-block; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aw-cobalt); margin: 0 0 4px; }
.aw-wb-who-card h3 { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: var(--aw-cobalt); margin: 0; }
.aw-wb-who-card > p { font-size: 15px; line-height: 1.65; color: #000; margin: 0; text-align: justify; }
.aw-wb-who-gives { background: var(--aw-lime); border-radius: 16px; padding: 18px 20px; margin-top: auto; }
.aw-wb-who-gives-label { display: inline-block; font-family: var(--font-display); font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aw-cobalt); padding: 4px 8px; background: var(--aw-cobalt); color: var(--aw-lime); border-radius: 4px; margin-bottom: 10px; }
.aw-wb-who-gives p { font-size: 14px; line-height: 1.6; color: var(--aw-cobalt); margin: 0; font-weight: 500; text-align: justify; }
@media (max-width: 900px) {
  .aw-wb-who { padding: 64px 0; }
  .aw-wb-who-grid { grid-template-columns: 1fr; }
}

.aw-wb-hero { padding: 72px 0 96px; }
.aw-wb-hero-grid { max-width: 1160px; margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: center; }
.aw-wb-hero-visual { display: grid; place-items: center; }
.aw-wb-cover-large { width: 100%; max-width: 360px; aspect-ratio: 3/4; background: var(--aw-cobalt); border-radius: 8px; padding: 32px 28px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-3deg); box-shadow: 0 30px 60px -10px rgba(29, 64, 186, 0.4), 0 60px 120px -20px rgba(0, 0, 0, 0.15); position: relative; }
.aw-wb-cover-large::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(0,0,0,0.18), transparent); border-radius: 0 8px 8px 0; }

/* Image-based cover variant (uses real cover PNG) */
.aw-wb-cover-img { width: 100%; max-width: 380px; aspect-ratio: 1 / 1.414; border-radius: 8px; transform: rotate(-3deg); box-shadow: 0 30px 60px -10px rgba(29, 64, 186, 0.4), 0 60px 120px -20px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; background: var(--aw-cobalt); }
.aw-wb-cover-img::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 6px; background: linear-gradient(to right, rgba(0,0,0,0.22), transparent); z-index: 2; pointer-events: none; }
.aw-wb-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-wb-cover-top { color: var(--aw-lime); font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.22em; }
.aw-wb-cover-top + .aw-wb-cover-top { color: var(--aw-lavender); margin-top: 4px; letter-spacing: 0.18em; }
.aw-wb-cover-illustration { display: grid; place-items: center; flex: 1; padding: 16px 0; }
.aw-wb-cover-illustration img { width: 70%; height: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.aw-wb-cover-bottom { }
.aw-wb-cover-pillar { color: var(--aw-lavender); font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.22em; margin-bottom: 6px; }
.aw-wb-cover-bottom h3 { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 0.95; letter-spacing: -0.03em; color: var(--aw-lime); margin: 0 0 8px; }
.aw-wb-cover-sub { color: var(--aw-lavender); font-size: 15px; }
.aw-wb-cover-author { color: var(--aw-lime); font-size: 12px; margin-top: 24px; font-weight: 500; }

.aw-wb-hero-title { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1.05; letter-spacing: -0.025em; color: var(--aw-cobalt); margin: 14px 0 24px; }
.aw-wb-hero-title em { font-style: normal; background: linear-gradient(transparent 62%, var(--aw-lime) 62%, var(--aw-lime) 92%, transparent 92%); padding: 0 4px; font-weight: 900; }
.aw-wb-hero-lede { font-size: 19px; line-height: 1.55; color: #000; margin: 0 0 32px; font-weight: 400; }

.aw-wb-meta-line { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid rgba(29, 64, 186, 0.2); border-bottom: 1px solid rgba(29, 64, 186, 0.2); margin: 0 0 32px; }
.aw-wb-price-large { font-family: var(--font-display); font-weight: 900; font-size: 36px; color: var(--aw-cobalt); letter-spacing: -0.025em; line-height: 1; }
.aw-wb-meta-facts { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #000; }
.aw-wb-meta-facts span { display: inline-flex; align-items: center; gap: 8px; }
.aw-wb-meta-facts span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--aw-cobalt); }

/* The why, lime full-bleed with pull quote and 5-pillar mini visualization */
.aw-wb-why { background: var(--aw-lime); padding: 96px 0; }
.aw-wb-why-inner { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.aw-wb-why-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; margin: 0 0 56px; }
.aw-wb-why-eyebrow { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: var(--aw-lime); background: var(--aw-cobalt); padding: 8px 14px; border-radius: 4px; margin: 0 0 20px; }
.aw-wb-why-title { font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1; letter-spacing: -0.025em; color: var(--aw-cobalt); margin: 0; text-wrap: balance; }
.aw-wb-pull { font-family: var(--font-display); font-weight: 400; font-style: normal; font-size: 18px; line-height: 1.65; color: var(--aw-cobalt); margin: 0; letter-spacing: -0.005em; }
.aw-wb-pull strong { font-weight: 800; }
.aw-wb-pull em { font-style: normal; font-weight: 800; }
@media (max-width: 800px) {
  .aw-wb-why-head { grid-template-columns: 1fr; gap: 24px; }
  .aw-wb-why-title { font-size: 36px; }
}

/* Workbook · Where this fits — clickable pillar tiles on lime */
.aw-wb-pillars { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
.aw-wb-pillar { flex: 1 1 0; min-width: 88px; border-radius: 18px; background: rgba(29,64,186,0.12); padding: 16px 8px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; transition: background 220ms var(--ease-out), transform 220ms var(--ease-out); }
.aw-wb-pillar:hover { background: rgba(29,64,186,0.22); transform: translateY(-3px); }
.aw-wb-pillar.is-current { background: var(--aw-cobalt); }
.aw-wb-pillar.is-current:hover { background: var(--aw-cobalt); }
.aw-wb-pillar-img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.aw-wb-pillar.is-current .aw-wb-pillar-img { filter: brightness(0) invert(1); mix-blend-mode: normal; }
.aw-wb-pillar-num { font-family: var(--font-display); font-size: 10px; font-weight: 800; color: var(--aw-cobalt); letter-spacing: 0.16em; }
.aw-wb-pillar.is-current .aw-wb-pillar-num { color: var(--aw-lime); }
.aw-wb-pillar-name { font-family: var(--font-display); font-size: 13px; font-weight: 800; color: var(--aw-cobalt); line-height: 1; }
.aw-wb-pillar.is-current .aw-wb-pillar-name { color: #fff; }

/* Take a look inside, interactive page browser */
.aw-wb-browser { margin-top: 48px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: stretch; }
.aw-wb-browser-stage { background: var(--aw-cream-100); border-radius: 24px; padding: 32px; min-height: 540px; display: grid; place-items: center; position: relative; overflow: hidden; }
.aw-wb-browser-stage::before { content: 'Page ' attr(data-page-label); position: absolute; top: 16px; right: 20px; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; color: var(--aw-cobalt); opacity: 0.4; }
.aw-wb-page { display: none; width: 100%; max-width: 460px; }
.aw-wb-page.is-active { display: block; animation: aw-wb-fade 280ms var(--ease-out); }
@keyframes aw-wb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.aw-wb-page-image { width: 100%; aspect-ratio: 1 / 1.414; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(29, 64, 186, 0.15); overflow: hidden; }
.aw-wb-page-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* Real workbook pages — faithful renders of v4 cover, contents, back cover */
.aw-wb-real { aspect-ratio: 1 / 1.414; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(29,64,186,0.18); overflow: hidden; font-family: var(--font-body); display: flex; flex-direction: column; }

/* COVER */
.aw-wb-real.cover { padding: 0; background: var(--aw-cobalt); }
.aw-wb-real-cover-sky { flex: 0 0 56%; position: relative; overflow: hidden; }
.aw-wb-real-cover-sky svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.aw-wb-real-cover-header { position: absolute; top: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.aw-wb-real-cover-brand { font-family: var(--font-display); font-weight: 900; font-size: 13px; color: var(--aw-cobalt); letter-spacing: -0.02em; }
.aw-wb-real-cover-tag { text-align: right; }
.aw-wb-real-cover-tag div:first-child { font-family: var(--font-display); font-weight: 800; font-size: 8px; color: var(--aw-cobalt); letter-spacing: 0.18em; text-transform: uppercase; }
.aw-wb-real-cover-tag div:last-child { font-family: var(--font-display); font-weight: 700; font-size: 8px; color: var(--aw-cobalt); opacity: 0.6; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; }
.aw-wb-real-cover-bottom { flex: 1; padding: 18px 24px 22px; color: #fff; display: flex; flex-direction: column; }
.aw-wb-real-cover-bottom > h1 { font-family: var(--font-display); font-size: 64px; font-weight: 900; color: var(--aw-lime); line-height: 0.95; letter-spacing: -0.03em; margin: auto 0 8px; text-align: center; }
.aw-wb-real-cover-pillar { font-family: var(--font-display); font-weight: 800; font-size: 9px; color: var(--aw-lime); letter-spacing: 0.22em; text-transform: uppercase; text-align: center; margin-bottom: 14px; }
.aw-wb-real-cover-intro { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,0.92); text-align: center; margin: 0 auto auto; max-width: 28ch; }
.aw-wb-real-cover-foot { padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.3); display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.aw-wb-real-cover-foot-text { font-family: var(--font-display); font-weight: 800; font-size: 8px; color: rgba(255,255,255,0.9); letter-spacing: 0.16em; text-transform: uppercase; }
.aw-wb-real-cover-foot-pill { background: var(--aw-lime); color: var(--aw-cobalt); font-family: var(--font-display); font-weight: 800; font-size: 8px; letter-spacing: 0.14em; padding: 3px 8px; border-radius: 999px; }

/* CONTENTS */
.aw-wb-real.contents { background: var(--aw-cream); padding: 22px 24px 14px; }
.aw-wb-real-eye { font-family: var(--font-display); font-weight: 800; font-size: 8px; color: var(--aw-cobalt); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; }
.aw-wb-real-title { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--aw-cobalt); line-height: 1.05; letter-spacing: -0.01em; margin: 0 0 8px; }
.aw-wb-real-title span { background: linear-gradient(180deg, transparent 55%, var(--aw-lime) 55%, var(--aw-lime) 92%, transparent 92%); padding: 0 4px; }
.aw-wb-real-divider { height: 1px; background: var(--aw-lavender); margin: 6px 0 8px; }
.aw-wb-real-sub { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--aw-cobalt); line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; }
.aw-wb-real-intro { font-size: 9px; font-weight: 400; color: #333; line-height: 1.55; margin: 0 0 12px; text-align: justify; }
.aw-wb-real-intro em { font-style: italic; color: var(--aw-cobalt); font-weight: 700; }
.aw-wb-toc { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.aw-wb-toc-section-eye { font-family: var(--font-display); font-weight: 800; font-size: 7px; color: var(--aw-cobalt); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 4px; }
.aw-wb-toc-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: baseline; padding: 1.5px 0; line-height: 1.35; }
.aw-wb-toc-row .num { font-family: var(--font-display); font-weight: 800; font-size: 8px; color: var(--aw-cobalt); }
.aw-wb-toc-row .num-wide { width: 32px; }
.aw-wb-toc-row > span:last-child { font-size: 9px; color: #444; font-weight: 400; }
.aw-wb-toc-row strong { color: var(--aw-cobalt); font-weight: 700; }
.aw-wb-quick-note { position: relative; background: #fff; border: 1px solid var(--aw-lavender); border-radius: 8px; padding: 14px 14px 12px; margin-top: auto; }
.aw-wb-quick-note-tag { position: absolute; top: -6px; right: 12px; background: var(--aw-cobalt); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 6.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; }
.aw-wb-quick-note p { font-size: 8.5px; line-height: 1.55; color: #444; margin: 0; text-align: justify; }
.aw-wb-real-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 7px; color: var(--aw-cobalt); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; }

/* ABOUT (back cover) */
.aw-wb-real.about { padding: 0; background: var(--aw-cobalt); }
.aw-wb-real-strip { height: 8px; background: var(--aw-lime); flex-shrink: 0; }
.aw-wb-real-about-main { flex: 1; background: var(--aw-cobalt); color: #fff; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.aw-wb-real-about-logo { font-family: var(--font-display); font-weight: 900; font-size: 18px; color: #fff; letter-spacing: -0.02em; text-align: center; }
.aw-wb-real-about-block { padding-bottom: 4px; }
.aw-wb-real-about-h { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: #fff; line-height: 1.2; margin: 0 0 4px; padding-bottom: 2px; border-bottom: 1.5px solid var(--aw-lime); display: inline-block; }
.aw-wb-real-about-block p { font-size: 9px; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0 0 5px; text-align: justify; }
.aw-wb-real-about-block p strong { color: var(--aw-lime); font-weight: 700; }
.aw-wb-real-link { font-family: var(--font-display); font-size: 8.5px; font-weight: 800; color: var(--aw-lime); text-decoration: underline; text-decoration-color: var(--aw-lime); text-underline-offset: 2px; }
.aw-wb-real-about-urls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.aw-wb-real-url-box { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 6px 8px; text-decoration: none; }
.aw-wb-real-url-box .label { font-family: var(--font-display); font-weight: 800; font-size: 6.5px; color: var(--aw-lime); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 2px; }
.aw-wb-real-url-box .value { font-family: var(--font-display); font-weight: 700; font-size: 9px; color: #fff; }
.aw-wb-real-about-iwana h3 { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #fff; margin: 0 0 2px; }
.aw-wb-real-about-iwana .role { font-family: var(--font-display); font-weight: 700; font-size: 8px; color: var(--aw-lime); margin-bottom: 8px; }
.aw-wb-real-about-iwana .grid { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: start; }
.aw-wb-real-about-iwana .portrait { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid var(--aw-lime); }
.aw-wb-real-about-iwana .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-wb-real-about-iwana .bio p { font-size: 8px; line-height: 1.5; color: rgba(255,255,255,0.9); margin: 0 0 4px; text-align: justify; }
.aw-wb-real-connect { display: inline-block; margin-top: 8px; font-family: var(--font-display); font-size: 8px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; text-decoration: none; }
.aw-wb-real-connect span { color: var(--aw-lime); text-decoration: underline; text-underline-offset: 2px; }


/* HTML-recreated workbook page (page 10 — Guiding Principles, body text blurred) */
.aw-wb-html-page { background: #fff !important; padding: 0 !important; overflow: hidden; position: relative; }
.ph { width: 100%; height: 100%; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); color: #000; box-sizing: border-box; }
.ph * { box-sizing: border-box; }

.ph-header { background: var(--aw-lime); border-radius: 10px; padding: 14px 16px 18px; }
.ph-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 8px; color: var(--aw-cobalt); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 6px; }
.ph-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--aw-cobalt); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; }
.ph-header-paras { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ph-header-paras p { font-size: 7px; line-height: 1.5; color: #1a1a1a; margin: 0; }

.ph-intro { font-size: 7.5px; line-height: 1.55; color: #333; margin: 0; padding: 0 4px; text-align: justify; }

.ph-section { border-radius: 10px; padding: 10px 12px; }
.ph-section-cobalt { background: var(--aw-cobalt); }
.ph-section-cobalt .ph-section-title { color: #fff; }
.ph-section-lime { background: var(--aw-lime); }
.ph-section-lavender { background: var(--aw-lavender); }
.ph-section-title { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--aw-cobalt); margin: 0 0 8px; letter-spacing: -0.01em; }
.ph-cards-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-card { background: #fff; border-radius: 8px; padding: 8px 10px; }
.ph-card-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.ph-card-num { width: 13px; height: 13px; border-radius: 50%; background: var(--aw-cobalt); color: var(--aw-lime); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 7px; flex-shrink: 0; }
.ph-card-title { font-family: var(--font-display); font-weight: 800; font-size: 9px; color: var(--aw-cobalt); margin: 0; line-height: 1; filter: blur(2.5px); user-select: none; }
.ph-card-body { font-size: 6.5px; line-height: 1.45; color: #333; margin: 0; filter: blur(2.5px); user-select: none; }

.ph-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 6px; }
.ph-footer .ph-logo { height: 14px; width: auto; display: block; }
.ph-footer .ph-page-num { font-family: var(--font-body); font-weight: 400; font-size: 8px; color: var(--aw-cobalt); }
.ph-footer .ph-url { font-family: var(--font-display); font-weight: 700; font-size: 7px; color: var(--aw-cobalt); letter-spacing: 0; }


/* Build Your Experiments page (recreated, body content blurred) */
.bx { width: 100%; height: 100%; padding: 16px 18px 12px; display: flex; flex-direction: column; gap: 10px; font-family: var(--font-body); color: #000; box-sizing: border-box; }
.bx * { box-sizing: border-box; }

.bx-header { background: var(--aw-lime); border-radius: 10px; padding: 14px 16px 16px; }
.bx-eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 8px; color: var(--aw-cobalt); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 4px; }
.bx-title { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--aw-cobalt); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; }
.bx-sub { font-family: var(--font-display); font-weight: 800; font-size: 8.5px; color: var(--aw-cobalt); margin-bottom: 5px; }
.bx-header-paras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bx-header-paras p { font-size: 7px; line-height: 1.5; color: #1a1a1a; margin: 0; text-align: justify; }

.bx-examples { background: var(--aw-lavender); border-radius: 10px; padding: 10px 12px; }
.bx-examples-title { font-family: var(--font-display); font-weight: 800; font-size: 9px; color: var(--aw-cobalt); margin-bottom: 6px; }
.bx-examples-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bx-track { font-family: var(--font-display); font-weight: 800; font-size: 8.5px; color: var(--aw-cobalt); margin-bottom: 1px; }
.bx-track-sub { font-style: italic; font-size: 6.5px; color: var(--aw-cobalt); opacity: 0.85; margin-bottom: 4px; }
.bx-examples-col ul { list-style: none; padding: 0; margin: 0; }
.bx-examples-col ul li { font-size: 6.5px; line-height: 1.45; color: var(--aw-cobalt); padding: 1.5px 0 1.5px 8px; position: relative; }
.bx-examples-col ul li::before { content: '·'; position: absolute; left: 2px; top: -1px; font-size: 10px; }

.bx-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.bx-table thead th { background: var(--aw-cobalt); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 7px; padding: 6px 6px; text-align: left; letter-spacing: 0; }
.bx-table thead th:first-child { padding-left: 10px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.bx-table thead th:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.bx-table tbody td { padding: 6px 6px; font-size: 7px; line-height: 1.4; color: #555; font-style: italic; border-bottom: 1px solid rgba(29,64,186,0.12); }
.bx-table tbody td.bx-row-num { background: var(--aw-lime); font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--aw-cobalt); text-align: center; padding: 6px; font-style: normal; width: 28px; }

.bx-reflection-title { font-family: var(--font-display); font-weight: 800; font-size: 8.5px; color: var(--aw-cobalt); margin-bottom: 5px; }
.bx-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bx-prompt { border: 1px solid var(--aw-cobalt); border-radius: 999px; padding: 5px 10px; font-family: var(--font-display); font-weight: 800; font-size: 6.5px; color: var(--aw-cobalt); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; }

.bx-blur { filter: blur(2.5px); user-select: none; }


/* Workbook · By the end, you'll have — outcomes (lime full-bleed) */
.aw-wb-outcomes { background: var(--aw-lime); padding: 96px 0; }
.aw-wb-outcomes-inner { max-width: 1080px; margin: 0 auto; padding: 0 32px; }
.aw-wb-outcomes-title { text-align: center; color: var(--aw-cobalt); margin: 0 auto 16px; }
.aw-wb-outcomes-lede { text-align: center; font-size: 17px; line-height: 1.55; color: var(--aw-cobalt); margin: 0 auto 64px; max-width: 60ch; }
.aw-wb-outcomes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.aw-wb-outcome { display: grid; grid-template-columns: 36px 1fr; gap: 18px; align-items: start; padding: 22px 0; border-top: 1px solid rgba(29,64,186,0.3); }
.aw-wb-outcome:nth-last-child(-n+2) { border-bottom: 1px solid rgba(29,64,186,0.3); }
.aw-wb-outcome-num { width: 30px; height: 30px; border-radius: 999px; background: var(--aw-cobalt); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.04em; margin-top: 2px; }
.aw-wb-outcome-body h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--aw-cobalt); margin: 0 0 6px; line-height: 1.2; letter-spacing: -0.01em; }
.aw-wb-outcome-body p { font-size: 14px; line-height: 1.55; color: var(--aw-cobalt); margin: 0; }

@media (max-width: 800px) {
  .aw-wb-outcomes { padding: 64px 0; }
  .aw-wb-outcomes-grid { grid-template-columns: 1fr; gap: 0; }
  .aw-wb-outcome:nth-last-child(-n+2) { border-bottom: none; }
  .aw-wb-outcome:last-child { border-bottom: 1px solid rgba(29,64,186,0.3); }
}


/* Mockup pages styled like A4 workbook pages */
.aw-wb-page-mockup { aspect-ratio: 1 / 1.414; background: #fff; border-radius: 8px; box-shadow: 0 12px 40px rgba(29, 64, 186, 0.15); padding: 36px 32px; font-family: var(--font-body); display: flex; flex-direction: column; }
.aw-wb-page-mockup .eyebrow { font-family: var(--font-display); font-weight: 800; font-size: 10px; letter-spacing: 0.22em; color: var(--aw-cobalt); margin: 0 0 8px; }
.aw-wb-page-mockup h2 { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--aw-cobalt); margin: 0 0 6px; line-height: 1.1; letter-spacing: -0.02em; }
.aw-wb-page-mockup h2 em { font-style: normal; background: var(--aw-lime); padding: 0 4px; }
.aw-wb-page-mockup .lede { font-size: 12px; color: #555; margin: 0 0 20px; line-height: 1.45; }
.aw-wb-page-mockup .footer { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; font-size: 9px; color: #aaa; letter-spacing: 0.1em; text-transform: uppercase; }
.aw-wb-prompt { display: grid; grid-template-columns: 28px 1fr; gap: 12px; margin-bottom: 12px; align-items: start; }
.aw-wb-prompt-num { font-family: var(--font-display); font-weight: 800; font-size: 13px; color: var(--aw-cobalt); }
.aw-wb-prompt h3 { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--aw-cobalt); margin: 0 0 3px; }
.aw-wb-prompt p { font-size: 11px; color: #444; line-height: 1.45; margin: 0; }
.aw-wb-fill { margin-bottom: 16px; }
.aw-wb-fill-label { font-size: 11px; color: var(--aw-cobalt); font-weight: 600; margin-bottom: 6px; font-family: var(--font-display); }
.aw-wb-fill-line { height: 1.5px; background: var(--aw-lavender); margin-bottom: 4px; }
.aw-wb-fill-line:nth-child(2) { width: 92%; }
.aw-wb-fill-line:nth-child(3) { width: 78%; }
.aw-wb-themes { padding-left: 0; list-style: none; counter-reset: theme; }
.aw-wb-themes li { counter-increment: theme; padding: 8px 0; border-bottom: 1px dashed var(--aw-lavender); display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: center; font-size: 11px; color: #555; }
.aw-wb-themes li::before { content: counter(theme); font-family: var(--font-display); font-weight: 800; color: var(--aw-cobalt); font-size: 12px; }
.aw-wb-themes-callout { margin-top: 12px; padding: 12px 14px; background: var(--aw-cream-100); border-left: 3px solid var(--aw-lime); border-radius: 0 6px 6px 0; font-size: 11px; color: var(--aw-cobalt); line-height: 1.45; }
.aw-wb-table { width: 100%; border-collapse: collapse; font-size: 10px; margin-top: 8px; }
.aw-wb-table th { font-family: var(--font-display); font-weight: 800; font-size: 9px; color: var(--aw-cobalt); letter-spacing: 0.1em; text-transform: uppercase; text-align: left; padding: 6px 8px; border-bottom: 1.5px solid var(--aw-cobalt); }
.aw-wb-table td { padding: 8px; border-bottom: 1px solid var(--aw-lavender); color: #555; vertical-align: top; }

/* Browser nav (thumbnail buttons) */
.aw-wb-browser-nav { display: flex; flex-direction: column; gap: 8px; }
.aw-wb-nav-btn { background: transparent; border: 1.5px solid transparent; border-radius: 14px; padding: 16px 18px; cursor: pointer; text-align: left; display: grid; grid-template-columns: 32px 1fr auto; gap: 14px; align-items: center; transition: background 200ms, border-color 200ms; font-family: var(--font-body); }
.aw-wb-nav-btn:hover { background: var(--aw-cream-100); }
.aw-wb-nav-btn.is-active { background: var(--aw-cobalt); border-color: var(--aw-cobalt); }
.aw-wb-nav-btn-num { font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; color: var(--aw-cobalt); }
.aw-wb-nav-btn.is-active .aw-wb-nav-btn-num { color: var(--aw-lime); }
.aw-wb-nav-btn-label { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--aw-cobalt); letter-spacing: -0.01em; }
.aw-wb-nav-btn.is-active .aw-wb-nav-btn-label { color: #fff; }
.aw-wb-nav-btn-arrow { color: var(--aw-cobalt); opacity: 0.4; transition: opacity 200ms, transform 200ms; }
.aw-wb-nav-btn:hover .aw-wb-nav-btn-arrow { opacity: 1; transform: translateX(2px); }
.aw-wb-nav-btn.is-active .aw-wb-nav-btn-arrow { color: var(--aw-lime); opacity: 1; }

/* Four exercises summary cards */
.aw-wb-exercises-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.aw-wb-ex-card { background: #fff; border: 1.5px solid var(--aw-cobalt); border-radius: 24px; padding: 28px; transition: background 220ms; }
.aw-wb-ex-card:hover { background: var(--aw-lime); }
.aw-wb-ex-card-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.aw-wb-ex-card-num { font-family: var(--font-display); font-weight: 900; font-size: 40px; color: var(--aw-cobalt); line-height: 0.9; letter-spacing: -0.04em; }
.aw-wb-ex-card-name { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--aw-cobalt); letter-spacing: -0.01em; line-height: 1.2; }
.aw-wb-ex-card p { font-size: 14px; line-height: 1.55; color: #000; margin: 0; }

/* How it works horizontal flow */
.aw-wb-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; align-items: stretch; }
.aw-wb-flow-step { padding: 28px 22px; background: var(--aw-lavender); border-radius: 18px; position: relative; }
.aw-wb-flow-step .step { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 0.14em; color: var(--aw-cobalt); background: rgba(255,255,255,0.5); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }
.aw-wb-flow-step h3 { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--aw-cobalt); margin: 0 0 8px; letter-spacing: -0.01em; line-height: 1.25; }
.aw-wb-flow-step p { font-size: 13px; line-height: 1.5; color: var(--aw-cobalt); margin: 0; opacity: 0.85; }
.aw-wb-flow-step::after { content: '→'; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--aw-cobalt); z-index: 2; opacity: 0.4; }
.aw-wb-flow-step:last-child::after { display: none; }

/* Mobile */
@media (max-width: 900px) {
  .aw-wb-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .aw-wb-hero-title { font-size: 36px; }
  .aw-wb-pillar { min-width: 70px; }
  .aw-wb-pillar-img { width: 36px; height: 36px; }
  .aw-wb-pull { font-size: 16px; }
  .aw-wb-browser { grid-template-columns: 1fr; }
  .aw-wb-browser-stage { min-height: 420px; }
  .aw-wb-exercises-grid { grid-template-columns: 1fr; }
  .aw-wb-flow { grid-template-columns: 1fr; }
  .aw-wb-flow-step::after { content: '↓'; right: 50%; top: auto; bottom: -16px; transform: translateX(50%); }
}

/* =============================================================
   Page-specific extensions: About me subpage
   ============================================================= */

/* Hero with circular portrait (no lavender tile) */
.aw-photo-portrait { aspect-ratio: 1 / 1; max-width: 294px; margin: 0 auto; border-radius: 50%; overflow: hidden; position: relative; }
.aw-photo-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.aw-about-links { display: flex; gap: 24px; margin: 24px 0 0; }
.aw-about-links a { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--aw-cobalt); text-decoration: underline; text-underline-offset: 4px; }
.aw-about-links a:hover { color: var(--aw-cobalt); opacity: 0.7; }

/* Currently 3-up trio of bio bites */
.aw-about-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.aw-about-trio article h2 { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--aw-cobalt); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--aw-lime); display: inline-block; }
.aw-about-trio article p { font-size: 16px; line-height: 1.65; color: #000; margin: 0; }

/* Big editorial pullquote */
.aw-pullquote-section { padding: 64px 0; text-align: center; }
.aw-pullquote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 36px; line-height: 1.25; color: var(--aw-cobalt); max-width: 26ch; margin: 0 auto; letter-spacing: -0.02em; text-wrap: balance; }
.aw-pullquote em { font-style: italic; background: linear-gradient(transparent 62%, var(--aw-lime) 62%, var(--aw-lime) 92%, transparent 92%); padding: 0 6px; font-weight: 800; color: var(--aw-cobalt); }

/* Story timeline, lime full-bleed */
.aw-story-bleed { background: var(--aw-lime); padding: 96px 0; }
.aw-story-bleed-inner { max-width: 1000px; margin: 0 auto; padding: 0 32px; }
.aw-story-bleed h2 { color: var(--aw-cobalt); margin: 0 0 8px; }
.aw-story-bleed .aw-eyebrow { background: transparent; color: var(--aw-cobalt); padding: 0; opacity: 0.85; margin-bottom: 8px; }

.aw-story-header { display: grid; grid-template-columns: 1fr 200px; gap: 32px; align-items: center; margin-bottom: 56px; }
.aw-story-illustration { width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; }
.aw-story-illustration img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.aw-story-chapters { margin: 0; }
.aw-story-chapter { display: grid; grid-template-columns: 160px 1fr; gap: 48px; padding: 36px 0; border-top: 1px solid rgba(29, 64, 186, 0.25); align-items: start; }
.aw-story-chapter:last-child { border-bottom: 1px solid rgba(29, 64, 186, 0.25); }
.aw-story-year { font-family: var(--font-display); font-weight: 900; font-size: 56px; color: var(--aw-cobalt); line-height: 0.9; letter-spacing: -0.04em; }
.aw-story-content h3 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--aw-cobalt); margin: 6px 0 12px; letter-spacing: -0.015em; line-height: 1.2; }
.aw-story-content p { font-size: 16px; line-height: 1.7; color: var(--aw-cobalt); margin: 0 0 14px; }
.aw-story-content p:last-child { margin-bottom: 0; }

/* Connect block (cobalt full-bleed) */
.aw-connect-bleed { padding: 96px 0; background: var(--aw-cobalt); color: #fff; text-align: center; }
.aw-connect-bleed .aw-eyebrow { background: transparent; color: var(--aw-lime); padding: 0; margin-bottom: 16px; }
.aw-connect-bleed h2 { color: var(--aw-lime); margin: 0 0 20px; }
.aw-connect-bleed p { font-size: 18px; line-height: 1.55; color: #fff; max-width: 50ch; margin: 0 auto 32px; }
.aw-connect-cta { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.aw-connect-bleed .aw-btn-primary { background: var(--aw-lime); color: var(--aw-cobalt); }
.aw-connect-bleed .aw-btn-primary:hover { background: #fff; color: var(--aw-cobalt); }

/* Clean essay grid (no lavender tiles, used on Afterwork page) */
.aw-essays-clean { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.aw-essay-clean { display: flex; flex-direction: column; align-items: center; text-align: center; }
.aw-essay-clean-art { width: 100%; aspect-ratio: 1/1; display: grid; place-items: center; padding: 0; background: transparent; }
.aw-essay-clean-art img { max-width: 80%; max-height: 80%; object-fit: contain; mix-blend-mode: multiply; }
.aw-essay-clean h3 { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--aw-cobalt); margin: 0 0 14px; text-decoration: underline; text-underline-offset: 4px; max-width: 24ch; }
.aw-essay-clean a.aw-essay-link { font-size: 13px; color: #000; font-weight: 500; }
.aw-essay-clean a.aw-essay-link:hover { color: var(--aw-cobalt); }

/* =============================================================
   Legal pages (Imprint, Privacy Policy)
   ============================================================= */
.aw-legal { padding: 64px 0 96px; }
.aw-legal-eyebrow { display: inline-block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 800; color: var(--aw-cobalt); margin: 0 0 16px; opacity: 0.85; }
.aw-legal h1 { font-family: var(--font-display); font-weight: 900; font-size: 56px; color: var(--aw-cobalt); letter-spacing: -0.025em; line-height: 1.05; margin: 0 0 12px; }
.aw-legal-meta { font-size: 14px; color: var(--aw-cobalt); opacity: 0.85; margin: 0 0 48px; font-weight: 500; }
.aw-legal-content h2 { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--aw-cobalt); letter-spacing: -0.01em; margin: 48px 0 14px; }
.aw-legal-content h2:first-child { margin-top: 0; }
.aw-legal-content p { font-size: 16px; line-height: 1.7; color: #000; margin: 0 0 16px; font-weight: 400; }
.aw-legal-content p strong { font-weight: 700; color: var(--aw-cobalt); }
.aw-legal-content a { color: var(--aw-cobalt); text-decoration: underline; text-underline-offset: 4px; font-weight: 500; }
.aw-legal-content a:hover { color: var(--aw-cobalt); opacity: 0.7; }
.aw-legal-content ul { font-size: 16px; line-height: 1.7; color: #000; margin: 0 0 16px; padding: 0 0 0 22px; }
.aw-legal-content li { margin: 0 0 6px; }

@media (max-width: 900px) {
  .aw-legal h1 { font-size: 36px; }
  .aw-legal-content h2 { font-size: 18px; }
}

/* =============================================================
   Contact modal (Let's talk popover)
   ============================================================= */
.aw-modal { position: fixed; inset: 0; background: rgba(29, 64, 186, 0.55); display: none; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.aw-modal.is-open { display: flex; animation: aw-modal-fade 200ms var(--ease-out); }
@keyframes aw-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.aw-modal-card { background: #fff; border-radius: 24px; padding: 40px; max-width: 460px; width: 100%; position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.25); animation: aw-modal-in 240ms var(--ease-out); }
@keyframes aw-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.aw-modal-close { position: absolute; top: 16px; right: 16px; background: transparent; border: 0; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; color: var(--aw-cobalt); padding: 0; border-radius: 50%; transition: background 200ms; }
.aw-modal-close:hover { background: var(--aw-cream-200); }
.aw-modal-close svg { width: 18px; height: 18px; }
.aw-modal-card .aw-eyebrow { background: var(--aw-lime); margin-bottom: 14px; }
.aw-modal-card h2 { font-size: 32px; margin: 0 0 16px; line-height: 1.15; letter-spacing: -0.02em; }
.aw-modal-card p { font-size: 15px; line-height: 1.55; color: #000; margin: 0 0 24px; font-weight: 400; }
.aw-modal-link { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--aw-cream-100); border: 1.5px solid var(--aw-cobalt); border-radius: 14px; text-decoration: none; color: var(--aw-cobalt); margin-bottom: 12px; transition: background 220ms var(--ease-out), transform 200ms; }
.aw-modal-link:last-child { margin-bottom: 0; }
.aw-modal-link:hover { background: var(--aw-lime); transform: translateX(2px); }
.aw-modal-link-label { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aw-cobalt); }
.aw-modal-link-value { font-size: 14px; color: var(--aw-cobalt); font-weight: 500; }

/* =============================================================
   Toast (subscribe confirmation)
   ============================================================= */
.aw-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--aw-cobalt); color: #fff; padding: 14px 22px; border-radius: 999px; box-shadow: 0 10px 30px rgba(29,64,186,0.35); font-family: var(--font-display); font-weight: 800; font-size: 14px; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 220ms, transform 220ms; }
.aw-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =============================================================
   Mobile responsive
   ============================================================= */
@media (max-width: 900px) {
  .aw-hero-inner { grid-template-columns: 1fr; }
  /* Override page-specific 2-col hero rules at the same specificity */
  #page-afterwork .aw-hero-inner,
  #page-mentoring .aw-hero-inner { grid-template-columns: 1fr; align-items: start; }
  #page-afterwork .aw-hero-art,
  #page-mentoring .aw-hero-art { aspect-ratio: 1 / 1; }
  #page-afterwork .aw-hero-art img { transform: none; }
  .aw-hero-title { font-size: 40px; }
  .aw-section-title { font-size: 32px; }
  .aw-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .aw-grid-3 { grid-template-columns: 1fr; }
  .aw-pillars { grid-template-columns: repeat(2, 1fr); }
  .aw-pillars-five { grid-template-columns: 1fr; }
  .aw-exercises { grid-template-columns: 1fr; }
  .aw-audience-grid { grid-template-columns: 1fr; }
  .aw-audience-card h3 { white-space: normal; }
  .aw-mentoring-head { grid-template-columns: 1fr; }
  .aw-final-cta-inner { grid-template-columns: 1fr; }
  .aw-hero-afterwork-inner { grid-template-columns: 1fr; gap: 32px; }
  .aw-hero-shapes { display: none; }
  .aw-hero-afterwork-title { font-size: 64px; }
  .aw-hero-afterwork-tagline { font-size: 18px; }
  .aw-receive-row { grid-template-columns: 1fr; gap: 12px; }
  .aw-essays-clean { grid-template-columns: 1fr; gap: 32px; }
  .aw-carousel { padding: 28px 0; }
  .aw-carousel-quote { font-size: 14px; }
  .aw-carousel-track { padding: 0 48px; }
  .aw-carousel-arrow.is-prev { left: 4px; }
  .aw-carousel-arrow.is-next { right: 4px; }
  .aw-mentoring-pillar { flex: 1 1 100%; }
  .aw-package-bleed { padding: 64px 0; }
  .aw-package-grid { grid-template-columns: 1fr; gap: 48px; }
  .aw-package-header { margin-bottom: 40px; }
  .aw-package-header .aw-section-title { font-size: 32px; }
  .aw-package-stage-head { grid-template-columns: 40px 1fr 28px; gap: 16px; }
  .aw-package-stage-num { font-size: 24px; }
  .aw-package-stage-name { font-size: 17px; }
  .aw-package-stage-tag { display: none; }
  .aw-package-stage.is-open .aw-package-stage-detail { padding: 0 0 24px 56px; }
  .aw-stories-grid { grid-template-columns: 1fr; gap: 24px; }
  .aw-framework-cobalt-inner { grid-template-columns: 1fr; gap: 32px; }
  .aw-fw-icon { min-width: 70px; }
  .aw-fw-icon-img { width: 36px; height: 36px; }
  .aw-about-trio { grid-template-columns: 1fr; gap: 32px; }
  .aw-story-header { grid-template-columns: 1fr; }
  .aw-story-chapter { grid-template-columns: 80px 1fr; gap: 24px; }
  .aw-story-year { font-size: 36px; }
  .aw-pullquote { font-size: 24px; padding: 0 16px; }
  .aw-testimonial-inner { grid-template-columns: 1fr; }
  .aw-essays-head { flex-direction: column; align-items: flex-start; }
  .aw-section, .aw-mentoring, .aw-final-cta { padding: 64px 0; }
  .aw-nav-links { display: none; }
  .aw-nav-toggle { display: block; }
  .aw-nav-inner { gap: 16px; }
  .aw-footer-inner { grid-template-columns: 1fr; }
  .aw-footer-cols { grid-template-columns: 1fr; }
}

/* =============================================================
   Phone tier — narrow-screen overrides
   ============================================================= */
@media (max-width: 600px) {
  /* Containers & section padding */
  .aw-container { padding: 0 20px; }
  .aw-section { padding: 56px 0; }
  .aw-section-title { font-size: 28px; }
  .aw-section-lede { font-size: 16px; margin: 0 0 36px; }

  /* Nav: hide top-bar Subscribe (lives in drawer instead) */
  .aw-nav-cta { display: none; }
  .aw-nav-inner { padding: 12px 20px; }
  .aw-nav-brand img { height: 36px; }

  /* Stack the remaining 2-col grids that were still cramped on phones */
  .aw-grid-4 { grid-template-columns: 1fr; gap: 16px; }
  .aw-card { padding: 24px; }
  .aw-card h3 { font-size: 22px; }
  .aw-card p { font-size: 15px; }

  .aw-pillars { grid-template-columns: 1fr; gap: 18px; }
  .aw-pillar { padding: 18px 20px; }
  .aw-pillar h3 { font-size: 13px; margin: 0 0 8px; }
  .aw-pillar p { font-size: 15px; }

  /* Typography baseline */
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  h3 { font-size: 22px; }

  /* Hero (home + mentoring shared) */
  .aw-hero { padding: 40px 0 24px; }
  .aw-hero-inner { padding: 0 20px; gap: 32px; }
  .aw-hero-title { font-size: 32px; }
  .aw-hero-lede { font-size: 16px; margin: 0 0 24px; }
  .aw-hero-ctas { gap: 14px; }

  /* Afterwork newsletter hero (was 120px / 64px at 900) */
  .aw-hero-afterwork { padding: 32px 0 56px; }
  .aw-hero-afterwork-inner { padding: 0 20px; gap: 24px; min-height: 0; }
  .aw-hero-afterwork-title { font-size: 44px; line-height: 0.9; margin: 0 0 18px; }
  .aw-hero-afterwork-tagline { font-size: 16px; margin: 0 0 24px; }
  .aw-newsletter-callout { padding: 20px 22px; }
  .aw-newsletter-callout h3 { font-size: 19px; }
  .aw-photo-circle { width: 110px; height: 110px; font-size: 40px; }

  /* Workbook hero */
  .aw-wb-hero { padding: 40px 0 56px; }
  .aw-wb-hero-grid { padding: 0 20px; gap: 36px; }
  .aw-wb-hero-title { font-size: 28px; margin: 8px 0 18px; }
  .aw-wb-hero-lede { font-size: 16px; margin: 0 0 24px; }
  .aw-wb-cover-img, .aw-wb-cover-large { max-width: 240px; }
  .aw-wb-cover-bottom h3 { font-size: 40px; }
  .aw-wb-price-large { font-size: 28px; }

  /* Workbook · why section */
  .aw-wb-why { padding: 56px 0; }
  .aw-wb-why-inner { padding: 0 20px; }
  .aw-wb-why-title { font-size: 28px; }
  .aw-wb-pull { font-size: 15px; }

  /* Workbook · who is this for */
  .aw-wb-who { padding: 48px 0; }
  .aw-wb-who-card { padding: 24px 22px; }
  .aw-wb-who-card h3 { font-size: 20px; }

  /* Workbook · outcomes & flow */
  .aw-wb-outcomes { padding: 48px 0; }
  .aw-wb-outcomes-inner { padding: 0 20px; }
  .aw-wb-flow { gap: 14px; }
  .aw-wb-flow-step { padding: 22px 18px; }

  /* Section-title sized titles on cobalt strips */
  .aw-cobalt-title { font-size: 26px; }
  .aw-package-header .aw-section-title { font-size: 28px; }
  .aw-pullquote { font-size: 22px; padding: 0 20px; }

  /* Carousel — 44×44 tap targets, generous track padding so arrows clear the quote */
  .aw-carousel-arrow { width: 44px; height: 44px; }
  .aw-carousel-arrow.is-prev { left: 0; }
  .aw-carousel-arrow.is-next { right: 0; }
  .aw-carousel-track { padding: 0 56px; }
  .aw-carousel.aw-carousel-card .aw-carousel-track { padding: 0 56px; }
  .aw-carousel.aw-carousel-card .aw-carousel-arrow { width: 44px; height: 44px; }
  .aw-carousel.aw-carousel-card .aw-carousel-arrow.is-prev { left: 0; }
  .aw-carousel.aw-carousel-card .aw-carousel-arrow.is-next { right: 0; }
  .aw-carousel-quote { font-size: 14px; }
  .aw-carousel.aw-carousel-card .aw-quote { font-size: 15px; text-align: left; }
  .aw-carousel-meta { font-size: 10px; }

  /* Stats strip */
  .aw-stats-row { padding: 0 20px; }

  /* Mentoring full-bleed */
  .aw-mentoring { padding: 56px 0; }
  .aw-mentoring-lede { font-size: 17px; }

  /* Package stages */
  .aw-package-bleed { padding: 56px 0; }
  .aw-package-bleed-inner { padding: 0 20px; }
  .aw-package-grid { gap: 36px; }
  .aw-package-stage-head { grid-template-columns: 32px 1fr 26px; gap: 12px; padding: 18px 0; }
  .aw-package-stage-num { font-size: 22px; }
  .aw-package-stage-name { font-size: 16px; }
  .aw-package-stage.is-open .aw-package-stage-detail { padding: 0 0 20px 44px; }
  .aw-package-stage-detail-inner { font-size: 14px; }

  /* Mentee stories */
  .aw-stories-bleed { padding: 56px 0; }
  .aw-stories-bleed-inner { padding: 0 20px; }
  .aw-story { padding: 24px; }

  /* Mentor about */
  .aw-mentor-about { padding: 56px 0; }
  .aw-mentor-text .aw-section-title { font-size: 26px; }

  /* About page — story timeline */
  .aw-story-bleed { padding: 56px 0; }
  .aw-story-bleed-inner { padding: 0 20px; }
  .aw-story-chapter { grid-template-columns: 1fr; gap: 4px; padding: 28px 0; }
  .aw-story-year { font-size: 32px; }
  .aw-story-content h3 { font-size: 20px; }
  .aw-story-content p { font-size: 15px; }

  /* About page — trio */
  .aw-about-trio { gap: 24px; }

  /* Connect block */
  .aw-connect-bleed { padding: 56px 0; }
  .aw-connect-bleed h2 { font-size: 28px; }
  .aw-connect-bleed p { font-size: 16px; }

  /* Receive (newsletter) */
  .aw-receive-bleed { padding: 56px 0; }
  .aw-receive-bleed h2 { margin: 0 0 36px; }
  .aw-receive-bleed-inner { padding: 0 20px; }
  .aw-receive-row { gap: 8px; }
  .aw-newsletter-intro { padding: 56px 0 40px; }

  /* Final CTA on workbook page */
  .aw-final-cta { padding: 56px 0; }
  .aw-final-cta-inner { padding: 0 20px; gap: 36px; }
  .aw-final-cta-lede { font-size: 17px; }
  .aw-product-card { padding: 24px; }
  .aw-product-card h3 { font-size: 40px; }

  /* Five Pillars cobalt strip */
  .aw-framework-cobalt { padding: 56px 0; }
  .aw-framework-cobalt-inner { padding: 0 20px; gap: 24px; }
  .aw-fw-icon { min-width: 64px; padding: 12px 4px 10px; }
  .aw-fw-icon-img { width: 30px; height: 30px; }
  .aw-fw-icon-name { font-size: 11px; }

  /* Footer */
  .aw-footer { padding: 56px 0 0; }
  .aw-footer-inner { padding: 0 20px; gap: 32px; }
  .aw-footer-bottom { padding: 20px 20px; margin: 40px auto 0; }

  /* Testimonial */
  .aw-testimonial { padding: 48px 0; }
  .aw-quote { font-size: 18px; }

  /* Legal pages */
  .aw-legal { padding: 40px 0 56px; }
  .aw-legal h1 { font-size: 32px; }

  /* Contact modal */
  .aw-modal-card { padding: 28px 22px; }
  .aw-modal-card h2 { font-size: 26px; }

  /* Workbook · take a look inside */
  .aw-wb-browser-stage { min-height: 360px; padding: 20px; }
}

/* =============================================================
   Touch-only devices — neutralize hover effects that would
   otherwise "stick" visually after a tap (the iOS Safari problem)
   ============================================================= */
@media (hover: none) {
  /* Buttons — preserve resting state on tap */
  .aw-btn-primary:hover { background: var(--aw-cobalt); color: #fff; transform: none; }
  .aw-btn-secondary:hover { background: transparent; border-color: var(--aw-cobalt); }
  .aw-btn-tertiary:hover { background: transparent; }
  .aw-mentoring .aw-btn-primary:hover { background: var(--aw-lime); color: var(--aw-cobalt); }
  .aw-connect-bleed .aw-btn-primary:hover { background: var(--aw-lime); color: var(--aw-cobalt); }
  .aw-fw-btn-primary:hover { background: var(--aw-lime); border-color: var(--aw-lime); color: var(--aw-cobalt); }
  .aw-fw-btn-secondary:hover { background: transparent; color: var(--aw-lime); }

  /* Cards — no lifts or colour swaps */
  .aw-card:hover { transform: none; background: #fff; }
  .aw-card-lavender:hover { background: var(--aw-lavender); }
  .aw-essay:hover { transform: none; }
  .aw-cobalt-card:hover { transform: none; }
  .aw-audience-card:hover { transform: none; }
  .aw-modal-link:hover { transform: none; background: var(--aw-cream-100); }
  .aw-exercise:hover { background: #fff; }
  .aw-fw-icon:hover { background: rgba(217,251,153,0.12); transform: none; }
  .aw-wb-pillar:hover { background: rgba(29,64,186,0.12); transform: none; }
  .aw-wb-pillar.is-current:hover { background: var(--aw-cobalt); }
  .aw-wb-ex-card:hover { background: #fff; }

  /* Inline toggles & helper buttons */
  .aw-card-link:hover { background: transparent; }
  .aw-audience-toggle:hover { background: transparent; }
  .aw-story-toggle:hover { background: transparent; }
  .aw-nav-toggle:hover { background: transparent; }
  .aw-modal-close:hover { background: transparent; }
  .aw-nav-drawer-close:hover { background: transparent; }
  .aw-nav-drawer-links a:hover { color: #000; background: transparent; }
}

/* =============================================================
   Reduced motion — respect the user's accessibility preference
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Make sure scroll-reveal elements still appear (no animation, just visible) */
  [data-reveal], .aw-cobalt-card { opacity: 1 !important; transform: none !important; }
}