/* ============================================================
   Ambreen Kanwal — Executive Personal Website
   Personal-brand landing aesthetic (reference palette)
   Off-white + near-black + burnt orange / bronze + warm neutrals
   ============================================================ */

:root{
  --bg:#FDFDFD;
  --bg-soft:#F6F1E9;
  --bg-card:#FFFFFF;
  --ink:#040203;
  --ink-2:#221D19;
  --muted:#6E6155;
  --muted-2:#826E5D;
  --accent:#A5461F;   /* burnt orange */
  --accent-2:#90581A; /* amber / bronze */
  --accent-deep:#5B2812;
  --brown:#5E463B;
  --taupe:#997D7D;
  --gray:#AAA3A5;
  --line:rgba(4,2,3,.13);
  --line-soft:rgba(4,2,3,.07);
  --accent-soft:rgba(165,70,31,.08);
  --bronze-soft:rgba(144,88,26,.12);
  --ink-soft:rgba(4,2,3,.6);
  --shadow-sm:0 8px 24px -12px rgba(4,2,3,.12);
  --shadow-lg:0 40px 80px -40px rgba(4,2,3,.35);
  --font:'Manrope',system-ui,-apple-system,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --ease:cubic-bezier(.22,.61,.21,1);
  --nav-h:78px;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.68;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-feature-settings:"ss01";
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}
strong{font-weight:700}
em{font-style:italic}

::selection{background:rgba(165,70,31,.22);color:var(--ink)}

/* ---------- Layout ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 26px}
.section{padding:72px 0;position:relative}

.eyebrow{
  font-family:var(--font);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;
}
.eyebrow .num{color:var(--ink);font-weight:800;letter-spacing:.05em;font-size:.82rem;padding:3px 8px;border:1px solid var(--line);border-radius:999px;line-height:1}
.eyebrow.center{justify-content:center}
.eyebrow .num.accent{color:var(--accent);border-color:rgba(165,70,31,.35)}

.section-title{
  font-family:var(--font);font-weight:800;color:var(--ink);
  font-size:clamp(2.1rem,4.2vw,3.7rem);line-height:1.05;letter-spacing:-.04em;
  margin-top:18px;max-width:26ch;
}
.center-head .section-title{max-width:24ch;margin-inline:auto}
.section-head{margin-bottom:40px}
.section-head.split{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end}
.section-head.split .section-intro{margin:0}
.section-intro{color:var(--muted);font-size:1.03rem;max-width:52ch}
.section-intro strong{color:var(--ink)}
.quote{font-size:1.3rem;line-height:1.55;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.quote em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent)}
.accent-serif{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:0}

.sub-block{margin-top:56px}
.block-title{font-family:var(--font);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink)}
.block-title::after{content:"";display:block;width:52px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-top:10px;border-radius:2px}
.block-sub{color:var(--muted);margin-top:12px;margin-bottom:24px;max-width:60ch}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;
  font-size:.9rem;letter-spacing:.01em;padding:15px 30px;transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn-pill{border-radius:999px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(4,2,3,.5)}
.btn-dark .btn-arr{transition:transform .3s var(--ease)}
.btn-dark:hover .btn-arr{transform:translateX(4px)}
.btn-outline{border:1.5px solid rgba(4,2,3,.28);color:var(--ink);background:transparent}
.btn-outline:hover{border-color:var(--ink);transform:translateY(-2px);background:var(--bg)}
.btn-ghost-link{background:transparent;color:var(--ink);padding:15px 4px}
.btn-ghost-link:hover{color:var(--accent)}
.center-cta{text-align:center;margin-top:40px}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .35s,box-shadow .35s,padding .35s;background:transparent}
.site-header.scrolled{background:rgba(253,253,253,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-soft),0 18px 40px -34px rgba(4,2,3,.35)}
.nav-wrap{display:flex;align-items:center;justify-content:flex-start;gap:22px;height:var(--nav-h)}
.site-header .nav-wrap{max-width:1560px;padding-left:48px;padding-right:48px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:.86rem;letter-spacing:.03em}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;max-width:min(240px,34vw);overflow:hidden}
.brand-name{font-weight:800;color:var(--ink);font-size:.94rem;white-space:nowrap;letter-spacing:-.01em}
.brand-role{font-size:.55rem;color:var(--muted-2);letter-spacing:.04em;text-transform:uppercase;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:26px;align-items:center}
.main-nav a{font-size:.84rem;font-weight:600;color:var(--ink);position:relative;padding:6px 0;transition:color .2s;white-space:nowrap}
.main-nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:var(--accent);transition:width .3s var(--ease)}
.main-nav a:hover{color:var(--accent)}
.main-nav a:hover::after{width:100%}
.nav-cta{padding:11px 22px;font-size:.82rem;margin-left:18px}
.nav-toggle{display:none;flex-direction:column;gap:5px;padding:8px;background:transparent}
.nav-toggle span{width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.nav-toggle[aria-expanded="true"] span{background:var(--ink)!important}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-contact-mobile,.nav-contact-inline{display:none}

/* ============================================================
   HERO — split: headline left, arch portrait right
   ============================================================ */
.hero{
  min-height:100vh;display:flex;align-items:center;position:relative;
  /* Was `+ 78px` / 84px: hero ran to 1157px at 1440x900, pushing both CTAs
     and the stat row below the fold. Tightened so they land inside 900px. */
  padding:calc(var(--nav-h) + 34px) 0 56px;overflow:hidden;color:var(--ink);
  background:
    radial-gradient(880px 560px at 92% -6%,rgba(165,70,31,.10),transparent 60%),
    radial-gradient(760px 520px at -6% 18%,rgba(144,88,26,.09),transparent 58%),
    linear-gradient(180deg,#FDFDFD,#FBF7F0);
}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(4,2,3,.10) .6px,transparent .6px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 78%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:start;width:100%}
.hero-visual{padding-top:10px}
.hero-title{font-family:var(--font);font-weight:800;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1.03;letter-spacing:-.035em;color:var(--ink);margin:14px 0 18px;max-width:15ch}
.hero-title .accent-serif{font-size:1.06em}
.hero-lead{font-size:clamp(1.04rem,1.5vw,1.2rem);color:var(--ink-2);max-width:56ch;margin-bottom:12px}
.hero-sub{color:var(--muted);max-width:58ch;font-size:.98rem}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:22px 0 22px}
/* gap+padding trimmed from 20px: "Leadership stories" is 38px wider than the
   "Case studies" it replaced, which pushed "Islamabad" onto a second line. */
.hero-meta{display:flex;flex-wrap:wrap;gap:14px}
.hm-item{display:flex;flex-direction:column;gap:2px;position:relative;padding-right:14px}
.hm-item:not(:last-child)::after{content:"";position:absolute;right:8px;top:6px;bottom:6px;width:1px;background:var(--line)}
.hm-item strong{font-family:var(--font);font-weight:800;font-size:1.45rem;letter-spacing:-.02em;line-height:1}
.hm-item strong.accent{color:var(--accent)}
.hm-item span{font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em;font-weight:600}

.hero-visual{display:flex;justify-content:center;align-items:flex-start;position:relative}
.hero-photo-frame{position:relative;width:min(430px,100%)}
.hero-photo-box{position:relative;width:100%;aspect-ratio:4/5;isolation:isolate}
.photo-tile{position:absolute;inset:auto;top:-26px;right:-26px;bottom:-26px;left:auto;width:52%;height:76%;background:var(--bronze-soft);border-radius:999px 999px 26px 26px;transform:rotate(4deg);z-index:-2}
.hero-photo-box::after{content:"";position:absolute;top:34px;right:-44px;width:120px;height:120px;border:2px dashed rgba(165,70,31,.45);border-radius:50%;z-index:-1}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:center 18%;border-radius:999px 999px 26px 26px;box-shadow:var(--shadow-lg);filter:saturate(.98) contrast(1.01)}
.hero-photo-box::before{content:"";position:absolute;inset:0;border-radius:999px 999px 26px 26px;box-shadow:inset 0 0 0 1px rgba(4,2,3,.05);z-index:1;pointer-events:none}
.hero-badge{
  position:absolute;left:-26px;bottom:40px;display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--line-soft);padding:15px 20px;border-radius:20px;box-shadow:var(--shadow-sm);max-width:210px;z-index:2;
}
.hero-pill{display:none}
.hero-badge::before{content:"";width:30px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin-bottom:6px}
.badge-num{font-weight:800;font-size:1.125rem;letter-spacing:-.02em;color:var(--ink)}
.badge-label{font-size:.72rem;color:var(--muted);line-height:1.5}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{overflow:hidden;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--ink);color:#fff;padding:16px 0;user-select:none}
.marquee .marquee-track{display:inline-flex;align-items:center;white-space:nowrap;animation:marquee 34s linear infinite}
.marquee-rev .marquee-track{animation-direction:reverse}
.marquee span{font-weight:700;font-size:.98rem;letter-spacing:.12em;text-transform:uppercase}
.marquee i{font-style:normal;color:var(--accent);margin:0 22px;font-size:.8rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   PROFILE
   ============================================================ */
.profile{background:var(--bg)}
.profile-grid{display:grid;grid-template-columns:1.02fr .98fr;column-gap:70px;row-gap:0;align-items:start;margin-top:16px;
  grid-template-areas:"lead side" "rest side"}
.profile-lead{grid-area:lead}
.profile-side{grid-area:side}
.profile-rest{grid-area:rest}
.profile-narrative p{margin-bottom:20px;color:var(--muted);font-size:1.04rem}
.profile-narrative p strong{color:var(--ink)}
.profile-narrative .quote{margin:26px 0;color:var(--ink)}
.profile-side{position:sticky;top:110px}
.profile-photo-wrap{position:relative}
.profile-photo{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:20px;box-shadow:var(--shadow-sm);border:1px solid var(--line-soft)}
.photo-chip{position:absolute;right:-14px;bottom:18px;background:#fff;border:1px solid var(--line-soft);padding:10px 16px;border-radius:999px;font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.equation{display:flex;flex-wrap:wrap;gap:8px}
.equation span{font-weight:700;font-size:.76rem;color:var(--ink);padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line-soft)}
.equation span:last-child{background:var(--bronze-soft);border-color:rgba(144,88,26,.35);color:var(--accent-deep)}

.candid-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.candid{border-radius:20px;overflow:hidden;position:relative;border:1px solid var(--line-soft);background:#fff;box-shadow:var(--shadow-sm)}
.candid img{width:100%;aspect-ratio:16/11;object-fit:cover;transition:transform .6s var(--ease)}
.candid:hover img{transform:scale(1.04)}
.candid figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;background:linear-gradient(transparent,rgba(4,2,3,.82));color:#fff;font-size:.82rem;font-weight:600}

.equation-band{margin-top:64px;background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:20px;padding:38px 42px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.equation-band .band-caption{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;max-width:16ch;line-height:1.5}
.equation-band .band-items{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.equation-band .band-items span{font-weight:800;font-size:clamp(.85rem,1.6vw,1.1rem);letter-spacing:-.01em;padding:10px 18px;border-radius:999px;background:#fff;border:1px solid var(--line-soft)}
.equation-band .band-items .plus{font-style:normal;color:var(--accent);font-weight:800;padding:0 12px;font-size:1.125rem}

/* Equation closing section (end of page) */
.equation-end{background:var(--bg);padding-top:48px;padding-bottom:72px}
.equation-end-inner{text-align:center}
.equation-end-lead{color:var(--muted);max-width:62ch;margin:8px auto 28px;font-size:1.06rem}
.equation-end .equation-band{justify-content:center;flex-wrap:wrap;background:linear-gradient(120deg,var(--bg-soft),#fff);border-color:rgba(165,70,31,.16)}
.equation-end .equation-band .band-items{justify-content:center}

/* ============================================================
   IMPACT / METRICS
   ============================================================ */
.impact{background:var(--bg-soft)}
/* Metrics are laid out as rows of two so the hairline spans the full width.
   Previously the border sat on each cell of a 2-col grid, so the left and right
   rules ended at different heights and read as a rendering fault. */
.metrics-stage{position:relative}
.metric-row{position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-bottom:1px solid var(--line-soft)}
.metric-row:last-child{border-bottom:none}
.metric-row::before{content:"";position:absolute;left:calc(50% - 28px);top:0;bottom:0;width:1px;background:var(--line-soft)}
.metric{position:relative;padding:28px 4px 28px 0}
.metric:first-child .metric-desc{padding-right:14px}
.metric-num{font-family:var(--font);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--accent);font-size:clamp(3rem,6vw,5rem)}
.metric-num .mval{display:inline-block}
/* one step below the pure numerals, not two — this is the strongest number on the page */
.metric-num .mval.range{font-size:clamp(2.2rem,4.4vw,3.4rem)}
.metric-num small{font-size:.5em;color:var(--accent);font-weight:800;margin-left:2px}
.metric-desc{margin-top:14px;padding-right:10px}
.metric-desc .m-context{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-bottom:8px}
.metric-desc .m-title{font-weight:800;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.metric-desc .m-copy{color:var(--muted);font-size:.92rem;max-width:44ch}

/* 7 cards in 3 columns stranded one on its own row; the last card spans
   the remainder so the grid closes deliberately instead of trailing off. */
.lead-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.lead-card:last-child:nth-child(3n+1){grid-column:1/-1}
.lead-card:last-child:nth-child(3n+2){grid-column:span 2}
.lead-card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:20px;padding:22px 22px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;display:flex;flex-direction:column}
.lead-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm);border-color:rgba(165,70,31,.35)}
.lead-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;margin-bottom:18px;font-weight:800;font-size:.82rem;color:var(--accent-deep);background:var(--bronze-soft);border:1px solid rgba(144,88,26,.3)}
.lead-card h4{font-weight:800;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px}
.lead-card p{color:var(--muted);font-size:.9rem;line-height:1.62}

.scale-block{margin-top:56px}
/* 3 columns, not 4: there are 6 cards, so 4-up left an orphan row of two. */
.scale-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.scale-card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:20px;padding:22px 20px;position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column}
.scale-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-2));opacity:0;transition:opacity .3s}
.scale-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.scale-card:hover::before{opacity:1}
.scale-card .sc-num{font-weight:800;font-size:1.9rem;letter-spacing:-.03em;color:var(--ink);line-height:1.05}
.scale-card .sc-title{font-weight:800;font-size:.98rem;color:var(--ink);margin:12px 0 8px}
.scale-card p{color:var(--muted);font-size:.84rem;line-height:1.55}
.scale-statement{margin-top:64px;text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.scale-statement .quote{font-size:1.4rem}

/* ============================================================
   FEATURED CASE STUDIES
   ============================================================ */
.featured{background:var(--bg)}
.featured-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feature-item:last-child:nth-child(odd){grid-column:1/-1}
.feature-item{
  display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;
  background:var(--bg-card);border:1px solid var(--line-soft);border-radius:20px;
  padding:22px 24px 20px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s;position:relative;overflow:hidden;
}
.feature-item:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:rgba(165,70,31,.4)}
.feature-item::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(165,70,31,.10),transparent 70%);transition:transform .4s var(--ease)}
.feature-item:hover::after{transform:scale(1.6)}
.feature-num{position:absolute;top:14px;right:22px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:3.6rem;color:rgba(4,2,3,.07);line-height:1;pointer-events:none}
.feature-main{position:relative;z-index:1;padding-right:56px}
.feature-main h3{font-weight:800;font-size:1.125rem;letter-spacing:-.01em;color:var(--ink);line-height:1.3;margin-bottom:6px}
.feat-tag{font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.feat-meta{color:var(--muted);font-size:.88rem;display:flex;flex-wrap:wrap;gap:6px}
.feat-meta .mini{background:var(--bg-soft);border:1px solid var(--line-soft);border-radius:999px;padding:4px 11px;font-size:.76rem;font-weight:600;color:var(--ink-2)}
.feature-open{margin-top:14px;font-weight:700;font-size:.82rem;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.feature-open .arrow{color:var(--accent);transition:transform .3s var(--ease)}
.feature-item:hover .feature-open .arrow{transform:translateX(5px)}

/* ============================================================
   CAREER TIMELINE
   ============================================================ */
.career{background:var(--bg-soft)}
.timeline{position:relative;margin-top:10px}
.chapter::before{content:"";position:absolute;left:50%;top:0;height:16px;width:1px;background:var(--line);opacity:.7}
.chapter:first-child::before{display:none}
.chapter{position:relative;padding:16px 0 36px}
.chapter-marker{display:flex;flex-direction:column;align-items:center;margin-bottom:26px}
/* Company marks sit in these circles. The dot is bigger than the old
   initial-only version so the wordmark logos stay legible, and it stays
   dark because the ECOM Deals mark is white-on-transparent. */
.chapter-dot{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:1.125rem;border:4px solid var(--bg-soft);box-shadow:0 0 0 2px var(--accent);letter-spacing:.02em;overflow:hidden}
/* tighter side padding so wide wordmarks (Ufone, Jazz) get more room than the square marks */
.chapter-dot.has-logo{padding:13px 9px}
.chapter-dot img{width:100%;height:100%;object-fit:contain;display:block}
.chapter-years{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin-top:10px;background:#fff;padding:3px 10px;border-radius:999px;border:1px solid var(--line-soft)}
.chapter-heading{text-align:center;margin-bottom:20px}
.chapter-company{font-weight:800;font-size:1.6rem;letter-spacing:-.02em;color:var(--ink)}
.chapter-tag{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:4px}
.roles{display:grid;gap:14px;max-width:1000px;margin:0 auto}
.role-card{background:var(--bg-card);border:1px solid var(--line-soft);border-left:1px solid var(--line);border-radius:20px;padding:20px 26px;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.role-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.role-title{font-weight:800;color:var(--ink);font-size:1.125rem;letter-spacing:-.01em}
.role-dates{font-size:.72rem;font-weight:700;color:var(--accent-deep);letter-spacing:.05em;background:var(--bronze-soft);padding:4px 12px;border-radius:999px}
.role-scope{font-size:.6875rem;font-weight:700;color:var(--muted-2);letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px}
.role-points{display:grid;grid-template-columns:1fr 1fr;gap:9px 28px;color:var(--muted);font-size:.93rem}
.role-points li{position:relative;padding-left:18px}
.role-points li::before{content:"";position:absolute;left:0;top:.66em;width:5px;height:5px;border-radius:50%;background:var(--muted-2);opacity:.8}

.philosophy{margin-top:46px;text-align:center;max-width:920px;margin-left:auto;margin-right:auto}
.phil-title{font-weight:800;color:var(--ink);font-size:clamp(1.8rem,3.2vw,2.7rem);letter-spacing:-.03em;margin:14px 0 18px}
.phil-copy{color:var(--muted);font-size:1.04rem;max-width:70ch;margin:0 auto}
.phil-copy strong{color:var(--ink)}
.principles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px}
.principle{background:var(--bg-card);border:1px solid var(--line-soft);border-top:3px solid var(--accent);border-radius:20px;padding:18px 16px;text-align:left;transition:transform .3s var(--ease),box-shadow .3s}
.principle:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm)}
.principle .p-num{font-weight:800;color:var(--accent);font-size:.72rem;letter-spacing:.14em}
.principle h4{font-weight:800;font-size:1rem;color:var(--ink);margin:10px 0 8px;letter-spacing:-.01em}
.principle p{font-size:.82rem;color:var(--muted)}

/* ============================================================
   FINTECH & DIGITAL COMMERCE
   ============================================================ */
.fintech{background:var(--bg-soft)}
.fintech-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.fintech-col .col-lead{color:var(--muted);margin:16px 0 20px;font-size:.98rem}
.tick-list li{position:relative;padding:9px 0 9px 30px;color:var(--ink-2);font-size:.96rem;border-bottom:1px solid var(--line-soft);font-weight:500}
.tick-list li:last-child{border-bottom:none}
.tick-list li::before{content:"";position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--muted-2)}
.commerce-impact{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:32px 0 18px}
.big-stat{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:20px;padding:24px}
.big-stat strong{font-weight:800;font-size:2.1rem;letter-spacing:-.02em;color:var(--ink);display:block;line-height:1}
.big-stat strong::after{content:"";display:block;width:34px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));margin:12px 0;border-radius:2px}
.big-stat span{font-size:.86rem;color:var(--muted)}
.markets{font-size:.9rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:16px}
.markets strong{color:var(--ink)}
.partners{margin-top:52px;text-align:center}
.partner-logos{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;margin:34px 0 24px}
.partner-logos figure{background:#fff;border:1px solid var(--line-soft);border-radius:20px;padding:28px 34px;display:flex;flex-direction:column;align-items:center;gap:16px;box-shadow:var(--shadow-sm);flex:1 1 min(340px,100%);max-width:460px}
.partner-logos img{width:100%;height:auto;max-height:300px;object-fit:contain}
.partner-logos figcaption{font-weight:800;color:var(--ink);font-size:1.125rem}
.partners-note{color:var(--muted);font-size:.9rem;max-width:66ch;margin:0 auto}

/* ============================================================
   SPEAKING & RECOGNITION
   ============================================================ */
.speaking{background:var(--bg)}
/* Mosaic, same as the media wall: cards keep their natural height and are
   dealt into balanced columns in JS (see layoutMosaics), so nothing is
   stretched and no card carries dead space. */
.speaking-grid{display:flex;align-items:stretch;gap:18px;margin-bottom:20px}
.speaking-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px}
/* Six cards of very unequal height cannot be partitioned into three equal
   columns — the best possible split still leaves ~176px. Rather than let one
   card hang below its neighbours, every card in a column takes an equal share
   of that column's slack, so all three columns finish on the same line. The
   share is small and lands under the copy, reading as breathing room. Cards
   stay visibly different sizes; they are just no longer ragged at the foot. */
.speaking-card{flex:1 1 auto}
.speaking-card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:20px;padding:20px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;display:flex;flex-direction:column}
.speaking-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-sm);border-color:rgba(165,70,31,.4)}
.speaking-card .sc-loc{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line-soft)}
.speaking-card h3{font-weight:800;color:var(--ink);font-size:1.125rem;letter-spacing:-.01em;margin-bottom:8px}
.speaking-card p{color:var(--muted);font-size:.9rem;flex:1 1 auto}
.speaking-card .sc-chip{margin-top:14px;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);background:var(--bronze-soft);align-self:flex-start;padding:5px 12px;border-radius:999px;font-weight:700}

.awards{margin-top:56px}
.awards-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:22px 0 18px}
.award-card{background:var(--bg-card);border:1px solid var(--line-soft);border-radius:20px;padding:18px 20px;display:flex;gap:16px;align-items:flex-start;transition:transform .3s var(--ease),box-shadow .3s}
.award-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.award-card .award-icon{width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);color:var(--muted);font-weight:800;font-size:.9rem;border:1px solid var(--line-soft)}
.award-card h4{font-weight:800;color:var(--ink);font-size:1rem;letter-spacing:-.01em;margin-bottom:3px}
.award-card .award-org{font-size:.7rem;color:var(--accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.award-card p{font-size:.86rem;color:var(--muted);margin-top:6px}
details.expand{margin-top:8px;border:1px solid var(--line-soft);border-radius:20px;background:var(--bg-card);overflow:hidden}
details.expand summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;cursor:pointer;font-weight:800;color:var(--ink);font-size:1rem;list-style:none}
details.expand summary::-webkit-details-marker{display:none}
details.expand summary .chev{color:var(--accent);font-size:1.3rem;transition:transform .3s;font-weight:600}
details.expand[open] summary .chev{transform:rotate(45deg)}
details.expand .expand-body{padding:0 28px 28px}
.awards-full{columns:2;column-gap:44px;margin-top:8px}
.awards-full li{break-inside:avoid;padding:12px 0 12px 24px;position:relative;color:var(--muted);font-size:.94rem;border-bottom:1px solid var(--line-soft);font-weight:500}
.awards-full li::before{content:"";position:absolute;left:0;top:1.05em;width:5px;height:5px;border-radius:50%;background:var(--muted-2)}
.awards-full li strong{color:var(--ink)}
.awards-full .a-date{color:var(--muted-2);font-size:.74rem;letter-spacing:.06em;font-weight:700}
.award-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.award-gal{border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);cursor:zoom-in;background:#fff}
.award-gallery img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s var(--ease)}
.award-gal:hover img{transform:scale(1.05)}

.media{margin-top:56px}
/* Masonry, not grid: the posters mix 9:16 portrait with 16:9 landscape, so a
   row grid sized every row to its tallest card and left ~420px of dead space.
   Columns pack them instead. Nothing is cropped. */
/* The posters mix 9:16 portrait with 16:9 landscape — a 3x height spread
   (658px vs 209px at this width). Masonry columns turned that into ragged
   column bottoms where no two cards ever lined up. A fixed 4:3 box plus
   object-fit:contain makes every card identical while keeping the entire
   frame visible: portrait footage letterboxes against the card's own dark
   ground, so nothing is cropped and the "videos fully visible" rule holds. */
/* Mosaic: three balanced flex columns (dealt in JS, see layoutMedia). Each
   card keeps its own aspect ratio — tall portrait next to short landscape —
   while the columns still end flush. Card ratio is set inline from the
   poster's real dimensions, so the frame fills it exactly. */
.media-grid{display:flex;align-items:flex-start;gap:18px;margin-top:30px}
.media-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:18px}
.media-grid .media-card{width:auto;margin-bottom:0}
.media-card{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line-soft);background:#0a0807;cursor:pointer;line-height:0}
.media-card .mbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(1.25) brightness(.5);transform:scale(1.15);z-index:0;pointer-events:none}
.media-card .mposter{position:relative;display:block;width:100%;height:100%;object-fit:contain;z-index:1}
.media-card video{display:none;position:relative;width:100%;height:100%;object-fit:contain;background:transparent;z-index:1}
.media-card.playing video{display:block}
.media-card.playing .mposter{display:none}
.media-card.playing .mbg{filter:blur(26px) brightness(.32)}
.media-card .play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(4,2,3,.16);transition:background .3s;cursor:pointer;z-index:3}
.media-card .play::before{content:"";width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:24px solid #fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));margin-left:6px}
.media-card:hover .play{background:rgba(165,70,31,.2)}
.media-card.playing .play{opacity:0;pointer-events:none}
.media-card .media-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff;font-size:.88rem;font-weight:700;line-height:1.4;text-align:left;z-index:2}
.media-card.playing .media-cap{opacity:0}
.media-card.proof{border-radius:20px}
.media-card.proof .media-cap{display:none}
/* Ratio is set inline from the poster's real dimensions, so each proof keeps
   its own shape and fills its box exactly. */
.speaking-card .media-card{margin-bottom:18px}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{background:var(--bg);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;left:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(165,70,31,.09),transparent 70%);pointer-events:none}
.contact-wrap{position:relative}
.center-head{max-width:820px;margin:0 auto;text-align:center}
.contact-intro{color:var(--muted);max-width:66ch;margin:20px auto 0;font-size:1.06rem}
.contact-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;background:var(--bg-card);border:1px solid var(--line-soft);border-radius:28px;padding:34px 40px;margin-top:36px;box-shadow:var(--shadow-sm)}
.contact-item,.contact-link{display:flex;flex-direction:column;gap:5px}
.contact-kicker{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:700}
.contact-item strong{font-weight:800;font-size:1.5rem;letter-spacing:-.02em;color:var(--ink)}
.contact-detail{color:var(--muted);font-size:.92rem}
.contact-links{display:grid;gap:24px;align-content:center}
.contact-link{border-left:2px solid var(--line);padding-left:24px;transition:border-color .3s;width:100%}
.contact-link:hover{border-color:var(--accent)}
.contact-link strong{font-weight:800;color:var(--ink);font-size:1.125rem;letter-spacing:-.01em;transition:color .2s;word-break:break-word}
.contact-link:hover strong{color:var(--accent)}
.contact-note{text-align:center;color:var(--muted-2);font-size:.84rem;margin-top:26px;font-style:italic}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--bg);border-top:1px solid var(--line-soft)}
.footer-marquee{background:var(--ink);border-top:none;border-bottom:none}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:30px 26px}
.footer-email{font-weight:800;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink);transition:color .2s}
.footer-email:hover{color:var(--accent)}
.footer-meta{color:var(--muted-2);font-size:.82rem}

/* ============================================================
   OVERLAYS
   ============================================================ */
.library-overlay,.case-overlay{position:fixed;inset:0;z-index:200;display:flex}
.overlay-backdrop{position:absolute;inset:0;background:rgba(4,2,3,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.overlay-panel{position:relative;margin:0 auto;width:min(1060px,100%);height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.overlay-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:28px 44px 16px;border-bottom:1px solid var(--line-soft)}
.overlay-head .eyebrow{margin-bottom:6px}
.overlay-title{font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:var(--ink)}
.overlay-close{font-size:2rem;line-height:1;color:var(--muted-2);transition:color .2s,transform .3s;padding:0 8px;font-weight:300}
.overlay-close:hover{color:var(--accent);transform:rotate(90deg)}
.overlay-filters{display:flex;flex-wrap:wrap;gap:8px;padding:16px 44px;border-bottom:1px solid var(--line-soft);position:sticky;top:0;background:var(--bg);z-index:2}
.filter-chip{font-size:.78rem;font-weight:600;letter-spacing:.03em;color:var(--muted);border:1px solid var(--line);padding:8px 16px;border-radius:999px;transition:all .25s}
.filter-chip:hover{border-color:var(--accent);color:var(--accent)}
.filter-chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.overlay-list{overflow-y:auto;padding:20px 44px 70px}
.overlay-row{width:100%;text-align:left;display:grid;grid-template-columns:58px 1fr auto;gap:22px;align-items:center;padding:22px 6px;border-bottom:1px solid var(--line-soft);transition:background .2s,padding-left .3s}
.overlay-row:hover{background:var(--bg-soft);padding-left:14px}
.overlay-row .c-num{font-family:var(--serif);font-style:italic;color:var(--accent);font-size:1.8rem;line-height:1}
.overlay-row h3{font-weight:800;color:var(--ink);font-size:1.04rem;letter-spacing:-.01em;margin-bottom:4px}
.overlay-row .c-meta{color:var(--muted);font-size:.84rem;display:flex;gap:12px;flex-wrap:wrap}
.overlay-row .c-meta .tag{color:var(--accent);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase}
.overlay-row .c-metrics{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:320px}
.overlay-row .c-metrics .mini{font-weight:700;font-size:.76rem;color:var(--accent-deep);background:var(--bronze-soft);padding:5px 11px;border-radius:999px}

/* single case study */
.case-panel{position:relative;margin:0 auto;width:min(1000px,100%);height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
.case-panel-head{display:flex;justify-content:space-between;align-items:center;padding:18px 44px;border-bottom:1px solid var(--line-soft);background:var(--bg)}
.back-btn{color:var(--accent);font-weight:700;font-size:.9rem}
.back-btn:hover{color:var(--ink)}
.case-body{overflow-y:auto;padding:46px;line-height:1.72}
.case-body .c-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.case-body .c-top .tag{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:6px 13px;border-radius:999px}
.case-body .c-top .pers{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent-deep);background:var(--bronze-soft);padding:6px 13px;border-radius:999px}
.case-body h2{font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);line-height:1.12;letter-spacing:-.025em;margin-bottom:28px}
.case-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:38px}
.cm-card{background:var(--ink);color:#fff;border-radius:20px;padding:22px;border-top:3px solid var(--accent)}
.cm-card strong{font-weight:800;font-size:1.35rem;display:block;line-height:1.15;color:#fff}
.cm-card span{font-size:.8rem;color:rgba(255,255,255,.7)}
.cs-block{margin-bottom:30px}
.cs-block .cs-kicker{font-weight:800;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cs-block .cs-kicker::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px}
.cs-block p{color:var(--ink-2);margin-bottom:10px}
.cs-block li{position:relative;padding:7px 0 7px 26px;color:var(--ink-2)}
.cs-block li::before{content:"✦";position:absolute;left:0;top:8px;color:var(--accent);font-size:.7rem}
.cs-lesson{border-left:3px solid var(--accent);background:var(--bg-soft);padding:20px 24px;border-radius:0 18px 18px 0;margin-top:6px}
.cs-lesson .cs-kicker{color:var(--accent-deep)}
.cs-lesson p{color:var(--ink);font-weight:600}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.26s}.reveal.d4{transition-delay:.36s}.reveal.d5{transition-delay:.46s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1560px){
  /* 16px, not 20px: "Leadership in Action" is 8 characters longer than the
     "Case Studies" this replaced, which squeezed the brand-to-menu gap to 22px
     around 1230-1250px. Six links = five gaps, so this buys back 20px. */
  .main-nav ul{gap:16px}
  .main-nav a{font-size:.82rem}
  .site-header .nav-wrap{padding-left:36px;padding-right:36px}
}
@media (max-width:1360px){
  .brand-role{display:none}
}
/* 1240, not 1220: the "Let's Talk" pill reappears exactly as these tighter nav
   rules switch off, so at 1221px the brand-to-menu gap pinched to 22px. */
@media (max-width:1240px){
  .nav-cta{display:none}
  .nav-contact-inline{display:inline}
  .main-nav ul{gap:15px}
  .main-nav a{font-size:.8rem}
  .site-header .nav-wrap{padding-left:24px;padding-right:24px}
}
/* The hero stays two-column down to 960px, so the left column keeps narrowing
   while the four stats do not. Tighten further here to keep them on one line. */
@media (max-width:1200px){
  .hero-meta{gap:8px}
  .hm-item{padding-right:8px}
}
/* 961-1120px is the narrowest the hero gets while still two-column: the left
   column keeps shrinking but the four stat labels do not. Step the label type
   down here rather than let "Islamabad" drop to an orphan second line. */
@media (min-width:961px) and (max-width:1120px){
  .hm-item span{font-size:.66rem;letter-spacing:.08em}
}
@media (max-width:1120px){
  .nav-wrap{gap:14px}
  /* visibility:hidden (not transform alone) is what takes the closed drawer
     out of the tab order — otherwise all 8 links stay focusable off-screen. */
  /* Explicit height, not bottom:0 — once scrolled, .site-header gets backdrop-filter,
     which makes the 78px header the containing block for this fixed drawer. bottom:0
     then ended at the header's edge and the page showed through underneath. */
  /* hamburger sits on the left, ahead of the brand, and the drawer opens from that side */
  .nav-toggle{order:-1;margin-left:-8px}
  .main-nav{position:fixed;top:0;left:0;height:100vh;height:100dvh;overflow-y:auto;width:min(360px,88vw);margin-left:0;background:#fff;border-right:1px solid var(--line-soft);padding:110px 38px 40px;transform:translateX(-105%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s;z-index:99}
  .main-nav.open{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s;box-shadow:var(--shadow-lg)}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:2px}
  .main-nav a{font-size:1.02rem;padding:12px 0;display:block;width:100%;color:var(--ink)!important}
  .main-nav a::after{display:none}
  .nav-toggle{display:flex;z-index:100}
  .nav-cta{display:none}
  .nav-contact-mobile{display:block}
  /* scoped to .main-nav so it outranks `.main-nav a{display:block}` above — Contact was listed twice */
  .main-nav .nav-contact-inline{display:none}
}
@media (max-width:1120px){
  .section-head.split{grid-template-columns:1fr;gap:16px}
  .lead-grid{grid-template-columns:repeat(2,1fr)}
  .scale-grid{grid-template-columns:repeat(2,1fr)}
  
  .principles{grid-template-columns:repeat(3,1fr)}
  .metric-row{grid-template-columns:1fr}
  .metric-row::before{display:none}
  .metric{border-bottom:1px solid var(--line-soft)}
  .metric:last-child{border-bottom:none}
  .metric:last-child{border-bottom:none}
}
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .hero-visual{order:-1;padding-top:10px;flex-direction:column;align-items:center}
  .hero-photo-frame{width:min(300px,70%);margin:0 auto}
  /* Was bottom:-22px, which laid the card across her photo at 390px.
     Now it sits below the frame instead of on top of it. */
  .hero-badge{position:static;left:auto;bottom:auto;max-width:none;margin:18px auto 0}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 20px)}
  .profile-grid,.fintech-grid{grid-template-columns:1fr;gap:44px}
  /* single column, photo between the opening paragraph and the rest */
  .profile-grid{grid-template-areas:"lead" "side" "rest";row-gap:32px}
  /* the row-gap already separates them; the paragraph margin would add 20px more */
  .profile-lead p:last-child{margin-bottom:0}
  /* the chip hangs 14px outside the photo, which lands in the column gap on
     desktop but only 6px from the screen edge here. Tuck it inside instead. */
  .photo-chip{right:14px;bottom:14px}
  .profile-side{position:static}
  .candid-strip{grid-template-columns:1fr}
  .featured-list{grid-template-columns:1fr}
  .role-points{grid-template-columns:1fr}
  .awards-highlights{grid-template-columns:1fr}
  
}
@media (max-width:640px){
  .section{padding:52px 0}
  .wrap{padding:0 20px}
  .site-header .nav-wrap{padding-left:20px;padding-right:20px}
  .lead-grid,.scale-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr 1fr}
  .metric{grid-template-columns:1fr;padding:34px 2px}
  .partner-logos{flex-direction:column;align-items:center}
  .commerce-impact{grid-template-columns:1fr}
  .awards-full{columns:1}
  .award-gallery{grid-template-columns:repeat(2,1fr)}
  
  .contact-card{grid-template-columns:1fr;padding:32px 24px}
  .equation-band{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .overlay-panel,.case-panel{width:100%}
  .overlay-head{padding:22px 22px 12px}
  .overlay-filters{padding:14px 22px}
  .overlay-list{padding:14px 22px 60px}
  .overlay-row{grid-template-columns:1fr;gap:8px}
  .overlay-row .c-metrics{justify-content:flex-start;max-width:none}
  .case-panel-head{padding:14px 22px}
  .case-body{padding:28px 22px 60px}
  .case-body h2{font-size:1.55rem}
  .hero-cta .btn{width:100%;justify-content:center}
  .hero-meta{gap:20px}
  .hm-item:not(:last-child)::after{display:none}
}
@media (max-width:640px){
  /* First iPhone screen (~664px visible) was portrait + badge only; the heading
     started at 693px. Smaller portrait, tighter gaps, and the badge goes — it
     repeats the eyebrow word for word, directly beneath it. */
  .hero{padding-top:calc(var(--nav-h) + 6px)}
  .hero-grid{gap:22px}
  .hero-visual{padding-top:0}
  .hero-photo-frame{width:min(190px,52%)}
  .hero-photo-box::after{width:80px;height:80px;top:20px;right:-30px}
  /* the full badge repeats the eyebrow; on phones it becomes a one-line pill on the
     photo's bottom edge instead */
  .hero-badge{display:none}
  .hero-photo-frame{padding-bottom:14px}
  .hero-pill{display:block;position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;white-space:nowrap;
    background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-sm);border-radius:999px;padding:6px 12px;
    font-size:.625rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
  .hero-pill::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:1px}
  .hero-title{font-size:2.15rem;margin:10px 0 14px}
}
/* ============================================================
   FOCUS VISIBILITY
   There was not one :focus rule in this stylesheet, and .btn resolved to
   outline-style:none — a keyboard user had no way to see where they were.
   :focus-visible keeps mouse clicks clean while restoring keyboard focus.
   ============================================================ */
:root{
  --focus:#A5461F;
  --focus-contrast:#FDFDFD;
}
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}
/* Dark surfaces need the light ring to stay visible. */
.btn-dark:focus-visible,
.marquee :focus-visible,
.overlay-close:focus-visible,
.back-btn:focus-visible{
  outline-color:var(--focus-contrast);
  box-shadow:0 0 0 6px rgba(165,70,31,.55);
}
.btn:focus-visible,
.btn-pill:focus-visible{border-radius:999px}
.main-nav a:focus-visible{outline-offset:5px}
/* Media and award tiles are focusable now (see main.js) — give them a ring
   that follows the card's own corner radius. */
.media-card:focus-visible,
.award-gal img:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.filter-chip:focus-visible{border-radius:999px}
.overlay-row:focus-visible,
.feature-item:focus-visible{outline-offset:-3px}

/* Skip link — first tab stop on the page. */
.skip-link{
  position:absolute;left:14px;top:-60px;z-index:200;
  background:var(--ink);color:#fff;font-weight:700;font-size:.86rem;
  padding:12px 20px;border-radius:0 0 12px 12px;transition:top .2s var(--ease);
}
.skip-link:focus{top:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .marquee .marquee-track{animation:none}
  .reveal{opacity:1;transform:none}
}