/* ============================================================
   Fortellar — EXPERTISE page type
   Loads after colors_and_type.css + website.css + template.css.
   Deliberately distinct from the service/practice page types:
   dark photographic hero, numbered discipline rows, component chips,
   one inverse band. Nothing here is used by other page types.
   ============================================================ */

/* ---------- 1 · Hero: full-bleed photo, navy wash, white type ---------- */
/* ---------- 1 · Hero (light treatment, from Claude Design) ----------
   White background, photo masked in from the right, navy type. The navy wash with
   white text that used to be here is not what Design specifies. The layer is full
   width rather than Design's 62% so the photo is never cropped, matching the homepage. */
.exp-hero{position:relative;isolation:isolate;background:#fff;overflow:hidden;--hero-ratio:2.426;aspect-ratio:var(--hero-ratio);display:flex;align-items:center}
.exp-hero>.container{width:100%}
.exp-hero__media{position:absolute;top:0;right:0;bottom:0;width:100%;z-index:-2;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 26%,#000 58%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 26%,#000 58%)}
.exp-hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.exp-hero__grid-lines{display:none}
.exp-hero__inner{padding:32px 0;max-width:640px;position:relative;z-index:1}
.exp-hero h1{color:var(--color-navy-800);letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance;max-width:20ch}
.exp-hero .eyebrow{color:var(--color-blue-600)}
.exp-hero__lead{font-size:21px;line-height:34px;color:#1E293B;margin:0 0 28px;max-width:52ch;text-wrap:pretty}
.exp-hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:0}
.exp-hero__actions .btn--primary{background:var(--color-navy-800);color:#fff;border-color:var(--color-navy-800)}
.exp-hero__actions .btn--primary:hover{background:var(--color-blue-500);border-color:var(--color-blue-500);color:#fff}

/* ---------- 2 · Operating model: the old model vs. what replaces it ---------- */
.exp-model{display:grid;grid-template-columns:1fr 1.05fr;gap:80px;align-items:start}
.exp-model__claim h2{margin-bottom:20px;text-wrap:balance}
.exp-model__claim p{font-size:18px;line-height:30px;color:var(--color-gray-500);margin:0 0 18px;text-wrap:pretty}
.exp-model__claim p strong{color:var(--color-navy-800);font-weight:600}
.exp-shift{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;overflow:hidden}
.exp-shift__head{display:grid;grid-template-columns:1fr 46px 1.2fr;background:var(--color-gray-50);border-bottom:1px solid var(--border)}
.exp-shift__head span{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:14px 24px;color:var(--color-gray-500)}
.exp-shift__head span:nth-child(2){padding:0}
.exp-shift__head span:last-child{color:var(--color-navy-700);background:#fff;border-left:1px solid var(--border)}
.exp-shift__row{display:grid;grid-template-columns:1fr 46px 1.2fr;border-bottom:1px solid var(--border)}
.exp-shift__row:last-child{border-bottom:0}
.exp-shift__from{padding:20px 24px;font-size:14.5px;line-height:23px;color:var(--color-gray-600);background:var(--color-gray-50)}
.exp-shift__arrow{display:flex;align-items:center;justify-content:center;background:var(--color-gray-50);color:var(--color-blue-500)}
.exp-shift__arrow svg{flex:none}
.exp-shift__to{padding:20px 24px;font-family:var(--font-display);font-size:16px;line-height:24px;font-weight:700;color:var(--color-navy-800);border-left:1px solid var(--border);background:#fff}
@media (max-width:760px){
  .exp-shift__head{display:none}
  .exp-shift__row{grid-template-columns:1fr}
  .exp-shift__arrow{height:30px;transform:rotate(90deg)}
  .exp-shift__to{border-left:0}
}

/* ---------- 3 · Disciplines: sticky rail, numbered rows, named components ---------- */
.exp-disc-section{padding-top:0}
.exp-rail{position:sticky;top:var(--nav-h,81px);z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);margin-bottom:72px}
.exp-rail__inner{display:flex;align-items:stretch;gap:28px}
.exp-rail__label{display:flex;align-items:center;flex:0 0 auto;font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gray-400)}
.exp-rail__links{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.exp-rail__links::-webkit-scrollbar{display:none}
.exp-rail__links a{display:flex;align-items:center;gap:9px;flex:0 0 auto;padding:20px 20px;border-bottom:2px solid transparent;text-decoration:none;white-space:nowrap;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.exp-rail__links a:hover{text-decoration:none;border-bottom-color:var(--color-gray-300)}
.exp-rail__links a.is-active{border-bottom-color:var(--color-blue-600)}
.exp-rail__t{font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--color-gray-500)}
.exp-rail__links a:hover .exp-rail__t{color:var(--color-navy-800)}
.exp-rail__links a.is-active .exp-rail__t{color:var(--color-navy-800);font-weight:600}
.exp-disc{border-top:1px solid var(--border)}
.exp-disc__row{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;padding:52px 0;border-bottom:1px solid var(--border);scroll-margin-top:calc(var(--nav-h,81px) + var(--exp-rail-h,63px) + 24px)}
.exp-disc__n{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--color-blue-600);padding-top:8px}
.exp-disc__name{font-family:var(--font-display);font-size:27px;line-height:35px;font-weight:700;letter-spacing:-.015em;color:var(--color-navy-800);margin:0 0 14px;text-wrap:balance}
.exp-disc__body{font-size:16px;line-height:27px;color:var(--color-gray-500);margin:0;text-wrap:pretty}
.exp-disc__aside{padding-top:6px}
.exp-disc__label{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-gray-400);margin-bottom:16px}
.exp-disc__chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.exp-chip{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:13px;font-weight:500;line-height:1;padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-pill);background:#fff;color:var(--color-navy-800)}
.exp-chip--lead{background:var(--color-navy-800);border-color:var(--color-navy-800);color:#fff;font-weight:600}
.exp-disc__proof{display:flex;gap:10px;align-items:flex-start;background:var(--color-gray-50);border-radius:var(--radius-md);padding:14px 16px}
.exp-disc__proof svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--color-blue-600);stroke-width:2.4}
.exp-disc__proof span{font-family:var(--font-ui);font-size:13.5px;line-height:21px;color:var(--color-gray-700)}
.exp-disc__proof b{color:var(--color-navy-800);font-weight:600}

/* ---------- 4 · Execution principles (inverse band) ---------- */
.exp-princ-band{background:var(--gradient-ink);padding:88px 0 96px;color:#fff}
.exp-princ-band .eyebrow{color:var(--color-blue-500)}
.exp-princ-band h2{color:#fff;max-width:22ch;text-wrap:balance}
.exp-princ{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:56px}
.exp-princ__item{padding:0}
.exp-princ__item:first-child{padding-left:0}
.exp-princ__t{font-family:var(--font-display);font-size:21px;line-height:29px;font-weight:600;color:#fff;margin:0 0 12px;text-wrap:balance}
.exp-princ__b{font-size:15.5px;line-height:26px;color:rgba(255,255,255,.72);margin:0;text-wrap:pretty}

/* ---------- 5 · Who does the work ---------- */
.exp-people{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.exp-people__lede p{font-size:17px;line-height:29px;color:var(--color-gray-500);margin:0 0 16px;text-wrap:pretty}
.exp-people__lede p strong{color:var(--color-navy-800);font-weight:600}
.exp-creds{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.exp-cred{background:#fff;padding:24px 22px}
.exp-cred__k{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-blue-600);margin-bottom:10px}
.exp-cred__v{font-family:var(--font-ui);font-size:14.5px;line-height:23px;color:var(--color-navy-800);margin:0}
.exp-cred__v em{font-style:normal;color:var(--color-gray-500)}
.exp-note{margin-top:20px;font-family:var(--font-mono);font-size:12px;line-height:19px;color:#B45309;background:#FFFBEB;border:1px dashed #FCD34D;border-radius:var(--radius-sm);padding:12px 14px}

/* ---------- 6 · Where this expertise shows up (reverse map) ---------- */
.exp-applied{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.exp-applied__card{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 24px 22px;text-decoration:none;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.exp-applied__card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.exp-applied__eyebrow{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--color-navy-700)}
.exp-applied__t{font-family:var(--font-display);font-size:18px;line-height:26px;font-weight:700;color:var(--color-navy-800);margin:0}
.exp-applied__b{font-size:14.5px;line-height:23px;color:var(--color-gray-500);margin:0}
.exp-applied__use{margin-top:auto;padding-top:14px;font-family:var(--font-ui);font-size:12.5px;line-height:19px;color:var(--color-gray-400);border-top:1px solid var(--border)}
.exp-applied__use b{color:var(--color-navy-800);font-weight:600}

/* ---------- 7 · Closing CTA ---------- */
.exp-cta{background:var(--color-navy-800);border-radius:var(--radius-xl);padding:64px 72px;display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;position:relative;overflow:hidden}
.exp-cta::after{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(0,156,255,.35) 0%,transparent 68%)}
.exp-cta > *{position:relative;z-index:1}
.exp-cta h2{color:#fff;font-size:36px;line-height:44px;margin:0 0 16px;text-wrap:balance}
.exp-cta p{font-size:17px;line-height:28px;color:rgba(255,255,255,.78);margin:0;text-wrap:pretty}
.exp-cta__actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.exp-cta__actions .btn{background:#fff;color:var(--color-navy-800);border-color:#fff}
.exp-cta__actions .btn:hover{background:var(--color-blue-500);border-color:var(--color-blue-500);color:#fff}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .exp-disc__row{grid-template-columns:1fr 1fr;gap:40px}
  .exp-cta{padding:48px 44px;gap:36px}
}
@media (max-width:995px){
  .exp-hero__inner{padding:72px 0 76px}
  .exp-hero h1{max-width:none}
  .exp-hero__lead{font-size:18px;line-height:30px}
  .exp-rail{margin-bottom:48px}
  .exp-rail__inner{gap:0}
  .exp-rail__label{display:none}
  .exp-rail__links a{padding:16px 14px}
  .exp-model,.exp-people{grid-template-columns:1fr;gap:44px}
  .exp-disc__row{grid-template-columns:1fr;gap:20px;padding:40px 0}
  .exp-disc__aside{grid-column:1}
  .exp-princ{grid-template-columns:1fr;gap:36px}
  .exp-princ__item{padding:0}
  .exp-applied{grid-template-columns:1fr 1fr}
  .exp-cta{grid-template-columns:1fr;padding:40px 32px}
  .exp-cta h2{font-size:28px;line-height:36px}
}
@media (max-width:640px){
  .exp-shift__head,.exp-shift__row{grid-template-columns:1fr}
  .exp-shift__to{border-left:0;border-top:1px solid var(--border)}
  .exp-shift__head span+span{border-left:0}
  .exp-creds,.exp-applied{grid-template-columns:1fr}
}

/* ---------- Hero stack (must stay last: it overrides the base .exp-hero__media
   rules and the 995px/760px/640px blocks above, all of which are equal
   specificity and would otherwise win on source order).
   Breaks at 1200px rather than the 1100px the other heroes use: this hero has
   the tallest text block (4-line headline + lead + CTA) against the shortest
   photo ratio (2.426), so the overlay stops fitting sooner. Measured. ---------- */
/* Below this width the band is too short for a headline: the photo becomes a
   full-width banner (still uncropped) with the text beneath it on navy. */
@media (max-width:1200px){
  .exp-hero{aspect-ratio:auto;display:block}
  .exp-hero__media{position:relative;inset:auto;z-index:0;width:100%;-webkit-mask-image:none;mask-image:none}
  .exp-hero__media img{height:auto}
  .exp-hero__grid-lines{display:none}
  .exp-hero__inner{padding:34px 0 44px;max-width:none}
}