:root{
  --bg:#f4f0e8;
  --paper:#fffdf8;
  --ink:#111111;
  --muted:#69655f;
  --line:#d8d1c6;
  --pink:#f3a5b7;
  --yellow:#f0d46b;
  --blue:#9fc7f3;
  --green:#b9d6b1;
  --lilac:#c7b4e8;
  --orange:#f1ad72;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"DM Sans",system-ui,sans-serif;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 34px;
  background:rgba(244,240,232,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(17,17,17,.08);
}
.brand{
  width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;
  display:grid;place-items:center;font-weight:700;
}
nav{display:flex;gap:28px;align-items:center;font-size:14px}
.nav-cta{border-bottom:1px solid var(--ink);padding-bottom:2px}
.hero{
  padding:88px 34px 28px;
  max-width:1380px;margin:0 auto;
}
.eyebrow{
  font-size:12px;letter-spacing:.14em;font-weight:700;
}
.hero h1{
  margin:20px 0 22px;
  max-width:1000px;
  font-family:"Instrument Serif",serif;
  font-size:clamp(64px,10vw,150px);
  line-height:.83;
  font-weight:400;
  letter-spacing:-.035em;
}
.hero h1 em{font-weight:400}
.hero-copy{
  max-width:680px;
  font-size:clamp(20px,2.1vw,31px);
  line-height:1.25;
  margin:0 0 30px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 20px;border-radius:999px;border:1.3px solid var(--ink);
  font-weight:600;font-size:14px;
}
.button-dark{background:var(--ink);color:white}
.button-light{background:transparent}
.proof-strip{
  margin-top:72px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:repeat(4,1fr);
}
.proof-strip div{padding:26px 20px 24px 0}
.proof-strip strong{
  display:block;font-family:"Instrument Serif",serif;
  font-size:40px;font-weight:400;
}
.proof-strip span{color:var(--muted);font-size:13px}
.work-section{max-width:1380px;margin:0 auto;padding:110px 34px 30px}
.section-heading{
  display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:end;
  margin-bottom:34px;
}
.section-heading h2,.about h2,.contact h2{
  font-family:"Instrument Serif",serif;
  font-size:clamp(44px,5.5vw,82px);
  line-height:.95;font-weight:400;margin:14px 0 0;
}
.section-heading p{font-size:17px;line-height:1.5;color:var(--muted);max-width:480px}
.filters{
  position:sticky;top:78px;z-index:10;
  display:flex;gap:8px;flex-wrap:wrap;
  padding:13px 0 18px;
  background:linear-gradient(var(--bg) 72%, rgba(244,240,232,0));
}
.filter{
  border:1px solid var(--ink);background:transparent;border-radius:999px;
  padding:10px 15px;font:600 12px "DM Sans";text-transform:uppercase;letter-spacing:.05em;
  cursor:pointer;
}
.filter.active{background:var(--ink);color:white}
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:12px;
  align-items:start;
}
.work-column{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}
.project-card{
  break-inside:avoid;
  margin-bottom:0;
  background:var(--paper);
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(17,17,17,.09);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.project-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.09)}
.project-card.is-hidden{display:none}
.card-media{
  aspect-ratio:var(--ratio, 4/5);
  position:relative;
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:var(--card-color);
  overflow:hidden;
}
.card-media::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.55), transparent 26%),
    linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,0));
}
.card-index{
  position:absolute;top:16px;right:16px;font-size:12px;font-weight:700;opacity:.55
}
.card-title-art{
  position:relative;
  font-family:"Instrument Serif",serif;
  font-size:clamp(32px,3.2vw,54px);
  line-height:.92;
  max-width:85%;
}
.card-body{padding:17px 17px 19px}
.client-row{
  display:flex;justify-content:space-between;gap:16px;
  align-items:flex-start;margin-bottom:12px
}
.project-name{font-weight:700;font-size:16px;line-height:1.2}
.client{font-size:12px;color:var(--muted);margin-top:4px}
.featured-pill{
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--ink);padding:5px 8px;border-radius:999px;white-space:nowrap
}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 12px}
.tag{
  padding:5px 8px;border-radius:999px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid rgba(17,17,17,.65)
}
.card-result{font-size:15px;font-weight:700;margin:4px 0 7px}
.card-context{font-size:13px;line-height:1.45;color:var(--muted);margin:0}
.thinking-section{max-width:1380px;margin:0 auto;padding:80px 34px}
.thinking-card{
  background:var(--ink);color:white;border-radius:24px;padding:42px;
  display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:start
}
.quote-mark{
  font-family:"Instrument Serif",serif;font-size:110px;line-height:.7;color:var(--pink)
}
.thinking-card p{
  font-family:"Instrument Serif",serif;font-size:clamp(34px,4vw,64px);
  line-height:1;margin:0 0 18px;max-width:1000px
}
.thinking-card span{grid-column:2;color:#cfcfcf;font-size:13px}
.about{
  max-width:1380px;margin:0 auto;padding:90px 34px 110px;
  display:grid;grid-template-columns:1.2fr 1fr;gap:80px;
}
.about-right{padding-top:24px}
.about-right p{font-size:18px;line-height:1.55;color:#383530}
.service-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.service-list span{border:1px solid var(--ink);border-radius:999px;padding:9px 12px;font-size:12px;font-weight:600}
.contact{
  max-width:1380px;margin:0 auto 50px;padding:48px 34px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:40px;align-items:flex-end
}
.contact h2{max-width:780px}
footer{
  border-top:1px solid var(--line);padding:22px 34px 30px;
  display:flex;justify-content:space-between;color:var(--muted);font-size:12px
}
.project-modal{
  width:min(920px,92vw);max-height:88vh;border:none;border-radius:24px;
  padding:0;background:var(--paper);box-shadow:0 30px 80px rgba(0,0,0,.25)
}
.project-modal::backdrop{background:rgba(17,17,17,.62);backdrop-filter:blur(4px)}
.modal-close{
  position:sticky;top:16px;float:right;margin:16px 16px 0 0;z-index:3;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);
  background:var(--paper);font-size:22px;cursor:pointer
}
.modal-inner{padding:48px}
.modal-kicker{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.modal-inner h3{
  font-family:"Instrument Serif",serif;font-size:clamp(46px,6vw,80px);
  line-height:.92;font-weight:400;margin:12px 0 18px
}
.modal-result{
  font-family:"Instrument Serif",serif;font-size:32px;margin:28px 0
}
.modal-copy{font-size:17px;line-height:1.6;max-width:740px;color:#34312d}
.modal-role{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.modal-note{
  margin-top:30px;padding:20px;border-left:3px solid var(--ink);
  background:#f4efe5;font-size:14px;line-height:1.5
}
@media(max-width:980px){
  .proof-strip{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-heading,.about{grid-template-columns:1fr;gap:28px}
}
@media(max-width:640px){
  .site-header{padding:14px 18px}
  nav a:not(.nav-cta){display:none}
  .hero,.work-section,.thinking-section,.about{padding-left:18px;padding-right:18px}
  .hero{padding-top:58px}
  .hero h1{font-size:64px}
  .proof-strip{grid-template-columns:1fr 1fr;margin-top:48px}
  .proof-strip div{padding:18px 10px 18px 0}
  .proof-strip strong{font-size:30px}
  .section-heading{margin-bottom:22px}
  .work-grid{grid-template-columns:1fr}
  .thinking-card{grid-template-columns:1fr;padding:28px}
  .quote-mark{font-size:80px}
  .thinking-card span{grid-column:1}
  .contact{margin:0 18px 36px;padding:36px 0;align-items:flex-start;flex-direction:column}
  footer{padding:20px 18px}
  .modal-inner{padding:36px 22px}
}

.modal-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}

/* V2 — real Pinterest-style media treatment */
.card-media.real-media{
  padding:0;
  background:#ddd;
  aspect-ratio:var(--ratio,4/5);
}
.card-media.real-media::before{display:none}
.project-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  background:#111;
}
.project-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#111;
}
.placeholder-art{
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-end;
  padding:18px;
  background:var(--card-color);
}
.placeholder-art span{
  font-family:"Instrument Serif",serif;
  font-size:34px;
  line-height:.95;
  max-width:90%;
}
.featured-overlay{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  background:rgba(255,253,248,.93);
  border:1px solid rgba(17,17,17,.65);
  border-radius:999px;
  padding:6px 9px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.meta-block{margin-top:14px}
.meta-label,.modal-section-label{
  display:block;
  margin-bottom:6px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.type-line{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:8px;
}
.type-line span{
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.modal-type{
  margin-top:8px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}
.modal-note strong{
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* V3 */
.filter-system{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  position:sticky;
  top:76px;
  z-index:10;
  padding:14px 0 18px;
  background:linear-gradient(var(--bg) 82%, rgba(244,240,232,0));
}
.filter-heading{
  display:block;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
  margin-bottom:8px;
}
.filters{position:static;padding:0;background:none}
.creator-handle{
  display:inline-block;
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}
.creator-handle:hover,.modal-creator:hover{text-decoration:underline}

/* Role tag palette */
.role-tags .tag,.type-tags .tag{border:none}
.role-strategy{background:#FFE38A}
.role-concept{background:#F58FA2}
.role-script{background:#c5b2ea}
.role-shoot{background:#9BD5EA}
.role-edit{background:#A9C9A3}

/* Type tag palette */
.type-creator{background:#ffd8e6}
.type-brand{background:#E5E1FC}
.type-sport{background:#d9edcf}

/* Detail view keeps the work visible */
.project-modal{
  width:min(1120px,94vw);
  max-height:92vh;
}
.modal-layout{
  display:grid;
  grid-template-columns:minmax(320px,.9fr) minmax(390px,1.1fr);
  gap:0;
}
.modal-media-column{
  background:#111;
  min-height:78vh;
}
.modal-media-sticky{
  position:sticky;
  top:0;
  height:78vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.modal-video,.modal-image{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#111;
}
.modal-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:40px;
  background:var(--card-color);
  font-family:"Instrument Serif",serif;
  font-size:50px;
  text-align:center;
}
.modal-copy-column{
  padding:50px 44px 48px;
  overflow:visible;
}
.modal-copy-column h3{
  font-family:"Instrument Serif",serif;
  font-size:clamp(46px,5vw,74px);
  line-height:.94;
  font-weight:400;
  margin:10px 0 22px;
}
.modal-creator{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
}
.modal-type-label{margin-top:18px}
.modal-result{
  margin-top:28px;
  font-family:"Instrument Serif",serif;
  font-size:32px;
  line-height:1.05;
}

/* More personal / Notes-app feeling */
.notes-app{
  margin-top:34px;
  border-radius:18px;
  background:#fffbe8;
  border:1px solid rgba(40,36,20,.08);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  overflow:hidden;
  transform:rotate(-.4deg);
}
.notes-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 16px 8px;
  color:#c68c00;
  font-size:13px;
}
.notes-more{letter-spacing:2px}
.notes-date{
  text-align:center;
  font-size:10px;
  color:#8c887a;
  margin:4px 0 16px;
}
.notes-text{
  padding:0 22px 24px;
  font-size:16px;
  line-height:1.55;
  letter-spacing:-.01em;
  color:#29271f;
}
@media(max-width:820px){
  .filter-system{grid-template-columns:1fr}
  .modal-layout{grid-template-columns:1fr}
  .modal-media-column{min-height:auto}
  .modal-media-sticky{position:relative;height:52vh}
  .modal-copy-column{padding:34px 22px 38px}
}

/* V4 refinements */
.notes-app{
  max-width:520px;
  margin-top:28px;
}
.notes-topbar{
  padding:11px 15px 5px;
}
.notes-back{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
}
.notes-text{
  padding:10px 18px 19px;
  font-size:14px;
  line-height:1.5;
}

/* V5 refinements */

/* Stronger, consistent display typography for the creative work itself */
.project-name,
.card-result,
.modal-copy-column h3,
.analytics-stat strong{
  font-family:"Anton","DM Sans",sans-serif;
  font-weight:400;
  letter-spacing:.01em;
}
.project-name{
  font-size:22px;
  line-height:1.08;
}
.card-result{
  font-size:18px;
  line-height:1.15;
  margin-top:14px;
}
.modal-copy-column h3{
  font-size:clamp(48px,5vw,78px);
  line-height:.96;
  text-transform:uppercase;
}
.analytics-stat strong{
  display:block;
  font-size:34px;
  line-height:1;
}

/* Filters: clearly two systems */
.filter-system{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  position:sticky;
  top:76px;
  z-index:10;
  padding:16px 0 18px;
  background:linear-gradient(var(--bg) 84%, rgba(244,240,232,0));
}
.filter-heading{
  display:block;
  margin-bottom:9px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--muted);
}
.filters{
  position:static !important;
  padding:0 !important;
  background:none !important;
}
.result-count{
  font-size:11px;
  color:var(--muted);
  margin:4px 0 12px;
}

/* Platform logo badges sit on the work itself */
.platform-badges{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:3;
  display:flex;
  gap:6px;
}
.platform-badge{
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgba(17,17,17,.78);
  border:1px solid rgba(255,255,255,.65);
  display:grid;
  place-items:center;
  backdrop-filter:blur(5px);
}
.platform-badge svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:white;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.platform-badge svg .fill,
.platform-badge svg path:not([d^="M21"]):not([d^="M14"]){
  fill:white;
}

/* Detail layout: actual portrait proportions, not a giant black container */
.project-modal{
  width:min(1080px,94vw);
}
.modal-layout{
  grid-template-columns:minmax(300px,390px) minmax(0,1fr);
  align-items:start;
}
.modal-media-column{
  background:transparent;
  min-height:0;
  padding:24px 0 24px 24px;
}
.modal-media-sticky{
  position:sticky;
  top:24px;
  height:auto;
  max-height:calc(92vh - 48px);
  aspect-ratio:9/16;
  border-radius:18px;
  overflow:hidden;
  background:#111;
}
.modal-video,
.modal-image{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#111;
}
.modal-copy-column{
  padding:44px 42px 44px;
}

/* Analytics now sit between context and Katie's note */
.analytics-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:30px 0 8px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.analytics-strip.single{
  grid-template-columns:1fr;
}
.analytics-stat{
  padding:20px 18px 18px 0;
}
.analytics-stat + .analytics-stat{
  border-left:1px solid var(--line);
  padding-left:18px;
}
.analytics-stat span{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:var(--muted);
}

/* Notes stays playful, but compact */
.notes-app{
  max-width:460px;
  margin-top:24px;
}
.notes-text{
  font-size:13.5px;
}

/* Better use of real media in the Pinterest wall */
.card-media.real-media{
  background:#111;
}
.project-video{
  object-fit:cover;
}

@media(max-width:820px){
  .filter-system{grid-template-columns:1fr}
  .modal-layout{grid-template-columns:1fr}
  .modal-media-column{padding:18px 18px 0}
  .modal-media-sticky{
    position:relative;
    top:0;
    width:min(100%,390px);
    margin:0 auto;
    max-height:none;
  }
  .analytics-strip{grid-template-columns:1fr 1fr 1fr}
}

/* V6 refinements — restore the softer editorial typography */

/* Pinterest titles: back to the original editorial serif treatment */
.project-name{
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:17px !important;
  line-height:1.2 !important;
}

/* Opened project title: back to Instrument Serif, no forced capitals */
.modal-copy-column h3{
  font-family:"Instrument Serif",serif !important;
  font-weight:400 !important;
  letter-spacing:-.02em !important;
  text-transform:none !important;
  font-size:clamp(46px,5vw,74px) !important;
  line-height:.94 !important;
}

/* Analytics: back to elegant serif numerals rather than condensed display */
.analytics-stat strong{
  font-family:"Instrument Serif",serif !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  font-size:38px !important;
  line-height:1 !important;
}

/* Top-level result text back to the previous clean sans */
.card-result{
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:15px !important;
  line-height:1.2 !important;
}

/* Katie's note should feel compact, but use the full content-column width */
.notes-app{
  width:100% !important;
  max-width:none !important;
  margin-top:24px !important;
}
.notes-text{
  width:100%;
  font-size:13.5px !important;
  line-height:1.5 !important;
}

/* V7 — platform icon + duplicate-title cleanup */
.platform-badge svg{
  fill:none;
  stroke:white;
}
.platform-badge .tiktok-mark{
  fill:white;
  stroke:none;
}
.platform-badge .tiktok-mark path{
  fill:white !important;
  stroke:none !important;
}

/* Only one featured badge should visually occupy the card */
.card-media .featured-overlay ~ .featured-overlay{
  display:none;
}

/* V8 — Featured badge cleanup */
.featured-overlay{
  position:absolute !important;
  top:14px !important;
  left:14px !important;
  z-index:5 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:8px 13px !important;
  border:1px solid #111 !important;
  border-radius:999px !important;
  background:#fffdf8 !important;
  color:#111 !important;
  box-shadow:none !important;
  outline:none !important;
  filter:none !important;
  transform:none !important;
}
.featured-overlay::before,
.featured-overlay::after{
  content:none !important;
  display:none !important;
}
.card-media .featured-overlay ~ .featured-overlay{
  display:none !important;
}

.part-of{margin-top:5px;font-size:10px;line-height:1.25;color:var(--muted);font-style:italic}
.modal-part-of{margin:-8px 0 24px;font-size:11px;color:var(--muted);font-style:italic}
.series-performance-label{margin:28px 0 -22px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* V10: four analytics stay on one row on desktop */
.analytics-strip{
  grid-template-columns:repeat(var(--stat-count, 4),minmax(0,1fr));
}
.analytics-stat{
  min-width:0;
}
@media(max-width:1100px) and (min-width:821px){
  .analytics-stat strong{font-size:32px !important}
  .analytics-stat span{font-size:10px}
}
@media(max-width:820px){
  .analytics-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .analytics-stat:nth-child(3){border-left:0}
  .analytics-stat:nth-child(n+3){border-top:1px solid var(--line)}
}
/* Use the supplied Tara cover framing cleanly on the board */
.project-video[poster*="tara-capcut-shortcuts-poster"]{
  object-position:center top;
}

/* V11 — project/filter polish */
.type-entertainment{background:#bfe3f4}

/* Filters inherit the same palette as their matching tags on hover/selection */
.role-filter[data-filter="strategy"]:hover,
.role-filter[data-filter="strategy"].active{background:#FFE38A;color:var(--ink);border-color:#FFE38A}
.role-filter[data-filter="concept"]:hover,
.role-filter[data-filter="concept"].active{background:#F58FA2;color:var(--ink);border-color:#F58FA2}
.role-filter[data-filter="script"]:hover,
.role-filter[data-filter="script"].active{background:#c5b2ea;color:var(--ink);border-color:#c5b2ea}
.role-filter[data-filter="shoot"]:hover,
.role-filter[data-filter="shoot"].active{background:#9BD5EA;color:var(--ink);border-color:#9BD5EA}
.role-filter[data-filter="edit"]:hover,
.role-filter[data-filter="edit"].active{background:#A9C9A3;color:var(--ink);border-color:#A9C9A3}

.type-filter[data-filter="creator"]:hover,
.type-filter[data-filter="creator"].active{background:#ffd8e6;color:var(--ink);border-color:#ffd8e6}
.type-filter[data-filter="brand"]:hover,
.type-filter[data-filter="brand"].active{background:#E5E1FC;color:var(--ink);border-color:#E5E1FC}
.type-filter[data-filter="sport"]:hover,
.type-filter[data-filter="sport"].active{background:#d9edcf;color:var(--ink);border-color:#d9edcf}
.type-filter[data-filter="entertainment"]:hover,
.type-filter[data-filter="entertainment"].active{background:#bfe3f4;color:var(--ink);border-color:#bfe3f4}

/* Keep All as the neutral state */
.filter[data-filter="all"]:hover,
.filter[data-filter="all"].active{background:var(--ink);color:#fff;border-color:var(--ink)}


/* V21 — Racing on the Edge modal carousel */
.media-carousel{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  background:#111;
  overflow:hidden;
}

.carousel-stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#111;
}

.carousel-image,
.carousel-video{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  background:#111;
}

.carousel-arrow{
  position:absolute;
  top:50%;
  z-index:5;
  width:38px;
  height:38px;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.72);
  border-radius:50%;
  background:rgba(17,17,17,.62);
  color:#fff;
  font:400 28px/1 "DM Sans",system-ui,sans-serif;
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter:blur(5px);
}
.carousel-prev{left:12px}
.carousel-next{right:12px}

.carousel-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:5;
  transform:translateX(-50%);
  display:flex;
  gap:7px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(17,17,17,.5);
  backdrop-filter:blur(5px);
}

.carousel-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.48);
  cursor:pointer;
}
.carousel-dot.active{background:#fff}

/* The first carousel asset is 4:5, while the following videos are portrait.
   Contain each asset inside the modal frame so none of the artwork is cropped. */
.modal-media-sticky:has(.media-carousel){
  aspect-ratio:9/16;
}


/* V22 — Hero positioning + work collage */
.hero{position:relative;overflow:hidden;padding-right:50%}
.hero > .eyebrow,
.hero > h1,
.hero > .hero-copy,
.hero > .hero-actions,
.hero > .proof-strip{position:relative;z-index:3}

.hero-collage{
  position:absolute;
  z-index:1;
  top:50%;
  right:clamp(24px,4vw,72px);
  width:min(44vw,700px);
  height:min(72vh,650px);
  transform:translateY(-52%);
  pointer-events:none;
}
.hero-pin{
  position:absolute;
  overflow:hidden;
  border-radius:24px;
  background:#ece9e4;
  box-shadow:0 18px 44px rgba(24,24,24,.10);
}
.hero-pin img,.hero-pin video{display:block;width:100%;height:100%;object-fit:cover}
.hero-pin-fan{width:38%;height:58%;left:30%;top:18%;z-index:4}
.hero-pin-brooke{width:27%;height:43%;left:0;top:3%;z-index:2;transform:rotate(-1.5deg)}
.hero-pin-everton-fan{width:25%;height:39%;right:0;top:0;z-index:1}
.hero-pin-players{width:28%;height:43%;right:2%;bottom:0;z-index:3;transform:rotate(1.2deg)}
.hero-pin-hazel{width:25%;height:38%;left:4%;bottom:0;z-index:1}

@media(max-width:980px){
  .hero{padding-right:42%}
  .hero-collage{right:-5vw;width:46vw;opacity:.96}
}
@media(max-width:760px){
  .hero{padding-right:var(--page-pad);overflow:visible}
  .hero-collage{position:relative;top:auto;right:auto;width:100%;height:450px;margin-top:34px;transform:none}
}


/* V23 — denser Pinterest-style hero composition */
.hero{
  min-height:680px;
  padding-right:48%;
}
.hero .hero-copy{
  max-width:560px;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.55;
}

.hero-collage{
  right:clamp(10px,2.5vw,44px);
  width:min(51vw,820px);
  height:min(79vh,720px);
  transform:translateY(-50%);
}
.hero-pin{
  border-radius:28px;
  box-shadow:0 20px 46px rgba(24,24,24,.11);
}

/* Larger, deliberately overlapping cards rather than five isolated pins */
.hero-pin-fan{
  width:43%;
  height:64%;
  left:29%;
  top:17%;
  z-index:5;
}
.hero-pin-brooke{
  width:34%;
  height:52%;
  left:2%;
  top:1%;
  z-index:3;
  transform:rotate(-2deg);
}
.hero-pin-everton-fan{
  width:32%;
  height:48%;
  right:0;
  top:1%;
  z-index:2;
  transform:rotate(1.5deg);
}
.hero-pin-players{
  width:34%;
  height:51%;
  right:0;
  bottom:0;
  z-index:4;
  transform:rotate(1deg);
}
.hero-pin-hazel{
  width:33%;
  height:49%;
  left:2%;
  bottom:0;
  z-index:4;
  transform:rotate(-1deg);
}

/* Proof metrics are a separate horizontal beat below the hero */
.proof-section{
  padding:0 var(--page-pad) 38px;
}
.proof-section .proof-strip{
  position:relative;
  z-index:auto;
  width:100%;
  margin:0;
}

@media(max-width:980px){
  .hero{padding-right:43%}
  .hero-collage{width:51vw;right:-7vw}
}
@media(max-width:760px){
  .hero{min-height:auto;padding-right:var(--page-pad)}
  .hero .hero-copy{font-size:15px}
  .hero-collage{width:100%;height:500px;right:auto}
  .proof-section{padding-top:28px}
}


/* V24 — reset hero into a safe two-column composition */
.hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr) !important;
  gap:56px !important;
  align-items:center !important;
  min-height:650px !important;
  padding-right:34px !important;
  overflow:hidden !important;
}

/* Keep all hero copy strictly in the left column */
.hero > .eyebrow,
.hero > h1,
.hero > .hero-copy,
.hero > .hero-actions{
  grid-column:1 !important;
  position:relative !important;
  z-index:5 !important;
  max-width:100% !important;
}

.hero > .eyebrow{align-self:end}
.hero > h1{
  margin-top:12px !important;
  margin-bottom:22px !important;
  font-size:clamp(72px,8vw,132px) !important;
  line-height:.86 !important;
}
.hero > .hero-copy{
  max-width:560px !important;
  font-size:16px !important;
  line-height:1.5 !important;
  margin-bottom:24px !important;
}
.hero > .hero-actions{margin-bottom:0 !important}

/* Collage lives only in the right column */
.hero-collage{
  grid-column:2 !important;
  grid-row:1 / span 4 !important;
  position:relative !important;
  top:auto !important;
  right:auto !important;
  width:100% !important;
  height:560px !important;
  transform:none !important;
  align-self:center !important;
  justify-self:stretch !important;
  pointer-events:none !important;
  overflow:visible !important;
}

/* Controlled overlap: cards touch/overlap, but remain readable */
.hero-pin{
  position:absolute !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:0 16px 36px rgba(24,24,24,.10) !important;
  background:#ece9e4 !important;
  transform:none !important;
}

.hero-pin-fan{
  width:41% !important;
  height:61% !important;
  left:29% !important;
  top:18% !important;
  z-index:5 !important;
}
.hero-pin-brooke{
  width:31% !important;
  height:44% !important;
  left:3% !important;
  top:4% !important;
  z-index:3 !important;
  transform:rotate(-1.5deg) !important;
}
.hero-pin-everton-fan{
  width:30% !important;
  height:43% !important;
  right:3% !important;
  top:3% !important;
  z-index:2 !important;
  transform:rotate(1deg) !important;
}
.hero-pin-hazel{
  width:31% !important;
  height:44% !important;
  left:3% !important;
  bottom:3% !important;
  z-index:3 !important;
  transform:rotate(1deg) !important;
}
.hero-pin-players{
  width:31% !important;
  height:44% !important;
  right:3% !important;
  bottom:3% !important;
  z-index:4 !important;
  transform:rotate(-1deg) !important;
}

.hero-pin img,
.hero-pin video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Analytics remain a separate full-width beat below hero */
.proof-section{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:0 34px 38px !important;
}
.proof-section .proof-strip{
  width:100% !important;
  margin:0 !important;
}

@media(max-width:1100px){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(360px,.9fr) !important;
    gap:34px !important;
  }
  .hero-collage{height:500px !important}
  .hero > h1{font-size:clamp(68px,8vw,108px) !important}
}

@media(max-width:820px){
  .hero{
    display:block !important;
    min-height:auto !important;
    padding-right:18px !important;
  }
  .hero-collage{
    width:100% !important;
    height:480px !important;
    margin-top:34px !important;
  }
  .proof-section{padding-left:18px !important;padding-right:18px !important}
}


/* V25 — restore original left hero feel + controlled Pinterest-style collage */
.hero{
  display:grid !important;
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr) !important;
  gap:42px !important;
  align-items:center !important;
  min-height:690px !important;
  padding:88px 34px 28px !important;
  max-width:1380px !important;
  margin:0 auto !important;
  overflow:hidden !important;
}

/* Left side: back to the original visual language */
.hero > .eyebrow,
.hero > h1,
.hero > .hero-copy,
.hero > .hero-actions{
  grid-column:1 !important;
  position:relative !important;
  z-index:6 !important;
}

.hero > h1{
  margin:20px 0 22px !important;
  max-width:760px !important;
  font-family:"Instrument Serif",serif !important;
  font-size:clamp(64px,8.2vw,128px) !important;
  line-height:.83 !important;
  font-weight:400 !important;
  letter-spacing:-.035em !important;
}

.hero > h1 em{font-weight:400 !important}

.hero > .hero-copy{
  max-width:620px !important;
  font-size:clamp(17px,1.45vw,22px) !important;
  line-height:1.42 !important;
  margin:0 0 30px !important;
}

.hero > .hero-actions{
  display:flex !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}

/* Right side: asymmetric, layered collage with clear z-order */
.hero-collage{
  grid-column:2 !important;
  grid-row:1 / span 4 !important;
  position:relative !important;
  width:100% !important;
  height:590px !important;
  top:auto !important;
  right:auto !important;
  transform:none !important;
  align-self:center !important;
  justify-self:stretch !important;
  pointer-events:none !important;
  overflow:visible !important;
}

.hero-pin{
  position:absolute !important;
  overflow:hidden !important;
  border-radius:26px !important;
  background:#ece9e4 !important;
  box-shadow:0 18px 42px rgba(24,24,24,.10) !important;
}

.hero-pin img,
.hero-pin video{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
}

/* Static images form the back layer */
.hero-pin-brooke{
  width:28% !important;
  height:39% !important;
  left:1% !important;
  top:4% !important;
  z-index:1 !important;
  transform:rotate(-1.5deg) !important;
}

.hero-pin-fan{
  width:42% !important;
  height:62% !important;
  left:28% !important;
  top:16% !important;
  z-index:2 !important;
}

.hero-pin-everton-fan{
  width:29% !important;
  height:42% !important;
  right:1% !important;
  top:1% !important;
  z-index:1 !important;
  transform:rotate(1.2deg) !important;
}

/* Moving tiles sit above the static layer */
.hero-pin-hazel{
  width:31% !important;
  height:45% !important;
  left:2% !important;
  bottom:0 !important;
  z-index:5 !important;
  transform:rotate(.7deg) !important;
}

.hero-pin-players{
  width:33% !important;
  height:47% !important;
  right:2% !important;
  bottom:0 !important;
  z-index:6 !important;
  transform:rotate(-.8deg) !important;
}

/* Proof strip remains its own full-width section underneath */
.proof-section{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:0 34px 38px !important;
}

.proof-section .proof-strip{
  width:100% !important;
  margin:0 !important;
}

@media(max-width:1100px){
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(360px,.88fr) !important;
    gap:30px !important;
  }
  .hero-collage{height:520px !important}
}

@media(max-width:820px){
  .hero{
    display:block !important;
    min-height:auto !important;
    padding:58px 18px 28px !important;
  }
  .hero > h1{
    font-size:64px !important;
    max-width:100% !important;
  }
  .hero > .hero-copy{
    font-size:17px !important;
    max-width:100% !important;
  }
  .hero-collage{
    width:100% !important;
    height:500px !important;
    margin-top:36px !important;
  }
  .proof-section{
    padding-left:18px !important;
    padding-right:18px !important;
  }
}


/* V26 — hero refinement: original left rhythm + asymmetric right collage */

/* LEFT: restore the compact vertical rhythm from the original hero */
.hero{
  align-items:start !important;
  padding-top:88px !important;
}

.hero > .eyebrow{
  margin:0 0 0 !important;
  align-self:auto !important;
}

.hero > h1{
  margin:20px 0 22px !important;
}

.hero > .hero-copy{
  margin:0 0 30px !important;
}

/* Make the left elements flow naturally instead of stretching across grid rows */
.hero > .eyebrow{grid-row:1 !important;}
.hero > h1{grid-row:2 !important;}
.hero > .hero-copy{grid-row:3 !important;}
.hero > .hero-actions{grid-row:4 !important;}

/* RIGHT: deliberately irregular Pinterest-like hierarchy */
.hero-collage{
  grid-row:1 / span 4 !important;
  height:610px !important;
  margin-top:-22px !important;
}

/* Central anchor: What Made You a Fan — tall and dominant */
.hero-pin-fan{
  width:39% !important;
  height:67% !important;
  left:31% !important;
  top:15% !important;
  z-index:2 !important;
  transform:none !important;
}

/* Hazel: MOVING, large, top-left and fully visible above static cards */
.hero-pin-hazel{
  width:34% !important;
  height:48% !important;
  left:0 !important;
  top:0 !important;
  bottom:auto !important;
  z-index:7 !important;
  transform:rotate(-1.2deg) !important;
}

/* Everton players: MOVING, large, right-hand foreground */
.hero-pin-players{
  width:36% !important;
  height:52% !important;
  right:0 !important;
  bottom:0 !important;
  z-index:8 !important;
  transform:rotate(.8deg) !important;
}

/* Everton fan upgrade: deliberately smaller static card */
.hero-pin-everton-fan{
  width:25% !important;
  height:35% !important;
  right:4% !important;
  top:5% !important;
  z-index:1 !important;
  transform:rotate(1.5deg) !important;
}

/* Brooke: static, lower-left, medium-small and layered behind centre */
.hero-pin-brooke{
  width:29% !important;
  height:41% !important;
  left:5% !important;
  top:auto !important;
  bottom:1% !important;
  z-index:3 !important;
  transform:rotate(-1deg) !important;
}

/* Moving cards must always render over images */
.hero-pin-hazel video,
.hero-pin-players video{
  position:relative !important;
  z-index:2 !important;
}

/* Keep collage visually contained on the right */
.hero-pin{
  max-width:none !important;
}

@media(max-width:1100px){
  .hero-collage{
    height:540px !important;
    margin-top:0 !important;
  }
}

@media(max-width:820px){
  .hero{
    display:block !important;
  }
  .hero-collage{
    height:520px !important;
    margin-top:36px !important;
  }
}


/* V27 — requested hero corrections */

/* Bring the left side back closer to the original compact rhythm */
.hero{
  padding-top:72px !important;
  row-gap:0 !important;
}

.hero > .eyebrow{
  margin-bottom:10px !important;
}

.hero > h1{
  margin:10px 0 18px !important;
  max-width:800px !important;
  font-size:clamp(76px,9vw,142px) !important;
  line-height:.82 !important;
}

.hero > .hero-copy{
  max-width:610px !important;
  margin:0 0 24px !important;
  font-size:clamp(16px,1.25vw,19px) !important;
  line-height:1.45 !important;
}

.hero > .hero-actions{
  margin-top:0 !important;
}

/* Brooke: use the exact supplied cover framing and keep it clearly visible */
.hero-pin-brooke img{
  object-fit:cover !important;
  object-position:center center !important;
}

/* Preserve stronger size variation on the right */
.hero-pin-hazel{
  width:36% !important;
  height:50% !important;
}

.hero-pin-fan{
  width:40% !important;
  height:66% !important;
}

.hero-pin-everton-fan{
  width:23% !important;
  height:33% !important;
}

.hero-pin-brooke{
  width:31% !important;
  height:43% !important;
}

.hero-pin-players{
  width:37% !important;
  height:53% !important;
}


/* V28 — proof strip becomes the first intentional colour block */
.proof-section{
  max-width:none !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:#cbdcff !important;
}

.proof-section .proof-strip{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:48px 34px 52px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:34px !important;
  align-items:start !important;
  border:0 !important;
}

.proof-item{
  min-width:0 !important;
}

.proof-item strong{
  display:block !important;
  margin:0 0 10px !important;
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-size:clamp(46px,5vw,78px) !important;
  line-height:.95 !important;
  font-weight:800 !important;
  letter-spacing:-.055em !important;
  color:#171717 !important;
  white-space:nowrap !important;
}

.proof-item span{
  display:block !important;
  max-width:220px !important;
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:700 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase !important;
  color:#171717 !important;
}

@media(max-width:900px){
  .proof-section .proof-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    row-gap:38px !important;
  }
}

@media(max-width:560px){
  .proof-section .proof-strip{
    grid-template-columns:1fr !important;
    padding:38px 18px 42px !important;
  }
  .proof-item strong{
    font-size:58px !important;
  }
}


/* V29 — compact proof strip, no collisions */
.proof-section{
  background:#cbdcff !important;
  width:100% !important;
}

.proof-section .proof-strip{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:30px 34px 32px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:0 !important;
  align-items:start !important;
}

.proof-item{
  min-width:0 !important;
  padding:0 28px !important;
  border-left:1px solid rgba(23,23,23,.14) !important;
}

.proof-item:first-child{
  padding-left:0 !important;
  border-left:0 !important;
}

.proof-item:last-child{
  padding-right:0 !important;
}

.proof-item strong{
  display:block !important;
  margin:0 0 8px !important;
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-size:clamp(36px,3.5vw,54px) !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
  color:#171717 !important;
  white-space:nowrap !important;
}

.proof-item span{
  display:block !important;
  max-width:205px !important;
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-size:12px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
  letter-spacing:.045em !important;
  text-transform:uppercase !important;
  color:#171717 !important;
}

@media(max-width:1050px){
  .proof-section .proof-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:28px 0 !important;
  }
  .proof-item:nth-child(3){
    border-left:0 !important;
    padding-left:0 !important;
  }
}

@media(max-width:560px){
  .proof-section .proof-strip{
    grid-template-columns:1fr !important;
    padding:28px 18px !important;
  }
  .proof-item,
  .proof-item:nth-child(3){
    padding:18px 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(23,23,23,.14) !important;
  }
  .proof-item:first-child{
    border-top:0 !important;
    padding-top:0 !important;
  }
  .proof-item strong{
    font-size:44px !important;
  }
}


/* V30 — restore ORIGINAL proof-strip typography and proportions */
.proof-section{
  width:100% !important;
  background:#cbdcff !important;
  margin:0 !important;
  padding:0 !important;
}

.proof-section .proof-strip{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:34px 34px 36px !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:42px !important;
  align-items:start !important;
  border-top:1px solid rgba(23,23,23,.16) !important;
  border-bottom:1px solid rgba(23,23,23,.16) !important;
}

/* Remove the V28/V29 heavy DM Sans number treatment */
.proof-item,
.proof-item:nth-child(3){
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
}

.proof-item strong{
  display:block !important;
  margin:0 0 12px !important;
  font-family:"Instrument Serif",Georgia,serif !important;
  font-size:clamp(38px,3.25vw,52px) !important;
  line-height:1 !important;
  font-weight:400 !important;
  letter-spacing:-.025em !important;
  color:#171717 !important;
  white-space:nowrap !important;
}

.proof-item span{
  display:block !important;
  max-width:none !important;
  font-family:"DM Sans",system-ui,sans-serif !important;
  font-size:13px !important;
  line-height:1.35 !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#6d6963 !important;
}

@media(max-width:900px){
  .proof-section .proof-strip{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:30px 42px !important;
  }
}

@media(max-width:560px){
  .proof-section .proof-strip{
    grid-template-columns:1fr !important;
    padding:28px 18px !important;
    gap:26px !important;
  }
  .proof-item,
  .proof-item:nth-child(3){
    padding:0 !important;
    border:0 !important;
  }
  .proof-item strong{
    font-size:42px !important;
  }
}


/* V31 — final-pass polish */

/* Stats: original serif feel, modest boldness, vertical dividers */
.proof-section .proof-strip{
  padding-top:30px !important;
  padding-bottom:32px !important;
  gap:0 !important;
}
.proof-item{
  padding:0 30px !important;
  border-left:1px solid rgba(23,23,23,.20) !important;
}
.proof-item:first-child{
  padding-left:0 !important;
  border-left:0 !important;
}
.proof-item:last-child{padding-right:0 !important;}
.proof-item strong{
  font-family:"Instrument Serif",Georgia,serif !important;
  font-size:clamp(38px,3.25vw,52px) !important;
  font-weight:600 !important;
  letter-spacing:-.025em !important;
}
.proof-item span{
  font-weight:400 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}

/* Give the editorial quote its own colour moment without recolouring the feed */
.thinking-section{
  background:#f3d5df !important;
}
.thinking-card{
  background:transparent !important;
  border:0 !important;
}
.thinking-card p{
  font-family:"Instrument Serif",Georgia,serif !important;
}

/* About should feel like positioning, not a CV block */
.about{
  border-top:1px solid rgba(23,23,23,.16) !important;
}
.about-right p:first-child{
  font-size:clamp(20px,1.7vw,26px) !important;
  line-height:1.35 !important;
}

/* Slightly more deliberate service chips */
.service-list span{
  border-color:rgba(23,23,23,.18) !important;
}

/* Contact gets a stronger final visual beat */
.contact{
  background:#171717 !important;
  color:#f7f2e9 !important;
}
.contact .eyebrow{color:#f7f2e9 !important;}
.contact .button-dark{
  background:#f7f2e9 !important;
  color:#171717 !important;
  border-color:#f7f2e9 !important;
}

/* Responsive stat dividers */
@media(max-width:900px){
  .proof-item:nth-child(3){
    border-left:0 !important;
    padding-left:0 !important;
  }
}
@media(max-width:560px){
  .proof-item,
  .proof-item:nth-child(3){
    padding:18px 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(23,23,23,.20) !important;
  }
  .proof-item:first-child{
    padding-top:0 !important;
    border-top:0 !important;
  }
}


/* V32 — targeted fixes only */

/* Stats: four genuinely equal columns with a divider between every pair */
.proof-section .proof-strip{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:0 !important;
  padding:30px 34px 32px !important;
}

.proof-item,
.proof-item:nth-child(3){
  width:auto !important;
  min-width:0 !important;
  padding:0 34px !important;
  border:0 !important;
  border-left:1px solid rgba(23,23,23,.20) !important;
}

.proof-item:first-child{
  border-left:0 !important;
  padding-left:0 !important;
}

.proof-item:last-child{
  padding-right:0 !important;
}

.proof-item strong{
  font-size:clamp(36px,3vw,50px) !important;
  font-weight:600 !important;
}

/* Quote: revert the V31 pink/unreadable override */
.thinking-section{
  background:transparent !important;
}

.thinking-card{
  background:var(--ink) !important;
  color:white !important;
  border-radius:24px !important;
}

.thinking-card p{
  color:white !important;
}

.thinking-card span{
  color:#cfcfcf !important;
}

.quote-mark{
  color:var(--pink) !important;
}

/* About: remove V31 enlargement so it returns to the previous scale */
.about-right p:first-child{
  font-size:18px !important;
  line-height:1.55 !important;
}

@media(max-width:900px){
  .proof-section .proof-strip{
    grid-template-columns:repeat(2,1fr) !important;
  }
  .proof-item:nth-child(3){
    border-left:0 !important;
    padding-left:0 !important;
  }
}

@media(max-width:560px){
  .proof-section .proof-strip{
    grid-template-columns:1fr !important;
  }
  .proof-item,
  .proof-item:nth-child(3){
    padding:18px 0 !important;
    border-left:0 !important;
    border-top:1px solid rgba(23,23,23,.20) !important;
  }
  .proof-item:first-child{
    border-top:0 !important;
    padding-top:0 !important;
  }
}


/* V33 — agreed full-site review changes only */

/* Undo unapproved V31 closing-section restyle */
.contact{
  background:transparent !important;
  color:var(--ink) !important;
}
.contact .eyebrow{color:inherit !important;}
.contact .button-dark{
  background:var(--ink) !important;
  color:white !important;
  border-color:var(--ink) !important;
}
.about{border-top:0 !important;}
.service-list span{border-color:var(--ink) !important;}

/* Replace quote with three principles */
.thinking-section{
  max-width:1380px !important;
  margin:0 auto !important;
  padding:80px 34px !important;
  background:transparent !important;
}
.principles-wrap{
  border-top:1px solid var(--line);
  padding-top:28px;
}
.principles-eyebrow{margin-bottom:22px;}
.principles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.principle-card{
  min-height:250px;
  padding:24px;
  border:1px solid rgba(17,17,17,.12);
  border-radius:20px;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.principle-number{
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}
.principle-card p{
  margin:54px 0 0;
  font-family:"Instrument Serif",serif;
  font-size:clamp(29px,2.6vw,42px);
  line-height:1.02;
  color:var(--ink);
}

/* About: approved headline + small personal portrait treatment */
.about-left{
  position:relative;
}
.about-portrait{
  width:118px;
  height:132px;
  margin-top:26px;
  position:relative;
  overflow:hidden;
  border-radius:46% 54% 49% 51% / 42% 44% 56% 58%;
  box-shadow:0 0 0 8px rgba(243,165,183,.22);
  background:#f3d5df;
}
.about-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 24%;
  transform:scale(1.18);
  filter:grayscale(1) contrast(1.15);
}
.about-portrait::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(17,17,17,.22) .7px, transparent .8px);
  background-size:4px 4px;
  mix-blend-mode:multiply;
  opacity:.48;
}

/* Keep About concise visually */
.about-right p{
  max-width:620px;
}

@media(max-width:820px){
  .principles-grid{grid-template-columns:1fr}
  .principle-card{min-height:200px}
  .principle-card p{margin-top:36px}
}


/* V34 — targeted fixes only */

/* Restore the black bottom/contact tile */
.contact{
  background:var(--ink) !important;
  color:white !important;
  border-top:0 !important;
  border-radius:24px !important;
  margin-left:34px !important;
  margin-right:34px !important;
}
.contact .eyebrow{
  color:white !important;
}
.contact .button-dark{
  background:white !important;
  color:var(--ink) !important;
  border-color:white !important;
}

/* About portrait: use supplied cut-out and place it around the old cross area */
.about{
  position:relative !important;
}
.about-left{
  position:relative !important;
}
.about-portrait{
  position:absolute !important;
  width:150px !important;
  height:180px !important;
  top:72px !important;
  right:-118px !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:3 !important;
}
.about-portrait img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  filter:none !important;
}
.about-portrait::after{
  content:none !important;
  display:none !important;
}

@media(max-width:980px){
  .about-portrait{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:120px !important;
    height:145px !important;
    margin-top:24px !important;
  }
  .contact{
    margin-left:18px !important;
    margin-right:18px !important;
  }
}


/* V35 — requested corrections only */

/* Transparent portrait: small editorial cut-out at the column junction */
.about{
  position:relative !important;
  overflow:visible !important;
}
.about-left{
  position:relative !important;
  overflow:visible !important;
}
.about-portrait{
  position:absolute !important;
  width:112px !important;
  height:145px !important;
  top:58px !important;
  right:-82px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:4 !important;
  transform:rotate(2deg) !important;
}
.about-portrait img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  filter:none !important;
  background:transparent !important;
}
.about-portrait::after{
  display:none !important;
  content:none !important;
}

@media(max-width:980px){
  .about-portrait{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:96px !important;
    height:124px !important;
    margin:18px 0 0 !important;
    transform:rotate(2deg) !important;
  }
}


/* V36 — exact requested order + portrait placement */

/* Let the portrait feel attached to the left headline rather than centered between columns */
.about-left{
  position:relative !important;
  overflow:visible !important;
}

.about-portrait{
  position:absolute !important;
  width:118px !important;
  height:152px !important;
  top:96px !important;
  right:-26px !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  z-index:5 !important;
  transform:rotate(8deg) !important;
  transform-origin:center bottom !important;
}

.about-portrait img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
  background:transparent !important;
}

.about-portrait::after{
  display:none !important;
  content:none !important;
}

@media(max-width:980px){
  .about-portrait{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:100px !important;
    height:130px !important;
    margin:18px 0 0 !important;
    transform:rotate(6deg) !important;
  }
}


/* V37 — FIX ACTUAL VISUAL PROJECT ORDER */

/* Override all earlier masonry/column rules.
   Cards now render in DOM order left → right, row → row. */
.work-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  column-count:unset !important;
  column-gap:unset !important;
  align-items:start !important;
  margin-top:12px !important;
}

.project-card{
  width:100% !important;
  margin-bottom:0 !important;
  break-inside:auto !important;
  align-self:start !important;
}

/* Keep visual variety from each project's own media ratio without masonry re-ordering */
.card-media{
  width:100% !important;
}

/* Floating head: slightly lower and more tilted into the left headline */
.about-portrait{
  top:118px !important;
  right:-18px !important;
  transform:rotate(13deg) !important;
}

@media(max-width:980px){
  .work-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .about-portrait{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    transform:rotate(10deg) !important;
  }
}

@media(max-width:640px){
  .work-grid{
    grid-template-columns:1fr !important;
  }
}


/* V38 — canonical project ordering */
.work-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
}
.work-grid > .project-card{
  order:initial !important;
}


/* V39 — render project cards directly in left-to-right grid order */
.work-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  grid-auto-flow:row !important;
  gap:16px !important;
}
.work-column{display:contents !important;}

@media(max-width:980px){
  .work-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:640px){
  .work-grid{grid-template-columns:1fr !important;}
}


/* V40 — compact masonry restored without changing canonical project order */
.work-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:start !important;
}

.work-column{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  min-width:0 !important;
}

.project-card{
  width:100% !important;
  margin:0 !important;
}

@media(max-width:980px){
  .work-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:640px){
  .work-grid{
    grid-template-columns:1fr !important;
  }
}


/* V41 — final colour polish */

/* Hero: one deliberate purple accent */
.hero h1 em{
  color:#8D73C7 !important;
}

/* Principles: keep the copy neutral and make the numbering the colour moment */
.principle-number{
  display:block !important;
  font-size:clamp(62px,6.2vw,104px) !important;
  line-height:.82 !important;
  letter-spacing:-.055em !important;
  margin-bottom:24px !important;
}
.principle-card:nth-child(1) .principle-number{color:#F58FA2 !important;}
.principle-card:nth-child(2) .principle-number{color:#79BDE0 !important;}
.principle-card:nth-child(3) .principle-number{color:#8DB987 !important;}

/* About: loose marker-style pink treatment tied to the portrait outline */
.about-highlight{
  position:relative;
  z-index:0;
  display:inline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.about-highlight::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-.035em;
  right:-.025em;
  bottom:.08em;
  height:.29em;
  background:rgba(245,143,162,.28);
  border-radius:48% 38% 46% 32%;
  transform:rotate(-1.1deg);
}

/* Preserve readability if the heading wraps */
.about-left h2{
  position:relative;
  z-index:1;
}