/* =========================================================
   Theme: Warm Ivory / Ink Black / Electric Lime
   One sans-serif font (Plus Jakarta Sans) everywhere.

   How the colours are used
   - Warm Ivory  #F4F0E8  page background
   - Ink Black   #171717  text, borders, and the "highlight" sections
   - Electric Lime #D6FF3F  titles and highlights on black;
                            on ivory it is only a highlighter stroke
                            behind black text (lime text on ivory is hard to read)

   This file loads after style.css and only overrides it.
   ========================================================= */

:root {
  --ivory: #F4F0E8;
  --ivory-card: #FAF7F1;        /* a touch lighter than the page, for cards */
  --ivory-deep: #E9E3D7;        /* a touch darker, for image frames and tags */
  --ink: #171717;
  --lime: #D6FF3F;

  /* map the old palette names onto the new colours */
  --paper: var(--ivory);
  --blush: var(--ivory);
  --blush-2: var(--ivory);
  --ink-soft: #3d3d3a;
  --muted: #6e6a62;
  --pink: var(--ink);
  --yellow: var(--lime);
  --grey-hl: var(--lime);
  --line: var(--ink);
  --tile-border: #d6cfc2;

  /* one font family everywhere */
  --f-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-brush: var(--f-sans);
  --f-caps: var(--f-sans);
  --f-body: var(--f-sans);
  --f-hand: var(--f-sans);

  /* text colours used inside the black sections */
  --on-dark: var(--ivory);
  --on-dark-soft: rgba(244, 240, 232, .78);
  --on-dark-muted: rgba(244, 240, 232, .58);
  --on-dark-line: rgba(244, 240, 232, .18);
}

body { background: var(--ivory); color: var(--ink); font-size: 15.5px; line-height: 1.7; }
::selection { background: var(--lime); color: var(--ink); }

/* =========================================================
   TYPE: everything is the same sans family, weight does the work
   ========================================================= */
.h-brush {
  font-weight: 800; letter-spacing: -.02em; line-height: 1.02;
  font-size: clamp(2.2rem, 5vw, 3.9rem);
}
.h-brush--stack { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.06; }
.h-brush--xl { font-size: clamp(2.4rem, 4.2vw, 3.6rem); }

/* highlighter: a clean lime bar behind the words */
.hl::before {
  left: -.08em; right: -.1em; bottom: .04em; height: .36em;
  background: var(--lime);
  transform: scaleX(var(--hl-scale, 1));
  border-radius: 2px; clip-path: none;
}
.hl--bottom::before { bottom: .02em; height: .32em; }

.caps-lead { font-weight: 600; letter-spacing: -.005em; font-size: clamp(1.05rem, 1.5vw, 1.28rem); }
.caps-lead--xl { font-weight: 700; }

.brush { font-weight: 800; letter-spacing: -.01em; }
.amp { font-family: inherit; font-weight: inherit; }

/* accent words on ivory: black text with a lime stroke under it */
.pink,
.brush-inline,
.intro-copy .brush {
  color: var(--ink);
  background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%);
  padding: 0 .08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.brush-inline { font-weight: 800; }
.intro-copy .caps-lead .brush { font-size: 1em; }

.body-sm { font-size: 15px; color: var(--ink-soft); }
.body-copy { font-size: 15.5px; color: var(--ink-soft); }
.kicker, .label-caps { font-weight: 700; letter-spacing: .16em; font-size: 12px; }

/* the old handwritten notes become a calm italic line */
.hand-note {
  font-weight: 500; font-style: italic; transform: none;
  font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--ink-soft);
}
.hand-note--pink {
  font-style: normal; font-weight: 700; color: var(--ink);
  background: var(--lime); padding: .2em .7em; border-radius: 999px;
}
.hand-note--inline { font-size: .95rem; }

.doodle-arrow path { stroke: var(--ink); }
.doodle-arrow .dot { fill: var(--ink); }
.squiggle path { stroke: var(--lime); }
.img-slot { background: var(--ivory-deep); }

/* =========================================================
   BUTTONS, SLIDERS, POPUP
   ========================================================= */
.btn-pill { font-weight: 700; letter-spacing: .14em; border-color: var(--ink); color: var(--ink); }
.btn-pill:hover { background: var(--ink); color: var(--lime); }
.btn-pill--dark { background: var(--ink); color: var(--lime); }
.btn-pill--dark:hover { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.btn-pill--light { border-color: var(--ivory); color: var(--ivory); }
.btn-pill--light:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.btn-pill:focus-visible, .slider-btn:focus-visible, .brand-tile:focus-visible,
.perf-visual-img:focus-visible, .pop-close:focus-visible, .ads-btn:focus-visible,
.reel-sound:focus-visible, .case-tabs button:focus-visible, .slider-tabs button:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px;
}

.slider-btn { background: var(--ivory-card); font-weight: 700; letter-spacing: .14em; }
.slider-btn:hover:not(:disabled) { background: var(--ink); color: var(--lime); }
.slider-count { font-weight: 800; font-size: 1rem; letter-spacing: .02em; }

.pop-box { background: var(--ivory); box-shadow: 8px 8px 0 var(--lime), 8px 8px 0 1.5px var(--ink); }
.pop-close { background: var(--ivory-card); }
.pop-close:hover { background: var(--ink); color: var(--lime); }
.pop-title { font-weight: 800; letter-spacing: -.01em; }
.pop-title .brush { font-weight: 800; }
.pop-section h4 { font-weight: 700; }
.pop-section strong { background: linear-gradient(transparent 60%, var(--lime) 60%); }
.pop-list li { background: var(--ivory-card); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header.is-scrolled { background: rgba(244, 240, 232, .94); box-shadow: 0 1px 0 rgba(23, 23, 23, .08); }
.brand { transform: none; }
.brand-main { font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.brand-sub { font-weight: 600; font-size: 12px; letter-spacing: .2em; margin-left: 0; }
.brand-scribble { stroke: var(--ink); }
.site-nav a { font-weight: 700; letter-spacing: .14em; }
.site-nav a::after { background: var(--lime); }
@media (max-width: 991.98px) {
  .site-nav, .site-header.is-scrolled .site-nav { background: var(--ivory); }
  .site-nav a { font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .nav-toggle { background: var(--ivory); }
}

/* =========================================================
   SECTIONS ON IVORY
   ========================================================= */
.sec-intro { background: var(--ivory); }
.sec-about, .sec-career, .sec-pitches, .sec-perf, .sec-branding, .sec-awards { background: var(--ivory); }
/* back-to-back ivory sections: don't stack two paddings into one big gap */
.sec-about + .sec-career, .sec-branding + .sec-awards { padding-top: 0; }
/* Branding ends with the dark KRA card; Awards follows on the same background, so a shorter gap is enough */
.sec-branding { padding-bottom: clamp(40px, 5vw, 72px); }

/* career cards */
.arc-step { background: var(--ivory-card); }
.arc-num { font-weight: 800; color: var(--ink); font-size: 2.2rem; letter-spacing: -.03em; }
.arc-step h3 { font-weight: 800; letter-spacing: -.01em; font-size: 1.25rem; }
.arc-meta { font-weight: 600; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
.arc-step--now { background: var(--ink); color: var(--ivory); }
.arc-step--now:hover { box-shadow: 9px 9px 0 var(--lime); }
.arc-step--now .arc-num { color: var(--lime); }
.arc-step--now p:last-of-type, .arc-step--now .arc-meta { color: var(--on-dark-soft); }
.now-tag { font-weight: 800; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; background: var(--lime); border: 1.5px solid var(--ink); transform: rotate(4deg); }

/* pitch cards */
.case-card { background: var(--ivory-card); }
.case-title { font-weight: 800; letter-spacing: -.01em; }
.case-title .brush { font-weight: 800; }
.case-tag { font-weight: 700; }
.case-tabs button { font-weight: 700; color: var(--ink); }
.case-tabs button:hover { background: var(--lime); }
.case-tabs button[aria-selected="true"] { background: var(--ink); color: var(--lime); }
.case-panel strong { background: linear-gradient(transparent 60%, var(--lime) 60%); }
/* "The Impact" box: a small black highlight panel */
.case-impact { background: var(--ink); color: var(--on-dark-soft); border-left: 0; border-radius: 14px; padding: 14px 18px; }
.case-impact-label { color: var(--lime); }
.case-impact strong { color: var(--lime); background: none; }

.chip-list li { font-weight: 700; letter-spacing: .02em; background: var(--ivory-card); }
.chip-list li::after { font-weight: 500; font-style: italic; color: var(--muted); font-size: .9rem; }
.chip-list li:hover { background: var(--ink); color: var(--ivory); }
.chip-list li:hover::after { color: var(--lime); }
.label-caps--hl::after { background: var(--lime); transform: none; }

.stat-num { font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.stat-unit { font-weight: 800; color: var(--ink); }

/* performance */
.perf-subtitle { font-weight: 800; letter-spacing: -.01em; }
.perf-card { background: var(--ivory-card); }
.perf-card h3 { font-weight: 800; letter-spacing: -.01em; }
.perf-card h3 .brush { color: var(--ink); background: linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%); }
.perf-dl dt { font-weight: 700; }
.perf-dl strong { background: linear-gradient(transparent 60%, var(--lime) 60%); }
.perf-sub li::before { border-color: var(--ink); background: var(--lime); }
.perf-stats small { font-weight: 700; }
.perf-index { font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.perf-visual-img { background: var(--ivory-deep); }
.slider-tabs button { background: var(--ivory-card); font-weight: 700; }
.slider-tabs button:hover { background: var(--lime); }
.slider-tabs button[aria-current="true"] { background: var(--ink); color: var(--lime); }
.ads-btn { background: var(--ivory-card); }
.ads-btn:hover { background: var(--lime); }

/* featured campaign cards (black) */
.perf-card--feature { background: var(--ink); color: var(--ivory); }
.perf-card--feature h3 .brush { color: var(--lime); background: none; }
.perf-card--feature .stat-num { color: var(--lime); }
.perf-card--feature dt { color: var(--lime); }
.perf-card--feature dd, .perf-card--feature .perf-dl dd { color: var(--on-dark-soft); }
.perf-card--feature .case-tag { color: var(--on-dark-muted); }
.perf-card--feature .perf-stats { border-color: var(--on-dark-line); }
.perf-card--feature .perf-stats small { color: var(--on-dark-muted); }
.perf-card--feature .perf-sub b { color: var(--ivory); }
.perf-card--feature .perf-sub li::before { border-color: var(--lime); background: transparent; }
.perf-card--feature .perf-dl strong { color: var(--lime); background: none; }
.perf-card--feature .perf-index { color: var(--lime); }
.perf-card--feature .perf-index small { color: var(--on-dark-muted); }
.perf-card--feature .perf-visual-img { border-color: var(--on-dark-line); }

/* reels */
/* .reel-frame { box-shadow: 6px 6px 0 var(--ink); } */
/* .reel:nth-child(even) .reel-frame { box-shadow: 6px 6px 0 var(--lime), 6px 6px 0 1.5px var(--ink); } */
.reel-sound { background: rgba(244, 240, 232, .94); }
.reel.has-sound .reel-sound { background: var(--lime); }
.reel-soon { background: rgba(23, 23, 23, .88); color: var(--lime); }
.reel figcaption { font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }

/* branding */
.brand-tile .img-slot::after { color: var(--lime); box-shadow: none; font-weight: 700; }
.brand-tile:hover .img-slot::after, .brand-tile:focus-visible .img-slot::after { background: var(--lime); color: var(--ink); }
.brand-tile:hover .img-slot { box-shadow: 6px 6px 0 var(--lime), 6px 6px 0 1.5px var(--ink); }
.brand-tile-name { font-weight: 800; letter-spacing: -.005em; }
.brand-tile-sub { font-size: .9rem; font-weight: 500; }

/* "Moving Beyond the KRA" card (black): title in lime, points in ivory */
.beyond-card { background: var(--ink); color: var(--ivory); }
.beyond-title { color: var(--lime); }
.beyond-title .hl::before, .hl--pink::before { display: none; }
.beyond-sub { font-style: italic; font-weight: 500; font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--on-dark-soft); }
.beyond-list li { border-color: var(--on-dark-line); }
.beyond-list .brush,
.beyond-list li:nth-child(2) .brush,
.beyond-list li:nth-child(3) .brush { color: var(--ivory); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.1rem, 1.8vw, 1.4rem); }
.beyond-list .brush::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .5em; border-radius: 50%; background: var(--lime); vertical-align: .1em; }
.beyond-list p { color: var(--on-dark-soft); }
/* this card's headings in title case, not all caps */
.beyond-title, .beyond-list .brush { text-transform: none; }

/* awards */
.award { background: var(--ivory-card); }
.award:hover { box-shadow: -6px 6px 0 var(--lime), -6px 6px 0 1.5px var(--ink); }
.award-star { background: var(--lime); border: 1.5px solid var(--ink); }
.award h3 { font-weight: 800; letter-spacing: -.005em; }
.award h3 .brush { font-weight: 800; }
.award--feature { box-shadow: 6px 6px 0 var(--lime), 6px 6px 0 1.5px var(--ink); }

/* =========================================================
   BLACK "HIGHLIGHT" SECTIONS
   What I Do Best, Clients, TSK story, Social, Contact
   ========================================================= */
.sec-skills, .sec-clients, .sec-story, .sec-social, .sec-contact { background: var(--ink); color: var(--ivory); }
.sec-skills .h-brush, .sec-clients .h-brush, .sec-story .h-brush, .sec-social .h-brush, .sec-contact .h-brush { color: var(--lime); }
.sec-skills .hl::before, .sec-clients .hl::before, .sec-story .hl::before, .sec-social .hl::before, .sec-contact .hl::before {
  background: var(--ivory); height: .07em; bottom: -.08em; opacity: .9;
}
.sec-clients .body-sm, .sec-story .body-sm, .sec-social .body-sm { color: var(--on-dark-soft); }
.sec-skills .doodle-arrow path, .sec-social .doodle-arrow path, .sec-contact .doodle-arrow path { stroke: var(--ivory); }
.sec-skills .doodle-arrow .dot, .sec-social .doodle-arrow .dot, .sec-contact .doodle-arrow .dot { fill: var(--ivory); }

/* What I Do Best: words in ivory, the two key ones in lime */
.sec-skills { padding-bottom: var(--sec-pad); }
.sec-skills .divider-line { display: none; }
.wc { color: var(--ivory); font-weight: 700; }
.wc-pitches { font-weight: 800; letter-spacing: -.02em; color: var(--lime); }
.wc-brand { font-weight: 800; letter-spacing: -.02em; color: var(--lime); }
.wc-perf, .wc-vertical, .wc-client { font-weight: 800; letter-spacing: -.01em; }
.wc-leads, .wc-biz { font-weight: 600; color: var(--on-dark-soft); }
.wc-naming, .wc-scripts { font-weight: 500; font-style: italic; text-transform: none; letter-spacing: -.01em; }
.wc-social { font-weight: 800; letter-spacing: -.02em; }
.wc-naming { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.wc-scripts { font-size: clamp(1.3rem, 2.6vw, 2.1rem); }

/* Clients: ivory logo tiles on black */
.logo-tile { background: var(--ivory); border-color: transparent; box-shadow: none; color: var(--ink); }
.logo-tile:hover { border-color: var(--lime); box-shadow: 4px 4px 0 var(--lime); }

/* TSK story */
.sec-story .h-brush .pink { color: var(--ivory); background: none; padding: 0; }
.story::before { border-left-color: var(--on-dark-muted); opacity: 1; }
.beat-num { background: var(--ink); border-color: var(--ivory); color: var(--ivory); font-weight: 800; font-size: 1.1rem; }
.story-beat h3 { font-weight: 800; letter-spacing: -.01em; color: var(--ivory); }
.story-beat p { color: var(--on-dark-soft); }
.story-beat--impact .beat-num { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.story-beat--impact > div { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.story-beat--impact h3 { color: var(--ink); }
.story-beat--impact p { color: var(--ink-soft); }
.story-beat--impact strong { background: linear-gradient(transparent 60%, var(--lime) 60%); }
.proof-shot { border-color: var(--ivory); }

/* Social */
.phone-grid { background: var(--ivory); border-color: var(--ivory); color: var(--ink); }
/* .slider--social .phone-grid:nth-child(even) { box-shadow: 8px 8px 0 var(--lime); } */
.phone-handle { font-weight: 700; }
.phone-name { font-weight: 800; letter-spacing: -.01em; font-size: 1.1rem; }
.sec-social .slider-btn { background: transparent; color: var(--ivory); border-color: var(--ivory); }
.sec-social .slider-btn:hover:not(:disabled) { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.sec-social .slider-count { color: var(--ivory); }

/* Contact */
.sec-contact .hl::before { display: none; }
.contact-intro p { color: var(--on-dark-soft); }
.contact-intro .contact-align { font-weight: 800; letter-spacing: -.01em; color: var(--lime); }
.contact-label { font-weight: 700; letter-spacing: .14em; font-size: .78rem; color: var(--lime); }
.contact-value { font-weight: 700; letter-spacing: .01em; color: var(--ivory); }
a.contact-value:hover { color: var(--lime); }
.contact-note { color: var(--on-dark-muted); }
.footer-line { color: var(--on-dark-muted); font-weight: 600; }
.photo-strip { background: var(--ink); }