/* =========================================================
   Penny Bridge Inc. — Site styles
   Tech + retail type system. Official brand colors.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter+Tight:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Core brand */
  --brand-blue: #0F3DA8;
  --brand-blue-2: #0A2E82;
  --brand-blue-ink: #071E5A;

  --copper:    #B87A48;
  --copper-hi: #E8B788;
  --copper-lo: #7A4A26;

  /* Neutrals — paper + ink */
  --paper:     #F6F4EE;   /* warm off-white */
  --paper-2:   #ECE8DD;
  --paper-3:   #DCD6C6;
  --ink:       #0B0E14;   /* deep near-black, slight blue */
  --ink-2:     #11151E;
  --ink-3:     #1A1F2B;
  --ink-4:     #242A38;
  --line:      rgba(11,14,20,.12);
  --line-2:    rgba(11,14,20,.22);
  --line-dk:   rgba(246,244,238,.12);
  --line-dk-2: rgba(246,244,238,.22);
  --mute:      rgba(11,14,20,.6);
  --mute-dk:   rgba(246,244,238,.62);

  /* Type */
  --display: 'Space Grotesk', 'Geist', ui-sans-serif, system-ui, sans-serif;
  --body:    'Inter Tight', 'Söhne', ui-sans-serif, system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* Scale */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;

  --page-pad: clamp(20px, 4vw, 56px);
  --container: 1360px;
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--paper); color:var(--ink); overflow-x:hidden}
body{
  font-family:var(--body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","kern";
  line-height:1.55;
  letter-spacing:-0.005em;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img,svg{display:block; max-width:100%}
::selection{background:var(--brand-blue); color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--display); font-weight:500;
  letter-spacing:-0.028em; line-height:1.02;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(42px, 6.8vw, 112px); letter-spacing:-0.04em; line-height:.96}
h2{font-size:clamp(34px, 4.4vw, 64px); letter-spacing:-0.032em; line-height:1.04}
h3{font-size:clamp(22px, 2vw, 30px); letter-spacing:-0.022em; font-weight:500}
h4{font-size:clamp(18px, 1.4vw, 22px); letter-spacing:-0.018em; font-weight:500}

p{max-width:62ch}
strong{font-weight:600}

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mute); font-weight:500;
  display:inline-flex; align-items:center; gap:10px;
}
.eyebrow::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--copper); box-shadow:0 0 0 3px rgba(184,122,72,.16);
}
.eyebrow.on-dark{color:var(--mute-dk)}

/* ---------- Layout ---------- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--page-pad);
}
section{ padding-block:clamp(80px, 9vw, 140px); position:relative }
.section-head{
  display:grid; grid-template-columns:minmax(160px, 220px) 1fr;
  gap:clamp(28px, 5vw, 80px);
  align-items:baseline;
  margin-bottom:clamp(40px, 5vw, 72px);
}
.section-head .s-num{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--copper); font-weight:500;
  padding-top:10px; border-top:1px solid var(--copper);
}
.section-head .s-num b{color:var(--ink); display:block; font-weight:500; font-size:11px; margin-top:5px;}
@media(max-width: 820px){ .section-head{grid-template-columns:1fr; gap:12px} }

/* dark sections use inverted tokens */
section.dark{
  background:var(--ink); color:var(--paper);
}
section.dark h1, section.dark h2, section.dark h3, section.dark h4{color:var(--paper)}
section.dark .section-head .s-num{border-top-color:var(--copper); color:var(--copper)}
section.dark .section-head .s-num b{color:var(--paper)}
section.dark p{color:rgba(246,244,238,.82)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 20px;
  border-radius:999px;
  font-family:var(--body); font-weight:500; font-size:14px;
  letter-spacing:.005em;
  transition:all .35s cubic-bezier(.2,.7,.2,1);
  border:1px solid transparent;
  white-space:nowrap;
}
.btn .arr{transition:transform .35s}
.btn:hover .arr{transform:translateX(4px)}
.btn.primary{
  background:var(--brand-blue); color:#fff; border-color:var(--brand-blue);
  box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 10px 24px -10px rgba(15,61,168,.45);
}
.btn.primary:hover{background:var(--brand-blue-2); border-color:var(--brand-blue-2); transform:translateY(-1px)}
.btn.ghost{
  background:transparent; color:var(--ink); border-color:var(--line-2);
}
.btn.ghost:hover{border-color:var(--ink); background:var(--ink); color:var(--paper)}
.btn.ghost.on-dark{color:var(--paper); border-color:var(--line-dk-2)}
.btn.ghost.on-dark:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.btn.copper{
  background:var(--copper); color:var(--ink); border-color:var(--copper);
}
.btn.copper:hover{background:var(--copper-hi); border-color:var(--copper-hi)}

/* ---------- Navigation ---------- */
.pb-nav{
  position:sticky; top:0; z-index:80;
  background:rgba(246,244,238,.78);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.pb-nav .nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--page-pad);
  max-width:var(--container);
  margin:0 auto;
  gap:24px;
}
.pb-logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:600; font-size:19px;
  letter-spacing:-0.022em; color:var(--brand-blue);
}
.pb-logo img{width:32px; height:32px; display:block}
.pb-logo .inc{font-weight:500; color:var(--brand-blue); opacity:.6}
.pb-logo:hover{opacity:.85}

.pb-nav ul{ display:flex; gap:6px; list-style:none; align-items:center; }
.pb-nav ul a{
  display:inline-block;
  padding:9px 14px;
  border-radius:999px;
  font-size:14px; font-weight:500;
  color:var(--ink);
  transition:background .2s, color .2s;
}
.pb-nav ul a:hover{background:var(--paper-2)}
.pb-nav ul a.active{background:var(--ink); color:var(--paper)}

.nav-cta{display:flex; align-items:center; gap:8px}
.nav-menu-btn{display:none; padding:10px; border-radius:999px; border:1px solid var(--line-2)}
.nav-menu-btn svg{width:18px; height:18px}

@media(max-width:960px){
  .pb-nav ul{display:none}
  .nav-menu-btn{display:inline-flex}
  .pb-nav ul.open{
    display:flex; flex-direction:column; align-items:stretch;
    position:absolute; top:100%; left:0; right:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding:12px var(--page-pad);
    gap:2px;
  }
  .pb-nav ul.open a{padding:12px 14px}
  .nav-cta .btn.ghost{display:none}
}

/* ---------- Footer ---------- */
.pb-footer{ background:var(--ink); color:var(--paper); padding:80px 0 36px; }
.pb-footer .ft-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line-dk);
}
.pb-footer .ft-brand{
  display:flex; flex-direction:column; gap:18px; max-width:32ch;
}
.pb-footer .ft-brand img{width:180px}
.pb-footer .ft-brand p{
  font-size:14px; color:rgba(246,244,238,.7); line-height:1.55;
}
.pb-footer h5{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(246,244,238,.55);
  font-weight:500;
  margin-bottom:18px;
}
.pb-footer ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.pb-footer ul a{
  font-size:14px; color:var(--paper);
  display:inline-flex; align-items:center; gap:8px;
}
.pb-footer ul a:hover{color:var(--copper-hi)}
.pb-footer .ft-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(246,244,238,.5);
}
.pb-footer .ft-bottom a{color:rgba(246,244,238,.7)}
.pb-footer .ft-bottom a:hover{color:var(--copper-hi)}
@media(max-width:820px){
  .pb-footer .ft-top{grid-template-columns:1fr 1fr; gap:32px}
  .pb-footer .ft-brand{grid-column:span 2}
}

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal.delay-1{transition-delay:.08s}
.reveal.delay-2{transition-delay:.16s}
.reveal.delay-3{transition-delay:.24s}
.reveal.delay-4{transition-delay:.32s}

/* ---------- Helpers ---------- */
.divider{height:1px; background:var(--line); width:100%}
.divider.dark{background:var(--line-dk)}
.mono{font-family:var(--mono); letter-spacing:.04em}
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px;
  background:rgba(15,61,168,.06);
  color:var(--brand-blue);
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:500;
  border:1px solid rgba(15,61,168,.16);
}
.chip.copper{background:rgba(184,122,72,.1); color:var(--copper-lo); border-color:rgba(184,122,72,.25)}
.chip.dark{background:rgba(246,244,238,.06); color:var(--paper); border-color:rgba(246,244,238,.14)}
.chip .d{width:6px; height:6px; border-radius:50%; background:currentColor}

.lede{
  font-family:var(--display); font-weight:400;
  font-size:clamp(20px, 2.1vw, 28px);
  line-height:1.4;
  letter-spacing:-0.018em;
  color:var(--ink);
  max-width:64ch;
}
.small{font-size:13px; color:var(--mute); line-height:1.6}

/* ---------- Accent utilities ---------- */
.accent-blue{ color:var(--brand-blue) }
.accent-copper{
  color:var(--copper-hi);
  font-style:normal;
  font-weight:500;
}
/* On light backgrounds, use the deeper copper for contrast */
section:not(.platform):not(.fit):not(.dark) .accent-copper,
.gap .accent-copper,
.how .accent-copper,
.why .accent-copper,
.layer .accent-copper{
  color:var(--copper);
}
/* Let long phrases wrap naturally; only short fragments stay nowrap */
.accent-copper.wrap{white-space:normal}