/* Peyman & Partners. Carried across from peyman-partners-mockup-v2.html. */

  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root{
    --ink:#0A1F33; --ink-2:#0F2A44; --panel:#163B5C; --panel-2:#1D4A70;
    --paper:#EFE4C8; --paper-2:#C9BC9A; --paper-3:#8FA6B8;
    --ruby:#9B111E; --ruby-2:#C41E3A;
    --line:rgba(239,228,200,.14);
    --serif:'Cormorant Garamond',serif; --sans:'Manrope',sans-serif; --mono:'IBM Plex Mono',monospace;
    --max:1140px; --gutter:24px;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{background:var(--ink);color:var(--paper);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
  h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--paper);line-height:1.12}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--ruby);color:var(--paper)}
  .draft{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ruby-2);border:1px dashed var(--ruby-2);border-radius:4px;padding:2px 6px;display:inline-block}

  /* NAV */
  header{position:sticky;top:0;z-index:50;background:rgba(10,31,51,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
  .brand{font-family:var(--serif);font-size:24px;font-weight:600;white-space:nowrap}
  .brand span{color:var(--ruby-2)}
  .nav ul{display:none;gap:26px;list-style:none;font-size:14px;color:var(--paper-2)}
  .nav ul a.active{color:var(--paper);border-bottom:1px solid var(--ruby-2);padding-bottom:3px}
  .nav-right{display:flex;align-items:center;gap:10px}
  .menu-btn{background:none;border:1px solid var(--line);color:var(--paper);border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer}
  .mobile-menu{display:none;border-top:1px solid var(--line);padding:12px var(--gutter) 18px}
  .mobile-menu a{display:block;padding:10px 0;color:var(--paper-2);border-bottom:1px solid var(--line)}
  .mobile-menu.open{display:block}
  @media(min-width:880px){.nav ul{display:flex}.menu-btn{display:none}.mobile-menu,.mobile-menu.open{display:none}}
  .btn{display:inline-block;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid var(--ruby);background:var(--ruby);color:var(--paper);cursor:pointer;font-family:var(--sans)}
  .btn:hover{background:var(--ruby-2);border-color:var(--ruby-2)}
  .btn-sm{padding:6px 12px;font-size:12px;border-radius:6px}
  .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--paper-2)}
  .btn-ghost:hover{background:transparent;border-color:var(--paper-2);color:var(--paper)}

  /* HERO */
  .hero{padding:76px 0 56px;border-bottom:1px solid var(--line)}
  .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--paper-3);text-transform:uppercase}
  .hero h1{font-size:clamp(36px,5.5vw,58px);margin:16px 0 18px;max-width:17ch}
  .lede{font-size:18px;color:var(--paper-2);max-width:60ch;margin-bottom:24px}
  .pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
  .pill{font-family:var(--mono);font-size:11px;letter-spacing:.03em;border:1px solid var(--line);border-radius:20px;padding:5px 12px;color:var(--paper-2)}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
  .stat-row{display:flex;gap:40px;flex-wrap:wrap}
  .stat b{display:block;font-family:var(--serif);font-size:32px}
  .stat span{font-size:13px;color:var(--paper-3);display:block;max-width:26ch}

  section{padding:64px 0}
  .alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .section-head{max-width:64ch;margin-bottom:32px}
  .section-head h2{margin-top:10px;font-size:32px}
  .section-head p{color:var(--paper-2);margin-top:10px;font-size:15px}
  .page-head{padding:60px 0 36px;border-bottom:1px solid var(--line)}
  .page-head h1{font-size:clamp(34px,5vw,48px);margin:12px 0 12px;max-width:22ch}

  /* GRIDS & CARDS */
  .grid{display:grid;grid-template-columns:1fr;gap:16px}
  @media(min-width:760px){.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.grid.four{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1000px){.grid.four{grid-template-columns:repeat(4,1fr)}}
  .cell{border:1px solid var(--line);border-radius:14px;padding:24px;background:var(--panel);display:flex;flex-direction:column}
  .cell .tag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--paper-3);margin-bottom:10px;text-transform:uppercase}
  .cell h3{font-size:21px;margin-bottom:8px}
  .cell p{color:var(--paper-2);font-size:14px}
  .cell .more{margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;color:var(--ruby-2)}
  a.cell:hover{border-color:var(--ruby)}
  .num{font-family:var(--serif);font-size:34px;color:var(--ruby-2);line-height:1;margin-bottom:10px}

  /* PANEL BLOCK (home) */
  .panel-band{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
  @media(min-width:860px){.panel-band{grid-template-columns:1.1fr .9fr}}
  .discipline-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .discipline-list li{border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;background:var(--panel)}
  .discipline-list li b{display:block;font-family:var(--serif);font-size:18px;font-weight:600}
  .discipline-list li span{color:var(--paper-3);font-size:12px}

  /* DECKCOUNT BAND */
  .dc-band{border:1px solid var(--line);border-left:4px solid #0D2419;border-radius:14px;padding:32px;background:linear-gradient(135deg,var(--panel) 0%,#12302a 100%);display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
  @media(min-width:860px){.dc-band{grid-template-columns:1.4fr .6fr}}
  .dc-band h2{font-size:30px;margin:10px 0}
  .dc-band p{color:var(--paper-2);font-size:15px}
  .dc-steps{list-style:none;counter-reset:s;margin-top:14px}
  .dc-steps li{counter-increment:s;font-size:14px;color:var(--paper-2);padding:6px 0 6px 30px;position:relative}
  .dc-steps li:before{content:counter(s);position:absolute;left:0;top:6px;width:20px;height:20px;border-radius:50%;background:var(--ruby);color:var(--paper);font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
  .fine{font-size:12px;color:var(--paper-3);margin-top:12px}

  /* GROUP */
  .group-card{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--panel);display:flex;flex-direction:column}
  .group-card.current{background:var(--panel-2);border-color:var(--ruby)}
  .group-card h3{font-size:23px;margin-bottom:10px}
  .group-card p{color:var(--paper-2);font-size:14px;flex:1;margin-bottom:16px}
  .group-link{font-size:13px;font-weight:600;color:var(--ruby-2)}
  .group-badge{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:3px 8px;border-radius:5px;background:var(--ruby);color:var(--paper);margin-bottom:10px}

  /* CASE STUDIES & QUOTES */
  .case dl{margin-top:12px;font-size:14px}
  .case dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--paper-3);text-transform:uppercase;margin-top:12px}
  .case dd{color:var(--paper-2)}
  .quote{border:1px dashed var(--line);border-radius:14px;padding:24px;color:var(--paper-3);font-family:var(--serif);font-size:19px;font-style:italic}
  .quote small{display:block;font-family:var(--mono);font-style:normal;font-size:11px;margin-top:12px}

  /* SITUATION DETAIL */
  .situation{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--panel);display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:16px;scroll-margin-top:84px}
  @media(min-width:860px){.situation{grid-template-columns:.9fr 1.1fr}}
  .situation h3{font-size:26px;margin:6px 0 10px}
  .situation p{color:var(--paper-2);font-size:15px}
  .situation ul{list-style:none;font-size:14px;color:var(--paper-2)}
  .situation ul li{padding:6px 0 6px 18px;position:relative;border-bottom:1px solid var(--line)}
  .situation ul li:before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--ruby-2);border-radius:50%}
  .who{margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--paper-3);letter-spacing:.04em}

  .steps{display:grid;grid-template-columns:1fr;gap:16px;counter-reset:st}
  @media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
  .step{border-top:2px solid var(--ruby);padding-top:14px}
  .step b{font-family:var(--serif);font-size:20px;display:block;margin-bottom:6px}
  .step p{font-size:14px;color:var(--paper-2)}

  /* TEAM */
  .lead-card{border:1px solid var(--ruby);border-radius:14px;padding:30px;background:var(--panel-2);display:flex;gap:24px;align-items:flex-start;margin-bottom:36px;flex-wrap:wrap}
  .avatar{width:52px;height:52px;border-radius:50%;background:var(--ruby);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:18px;font-weight:600;flex-shrink:0;margin-bottom:12px}
  .lead-card .avatar{width:88px;height:88px;font-size:30px;margin:0}
  .lead-card > div:last-child{flex:1;min-width:240px}
  .person-name{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--paper)}
  .person-role{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--ruby-2);margin:4px 0 10px;text-transform:uppercase}
  .person-bio{font-size:14px;color:var(--paper-2);line-height:1.6}
  .li-link{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--paper-3);border:1px solid var(--line);border-radius:5px;padding:3px 8px}
  .discipline-head{display:flex;align-items:baseline;gap:12px;margin:36px 0 14px;border-bottom:1px solid var(--line);padding-bottom:10px}
  .discipline-head h3{font-size:24px}
  .discipline-head span{font-family:var(--mono);font-size:11px;color:var(--paper-3)}

  /* INSIGHTS */
  .post .meta{font-family:var(--mono);font-size:11px;color:var(--paper-3);margin-bottom:10px}

  /* ENQUIRY */
  .enq{display:grid;grid-template-columns:1fr;gap:32px}
  @media(min-width:900px){.enq{grid-template-columns:.8fr 1.2fr}}
  .enq-aside p{color:var(--paper-2);font-size:15px;margin-bottom:14px}
  .enq-aside ul{list-style:none;margin-top:10px}
  .enq-aside li{font-size:14px;color:var(--paper-2);padding:8px 0;border-bottom:1px solid var(--line)}
  form{border:1px solid var(--line);border-radius:14px;padding:28px;background:var(--panel)}
  .row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
  @media(min-width:640px){.row.two{grid-template-columns:1fr 1fr}}
  label,.legend{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--paper)}
  .req{color:var(--ruby-2)}
  input[type=text],input[type=email],input[type=url],select,textarea{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:11px 12px;color:var(--paper);font-family:var(--sans);font-size:14px}
  select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--paper-2) 50%),linear-gradient(135deg,var(--paper-2) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--ruby-2);outline-offset:1px}
  textarea{min-height:120px;resize:vertical}
  fieldset{border:none;margin-bottom:16px}
  .checks{display:grid;grid-template-columns:1fr;gap:8px}
  @media(min-width:640px){.checks{grid-template-columns:1fr 1fr}}
  .check{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;color:var(--paper-2);cursor:pointer;background:var(--ink)}
  .check input{margin-top:3px;accent-color:var(--ruby-2)}
  .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--paper-2);margin:6px 0 18px}
  .consent input{margin-top:3px;accent-color:var(--ruby-2)}
  .hp{position:absolute;left:-9999px}
  .form-note{font-size:12px;color:var(--paper-3);margin-top:12px}
  .form-status{margin-top:14px;font-size:14px;padding:12px;border-radius:8px;display:none}
  .form-status.ok{display:block;background:rgba(40,120,80,.25);border:1px solid rgba(80,180,120,.4)}
  .form-status.err{display:block;background:rgba(155,17,30,.25);border:1px solid var(--ruby)}

  .cta-band{border:1px solid var(--ruby);border-radius:14px;padding:32px;background:var(--panel-2);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  .cta-band h2{font-size:28px}
  .cta-band p{color:var(--paper-2);font-size:15px;margin-top:6px}

  footer{padding:40px 0;border-top:1px solid var(--line)}
  .foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;font-size:13px;color:var(--paper-3)}
  .foot-links{display:flex;gap:20px;flex-wrap:wrap}

/* ---------------------------------------------------------------
   Added during the multi-page split. Nothing above this line is
   changed from peyman-partners-mockup-v2.html.

   At phone widths v2's header CTA wrapped onto three lines and made
   the header three times its proper height. Enquire is already in the
   mobile menu, so the header CTA is hidden below the menu breakpoint.
   Delete this block to restore v2's header exactly.
   --------------------------------------------------------------- */
@media(max-width:879px){
  .nav-right .btn-sm{display:none}
}
.coming-soon{color:var(--paper-3)}

/* ---------------------------------------------------------------
   Wordmark sized to match the sister site, deckcount.ai.
   DeckCount uses clamp(28px,3.4vw,36px) in a 78px header.
   v2 had a flat 24px in a 64px header.
   --------------------------------------------------------------- */
.nav{height:78px}
.brand{font-size:clamp(28px,3.4vw,36px);letter-spacing:.005em;line-height:1}

/* At the narrowest phones the full wordmark plus the Menu button is a
   squeeze, so ease the lower bound just below 360px. */
@media(max-width:359px){
  .brand{font-size:24px}
}

/* ---------------------------------------------------------------
   Mark and lockup (option B, the monogram).
   Geometry matches DeckCount: 64x64 box, 3.4 frame stroke,
   Cormorant letterforms, one ruby accent.
   --------------------------------------------------------------- */
:root{--pp-ruby:var(--ruby-2)}
.pp-lockup{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.pp-mark{width:36px;height:36px;flex:0 0 auto;display:block}
@media(max-width:359px){.pp-mark{width:28px;height:28px}}
.pp-mark-foot{width:22px;height:22px;flex:0 0 auto;display:block;color:var(--paper-3);--pp-ruby:var(--ruby-2)}
.foot-grid > div:first-child{display:flex;align-items:center;gap:10px}

/* ---------------------------------------------------------------
   Hero mark, mirroring deckcount.ai: single column on small screens,
   two columns with the mark on the right from 900px.
   --------------------------------------------------------------- */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
.hero-mark{display:none}
@media(min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .hero-mark{display:flex;justify-content:center;align-self:start;padding-top:4px}
}
.pp-mark-hero{width:min(440px,96%);height:auto;color:var(--paper);--pp-ruby:var(--ruby-2)}

/* Group cards carry their own brand, so the mark sits with the title. */
.card-lockup{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.card-lockup h3{margin-bottom:0}
.card-mark{width:34px;height:34px;flex:0 0 auto;display:block}
/* linked card titles need a hover affordance */
a.card-lockup:hover h3,.group-card h3 a:hover{color:var(--ruby-2)}
/* preview build stamp, remove before any public launch */
.build-stamp{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--paper-3);
  opacity:.75;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
/* v2 capped the headline at 17ch, which suited the shorter original wording.
   The longer headline wrapped to five lines; 20ch restores the intended four
   on wide screens and changes nothing below about 1100px. */
.hero h1{max-width:20ch}

/* DeckCount referral notice on the enquiry page */
.referral{border:1px solid var(--ruby);border-left-width:4px;border-radius:14px;
  padding:24px 26px;background:var(--panel-2);margin-bottom:26px}
.referral h2{font-size:26px;margin:10px 0 10px}
.referral p{color:var(--paper-2);font-size:15px}
.referral[hidden]{display:none}

/* Route in from the enquiry page for founders who have not been scored yet */
.capital-note{border:1px solid var(--line);border-left:3px solid var(--ruby-2);border-radius:12px;
  padding:20px 22px;margin-bottom:26px;background:var(--panel)}
.capital-note h3{font-size:20px;margin:8px 0 10px}
.capital-note p{font-size:14px;color:var(--paper-2);margin-bottom:0}
.capital-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--ruby-2)}
.capital-link:hover{color:var(--paper)}
.capital-note[hidden]{display:none}

/* Services as tiles, two per row. Replaces the old numbered two-column rows.
   The old .situation rules above still set the card's border, padding and
   background; these override its internal layout. */
.situations{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:820px){
  .situations{grid-template-columns:repeat(2,1fr)}
  .situations .situation.wide{grid-column:1 / -1}
}
.situations .situation{display:flex;flex-direction:column;margin-bottom:0}
.situations .situation h3{font-size:23px;margin:8px 0 10px}
.situations .situation > p{margin-bottom:16px}
.situations .situation ul{margin-bottom:18px}
.situations .situation .btn{margin-top:auto;align-self:flex-start}

/* Partner headshots. The avatar keeps its circle and size; the photo fills it.
   Cards without a photo still show initials, so the two can mix while the rest
   of the headshots come in. */
.avatar.photo{background:none;overflow:hidden;padding:0}
.avatar.photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;border-radius:50%}
.lead-card .avatar.photo img{border-radius:50%}
/* Company logos sit in the same circle as a headshot, filling it edge to edge */
.avatar.logo{background:none;overflow:hidden;padding:0}
.avatar.logo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* ===== Revision brief, October 2026 ===== */

/* hero proof strip, replacing the chips and stat tiles */
.proof{list-style:none;display:grid;grid-template-columns:1fr;gap:12px;margin-top:30px;max-width:56ch}
@media(min-width:720px){.proof{grid-template-columns:repeat(2,1fr)}}
.proof li{border-left:2px solid var(--ruby);padding-left:14px}
.proof b{display:block;font-size:15px;color:var(--paper)}
.proof span{display:block;font-size:13px;color:var(--paper-3);margin-top:2px}

/* the principal's photo in the hero, in place of the large mark */
.hero-portrait{width:min(380px,92%);height:auto;aspect-ratio:1;object-fit:cover;object-position:center 22%;border-radius:50%;display:block}

/* principal band above Sister businesses */
.principal-band{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:760px){.principal-band{grid-template-columns:180px 1fr}}
.principal-photo{width:160px;height:160px;border-radius:50%;object-fit:cover;object-position:center 22%}
.principal-band h2{font-size:30px;margin-bottom:12px}
.principal-band p{color:var(--paper-2);font-size:15px;margin-bottom:14px;max-width:62ch}

/* the principal's credentials as scannable lines, not a paragraph */
.cv{list-style:none;margin:10px 0 0}
.cv li{font-size:14px;color:var(--paper-2);padding:5px 0 5px 16px;position:relative}
.cv li:before{content:"";position:absolute;left:0;top:13px;width:6px;height:6px;background:var(--ruby-2);border-radius:50%}

/* optional fields on the enquiry form */
.more-detail{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:16px}
.more-detail summary{cursor:pointer;font-size:14px;color:var(--paper-2)}
.more-detail[open] summary{margin-bottom:4px}

/* the enquiry page is now two columns of unequal weight */
.enq-aside h2{font-size:24px;margin-bottom:14px}

/* cards that are whole links need the same hover as the rest */
a.cell:hover{border-color:var(--ruby)}
.email-link{color:var(--ruby-2);font-weight:600}
.email-link:hover{color:var(--paper)}