:root{
  --ink:#171717;
  --paper:#f5f3ee;
  --white:#fff;
  --yellow:#f7cf27;
  --yellow-pale:#fff3a9;
  --brown:#6b321d;
  --muted:#66625b;
  --line:rgba(23,23,23,.18);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;line-height:1.45;overflow-x:hidden}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input,select,textarea{font:inherit}.section-pad{padding:clamp(76px,9vw,140px) clamp(22px,5.5vw,84px)}
.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:16px clamp(22px,5vw,76px);background:rgba(245,243,238,.88);backdrop-filter:blur(18px);border-bottom:1px solid rgba(23,23,23,.08)}
.brand img{width:min(420px,38vw);height:auto;max-height:78px;object-fit:contain;object-position:left center}.site-nav{display:flex;gap:28px;align-items:center;font-size:.92rem;font-weight:700}.site-nav a{position:relative}.site-nav a:not(.nav-cta)::after{content:"";position:absolute;height:2px;left:0;right:100%;bottom:-5px;background:var(--ink);transition:.25s}.site-nav a:hover::after{right:0}.nav-cta{padding:12px 18px;border-radius:999px;background:var(--ink);color:#fff}.menu-toggle{display:none;border:0;background:transparent;font-weight:800}
.hero{padding:clamp(58px,7vw,100px) clamp(22px,5.5vw,84px) 28px;min-height:86vh;display:flex;flex-direction:column;justify-content:space-between}.hero-kicker,.section-label{font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.hero-kicker{margin-bottom:44px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,7vw,110px);align-items:center}.hero h1,.statement h2,.story-intro h2,.photo-heading h2,.contact-head h2{font-family:"Manrope",sans-serif;font-weight:800;letter-spacing:-.055em;line-height:.94;margin:0}.hero h1{font-size:clamp(4rem,8.5vw,9.2rem);max-width:1050px}.hero h1 span{color:var(--brown)}.hero-intro{font-family:"Manrope",sans-serif;font-size:clamp(1.3rem,2vw,1.8rem);font-weight:700;margin:32px 0 10px}.hero-body{font-size:clamp(1rem,1.35vw,1.25rem);color:var(--muted);max-width:660px}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}.pill{padding:15px 20px;border-radius:999px;font-weight:800;display:inline-flex;gap:12px;align-items:center}.pill.primary{background:var(--ink);color:#fff}.pill.secondary{border:1px solid var(--ink)}.hero-mark{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:14px}.hero-mark-inner{background:transparent;border:0;border-radius:0;padding:clamp(18px,2.6vw,28px);transform:none;box-shadow:none}.hero-mark-inner img{width:100%;max-width:860px;transform:none}.scribble{position:static;font-weight:700;font-size:.88rem;transform:none;color:var(--muted);border-bottom:0}.hero-rule{border-top:1px solid var(--line);margin-top:80px}.hero-meta{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:20px;color:var(--muted);font-size:.87rem;font-weight:600}
.statement{display:grid;grid-template-columns:.25fr 1.25fr;gap:24px;background:#fff}.statement h2{font-size:clamp(3.1rem,7vw,7.8rem);max-width:1200px}.statement-copy{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:900px;font-size:1.12rem;color:var(--muted)}
.services{background:var(--paper)}.section-topline{display:flex;justify-content:space-between;gap:30px;align-items:baseline;margin-bottom:26px}.section-note{color:var(--muted);margin:0}.service-list{border-top:1px solid var(--ink)}.service-row{display:grid;grid-template-columns:80px minmax(260px,.9fr) 1.1fr;gap:24px;padding:34px 0;border-bottom:1px solid var(--ink);align-items:start;transition:.25s}.service-row:hover{padding-left:16px;background:linear-gradient(90deg,var(--yellow-pale),transparent 55%)}.service-index{font-size:.82rem;font-weight:800}.service-name h3{font-family:"Manrope",sans-serif;font-size:clamp(2rem,4.1vw,4.8rem);letter-spacing:-.05em;line-height:1;margin:0}.service-summary{color:var(--muted);font-size:1.02rem;max-width:650px}.custom-callout{margin-top:34px;display:grid;grid-template-columns:84px 1fr 1.3fr;gap:26px;align-items:center;padding:34px;background:var(--yellow);border-radius:var(--radius)}.custom-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ink);color:#fff;font-size:2rem;font-weight:800}.custom-callout h3{font-family:"Manrope",sans-serif;font-size:2rem;margin:6px 0 0}.custom-callout p:last-child{margin:0;max-width:630px}
.story{background:#1c1c1c;color:#fff}.story-intro{display:grid;grid-template-columns:.25fr 1.25fr;gap:24px}.story-intro h2{font-size:clamp(3.3rem,7vw,7.5rem)}.story-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:54px;margin-top:88px;padding-top:34px;border-top:1px solid rgba(255,255,255,.22)}.story-number{font-family:"Manrope",sans-serif;font-size:clamp(4rem,10vw,10rem);font-weight:800;letter-spacing:-.07em;line-height:.85;color:var(--yellow)}.story-copy{font-size:clamp(1.15rem,1.8vw,1.5rem);max-width:820px;color:#dedbd5}.story-copy p{margin-top:0;margin-bottom:26px}.recognition-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:76px}.recognition-card{min-height:330px;border-radius:var(--radius);padding:36px;display:flex;flex-direction:column;justify-content:space-between}.yellow-card{background:var(--yellow);color:var(--ink);display:grid;grid-template-columns:.55fr 1fr;gap:24px;align-items:end}.recognition-big{font-family:"Manrope",sans-serif;font-size:clamp(7rem,14vw,13rem);font-weight:800;letter-spacing:-.1em;line-height:.7}.recognition-card h3{font-family:"Manrope",sans-serif;font-size:clamp(2rem,4vw,4rem);letter-spacing:-.04em;margin:8px 0 14px;line-height:1}.recognition-card p{max-width:560px}.white-card{background:#fff;color:var(--ink)}
.photography{background:#fff}.photo-band{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:end}.photo-heading h2{font-size:clamp(3.2rem,7vw,7rem)}.photo-copy{font-size:1.12rem;color:var(--muted)}.arrow-link{display:inline-flex;gap:10px;color:var(--ink);font-weight:800;border-bottom:2px solid var(--ink);padding-bottom:4px;margin-top:18px}
.marquee{overflow:hidden;background:var(--yellow);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:18px 0}.marquee-track{width:max-content;display:flex;gap:28px;align-items:center;font-family:"Manrope",sans-serif;font-weight:800;font-size:clamp(1.2rem,2.5vw,2.4rem);letter-spacing:-.03em;animation:scroll 26s linear infinite}@keyframes scroll{to{transform:translateX(-50%)}}
.contact{background:var(--paper)}.contact-head{display:grid;grid-template-columns:.25fr 1.25fr;gap:24px}.contact-head h2{font-size:clamp(3.4rem,7vw,7.8rem)}.contact-head>p:last-child{grid-column:2;max-width:680px;color:var(--muted);font-size:1.1rem}.contact-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:48px;margin-top:64px}.project-form{background:#fff;padding:clamp(24px,4vw,46px);border-radius:var(--radius);border:1px solid var(--line)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.project-form label{display:grid;gap:8px;margin-bottom:18px;font-size:.72rem;letter-spacing:.13em;font-weight:800}.project-form input,.project-form select,.project-form textarea{width:100%;border:0;border-bottom:1px solid #aaa;background:transparent;padding:11px 2px;outline:none}.project-form textarea{border:1px solid #bdb8ae;border-radius:12px;padding:14px;resize:vertical}.submit-button{border:0;background:var(--yellow);border-radius:999px;padding:15px 22px;font-weight:800;display:inline-flex;gap:10px;cursor:pointer}.form-note{font-size:.76rem;color:var(--muted);max-width:600px}.contact-aside{display:flex;flex-direction:column;justify-content:space-between;gap:34px;padding:10px 0}.contact-aside a{font-family:"Manrope",sans-serif;font-size:clamp(1.35rem,2.4vw,2.3rem);font-weight:800;letter-spacing:-.04em}.contact-aside p{color:var(--muted)}.mini-mark{background:transparent;border:0;border-radius:0;padding:18px}.mini-mark img{width:100%;max-height:120px;object-fit:contain;object-position:left center}
.site-footer{display:grid;grid-template-columns:1fr auto auto;gap:30px;align-items:center;padding:30px clamp(22px,5.5vw,84px);background:#fff;border-top:1px solid var(--line);font-size:.82rem}.footer-brand img{width:300px;max-height:none;height:auto;object-fit:contain;object-position:left}
.cursor-glow{position:fixed;width:220px;height:220px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgba(247,207,39,.14),transparent 70%);transform:translate(-50%,-50%)}
@media(max-width:980px){.site-nav{display:none;position:absolute;top:78px;left:20px;right:20px;flex-direction:column;align-items:stretch;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.12)}.site-nav.open{display:flex}.menu-toggle{display:block}.brand img{width:min(320px,68vw);max-height:64px}.hero-grid,.photo-band,.contact-layout{grid-template-columns:1fr}.hero-mark{max-width:880px;margin:40px auto 0;align-items:stretch}.statement,.story-intro,.contact-head{grid-template-columns:1fr}.statement-copy,.contact-head>p:last-child,.contact-head .contact-subhead,.contact-head .contact-copy{grid-column:1}.statement-copy{grid-template-columns:1fr 1fr}.story-grid{grid-template-columns:1fr}.service-row{grid-template-columns:60px 1fr}.service-summary{grid-column:2}.recognition-grid{grid-template-columns:1fr}.custom-callout{grid-template-columns:70px 1fr}.custom-callout>p:last-child{grid-column:2}.site-footer{grid-template-columns:1fr}.footer-brand img{width:260px}}
@media(max-width:620px){.hero{min-height:auto}.hero h1{font-size:clamp(3.3rem,16vw,5rem)}.hero-meta{display:grid;grid-template-columns:1fr 1fr}.statement-copy{grid-template-columns:1fr}.service-row{grid-template-columns:42px 1fr;padding:26px 0}.service-name h3{font-size:2.3rem}.custom-callout{grid-template-columns:1fr}.custom-callout>p:last-child{grid-column:1}.yellow-card{grid-template-columns:1fr}.recognition-big{font-size:8rem}.field-row{grid-template-columns:1fr}.section-pad{padding:72px 20px}.site-header{padding:13px 20px}.brand img{width:min(250px,72vw);max-height:52px}.hero{padding-left:20px;padding-right:20px}.hero-mark-inner{padding:18px}.contact-aside a{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.marquee-track{animation:none}.service-row{transition:none}}

.belief-label{font-size:clamp(.92rem,1.15vw,1.08rem)}

/* Minor emphasis requested for the Capabilities heading only */
.capabilities-label{font-size:.9rem}
.capabilities-note{font-size:1.08rem;font-weight:600}

/* =========================================================
   MAD BANANA TYPOGRAPHY SYSTEM
   Typography-only refinement. Layout, colors and structure unchanged.
   ========================================================= */

/* BASE BODY COPY */
body {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

/* =========================================================
   HERO
   Biggest typographic moment on the site
   ========================================================= */
.hero h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(4rem, 8.5vw, 9.2rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.055em;
}

.hero-intro {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
}

.hero-body {
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  max-width: 660px;
}

.hero-kicker {
  font-size: clamp(.82rem, .9vw, .9rem);
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.35;
  text-transform: uppercase;
}

/* =========================================================
   SECTION LABELS
   ========================================================= */
.section-label,
.belief-label,
.capabilities-label {
  font-family: "DM Sans", sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* =========================================================
   BIG SECTION STATEMENTS
   ========================================================= */
.statement h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6.2vw, 6.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.05em;
}

.statement-copy {
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

/* =========================================================
   CAPABILITIES
   ========================================================= */
.capabilities-note,
.section-note {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.5;
}

.service-name h3 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2.4rem, 4vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

.service-summary {
  font-size: clamp(1.05rem, 1.15vw, 1.125rem);
  line-height: 1.65;
}

.service-index {
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.4;
}

/* SOMETHING UNUSUAL? */
.custom-callout h3 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.custom-callout p {
  font-size: clamp(1.05rem, 1.15vw, 1.125rem);
  line-height: 1.6;
}

/* =========================================================
   STORY
   ========================================================= */
.story-intro h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6vw, 6.25rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.05em;
}

.story-number {
  font-family: "Manrope", sans-serif;
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 800;
  letter-spacing: -.07em;
  line-height: .85;
}

.story-copy {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.65;
  max-width: 820px;
}

.story-copy p {
  margin-top: 0;
  margin-bottom: 1.5em;
}

/* =========================================================
   RECOGNITION
   ========================================================= */
.recognition-big {
  font-family: "Manrope", sans-serif;
  font-size: clamp(7rem, 13vw, 11.5rem);
  font-weight: 800;
  letter-spacing: -.09em;
  line-height: .75;
}

.recognition-card h3 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.recognition-card p {
  font-size: clamp(1.05rem, 1.15vw, 1.125rem);
  line-height: 1.6;
}

/* =========================================================
   MAD BANANA PHOTOGRAPHY
   ========================================================= */
.photo-heading h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.05em;
}

.photo-copy {
  font-size: clamp(1.05rem, 1.25vw, 1.18rem);
  line-height: 1.65;
}

/* =========================================================
   SCROLLING BANNER
   ========================================================= */
.marquee-track {
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.3rem, 2.3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.1;
}

/* =========================================================
   START A PROJECT
   ========================================================= */
.contact-head .section-label {
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.25;
  text-transform: uppercase;
}

.contact-head h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(3rem, 6vw, 6.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.05em;
}

.contact-head .contact-subhead {
  grid-column: 2;
  max-width: 680px;
  margin: 22px 0 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
}

.contact-head .contact-copy {
  grid-column: 2;
  max-width: 680px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.2vw, 1.18rem);
  line-height: 1.65;
}

/* =========================================================
   FORM TYPOGRAPHY
   ========================================================= */
.project-form label {
  font-size: clamp(.875rem, .9vw, .95rem);
  line-height: 1.35;
  letter-spacing: .08em;
  font-weight: 800;
}

.project-form input,
.project-form select,
.project-form textarea {
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

.project-form button {
  font-size: .95rem;
  font-weight: 800;
}

.form-note {
  font-size: .875rem;
  line-height: 1.5;
}

/* =========================================================
   NAVIGATION AND BUTTONS
   ========================================================= */
.site-nav {
  font-size: .95rem;
  font-weight: 700;
}

.pill,
.submit-button {
  font-family: "DM Sans", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.2;
}

/* =========================================================
   MOBILE TYPOGRAPHY
   ========================================================= */
@media (max-width: 620px) {
  body {
    font-size: 1rem;
  }

  .hero h1 {
    font-size: clamp(3.4rem, 16vw, 4.5rem);
  }

  .statement h2,
  .story-intro h2,
  .photo-heading h2,
  .contact-head h2 {
    font-size: clamp(2.75rem, 11vw, 4rem);
    line-height: .98;
  }

  .service-name h3 {
    font-size: clamp(2.1rem, 9vw, 2.8rem);
  }

  .section-label,
  .belief-label,
  .capabilities-label {
    font-size: 1rem;
  }

  .story-copy,
  .statement-copy,
  .photo-copy,
  .service-summary,
  .custom-callout p {
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .contact-head h2 {
    font-size: clamp(2.75rem, 11vw, 4rem);
  }

  .contact-head .contact-subhead {
    font-size: 1.4rem;
  }

  .contact-head .contact-copy {
    font-size: 1.0625rem;
    line-height: 1.65;
  }

  .contact-head .section-label {
    font-size: 1rem;
  }

  .project-form label {
    font-size: .875rem;
  }

  .project-form input,
  .project-form select,
  .project-form textarea {
    font-size: 1rem;
  }
}

.story-copy .arrow-link{color:#fff;border-bottom-color:#fff}

/* Callout headline sizing refinement */
.custom-callout .section-label,
.custom-callout h3 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-transform: none;
}

/* Center-left the callout heading block only */
.custom-callout > div {
  align-self: center;
  text-align: left;
}