/* about.html — page styles */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.about-title i, .mission-quote span, .why-head h2 i, .story-left h2 i, .offices-head h2 i, .values-head h2 i, .lead-left h2 i, .lead-quote span, .cta-band h2 i {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block; /* Forces the browser to render the gradient box cleanly */
  padding-right: 0.05em;
}
.about-hero {
  padding-top:64px;
  background: var(--deep);
  position:relative;
  overflow:hidden;
}
.about-hero::before {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient( -45deg, transparent, transparent 90px, rgba(255,255,255,0.018) 90px, rgba(255,255,255,0.018) 91px);
  pointer-events:none;
}
.about-hero::after {
  content:''; position:absolute; top:-220px; left:-220px; width:640px; height:640px;
  background: radial-gradient(circle, rgba(107,107,200,0.20) 0%, transparent 65%);
  pointer-events:none;
}
.about-hero-inner { padding: 14rem 8% 6rem; position:relative; z-index:1; }
.about-eyebrow {
  font-size:0.65rem; text-transform:uppercase; letter-spacing:0.25em;
  color: rgba(255,255,255,0.30); margin-bottom:2.5rem;
}
.about-title {
  font-family:'Playfair Display', serif; font-weight:900;
  font-size: clamp(3.2rem, 6vw, 5.8rem); line-height:0.94; color: var(--paper);
}
.about-title .line { 
  display: block; 
  overflow: hidden; 
  /* Increase padding drastically to clear the bottom tail of 'p' */
  padding-bottom: 0.35em; 
  /* Pull the next line back up by the exact same amount */
  margin-bottom: -0.35em; 
  padding-right: 0.1em; 
  padding-left: 0.05em; /* Safegaurd left side slants */
}
.about-title .line span {
  display:block; transform: translateY(110%);
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.about-title .line:nth-child(1) span { animation-delay: 0.12s; }
.about-title .line:nth-child(2) span { animation-delay: 0.28s; }
.about-sub {
  margin-top:1.9rem; font-size:1.08rem; line-height:1.85; color: var(--white-55); max-width: 640px;
  opacity:0; animation: fadeIn 1.05s 0.65s ease forwards;
}
.about-sub strong { font-weight:500; color: rgba(255,255,255,0.70); }
.about-rule {
  width:72px; height:2px; background: var(--grad-solid); margin-top:2.2rem;
  transform: scaleX(0); transform-origin:left; animation: scaleIn 0.8s 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}
.about-stats {
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:0; margin-top:4rem;
  border-top:1px solid rgba(255,255,255,0.08); padding-top:2.3rem; max-width: 980px;
}
.about-stat { padding: 0 1.6rem; }
.about-stat:first-child { padding-left:0; }
.about-stat:not(:first-child) { border-left:1px solid rgba(255,255,255,0.08); }
.as-num {
  font-family:'Playfair Display', serif; font-size:2.1rem; font-weight:700; line-height:1;
  background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.as-lbl { margin-top:0.55rem; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.18em; color: rgba(255,255,255,0.76); }
section { position:relative; }
.scroll-target { scroll-margin-top:80px; }
.mission { background: var(--paper); padding: 8rem 5%; }
.mission-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:2rem; align-items:start; }
.sec-label { grid-column: 1 / 4; padding-top:0.4rem; }
.sec-num { font-family:'Playfair Display', serif; font-size:4rem; font-weight:900; color: var(--rule); line-height:1; }
.sec-text { margin-top:0.5rem; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; color: var(--mid); }
.mission-quote {
  grid-column: 4 / 10; font-family:'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight:700; font-style: normal; line-height:1.2; color: var(--ink); padding-bottom: 0.1em;
}
.mission-copy { grid-column: 4 / 13; display:grid; grid-template-columns: 1fr 1fr; gap:2rem; margin-top:1.5rem; }
.mission-copy p { font-size:0.92rem; line-height:1.85; color: var(--mid); }
.why { background: var(--cream); padding: 8rem 5%; }
.why-head { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:2rem; border-bottom:2px solid var(--ink); margin-bottom:3rem; }
.why-head h2 { font-family:'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight:700; color: var(--ink); padding-right: 0.1em; }
.why-head p { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.15em; color: var(--mid); }
.why-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; }
.why-card { background: var(--paper); border:1px solid rgba(0,0,0,0.06); padding:3rem 2.5rem; position:relative; overflow:hidden; transition: background 0.3s, border-color 0.3s; }
.why-card:hover { background: rgba(255,255,255,0.96); border-color: rgba(107,107,200,0.25); }
.why-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-solid); }
.wc-title { font-family:'Playfair Display', serif; font-size:1.55rem; font-weight:700; color: var(--ink); line-height:1.15; margin-bottom:1rem; }
.wc-body { font-size:0.88rem; line-height:1.8; color: var(--mid); }
.story { background: var(--deep); padding: 8rem 5%; overflow:hidden; }
.story::after { content:''; position:absolute; top:-170px; right:-170px; width:560px; height:560px; background: radial-gradient(circle, rgba(46,207,184,0.10) 0%, transparent 65%); pointer-events:none; }
.story-split { display:grid; grid-template-columns: 1.05fr 0.95fr; gap:5rem; position:relative; z-index:1; }
.story-left .eyebrow { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; margin-bottom:1rem; }
.story-left h2 { font-family:'Playfair Display', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:700; color: var(--paper); line-height:1.1; margin-bottom:2.2rem; padding-bottom: 0.1em; }
.timeline { list-style:none; border-top:1px solid rgba(255,255,255,0.08); }
.tl-item { padding:1.6rem 0; border-bottom:1px solid rgba(255,255,255,0.08); display:grid; grid-template-columns: 110px 1fr; gap:1.5rem; }
.tl-tag { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.14em; color: rgba(255,255,255,0.76); padding-top:0.2rem; }
.tl-body h4 { font-size:0.95rem; font-weight:500; color: rgba(255,255,255,0.75); margin-bottom:0.4rem; }
.tl-body p { font-size:0.86rem; line-height:1.75; color: rgba(255,255,255,0.40); }
.story-right { position:relative; padding-top:0.5rem; }
.story-ghost { position:absolute; top:-1.5rem; right:-1rem; font-family:'Playfair Display', serif; font-weight:900; font-size: 10rem; line-height:1; color: rgba(255,255,255,0.04); user-select:none; pointer-events:none; }
.story-right p { font-size:0.95rem; line-height:1.9; color: rgba(255,255,255,0.66); max-width: 520px; }
.story-right p strong { font-weight:500; color: rgba(255,255,255,0.70); }
.story-right .story-ctas { margin-top:2.2rem; display:flex; gap:1.2rem; flex-wrap:wrap; }
.offices { background: var(--paper); padding: 8rem 5%; }
.offices-head { display:flex; align-items:baseline; justify-content:space-between; padding-bottom:2rem; border-bottom:2px solid var(--ink); margin-bottom:3rem; }
.offices-head .eyebrow { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; margin-bottom:0.7rem; }
.offices-head h2 { font-family:'Playfair Display', serif; font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight:700; color: var(--ink); line-height:1.12; padding-right: 0.1em; }
.offices-head p { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.15em; color: var(--mid); }
.office-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:2rem; max-width: 1100px; }
.office-card { background: var(--cream); padding:4rem 3rem; border:1px solid rgba(0,0,0,0.06); position:relative; overflow:hidden; transition: background 0.3s, border-color 0.3s; }
.office-card:hover { background: rgba(249,247,243,0.86); border-color: rgba(107,107,200,0.25); }
.office-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-solid); }
.badge { display:inline-block; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.18em; color: rgba(255,255,255,0.80); background: var(--grad-solid); padding:0.28rem 0.6rem; border-radius:2px; margin-bottom:1.6rem; }
.oc-title { font-family:'Playfair Display', serif; font-size:1.55rem; font-weight:700; color: var(--ink); line-height:1.15; margin-bottom:1rem; }
.oc-meta { font-size:0.86rem; line-height:1.8; color: var(--mid); }
.oc-meta strong { font-weight:500; color: var(--ink-70); }
.oc-list { list-style:none; margin-top:1.6rem; border-top:1px solid rgba(0,0,0,0.06); padding-top:1.2rem; }
.oc-list li { font-size:0.84rem; color: var(--mid); padding:0.55rem 0; border-bottom:1px solid rgba(0,0,0,0.06); display:flex; gap:0.8rem; }
.oc-list li::before { content:"—"; color: #10796a; flex-shrink:0; }
.oc-list a { color: var(--purple-dark); text-decoration:none; border-bottom:1px solid rgba(107,107,200,0.35); padding-bottom:1px; transition: color 0.2s, border-color 0.2s; }
.oc-list a:hover { color: #10796a; border-color: rgba(46,207,184,0.6); }
.values { background: var(--cream); padding: 8rem 5%; }
.values-head { display:grid; grid-template-columns: repeat(12, 1fr); gap:2rem; align-items:start; margin-bottom:3rem; }
.values-head .vh-left { grid-column: 1 / 5; }
.values-head .vh-left .sec-num { font-family:'Playfair Display', serif; font-size:4rem; font-weight:900; color: var(--rule); line-height:1; }
.values-head .vh-left .sec-text { margin-top:0.5rem; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; color: var(--mid); }
.values-head .vh-right { grid-column: 5 / 13; }
.values-head h2 { font-family:'Playfair Display', serif; font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight:700; color: var(--ink); line-height:1.12; margin-bottom:1.2rem; padding-right: 0.1em;}
.values-head p { font-size:0.92rem; line-height:1.85; color: var(--mid); max-width: 820px; }
.values-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap:2px; }
.val-card { background: var(--paper); border:1px solid rgba(0,0,0,0.06); padding:2.6rem 2rem; position:relative; overflow:hidden; transition: background 0.3s, border-color 0.3s; }
.val-card:hover { background: rgba(255,255,255,0.97); border-color: rgba(46,207,184,0.25); }
.val-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-solid); }
.val-icon { width:34px; height:34px; border:1px solid rgba(107,107,200,0.22); background: var(--grad-subtle); display:flex; align-items:center; justify-content:center; border-radius:2px; margin-bottom:1.2rem; color: var(--ink); font-size:0.9rem; }
.val-title { font-family:'Playfair Display', serif; font-size:1.2rem; font-weight:700; color: var(--ink); margin-bottom:0.7rem; }
.val-body { font-size:0.85rem; line-height:1.75; color: var(--mid); }
.leadership { background: var(--paper); padding: 8rem 5%; border-top: 1px solid var(--rule); }
.lead-grid { display:grid; grid-template-columns: repeat(12, 1fr); gap:2rem; align-items:start; }
.lead-left { grid-column: 1 / 5; padding-top:0.6rem; }
.lead-eyebrow { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; margin-bottom:1rem; }
.lead-left h2 { font-family:'Playfair Display', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight:700; color: var(--ink); line-height:1.1; margin-bottom:1.4rem; padding-right: 0.1em; }
.lead-left p { font-size:0.92rem; line-height:1.9; color: var(--mid); margin-bottom:1rem; }
.lead-right { grid-column: 5 / 13; }
.lead-card { background: var(--cream); border:1px solid rgba(0,0,0,0.06); position:relative; overflow:hidden; padding: 0; display: flex; flex-direction: column;}
.lead-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-solid); z-index: 10;}
.lead-top {
  display: flex;
  background: var(--deep); /* Gives his profile a sharp, executive dark background */
}
.lead-avatar-wrap {
  display: flex;
  align-items: stretch; /* Stretch to fill */
  width: 100%;
}
.lead-avatar-inner {
  display: flex;
  align-items: center;
  flex: 1;
}
.lead-avatar {
  width: 320px; /* Massive increase from 130px */
  height: 380px; 
  border-radius: 0; /* Changed from circle to rectangle */
  object-fit: cover;
  object-position: center 15%; /* Keeps his face in view */
  display: block;
  flex-shrink: 0;
  border-right: 3px solid var(--purple); /* Sharp accent line */
}
.lead-name-block { 
  padding: 3rem; 
  flex: 1; 
}
.lead-name { font-family: 'Playfair Display', serif; font-size: 2.8rem; font-weight: 900; color: var(--paper); line-height: 1.05; margin-bottom: 0.5rem; }
.lead-role { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255,255,255,0.76); line-height: 1.6; }
.lead-avatar-wrap .btn-ghost-dark {
  align-self: center;
  margin-right: 3rem;
  border-color: rgba(255,255,255,0.72);
  color: var(--paper);
}
.lead-avatar-wrap .btn-ghost-dark:hover {
  background: var(--purple);
  border-color: var(--purple-dark);
}
.lead-bottom-content {
  padding: 3rem;
}
.lead-quote { font-family:'Playfair Display', serif; font-size:1.4rem; font-style: italic; font-weight:700; line-height:1.4; color: var(--ink); margin-bottom:2rem; padding-bottom:0.1em; max-width: 800px;}
.lead-stats { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:0; border-top:1px solid rgba(0,0,0,0.06); border-bottom:1px solid rgba(0,0,0,0.06); padding:1.6rem 0; margin-bottom:2.2rem; }
.ls { padding:0 2rem; }
.ls:first-child { padding-left:0; }
.ls:not(:first-child) { border-left:1px solid rgba(0,0,0,0.06); }
.ls-num { font-family:'Playfair Display', serif; font-size:2.2rem; font-weight:900; line-height:1; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.ls-lbl { margin-top:0.55rem; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.18em; color: var(--mid); }
.lead-sections { display:grid; grid-template-columns: 1fr 1fr; gap:3rem; }
.lead-sections h4 { font-size:0.78rem; text-transform:uppercase; letter-spacing:0.18em; color: var(--ink); margin-bottom:1.2rem; font-weight: 700;}
.lead-ul { list-style:none; }
.lead-ul li { font-size:0.86rem; color: var(--mid); padding:0.75rem 0; border-bottom:1px solid rgba(0,0,0,0.06); display:flex; gap:0.8rem; }
.lead-ul li:first-child { border-top:1px solid rgba(0,0,0,0.06); }
.lead-ul li::before { content:"—"; color: #10796a; flex-shrink:0; }
.exp-grid { border-top:1px solid rgba(0,0,0,0.06); }
.exp-row { display:grid; grid-template-columns: 1fr 1fr; gap:1.2rem; padding:0.95rem 0; border-bottom:1px solid rgba(0,0,0,0.06); }
.exp-row strong { font-weight:500; color: var(--ink-85); }
.exp-row span { color: var(--mid); }
.lead-cta { margin-top:3rem; display:flex; gap:1.2rem; flex-wrap:wrap; }
@media (max-width: 1200px) {
.lead-avatar { width: 240px; }
.lead-name { font-size: 2.2rem; }
}
@media (max-width: 900px) {
.lead-left, .lead-right { grid-column: 1 / -1; }
.lead-avatar-inner { flex-direction: column; align-items: stretch; }
.lead-avatar { width: 100%; height: 300px; border-right: none; border-bottom: 3px solid var(--purple); }
.lead-name-block { padding: 2rem; text-align: center; }
.lead-avatar-wrap .btn-ghost-dark { margin: 0 0 2rem 0; }
.lead-bottom-content { padding: 2rem; }
.lead-stats { grid-template-columns: 1fr; gap: 1rem; }
.ls { padding: 0; text-align: center; }
.ls:not(:first-child) { border-left: none; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 1rem; }
}
@media (max-width: 600px) {
.lead-sections { grid-template-columns: 1fr; gap: 2rem;}
}
.cta-band { background: var(--deep); padding: 7rem 5%; text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:-220px; left:-220px; width:620px; height:620px; background: radial-gradient(circle, rgba(107,107,200,0.16) 0%, transparent 65%); pointer-events:none; }
.cta-band::after { content:''; position:absolute; bottom:-180px; right:-180px; width:540px; height:540px; background: radial-gradient(circle, rgba(46,207,184,0.10) 0%, transparent 65%); pointer-events:none; }
.cta-band h2 { font-family:'Playfair Display', serif; font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight:900; line-height:0.95; color: var(--paper); position:relative; z-index:1; padding-bottom:0.1em;}
.cta-band p { margin:1.7rem auto 0; font-size:0.95rem; line-height:1.85; color: var(--white-45); max-width: 760px; position:relative; z-index:1; }
.cta-actions { margin-top:2.6rem; display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; position:relative; z-index:1; }
.footer-top { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand-name { font-family:'Instrument Sans', sans-serif; font-size:1rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1rem; }
.footer-brand-name .mint { color: var(--purple-dark); }
.footer-brand-name .wurks { color: #10796a; }
.footer-brand p { font-size:0.82rem; line-height:1.7; color: rgba(255,255,255,0.76); }
.footer-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:0.72rem; color: rgba(255,255,255,0.66); }
@media (max-width: 900px) {
.about-hero-inner { padding: 10rem 5% 5rem; }
.about-stats { grid-template-columns: 1fr; padding-top:1.6rem; }
.about-stat { padding:1.2rem 0; }
.about-stat:not(:first-child) { border-left:none; border-top:1px solid rgba(255,255,255,0.08); }
.mission-copy { grid-template-columns: 1fr; }
.why-grid { grid-template-columns: 1fr; }
.story-split { grid-template-columns: 1fr; gap:3rem; }
.office-grid { grid-template-columns: 1fr; }
.values-grid { grid-template-columns: 1fr 1fr; }
.lead-grid { grid-template-columns: 1fr; }
.lead-left, .lead-right { grid-column: 1 / -1; }
.lead-sections { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.about-title { font-size: clamp(2.7rem, 9vw, 3.6rem); }
.why-card, .office-card, .lead-card { padding: 2.4rem 1.8rem; }
.values-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.cta-actions { flex-direction: column; align-items:center; }
.lead-avatar-inner { flex-direction: column; align-items: center; text-align: center; }
.lead-avatar-wrap { justify-content: center; text-align: center; }
}