/*
Theme Name: Kerri Braham Portfolio
Theme URI: https://kerribraham.com
Author: Kerri Braham
Author URI: https://kerribraham.com
Description: A bespoke, editorial-style WordPress theme built for Kerri Braham — marketing & events professional. Icy-blue-and-ivory palette, Fraunces/Manrope type system, custom Portfolio post type split across Marketing and Events.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: kerribraham
Tags: portfolio, one-column, two-columns, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.  Fonts (self-hosted references, loaded via functions.php)
   2.  Design Tokens (color, type, space, radius, shadow, motion)
   3.  Reset & Base
   4.  Typography
   5.  Layout & Utilities
   6.  Buttons & Links
   7.  Header & Navigation
   8.  Hero
   9.  Stats Strip
   10. Dual Path (Employers / Clients)
   11. Section Headers / Eyebrows
   12. About / Story
   13. Services
   14. Portfolio Grid & Filters
   15. Single Case Study
   16. Experience Timeline
   17. Skills Marquee
   18. Testimonial
   19. Contact
   20. Mockup Frames & Placeholders
   21. Footer
   22. Forms
   23. Scroll Reveal / Motion
   24. Responsive
   25. Print (CV page)
   ========================================================================= */

/* ---------- 2. DESIGN TOKENS ---------- */
:root{
  /* Core palette */
  --ivory: #FAF7F1;
  --ivory-deep: #F3EEE4;
  --white: #FFFFFF;
  --ink: #1B2A33;
  --ink-soft: #4C5B62;
  --ink-faint: #8B979C;

  --icy: #C1E5FF;
  --icy-deep: #8FC5EA;
  --icy-ink: #274A5E;

  --navy: #142330;
  --navy-soft: #1E3346;
  --navy-line: rgba(255,255,255,0.14);

  --gold: #C7A567;
  --gold-soft: #E4D3AC;

  --border: rgba(27,42,51,0.10);
  --border-strong: rgba(27,42,51,0.18);

  /* Semantic */
  --bg: var(--ivory);
  --surface: var(--white);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--icy);
  --accent-ink: var(--icy-ink);

  /* Type */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Alex Brush', 'Brush Script MT', cursive;

  --fs-h1: clamp(2.75rem, 2rem + 3.2vw, 5.25rem);
  --fs-h2: clamp(2.1rem, 1.7rem + 1.8vw, 3.4rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-stat: clamp(1.4rem, 0.8rem + 3.6vw, 3.75rem);

  /* Space (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 11rem;

  --container: 82rem;
  --container-narrow: 46rem;
  --gutter: clamp(1.25rem, 3vw, 3rem);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,35,48,0.06);
  --shadow-md: 0 20px 40px -24px rgba(20,35,48,0.28);
  --shadow-lg: 0 30px 60px -20px rgba(20,35,48,0.22);

  --ease: cubic-bezier(0.16,1,0.3,1);
  --dur-fast: 200ms;
  --dur-med: 500ms;
  --dur-slow: 800ms;
}

/* ---------- 3. RESET & BASE ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img, svg{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
.inline-link{ text-decoration:underline; text-underline-offset:.15em; text-decoration-color:var(--border-strong); transition:text-decoration-color var(--dur-fast) var(--ease); }
.inline-link:hover{ text-decoration-color:currentColor; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input, textarea, select, button{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--icy-ink); outline-offset:3px; }
hr{ border:none; border-top:1px solid var(--border); margin:0; }

/* ---------- 4. TYPOGRAPHY ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); font-weight:600; line-height:1.05; margin:0; letter-spacing:-0.01em; }
h1{ font-size:var(--fs-h1); font-weight:500; }
h2{ font-size:var(--fs-h2); font-weight:500; }
h3{ font-size:var(--fs-h3); font-weight:500; }
h4{ font-size:var(--fs-h4); font-weight:600; }
p{ margin:0 0 1em; }
.lead{ font-size:var(--fs-lead); color:var(--text-soft); font-weight:400; line-height:1.5; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.6em; margin-bottom:0;
  font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--icy-ink);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; opacity:.55; }
.eyebrow--light{ color:var(--icy); }
.serif-italic{ font-style:italic; font-family:var(--font-display); }
.text-soft{ color:var(--text-soft); }
.text-on-dark{ color:rgba(255,255,255,0.86); }
.max-prose{ max-width:62ch; }

/* ---------- 5. LAYOUT & UTILITIES ---------- */
.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: var(--sp-9); }
.section--tight{ padding-block: var(--sp-7); }
.section--dark{ background:var(--navy); color:rgba(255,255,255,0.92); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.stats-strip h1, .stats-strip h2, .stats-strip h3, .stats-strip h4,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4{ color:#fff; }
.section--ivory-deep{ background:var(--ivory-deep); }
.section--surface{ background:var(--surface); }
.grid{ display:grid; gap:var(--sp-6); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-12{ grid-template-columns:repeat(12,1fr); }
.flow > * + *{ margin-top:var(--sp-5); }
.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); }
.divider{ height:1px; background:var(--border); border:none; width:100%; }
.divider--light{ background:var(--navy-line); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-999px; top:auto; background:var(--navy); color:#fff; padding:.8em 1.4em; z-index:200; border-radius:var(--radius-sm); }
.skip-link:focus{ left:1rem; top:1rem; }

/* ---------- 6. BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:0.95em 1.9em; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:700; font-size:0.95rem; letter-spacing:0.01em;
  border:1px solid transparent; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(0.98); }
.btn-primary{ background:var(--navy); color:var(--icy); }
.btn-primary:hover{ background:var(--icy); color:var(--navy); }
.btn-accent{ background:var(--icy); color:var(--navy); }
.btn-accent:hover{ background:var(--navy); color:var(--icy); }
.btn-ghost{ border-color:var(--border-strong); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-ghost--light{ border-color:var(--navy-line); color:#fff; }
.btn-ghost--light:hover{ border-color:#fff; }
.btn-sm{ padding:0.6em 1.3em; font-size:0.85rem; }
.link-arrow{ display:inline-flex; align-items:center; gap:.5em; font-weight:700; border-bottom:1px solid var(--border-strong); padding-bottom:2px; transition:border-color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease); }
.link-arrow:hover{ border-color:var(--ink); gap:.75em; }
.link-arrow svg{ width:16px; height:16px; }

/* ---------- 7. HEADER & NAV ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--ivory);
  border-bottom:1px solid var(--border);
}
.site-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-4); gap:var(--sp-6); }
.brand{ display:flex; align-items:center; gap:.6em; }
.brand svg{ height:34px; width:auto; }
.brand__name{ font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--ink); }
.primary-nav{ display:flex; align-items:center; gap:var(--sp-7); }
.primary-nav ul{ display:flex; align-items:center; gap:var(--sp-6); }
.primary-nav a{ font-weight:600; font-size:0.95rem; position:relative; padding-block:.3em; }
.primary-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--icy-ink); transition:right var(--dur-fast) var(--ease); }
.primary-nav a:hover::after, .primary-nav .current-menu-item a::after{ right:0; }
.header-cta{ display:flex; align-items:center; gap:var(--sp-4); }
.menu-toggle{ display:none; background:none; border:none; padding:.4em; }
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }

/* ---------- 7b. NAME INTRO BANNER ---------- */
.name-intro{ position:relative; background:var(--navy); color:#fff; text-align:center; padding:var(--sp-7) var(--sp-5); overflow:hidden; }
.name-intro__contact{ position:absolute; top:var(--sp-5); right:var(--sp-5); font-size:var(--fs-small); letter-spacing:.08em; text-transform:uppercase; color:#fff; border:1px solid rgba(255,255,255,0.35); padding:.55em 1.2em; border-radius:var(--radius-pill); text-decoration:none; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.name-intro__contact:hover{ background:rgba(255,255,255,0.08); border-color:#fff; }
.name-intro__lockup{ margin:0; }
.name-intro__first{ display:block; font-family:var(--font-display); font-weight:600; font-style:normal; line-height:0.95; font-size:clamp(3.25rem, 2.2rem + 5vw, 6.5rem); color:#fff; }
.name-intro__last{ display:block; font-family:var(--font-script); font-weight:400; line-height:1; margin-top:-.08em; font-size:clamp(4rem, 2.7rem + 6.6vw, 8.25rem); color:var(--icy); }
.name-intro__title{ margin-top:var(--sp-5); font-family:var(--font-body); font-size:var(--fs-small); font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ivory); }
.name-intro__tagline{ margin-top:var(--sp-5); margin-bottom:-2px; font-family:var(--font-display); font-style:italic; font-size:1.75rem; letter-spacing:.02em; color:var(--icy); }
@media (max-width:640px){
  .name-intro__contact{ position:static; display:inline-block; margin-bottom:var(--sp-6); }
}

/* ---------- 8. HERO ---------- */
.hero{ padding-block:var(--sp-9); position:relative; }
.hero__grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--sp-8); align-items:start; }
.hero__eyebrow{ margin-bottom:var(--sp-7); }
.hero__title{ margin-bottom:var(--sp-5); line-height:1.3; }
.hero__title em{ font-style:italic; color:var(--icy-ink); }
.hero__lead{ margin-bottom:var(--sp-6); max-width:46ch; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-bottom:var(--sp-7); }
.hero__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-6); font-size:var(--fs-small); color:var(--text-soft); }
.hero__meta strong{ color:var(--ink); font-family:var(--font-display); font-size:1.05rem; display:block; }
.hero__visual{ position:relative; margin-top:3.5rem; }
.hero__visual .frame-card:first-child{ max-width:90%; }
.hero__visual .frame-card:nth-child(2){ transform:translate(-0.5rem,2rem); }

/* ---------- 9. STATS STRIP (static banner — no scroll/carousel behaviour) ---------- */
.stats-strip{ background:var(--navy); color:#fff; padding-block:var(--sp-8); }
.stats-strip__heading{ text-align:center; margin-bottom:var(--sp-7); font-style:italic; }
.stats-strip__row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-7); }
.stat{ text-align:center; min-width:0; display:flex; flex-direction:column; }
.stat__num{ font-family:var(--font-display); font-size:var(--fs-stat); font-style:italic; color:var(--icy); line-height:1; }
.stat__label{ margin-top:.5em; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:0.08em; color:rgba(255,255,255,0.65); }
.stat__source{ margin-top:auto; padding-top:.6em; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--icy); opacity:.8; }

/* ---------- 10. DUAL PATH ---------- */
.dual-path{ display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.dual-path__col{ padding:var(--sp-6) var(--sp-7); position:relative; display:flex; flex-direction:column; }
.dual-path__col + .dual-path__col{ border-left:1px solid var(--border); }
.dual-path__col--dark{ background:var(--navy); color:#fff; }
.dual-path__col--icy{ background:var(--icy); }
.dual-path__col--dark h3, .dual-path__col--dark h4{ color:#fff; }
.dual-path__num{ font-family:var(--font-display); font-style:italic; color:var(--icy-ink); font-size:1.1rem; margin-bottom:var(--sp-6); display:block; }
.dual-path__col--dark .dual-path__num{ color:var(--icy); }
.dual-path__col h3{ margin-bottom:var(--sp-6); }
.dual-path__col p{ margin-bottom:0; }
.dual-path__desc{ margin-bottom:var(--sp-6) !important; }
.dual-path__tags{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-3); margin-bottom:var(--sp-6); }
.dual-path__tags .chip{ width:100%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dual-path__col .link-arrow{ margin-top:auto; align-self:flex-start; }
.dual-path__list{ margin-bottom:var(--sp-6); }
.dual-path__list li{ padding-left:1.4em; position:relative; margin-bottom:.6em; font-size:var(--fs-small); }
.dual-path__list li::before{ content:"—"; position:absolute; left:0; opacity:.55; }
.services-compact{ display:flex; flex-direction:column; gap:var(--sp-5); }
.service-compact h4{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:.3em; }
.service-compact p{ font-size:var(--fs-small); color:var(--text-soft); margin-bottom:0; }

/* ---------- 11. SECTION HEADERS ---------- */
.section-head{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--sp-7); align-items:end; margin-bottom:var(--sp-7); }
.section-head > .link-arrow{ justify-self:start; }
.section-head--center{ grid-template-columns:1fr; justify-items:center; text-align:center; max-width:42rem; margin-inline:auto; }
.section-head h2{ margin-top:var(--sp-7); }

/* ---------- 12. ABOUT ---------- */
.about-teaser{ display:flex; flex-wrap:wrap; gap:var(--sp-9); align-items:flex-start; }
.about-teaser__figure{ position:static; flex:0 0 22rem; max-width:100%; }
.about-teaser > div:last-child{ flex:1 1 28rem; min-width:0; }

.about-bio{ display:flow-root; }
.about-hero__figure{ float:right; width:26rem; max-width:40%; margin-left:var(--sp-8); margin-bottom:var(--sp-7); }
.pull-quote{ font-family:var(--font-display); font-style:italic; font-size:var(--fs-h4); color:var(--ink); border-left:2px solid var(--icy-ink); padding-left:var(--sp-6); margin:var(--sp-7) 0; }
.credentials-row{ display:flex; flex-wrap:wrap; gap:var(--sp-5); margin-top:var(--sp-6); }
.credential{ display:flex; align-items:flex-start; gap:.6em; font-size:var(--fs-small); color:var(--text-soft); }
.credential svg{ width:18px; height:18px; margin-top:0.2em; color:var(--icy-ink); flex:none; }

/* ---------- 13. SERVICES ---------- */
.services-list{ border-top:1px solid var(--border); }
.service-row{ display:grid; grid-template-columns:3rem 1fr 1.4fr 13rem; gap:var(--sp-6); align-items:start; padding:var(--sp-6) 0; border-bottom:1px solid var(--border); transition:background var(--dur-fast) var(--ease); }
.service-row__index{ margin-top:.2em; }
.service-row__tools{ margin-top:.3em; }
.service-row:hover{ background:var(--ivory-deep); }
.service-row__index{ font-family:var(--font-display); font-style:italic; color:var(--icy-ink); font-size:1.1rem; }
.service-row h3{ font-size:var(--fs-h4); }
.service-row p{ margin:0; color:var(--text-soft); font-size:var(--fs-small); }
.service-row__tools{ display:flex; flex-wrap:wrap; gap:.4em; justify-content:flex-start; }
.chip{ font-size:0.75rem; font-weight:700; letter-spacing:.02em; padding:.35em .8em; border-radius:var(--radius-pill); background:var(--icy); color:var(--icy-ink); white-space:nowrap; }
.chip--ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--text-soft); }

/* ---------- 14. PORTFOLIO GRID & FILTERS ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-8); }
.filter-bar a, .filter-bar button{ padding:.6em 1.3em; border-radius:var(--radius-pill); border:1px solid var(--border-strong); font-size:0.875rem; font-weight:700; font-family:inherit; background:none; cursor:pointer; transition:all var(--dur-fast) var(--ease); }
.filter-bar a:hover, .filter-bar button:hover{ border-color:var(--ink); }
.filter-bar a.is-active, .filter-bar button.is-active{ background:var(--navy); border-color:var(--navy); color:var(--icy); }
.filter-bar--tight{ margin-bottom:var(--sp-7); }
.portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-7); }
.p-card{ position:relative; display:flex; flex-direction:column; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); border:1px solid var(--border); transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease); }
.p-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.p-card__media{ aspect-ratio:4/3; background:linear-gradient(135deg,var(--icy) 0%, var(--ivory-deep) 100%); position:relative; overflow:hidden; }
.p-card__media img{ width:100%; height:100%; object-fit:cover; }
.p-card__body{ display:flex; flex-direction:column; flex:1; padding:var(--sp-6); }
.p-card__tag{ font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--icy-ink); }
.p-card__title{ margin-top:.4em; font-size:clamp(1.15rem, 1.05rem + 0.35vw, 1.42rem); text-wrap:balance; }
.p-card__meta{ margin-top:var(--sp-3); display:flex; gap:var(--sp-5); font-size:var(--fs-small); color:var(--text-soft); }

/* ---------- 15. SINGLE CASE STUDY ---------- */
.case-hero{ display:grid; grid-template-columns:1fr; gap:var(--sp-6); padding-block:var(--sp-8) var(--sp-7); }
.case-hero__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-8); margin-top:var(--sp-6); padding-top:var(--sp-6); border-top:1px solid var(--border); }
.case-hero__meta dt{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); margin-bottom:.3em; }
.case-hero__meta dd{ margin:0; font-family:var(--font-display); font-size:1.15rem; }
.case-media{ border-radius:var(--radius-lg); overflow:hidden; margin-block:var(--sp-8); }
.case-body{ display:grid; grid-template-columns:0.7fr 1.3fr; gap:var(--sp-9); align-items:start; }
.case-body--full{ grid-template-columns:1fr; }
.case-list-box{ background:var(--ivory-deep); border-radius:var(--radius-md); padding:var(--sp-6); }
.case-list-box__heading{ font-family:var(--font-body); font-size:var(--fs-eyebrow); font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--icy-ink); margin-bottom:var(--sp-4); }
.case-list-box ul{ display:grid; gap:.6em; }
.case-list-box li{ position:relative; padding-left:1.3em; }
.case-list-box li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:5px; border-radius:50%; background:var(--icy-deep); }
.video-thumb{ position:relative; display:block; max-width:36rem; margin:var(--sp-6) auto; transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.video-thumb:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.video-thumb__play{ position:absolute; left:var(--sp-4); bottom:var(--sp-4); width:48px; height:48px; border-radius:50%; background:rgba(20,35,48,0.85); color:#fff; display:flex; align-items:center; justify-content:center; }
.case-gallery{ gap:var(--sp-4) !important; }
.case-gallery .frame-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }
.case-body .flow > * + *{ margin-top:var(--sp-6); }
.case-results{ display:grid; gap:var(--sp-5); }
.result-tile{ padding:var(--sp-5); background:var(--ivory-deep); border-radius:var(--radius-md); }
.result-tile__num{ font-family:var(--font-display); font-style:italic; font-size:1.9rem; color:var(--icy-ink); }
.result-tile__label{ margin-top:.3em; font-size:var(--fs-small); color:var(--text-soft); }
.case-nav{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--sp-6); padding-top:var(--sp-6); margin-top:var(--sp-6); margin-bottom:var(--sp-6); border-top:1px solid var(--border); }

/* ---------- 16. EXPERIENCE TIMELINE ---------- */
.timeline{ border-left:1px solid var(--border-strong); margin-left:.4rem; }
.timeline-item{ position:relative; padding:0 0 var(--sp-8) var(--sp-7); }
.timeline-item::before{ content:""; position:absolute; left:-.4rem; top:.3rem; width:.8rem; height:.8rem; border-radius:50%; background:var(--icy); border:2px solid var(--navy); }
.timeline-item__meta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:baseline; margin-bottom:var(--sp-2); }
.timeline-item__date{ font-size:var(--fs-small); color:var(--icy-ink); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.timeline-item__tags{ display:flex; gap:.4em; }
.timeline-item h3{ font-size:var(--fs-h4); margin-bottom:var(--sp-3); }
.timeline-item ul{ margin-top:var(--sp-3); }
.timeline-item li{ position:relative; padding-left:1.3em; font-size:0.95rem; color:var(--text-soft); margin-bottom:.5em; }
.timeline-item li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--icy-deep); }
.timeline-item__more{ margin-top:var(--sp-4); }
.timeline-item__more svg{ transition:transform var(--dur-fast) var(--ease); }
.timeline-item__more.is-expanded svg{ transform:rotate(180deg); }

.detail-block{ margin:0; }
.detail-block li{ position:relative; padding-left:1.3em; font-size:0.95rem; color:var(--text-soft); margin-bottom:.6em; }
.detail-block li::before{ content:""; position:absolute; left:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--icy-deep); }
.detail-block__note{ font-style:italic; color:var(--text-soft); margin-top:var(--sp-5); font-size:0.9rem; }


/* ---------- 18. TESTIMONIALS ---------- */
.testimonial{ max-width:46rem; }
.testimonial blockquote{ margin:0; font-family:var(--font-display); font-style:italic; font-size:var(--fs-h3); line-height:1.3; }
.testimonial cite{ display:block; margin-top:var(--sp-5); font-style:normal; font-size:var(--fs-small); color:var(--text-soft); }

/* compact 3-up cards (homepage highlight) */
.testimonial-card{ display:flex; flex-direction:column; }
.testimonial-card svg{ color:var(--icy-ink); margin-bottom:var(--sp-4); }
.testimonial-card blockquote{ margin:0 0 var(--sp-5); font-family:var(--font-display); font-style:italic; font-size:1.05rem; line-height:1.5; }
.testimonial-card cite{ display:block; font-style:normal; font-size:var(--fs-small); color:var(--text-soft); }
.testimonial-card cite strong{ display:block; margin-bottom:.2em; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--ink); }

/* homepage testimonials carousel — 3 cards visible, scrolled via arrows */
.testimonial-carousel{ display:flex; align-items:center; gap:var(--sp-5); }
.testimonial-carousel__arrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-strong); background:var(--ivory); color:var(--ink); cursor:pointer; transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.testimonial-carousel__arrow:hover{ background:var(--icy); border-color:var(--icy); }
.testimonial-carousel__viewport{ flex:1 1 0; min-width:0; }
.testimonial-carousel__box{ display:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--sp-8); max-width:44rem; margin-inline:auto; text-align:center; align-items:center; opacity:1; transform:translateY(0); transition:opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.testimonial-carousel__box.is-active{ display:flex; }
.testimonial-carousel__box.is-active.is-entering{ opacity:0; transform:translateY(14px); transition:none; }
@media (max-width:640px){
  .testimonial-carousel__box{ padding:var(--sp-6); }
  .testimonial-carousel__arrow{ width:44px; height:44px; }
}

/* ---------- 19. CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-9); }
.contact-card{ background:var(--navy); color:#fff; border-radius:var(--radius-lg); padding:var(--sp-8); height:fit-content; }
.contact-card a{ display:flex; align-items:center; gap:.7em; padding-block:.9em; border-bottom:1px solid var(--navy-line); font-weight:600; }
.contact-card a:last-of-type{ border-bottom:none; }

/* ---------- 19b. CLIENT LOGOS (slow scrolling strip) ---------- */
.logo-marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logo-marquee__track{ display:flex; align-items:center; gap:var(--sp-9); width:max-content; animation:kb-logo-scroll 65s linear infinite; }
.logo-marquee:hover .logo-marquee__track{ animation-play-state:paused; }
.client-logos__item{ flex:none; display:flex; align-items:center; height:4rem; }
.client-logos__item img{ height:100%; width:auto; max-width:none; object-fit:contain; }
@keyframes kb-logo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .logo-marquee__track{ animation:none; }
}

/* ---------- 20. MOCKUP FRAMES ---------- */
.frame-card{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--surface); border:1px solid var(--border); }
.frame-card img, .frame-card svg{ width:100%; display:block; }
.placeholder-art{ width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--icy) 0%, var(--ivory) 65%); color:var(--icy-ink); }
.placeholder-art--dark{ background:linear-gradient(150deg, var(--navy-soft), var(--navy)); color:var(--icy); }
.placeholder-note{ position:absolute; bottom:var(--sp-3); right:var(--sp-3); font-size:0.65rem; letter-spacing:.06em; text-transform:uppercase; background:rgba(20,35,48,0.72); color:#fff; padding:.35em .7em; border-radius:var(--radius-pill); }
.portrait-mark{ width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,var(--icy) 0%, var(--ivory) 65%); }
.portrait-mark--dark{ background:linear-gradient(150deg, var(--navy-soft), var(--navy)); }

/* ---------- 21. FOOTER ---------- */
.site-footer{ background:var(--navy); color:rgba(255,255,255,0.82); padding-block:var(--sp-6) var(--sp-4); }
.footer-grid{ display:grid; grid-template-columns:1.3fr 0.7fr 0.7fr 0.9fr; gap:var(--sp-7); padding-bottom:var(--sp-8); }
.footer-grid h4{ color:#fff; font-size:var(--fs-small); text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-body); margin-bottom:var(--sp-4); }
.footer-grid a{ display:block; padding-block:.35em; font-size:0.9rem; color:rgba(255,255,255,0.72); transition:color var(--dur-fast) var(--ease); }
.footer-grid a:hover{ color:var(--icy); }
.footer-grid a.btn{ display:inline-flex; padding:0.95em 1.9em; font-size:0.95rem; color:var(--navy); background:var(--icy); }
.footer-grid a.btn:hover{ color:var(--icy); background:var(--navy); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--sp-4); padding-top:var(--sp-6); border-top:1px solid var(--navy-line); font-size:0.8rem; color:rgba(255,255,255,0.5); }
.footer-brand{ margin-bottom:var(--sp-4); }
.footer-brand svg{ height:32px; }
.social-row{ display:flex; gap:var(--sp-4); margin-top:var(--sp-5); }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--navy-line); display:flex; align-items:center; justify-content:center; padding:0; }
.social-row a:hover{ border-color:var(--icy); }
.social-row svg{ width:16px; height:16px; }

/* ---------- 22. FORMS ---------- */
.form-grid{ display:grid; gap:var(--sp-5); }
.field{ display:flex; flex-direction:column; gap:.5em; }
.field label{ font-size:0.8125rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); }
.field input, .field textarea{
  border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:0.9em 1.1em;
  background:var(--surface); transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus{ border-color:var(--icy-ink); box-shadow:0 0 0 3px rgba(193,229,255,0.45); outline:none; }
.field textarea{ resize:vertical; min-height:9rem; }
.field-help{ font-size:0.75rem; color:var(--ink-faint); }
.field-error{ font-size:0.75rem; color:#B3432B; }
.form-status{ padding:1em 1.3em; border-radius:var(--radius-md); font-size:0.9rem; margin-bottom:var(--sp-5); }
.form-status--success{ background:#E4F3E6; color:#276340; }
.form-status--error{ background:#FBE7E2; color:#8A3220; }

/* ---------- 23. SCROLL REVEAL ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-group] [data-reveal]:nth-child(1){ transition-delay:0ms; }
[data-reveal-group] [data-reveal]:nth-child(2){ transition-delay:90ms; }
[data-reveal-group] [data-reveal]:nth-child(3){ transition-delay:180ms; }
[data-reveal-group] [data-reveal]:nth-child(4){ transition-delay:270ms; }
[data-reveal-group] [data-reveal]:nth-child(5){ transition-delay:360ms; }
[data-reveal-group] [data-reveal]:nth-child(6){ transition-delay:450ms; }

/* ---------- 24. RESPONSIVE ---------- */
@media (max-width:680px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; max-width:26rem; }
}
@media (max-width:1080px){
  .about-teaser__figure{ max-width:22rem; }
  .about-hero__figure{ float:none; width:100%; max-width:22rem; margin:0 auto var(--sp-7); }
  .case-body{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .dual-path{ grid-template-columns:1fr; }
  .dual-path__col + .dual-path__col{ border-left:none; border-top:1px solid var(--border); }
}
@media (max-width:860px){
  .primary-nav{ position:fixed; top:var(--header-height, 64px); left:0; right:0; height:calc(100vh - var(--header-height, 64px)); background:var(--ivory); flex-direction:column; align-items:flex-start; padding:var(--sp-7) var(--gutter); transform:translateX(100%); transition:transform var(--dur-med) var(--ease); overflow-y:auto; }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:var(--sp-5); width:100%; }
  .primary-nav a{ font-size:1.4rem; font-family:var(--font-display); }
  .primary-nav.is-open{ transform:translateX(0); }
  .header-cta .btn-accent{ display:none; }
  .menu-toggle{ display:block; }
  .menu-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ opacity:0; }
  .menu-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .section-head{ grid-template-columns:1fr; }
  .service-row{ grid-template-columns:2.2rem 1fr; }
  .service-row p{ grid-column:2; }
  .service-row__tools{ grid-column:2; justify-content:flex-start; margin-top:.5em; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .stats-strip__row{ grid-template-columns:repeat(2, 1fr); row-gap:var(--sp-8); }
}
@media (max-width:560px){
  .stats-strip__row{ grid-template-columns:1fr; gap:var(--sp-7); }
  .stat__label{ font-size:0.75rem; }
  :root{ --sp-9: 3.5rem; --sp-10:4.5rem; }
  .case-hero__meta{ gap:var(--sp-5); }
}

/* ---------- 25. PRINT ---------- */
@media print{
  .site-header, .site-footer, .hero__actions, .filter-bar{ display:none !important; }
  body{ background:#fff; }
}