/* ============================================================
   Corvell — Operating Model (5 F's) component layer
   Built on top of site.css + colors_and_type.css
   ============================================================ */

/* -------- Nav overrides -------- */
.nav-links a{white-space:nowrap}

/* -------- Chevron progression (hero visual) -------- */
.fchev{display:flex;align-items:stretch;gap:0;position:relative;width:100%}
.fchev .stage{
  flex:1;color:#fff;padding:18px 26px 18px 30px;position:relative;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%,18px 50%);
  margin-right:-14px;min-height:132px;display:flex;flex-direction:column;justify-content:center;
  transition:transform 220ms var(--ease-out);
}
.fchev .stage:first-child{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 50%,calc(100% - 18px) 100%,0 100%);padding-left:22px}
.fchev .stage:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,18px 50%);margin-right:0}
.fchev .stage.s1{background:#031735}
.fchev .stage.s2{background:#0A2350}
.fchev .stage.s3{background:#10306B}
.fchev .stage.s4{background:#163D86}
.fchev .stage.s5{background:#003DFF}
.fchev .stage .num{font:600 11px/1 var(--font-sans);letter-spacing:0.22em;color:#fff;opacity:0.55;margin-bottom:6px}
.fchev .stage .name{font:700 20px/1.05 var(--font-sans);letter-spacing:-0.01em;margin-bottom:4px}
.fchev .stage .tag{font:400 11.5px/1.35 var(--font-sans);opacity:0.88}
.fchev .stage:hover{transform:translateY(-2px)}

/* Compact mini-chevron (used inline in copy or footers) */
.fchev-mini{display:flex;gap:4px;flex-wrap:wrap}
.fchev-mini .pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ink-50);border:1px solid var(--ink-200);border-radius:999px;
  padding:6px 12px;font:600 11px/1 var(--font-sans);letter-spacing:0.06em;
  color:var(--corvell-navy)
}
.fchev-mini .pill .n{color:var(--corvell-blue);font-weight:700}

/* Mobile: collapse chevrons to a vertical stack with left stripe */
@media (max-width:820px){
  .fchev{flex-direction:column;gap:4px}
  .fchev .stage,
  .fchev .stage:first-child,
  .fchev .stage:last-child{
    clip-path:none;margin:0;border-left:6px solid var(--corvell-blue);
    padding:14px 18px;min-height:unset;border-radius:6px
  }
}

/* -------- Layer deep-dive cards (operating-model page) -------- */
.layer-deep{
  display:grid;grid-template-columns:minmax(260px,320px) 1fr;gap:48px;
  padding:56px 0;border-top:1px solid var(--ink-100);align-items:start
}
.layer-deep:first-of-type{border-top:none;padding-top:16px}
.layer-deep .side{position:sticky;top:96px}
.layer-deep .side .num{
  display:inline-block;font:700 12px/1 var(--font-sans);letter-spacing:0.22em;
  color:#fff;background:var(--corvell-blue);padding:7px 12px;border-radius:4px;margin-bottom:18px
}
.layer-deep .side h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,3.6vw,48px);line-height:1.02;letter-spacing:-0.02em;
  margin:0 0 14px;color:var(--corvell-navy)
}
.layer-deep .side p.hears{
  font:italic 500 16px/1.45 var(--font-sans);color:var(--corvell-blue);margin:0 0 12px
}
.layer-deep .side p.sum{font-size:15px;line-height:1.55;color:var(--ink-500);margin:0}
.layer-deep .body{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.layer-deep .body .block h4{
  font:600 12px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--corvell-blue);margin:0 0 14px
}
.layer-deep .body .block ul{list-style:none;padding:0;margin:0}
.layer-deep .body .block li{
  position:relative;padding-left:18px;margin-bottom:10px;
  font:400 14.5px/1.5 var(--font-sans);color:var(--corvell-navy)
}
.layer-deep .body .block li::before{
  content:"";position:absolute;left:0;top:0.6em;width:7px;height:7px;
  background:var(--corvell-blue)
}
@media (max-width:960px){
  .layer-deep{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .layer-deep .side{position:static}
  .layer-deep .body{grid-template-columns:1fr;gap:22px}
}

/* -------- Compact layer intro cards (home page) -------- */
.layer-intro-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.layer-intro{
  background:#fff;border:1px solid var(--ink-200);border-radius:10px;
  padding:24px 22px;border-top:4px solid var(--corvell-blue);
  transition:all 220ms var(--ease-out)
}
.layer-intro:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--corvell-blue)}
.layer-intro .num{
  font:700 11px/1 var(--font-sans);letter-spacing:0.22em;
  color:var(--corvell-blue);margin-bottom:10px;display:block
}
.layer-intro h3{
  font:700 19px/1.1 var(--font-sans);color:var(--corvell-navy);
  margin:0 0 8px;letter-spacing:-0.01em
}
.layer-intro p{font:400 13px/1.5 var(--font-sans);color:var(--ink-500);margin:0}
@media (max-width:1100px){.layer-intro-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.layer-intro-grid{grid-template-columns:1fr}}

/* -------- Diagnostic "five questions" list (home) -------- */
.diagnostic{background:var(--corvell-navy);color:#fff;border-radius:14px;padding:clamp(36px,5vw,56px)}
.diagnostic .label{
  font:600 12px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);margin-bottom:12px;display:block
}
.diagnostic h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(28px,3.4vw,42px);line-height:1.05;letter-spacing:-0.02em;
  margin:0 0 24px;max-width:700px
}
.diagnostic ol{list-style:none;counter-reset:dx;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 40px}
.diagnostic ol li{
  counter-increment:dx;position:relative;padding-left:44px;
  font:400 15.5px/1.45 var(--font-sans);color:rgba(255,255,255,0.92)
}
.diagnostic ol li::before{
  content:counter(dx,decimal-leading-zero);position:absolute;left:0;top:-2px;
  font:700 14px/1 var(--font-sans);letter-spacing:0.06em;
  color:var(--corvell-blue);background:rgba(255,255,255,0.08);
  padding:8px 10px;border-radius:4px
}
@media (max-width:820px){.diagnostic ol{grid-template-columns:1fr;gap:14px}}

/* -------- Why Corvell panel -------- */
.why-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.why-cell{
  background:#fff;border:1px solid var(--ink-200);border-radius:10px;padding:28px 24px;
  border-left:4px solid var(--corvell-blue);transition:all 220ms var(--ease-out)
}
.why-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.why-cell h3{font:700 16px/1.2 var(--font-sans);margin:0 0 10px;color:var(--corvell-navy)}
.why-cell p{font:400 14.5px/1.5 var(--font-sans);color:var(--ink-500);margin:0}
@media (max-width:960px){.why-row{grid-template-columns:1fr}}

/* -------- Service tier cards (services page, layer-structured) -------- */
.tier-stack{display:flex;flex-direction:column;gap:16px}
.tier{
  display:grid;grid-template-columns:minmax(240px,300px) 1fr auto;gap:36px;align-items:center;
  background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:28px 32px;
  transition:all 220ms var(--ease-out)
}
.tier:hover{border-color:var(--corvell-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.tier .tier-head{display:flex;align-items:center;gap:16px}
.tier .tier-head .num{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--corvell-blue);color:#fff;border-radius:8px;
  font:700 14px/1 var(--font-sans);letter-spacing:0.08em;flex-shrink:0
}
.tier .tier-head h3{font:700 22px/1.1 var(--font-sans);color:var(--corvell-navy);margin:0;letter-spacing:-0.01em}
.tier .tier-head .hears{font:italic 500 13.5px/1.3 var(--font-sans);color:var(--corvell-blue);margin-top:4px;display:block}
.tier .tier-body p{font:400 14.5px/1.55 var(--font-sans);color:var(--ink-500);margin:0 0 10px}
.tier .tier-body .chips{display:flex;flex-wrap:wrap;gap:6px}
.tier .tier-body .chip{
  font:500 11px/1 var(--font-sans);padding:5px 10px;background:var(--ink-50);
  border:1px solid var(--ink-200);border-radius:999px;color:var(--corvell-navy)
}
.tier .tier-cta{font:600 13px/1 var(--font-sans);color:var(--corvell-blue)}
@media (max-width:960px){
  .tier{grid-template-columns:1fr;gap:20px;padding:24px}
  .tier .tier-cta{justify-self:start}
}

/* -------- Discovery CTA block (contact / footer CTAs) -------- */
.discovery-cta{
  background:linear-gradient(135deg,#031735 0%,#0A2350 60%,#163D86 100%);
  color:#fff;border-radius:16px;padding:clamp(44px,6vw,72px);position:relative;overflow:hidden
}
.discovery-cta::before{
  content:"";position:absolute;top:-40%;right:-10%;width:50%;height:180%;
  background:radial-gradient(circle,rgba(0,61,255,0.35) 0%,transparent 65%);
  pointer-events:none
}
.discovery-cta .label{
  font:600 12px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--corvell-blue-300);margin-bottom:14px;display:block;position:relative
}
.discovery-cta h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-0.02em;
  margin:0 0 18px;max-width:720px;position:relative
}
.discovery-cta p.lead{
  font:400 17px/1.55 var(--font-sans);color:rgba(255,255,255,0.82);
  margin:0 0 28px;max-width:620px;position:relative
}
.discovery-cta .cta-row{display:flex;gap:14px;flex-wrap:wrap;position:relative}
.discovery-cta .promise{
  display:flex;gap:32px;flex-wrap:wrap;margin-top:36px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.12);position:relative
}
.discovery-cta .promise .p-item{font:400 13px/1.4 var(--font-sans);color:rgba(255,255,255,0.78);flex:1;min-width:180px}
.discovery-cta .promise .p-item strong{display:block;font-weight:600;color:#fff;margin-bottom:4px}

/* -------- Entry-points grid (when to engage) -------- */
.entry-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.entry-card{
  background:var(--ink-50);border:1px solid var(--ink-200);border-radius:10px;
  padding:22px;border-top:3px solid var(--corvell-blue)
}
.entry-card .lnum{
  font:700 11px/1 var(--font-sans);letter-spacing:0.22em;
  color:var(--corvell-blue);margin-bottom:10px;display:block
}
.entry-card h4{font:700 15px/1.15 var(--font-sans);color:var(--corvell-navy);margin:0 0 12px}
.entry-card ul{list-style:none;margin:0;padding:0}
.entry-card li{
  font:400 13px/1.45 var(--font-sans);color:var(--ink-600);
  padding-left:12px;position:relative;margin-bottom:8px
}
.entry-card li::before{
  content:"";position:absolute;left:0;top:0.55em;width:5px;height:5px;
  background:var(--corvell-blue)
}
@media (max-width:1100px){.entry-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.entry-grid{grid-template-columns:1fr}}

/* -------- About page — principles grid -------- */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.principle{
  background:#fff;border:1px solid var(--ink-200);border-radius:12px;padding:30px 28px;
  display:flex;gap:18px;align-items:flex-start
}
.principle .pn{
  width:36px;height:36px;background:var(--corvell-blue);color:#fff;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font:700 13px/1 var(--font-sans);flex-shrink:0
}
.principle h4{font:700 17px/1.2 var(--font-sans);color:var(--corvell-navy);margin:0 0 8px}
.principle p{font:400 14.5px/1.55 var(--font-sans);color:var(--ink-500);margin:0}
@media (max-width:820px){.principles{grid-template-columns:1fr}}

/* -------- Founder cards -------- */
.founders{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.founder{
  background:var(--ink-50);border:1px solid var(--ink-200);border-radius:14px;padding:34px 30px
}
.founder .role{
  font:600 11px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--corvell-blue);margin-bottom:10px;display:block
}
.founder h3{font-family:var(--font-display);font-weight:700;font-size:28px;line-height:1.05;margin:0 0 14px;color:var(--corvell-navy)}
.founder p{font:400 15px/1.55 var(--font-sans);color:var(--ink-500);margin:0 0 12px}
.founder .creds{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.founder .cred{
  font:500 11.5px/1 var(--font-sans);padding:6px 11px;
  background:#fff;border:1px solid var(--ink-200);border-radius:999px;color:var(--corvell-navy)
}
@media (max-width:820px){.founders{grid-template-columns:1fr}}

/* -------- Contact layout -------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.contact-info .info-row{padding:20px 0;border-top:1px solid var(--ink-100)}
.contact-info .info-row:first-child{border-top:none;padding-top:0}
.contact-info .info-label{
  font:600 11px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--corvell-blue);margin-bottom:10px;display:block
}
.contact-info .info-val{font:500 17px/1.4 var(--font-sans);color:var(--corvell-navy);margin:0 0 4px}
.contact-info .info-val a{color:var(--corvell-navy);border-bottom:1px solid transparent;transition:border-color 140ms var(--ease-out)}
.contact-info .info-val a:hover{border-color:var(--corvell-blue);color:var(--corvell-blue)}
.contact-info .info-note{font:400 13.5px/1.45 var(--font-sans);color:var(--ink-500);margin:0}
.contact-form{
  background:#fff;border:1px solid var(--ink-200);border-radius:14px;padding:36px 32px;
  box-shadow:var(--shadow-md)
}
.contact-form h3{font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1.1;margin:0 0 8px;color:var(--corvell-navy)}
.contact-form .sub{font:400 14px/1.5 var(--font-sans);color:var(--ink-500);margin:0 0 22px}
.contact-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.contact-form label{font:500 12px/1 var(--font-sans);letter-spacing:0.04em;color:var(--corvell-navy);margin-bottom:6px;display:block}
.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;font:400 14.5px/1.4 var(--font-sans);color:var(--corvell-navy);
  border:1px solid var(--ink-200);border-radius:8px;padding:11px 13px;background:#fff;
  transition:border-color 140ms var(--ease-out)
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{outline:none;border-color:var(--corvell-blue);box-shadow:0 0 0 3px rgba(0,61,255,0.12)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form .full{grid-column:1 / -1}
.contact-form button{width:100%;margin-top:8px;justify-content:center}
@media (max-width:960px){
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .contact-form .form-row{grid-template-columns:1fr}
}

/* -------- Trust strip (simple text row) -------- */
.trust{
  padding:22px 0;border-top:1px solid var(--ink-100);border-bottom:1px solid var(--ink-100)
}
.trust .row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px}
.trust .row .label{
  font:600 11px/1 var(--font-sans);letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink-400)
}
.trust .row .items{display:flex;flex-wrap:wrap;gap:22px;color:var(--ink-600);font:500 13px/1 var(--font-sans)}
.trust .row .items span{position:relative}
.trust .row .items span:not(:last-child)::after{
  content:"";position:absolute;right:-12px;top:50%;width:3px;height:3px;border-radius:999px;
  background:var(--ink-300);transform:translateY(-50%)
}

/* -------- Utility: narrow container -------- */
.container-narrow{max-width:960px;margin:0 auto;padding:0 clamp(20px,4vw,48px)}

/* -------- Section eyebrows / rules -------- */
.rule-sm{width:40px;height:3px;background:var(--corvell-blue);border-radius:999px;margin-bottom:18px}

/* -------- Mobile nav drawer tweaks to match existing system -------- */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--corvell-navy);margin:5px 0;transition:all 220ms var(--ease-out)}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;border-bottom:1px solid var(--ink-100);gap:6px}
  .nav.open .nav-links a{padding:12px 0;border-bottom:1px solid var(--ink-100)}
  .nav.open .nav-links a:last-child{border-bottom:none}
  .nav-cta{display:none}
}