/* =========================================================
   BASE STYLES
   Structural/layout rules for the page. Most day-to-day tweaks
   should happen in the DESIGNER CONTROL PANEL further down —
   edit this section only if you need to change structure/layout.
   ========================================================= */

:root {
  --ink: #252524;
  --cream: #dedcd1;
  --paper: #eee9dc;
  --chalk: #f3f0e6;
  --muted: #706d66;
  --olive: #849965;
  --wine: #97001f;
  --line: rgba(37,37,36,.22);
  --soft-line: rgba(243,240,230,.20);
  --shadow: 0 30px 80px rgba(0,0,0,.18);
  --radius: 34px;
  --max: 1180px;

  /* Logo size control: 1 = 100% of the original logo height,
     .75 = 75%, 1.1 = 110%, etc. Change this one number to
     resize the logo everywhere (desktop + mobile scale together). */
  --logo-scale: .56;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Avenir Next","Montserrat",Inter,system-ui,-apple-system,
               BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
}

.page-frame {
  position: fixed;
  inset: 20px 32px;
  border: 1px solid rgba(37,37,36,.32);
  pointer-events: none;
  z-index: 50;
}

.grain:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 49;
  opacity: .11;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, rgba(0,0,0,.18) 0 1px, transparent 1.5px);
  background-size: 29px 29px, 37px 37px;
  mix-blend-mode: multiply;
}

header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(18px);
  background: rgba(222,220,209,.86);
  border-bottom: 1px solid var(--line);
  padding: 0 26px;
}

.nav {
  max-width: var(--max);
  margin: auto;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  text-decoration: none;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
}

.brand .pm {
  font-family: Georgia,"Times New Roman",serif;
  font-size: 42px;
  letter-spacing: -.16em;
  font-weight: 400;
  margin-right: 5px;
}

.brand .consulting {
  font-size: 10px;
  padding-bottom: 5px;
}

.brand-logo {
  display: block;
  height: auto;
  max-height: calc(42px * var(--logo-scale));
  width: auto;
}

nav {
  display: flex;
  gap: 24px;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 800;
}

nav a {
  text-decoration: none;
}

nav a:last-child {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 9px 14px;
}

section {
  position: relative;
  padding: clamp(70px,8vw,126px) 26px;
}


.wrap {
  max-width: var(--max);
  margin: auto;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 900;
  color: var(--wine);
  margin: 0 0 18px;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  font-size: clamp(54px,8.4vw,116px);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
  margin: 0;
  max-width: 1080px;
}

h2 {
  font-size: clamp(46px,6.2vw,86px);
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: uppercase;
  margin: 0 0 22px;
}

h3 {
  font-size: clamp(28px,3vw,45px);
  line-height: .95;
  letter-spacing: -.05em;
  text-transform: uppercase;
  margin: 0 0 14px;
}

.lead {
  font-size: clamp(21px,2.2vw,30px);
  line-height: 1.2;
  letter-spacing: -.03em;
  max-width: 820px;
}

.button-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 34px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--ink);
  color: var(--chalk);
  text-decoration: none;
  border-radius: 999px;
  padding: 14px 20px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 900;
}

.btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.hero {
  min-height: calc(100vh - 78px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 50px;
  align-items: center;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero .sub {
  margin-top: 38px;
  margin-left: min(12vw,155px);
  text-align: left;
  max-width: 620px;
  font-size: clamp(19px,2vw,27px);
  line-height: 1.28;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.art-stack {
  min-height: auto;
  position: static;
  display: flex;
  justify-content: flex-end;
}

.hero-art {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background: transparent;
}

.hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dark {
  background: var(--ink);
  color: var(--chalk);
}

.dark .eyebrow {
  color: #d89a78;
}

.intro-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}

.intro-grid p {
  font-size: clamp(24px,3vw,42px);
  line-height: 1.08;
  letter-spacing: -.05em;
}

.muted {
  color: rgba(243,240,230,.68);
}

.founder-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 52px;
  align-items: start;
}

.portrait {
  width: 100%;
  aspect-ratio: .78;
  overflow: hidden;
  background: #cfc8b9;
  box-shadow: var(--shadow);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-copy {
  font-size: 21px;
  line-height: 1.42;
  letter-spacing: .01em;
}

.founder-copy p {
  margin-bottom: 23px;
}

.signature {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.pill {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 9px 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.services .section-head {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 60px;
}

.section-head p:not(.eyebrow) {
  font-size: 20px;
  line-height: 1.36;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.service-card {
  min-height: 455px;
  border: 1px solid rgba(243,240,230,.85);
  border-radius: var(--radius);
  padding: 24px 21px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: rgba(243,240,230,.015);
}

.service-card h3 {
  font-size: 22px;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}

.service-card .desc {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
  margin-bottom: 28px;
}

.service-card ul {
  padding: 0;
  margin: auto 0 0;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 13px;
  line-height: 1.22;
}

.service-card li + li {
  margin-top: 10px;
}

.experience {
  background: var(--paper);
}

.brand-cloud {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 40px;
}

.brand-tile {
  min-height: 92px;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2c2c2b;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 20px;
}

.case {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 30px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.case.feature {
  grid-column: 1/-1;
  min-height: 500px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 30px;
  align-items: end;
  background: var(--cream);
}

.case .type {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 900;
  color: var(--wine);
  margin-bottom: 16px;
}

.case h3 {
  font-size: clamp(32px,4vw,62px);
}

.case:not(.feature) h3 {
  font-size: 34px;
}

.case p {
  font-size: 17px;
  line-height: 1.38;
}

.case .impact {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.tags {
  margin-top: auto;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 24px;
}

.tags span {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 7px 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
}

.case-art {
  min-height: 340px;
  border-radius: 280px 280px 22px 22px;
  background:
    radial-gradient(circle at 50% 26%, rgba(243,240,230,.9) 0 13%, transparent 14%),
    linear-gradient(135deg,#e0a580 0%,#b96652 30%,#77895c 64%,#2f3b2a 100%);
  position: relative;
  overflow: hidden;
}

.case-art:after {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  height: 42%;
  background: #34412d;
  clip-path: polygon(0 40%,25% 23%,44% 38%,61% 18%,82% 34%,100% 20%,100% 100%,0 100%);
}

.how {
  background: var(--paper);
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.how-item {
  background: var(--paper);
  padding: 34px;
  min-height: auto;
}

.how-item h3 {
  font-size: 34px;
}

.how-item p {
  font-size: 18px;
  line-height: 1.42;
}

.quote-strip {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--soft-line);
  padding: 0;
}

.quote-card {
  padding: 52px 38px;
  min-height: auto;
}

blockquote {
  margin: 0 0 24px;
  font-size: clamp(24px,2.2vw,38px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.quote-card p {
  color: rgba(243,240,230,.65);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 900;
  font-size: 11px;
  line-height: 1.4;
}

.contact {
  min-height: auto;
  display: flex;
  align-items: center;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}

.contact h2 {
  font-size: clamp(38px,5vw,72px);
  max-width: 900px;
}

.contact-card {
  background: var(--paper);
  color: var(--ink);
  padding: 38px;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.contact-card p {
  font-size: 20px;
  line-height: 1.35;
}

.contact-links {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
}

footer {
  padding: 28px 26px;
  border-top: 1px solid var(--line);
}

footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}

@media (max-width: 980px) {
  .page-frame { inset: 12px; }
  .hero-grid, .intro-grid, .founder-grid, .contact-grid, .case.feature {
    grid-template-columns: 1fr;
  }
  .hero .sub { margin-left: 0; text-align: left; }
  .art-stack { justify-content: flex-start; margin-top: 30px; }
  .hero-art { max-width: 240px; }
  .cards, .case-grid, .how-grid, .quote-strip { grid-template-columns: 1fr 1fr; }
  .brand-cloud { grid-template-columns: repeat(3,1fr); }
  .case.feature { display: flex; }
  .case-art { display: none; }
}

@media (max-width: 650px) {
  .brand .pm { font-size: 36px; }
  .brand-logo { max-height: calc(36px * var(--logo-scale)); }
  header { padding-left: 18px; padding-right: 18px; }
  section { padding-left: 18px; padding-right: 18px; }
  .cards, .case-grid, .how-grid, .quote-strip, .brand-cloud { grid-template-columns: 1fr; }
  .service-card { min-height: auto; }
  .founder-copy { font-size: 18px; }
  footer .wrap { flex-direction: column; align-items: flex-start; }
}

/* Mobile hamburger nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
}

@media (max-width: 650px) {
  .nav-toggle {
    display: flex;
  }

  header nav {
    display: none;
    width: 100%;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 0 6px;
  }

  header.nav-open nav {
    display: flex;
  }

  .nav {
    flex-wrap: wrap;
  }

  nav a:last-child {
    align-self: flex-start;
  }
}


/* =========================================================
   PAGE-SPECIFIC FIXES (from earlier rounds of edits)
   ========================================================= */

.hero .sub {
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(19px,1.8vw,25px);
  line-height: 1.34;
}

.section-pill {
  display: none !important; /* superseded below, kept for reference */
}

.services .section-head { margin-bottom: 42px; }
.cards { align-items: start; }

.service-card {
  min-height: 0;
  height: auto;
  padding: 22px 18px 24px;
}

.service-card h3 {
  margin: 0 0 4px;
  line-height: 1;
}

.service-card .desc {
  margin: 0 0 18px;
  min-height: 44px;
}

.service-card ul {
  margin: 0;
}

.brand-board {
  margin-top: 34px;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

.brand-board img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  box-shadow: none !important;
  background: transparent !important;
}

#work > .wrap > h2 {
  color: var(--ink);
}

.case h3,
.case:not(.feature) h3 {
  font-family: Georgia,"Times New Roman",serif;
  text-transform: none;
  letter-spacing: -.035em;
  line-height: 1.02;
  color: var(--ink);
}

.case h3 { font-size: clamp(34px,4vw,58px); }
.case:not(.feature) h3 { font-size: 35px; }
.case .type { color: var(--wine); font-size: 12px; }

.linkedin-link {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 7px;
  text-decoration: none;
}

.linkedin-icon {
  width: 19px;
  height: 19px;
  fill: var(--ink);
}

.trust-heading {
  max-width: 900px;
  margin-bottom: 18px;
  text-align: left !important;
}

.quote-card {
  background: var(--ink);
}

.quote-card blockquote {
  color: var(--chalk);
  opacity: 1;
  font-weight: 600;
}

.quote-card p {
  color: rgba(243,240,230,.9);
  opacity: 1;
}

.quote-card p:before {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  background: var(--wine);
  margin-bottom: 16px;
}

.eyebrow,
.services .section-head .eyebrow,
.case .type {
  color: var(--wine) !important;
}


/* =========================================================
   DESIGNER CONTROL PANEL
   Edit values here to modify the approved page globally.
   ========================================================= */
:root {
  /* COLORS */
  --site-color-text: #252524;
  --site-color-background: #dedcd1;
  --site-color-light-panel: #eee9dc;
  --site-color-text-on-dark: #f3f0e6;
  --site-color-secondary-text: #706d66;
  --site-color-accent: #97001f;
  --site-color-dark-background: #252524;
  --site-color-border: rgba(37,37,36,.22);
  

  /* FONT FAMILIES */
  --site-font-body: "Avenir Next","Montserrat",Inter,system-ui,-apple-system,
                    BlinkMacSystemFont,"Segoe UI",sans-serif;
  --site-font-display: Georgia,"Times New Roman",serif;

  /* FONT SIZES */
  --site-size-hero: clamp(54px,8.4vw,70px);
  --site-size-section-heading: clamp(46px,6.2vw,60px);
  --site-size-subheading: clamp(28px,3vw,45px);
  --site-size-body: 18px;
  --site-size-body-large: 21px;
  --site-size-label: 12px;

  /* LINE HEIGHT */
  --site-line-hero: .86;
  --site-line-section-heading: .90;
  --site-line-subheading: .95;
  --site-line-body: 1.42;

  /* LETTER SPACING */
  --site-track-hero: -.07em;
  --site-track-section-heading: -.065em;
  --site-track-subheading: -.05em;
  --site-track-label: .18em;

  /* PAGE SIZE AND SPACING */
  --site-max-width: 1180px;
  --site-section-padding-y: clamp(70px,8vw,126px);
  --site-section-padding-x: 26px;
  --site-grid-gap: 20px;
  --site-section-padding-x: 48px;

  /* CARDS */
  --site-card-padding: 30px;
  --site-card-radius: 34px;
  --site-card-shadow: 0 30px 80px rgba(0,0,0,.18);

  /* BUTTONS */
  --site-button-padding-y: 14px;
  --site-button-padding-x: 20px;
  --site-button-radius: 999px;
}

/* TYPOGRAPHY */
body {
  background: var(--site-color-background);
  color: var(--site-color-text);
  font-family: var(--site-font-body);
  font-size: var(--site-size-body);
  line-height: var(--site-line-body);
}

h1 {
  font-size: var(--site-size-hero);
  line-height: var(--site-line-hero);
  letter-spacing: var(--site-track-hero);
}

h2 {
  font-size: var(--site-size-section-heading);
  line-height: var(--site-line-section-heading);
  letter-spacing: var(--site-track-section-heading);
}

h3 {
  font-size: var(--site-size-subheading);
  line-height: var(--site-line-subheading);
  letter-spacing: var(--site-track-subheading);
}

p {
  line-height: var(--site-line-body);
}

.eyebrow, .case .type, .dark .eyebrow {
  color: var(--site-color-accent) !important;
  letter-spacing: var(--site-track-label);
}

/* BACKGROUNDS */
.dark, #services, #contact {
  background: var(--site-color-dark-background);
  color: var(--site-color-text-on-dark);
}

.experience, .how, #approach {
  background: var(--site-color-light-panel);
}

/* WIDTH, PADDING, MARGINS, GAPS */
.wrap {
  max-width: var(--site-max-width);
}

section {
  padding: var(--site-section-padding-y) var(--site-section-padding-x);
}

.cards, .case-grid {
  gap: var(--site-grid-gap);
}

.case, .contact-card, .how-item {
  padding: var(--site-card-padding);
}

.case, .contact-card {
  border-radius: var(--site-card-radius);
}

.btn {
  padding: var(--site-button-padding-y) var(--site-button-padding-x);
  border-radius: var(--site-button-radius);
}

/* REQUESTED FINAL FIXES */
.contact-links .email-link {
  text-transform: none !important;
}

footer .wrap {
  justify-content: flex-end !important;
}

.brand-board {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.brand-board img {
  background: transparent !important;
  box-shadow: none !important;
}


/* =========================================================
   DESIGNER OVERRIDES
   Add one-off edits below this line.
   ========================================================= */

/* Hero section: let it size to its content instead of forcing
   full-screen height, so a smaller headline doesn't leave huge
   empty space above/below it. Adjust the two padding values to
   taste. */
.hero {
  min-height: auto;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* Nav/logo row: add breathing room above it so the logo doesn't
   butt up against the very top edge of the page. Horizontal
   alignment now comes from header's own padding (26px, matching
   the section padding used by .wrap), so the logo's left edge
   always lines up with the headline and other page content,
   regardless of viewport width. */
.nav {
  padding-top: 36px;
}

.contact {
  padding-top: 0;
  padding-bottom: 80px;
}

/* Testimonials: cut the section's own bottom padding, and the
   individual quote cards' bottom padding, so there's less dead
   space between the last quote and the CTA heading below. */
.quote-strip {
  padding-bottom: 0;
}

.quote-card {
  padding-bottom: 28px;
}

/* "Opportunity is good. Until it creates drag." section: tighten
   its own padding, and close the gap that appears below the
   paragraphs once the two-column grid stacks on narrow screens. */
.dark:has(.intro-grid) {
  padding-top: 64px;
  padding-bottom: 64px;
}

@media (max-width: 980px) {
  .intro-grid {
    gap: 24px;
  }
}