/* 12 — Executive Portfolio
   A boardroom-inspired business portfolio with visible company marks, a
   scannable company directory, and a focused executive brief. */

.viewport-layout.layout-12 {
  --executive-navy:#071b2f;
  --executive-navy-2:#0c2943;
  --executive-paper:#f2f5f6;
  --executive-surface:#fff;
  --executive-ink:#102536;
  --executive-muted:#657583;
  --executive-accent:#c99a50;
  --executive-accent-ink:#17202a;
  --executive-line:rgba(16,37,54,.14);
  display:grid;
  grid-template-rows:clamp(58px,8dvh,76px) minmax(0,1fr) clamp(26px,3.8dvh,36px);
  color:var(--executive-ink);
  background:var(--executive-paper);
}

.executive-masthead,
.executive-footer {
  display:grid;
  align-items:center;
  gap:clamp(12px,2vw,34px);
  padding-inline:max(clamp(16px,3vw,48px),env(safe-area-inset-left));
  color:#f5f8fa;
  background:var(--executive-navy);
}
.executive-masthead { grid-template-columns:auto minmax(0,1fr) auto; border-bottom:1px solid rgba(255,255,255,.12); }
.executive-brand { display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; column-gap:10px; align-items:center; white-space:nowrap; }
.executive-brand>span { grid-row:1/3; display:flex; align-items:end; gap:2px; width:28px; height:29px; padding:4px; border:1px solid rgba(255,255,255,.22); }
.executive-brand>span i { width:4px; background:var(--executive-accent); }
.executive-brand>span i:nth-child(1) { height:8px; }
.executive-brand>span i:nth-child(2) { height:14px; }
.executive-brand>span i:nth-child(3) { height:20px; }
.executive-brand strong { align-self:end; font-size:clamp(15px,1.35vw,21px); line-height:1; letter-spacing:.015em; }
.executive-brand strong span { margin-left:3px; font-weight:400; }
.executive-brand small { align-self:start; margin-top:4px; color:rgba(245,248,250,.58); font-size:clamp(5px,.48vw,7px); font-weight:700; letter-spacing:.2em; }
.executive-masthead__scope { justify-self:center; display:flex; align-items:center; gap:10px; margin:0; color:rgba(245,248,250,.62); font-size:clamp(6px,.58vw,9px); font-weight:700; letter-spacing:.18em; white-space:nowrap; }
.executive-masthead__scope i { width:3px; height:3px; background:var(--executive-accent); border-radius:50%; }
.executive-masthead__actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; min-width:0; }
.executive-status { display:inline-flex; align-items:center; gap:7px; color:rgba(245,248,250,.72); font-size:clamp(6px,.6vw,9px); font-weight:700; letter-spacing:.14em; white-space:nowrap; }
.executive-status i { width:7px; height:7px; background:#62d9a5; border-radius:50%; box-shadow:0 0 0 4px rgba(98,217,165,.12); }
.executive-promo { display:grid; grid-template-columns:minmax(0,120px) 23px; align-items:center; gap:9px; min-height:39px; padding:5px 7px 5px 12px; overflow:hidden; cursor:pointer; color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); border-radius:2px; }
.executive-promo>span { display:none; }
.executive-promo strong { overflow:hidden; font-size:clamp(7px,.68vw,10px); text-overflow:ellipsis; white-space:nowrap; }
.executive-promo b { display:grid; place-items:center; width:23px; height:23px; color:var(--executive-accent-ink); background:var(--executive-accent); font-size:8px; border-radius:50%; }

.executive-canvas { min-height:0; display:grid; grid-template-columns:minmax(235px,29%) minmax(350px,43%) minmax(240px,28%); overflow:hidden; }
.executive-intro { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:0; padding:clamp(22px,4vw,64px); overflow:hidden; color:#f5f8fa; background:linear-gradient(145deg,var(--executive-navy-2),var(--executive-navy)); }
.executive-intro::before { content:""; position:absolute; z-index:-1; right:-22%; bottom:-13%; width:min(29vw,380px); aspect-ratio:1; border:1px solid rgba(201,154,80,.28); border-radius:50%; box-shadow:0 0 0 28px rgba(201,154,80,.035),0 0 0 64px rgba(201,154,80,.025); }
.executive-intro::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.13; background:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.28) 50%,transparent 50.3%); background-size:48px 100%; }
.executive-kicker { display:flex; align-items:center; gap:9px; color:var(--executive-accent); font-size:clamp(6px,.62vw,9px); font-weight:700; letter-spacing:.19em; }
.executive-kicker i { width:26px; height:1px; background:currentColor; }
.executive-intro h1 { max-width:10ch; margin:clamp(15px,3dvh,28px) 0 0; color:#fff; font-size:clamp(35px,3.8vw,58px); font-weight:600; line-height:1.24; letter-spacing:0; text-wrap:balance; }
.executive-intro h1 em { color:var(--executive-accent); font-style:normal; }
.executive-intro>p { max-width:35ch; margin:clamp(14px,2.8dvh,26px) 0 0; color:rgba(245,248,250,.68); font-size:clamp(10px,.92vw,14px); line-height:1.65; }
.executive-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; width:min(100%,330px); margin-top:clamp(18px,3.4dvh,34px); background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.13); }
.executive-metrics>span { display:flex; flex-direction:column; gap:2px; padding:clamp(9px,1.3vw,15px); background:rgba(255,255,255,.045); }
.executive-metrics b { color:#fff; font-size:clamp(16px,1.7vw,26px); line-height:1; }
.executive-metrics small { color:rgba(245,248,250,.5); font-size:clamp(5px,.5vw,7px); font-weight:700; letter-spacing:.14em; }

.executive-portfolio { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); padding:clamp(18px,2.7vw,40px); border-right:1px solid var(--executive-line); background:var(--executive-paper); }
.executive-section-head { display:flex; align-items:end; justify-content:space-between; gap:14px; padding-bottom:clamp(13px,2dvh,20px); }
.executive-section-head span { color:var(--executive-muted); font-size:clamp(6px,.58vw,9px); font-weight:700; letter-spacing:.18em; }
.executive-section-head h2 { margin:3px 0 0; font-size:clamp(19px,1.9vw,30px); font-weight:600; line-height:1.1; letter-spacing:-.025em; }
.executive-section-head>small { color:var(--executive-muted); font-size:clamp(6px,.58vw,9px); font-weight:700; letter-spacing:.13em; white-space:nowrap; }
.executive-sites { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(8px,1.1vw,14px); overflow:hidden; }
.executive-site { --solution-card-accent:#2878ac; position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:clamp(7px,.8vw,11px); min-height:0; padding:clamp(10px,1.1vw,16px); overflow:hidden; cursor:pointer; text-align:left; color:var(--executive-ink); background:var(--executive-surface); border:1px solid var(--executive-line); border-radius:3px; transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease; }
.executive-site::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--solution-card-accent); transform:scaleY(0); transform-origin:bottom; transition:transform .24s ease; }
.executive-site:hover,.executive-site.is-active { transform:translateY(-2px); border-color:color-mix(in srgb,var(--solution-card-accent) 42%,var(--executive-line)); box-shadow:0 12px 30px rgba(16,37,54,.1); }
.executive-site:hover::before,.executive-site.is-active::before { transform:scaleY(1); }
.executive-logo { color:var(--solution-card-accent); background:#fff; border-color:color-mix(in srgb,var(--solution-card-accent) 26%,var(--executive-line)); border-radius:3px; }
.executive-logo .solution-media__image { padding:6px; object-fit:contain; background:#fff; }
.executive-site__logo { width:clamp(42px,3.8vw,58px); }
.executive-site__copy { display:flex; flex-direction:column; min-width:0; }
.executive-site__copy small { overflow:hidden; color:var(--solution-card-accent); font-size:clamp(5px,.5vw,8px); font-weight:800; letter-spacing:.13em; text-overflow:ellipsis; white-space:nowrap; }
.executive-site__copy strong { margin-top:5px; overflow:hidden; font-size:clamp(12px,1.15vw,17px); font-weight:650; line-height:1.12; text-overflow:ellipsis; white-space:nowrap; }
.executive-site__copy em { margin-top:4px; overflow:hidden; color:var(--executive-muted); font-size:clamp(6px,.62vw,9px); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.executive-site__arrow { display:grid; place-items:center; width:clamp(24px,2.2vw,32px); aspect-ratio:1; color:var(--solution-card-accent); border:1px solid color-mix(in srgb,var(--solution-card-accent) 32%,transparent); border-radius:50%; font-size:clamp(10px,1vw,15px); font-style:normal; }
.executive-sites--empty { grid-template-columns:1fr; grid-template-rows:1fr; }
.executive-sites>.solution-empty { border-color:var(--executive-line); }

.executive-brief { min-height:0; padding:clamp(18px,2.7vw,40px); overflow:hidden; background:var(--executive-surface); }
.executive-panel { --solution-card-accent:#2878ac; height:100%; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.executive-panel>header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:clamp(10px,1.6dvh,16px); border-bottom:1px solid var(--executive-line); color:var(--executive-muted); font-size:clamp(6px,.55vw,8px); font-weight:700; letter-spacing:.16em; }
.executive-panel>header>span { color:var(--solution-card-accent); }
.executive-panel__identity { display:flex; align-items:center; gap:clamp(10px,1.2vw,16px); margin-top:clamp(15px,2.5dvh,24px); }
.executive-panel__logo { width:clamp(54px,5vw,76px); }
.executive-panel__identity>div { display:flex; flex-direction:column; min-width:0; }
.executive-panel__identity strong { overflow:hidden; font-size:clamp(18px,2vw,30px); line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.executive-panel__identity small { margin-top:5px; overflow:hidden; color:var(--executive-muted); font-size:clamp(7px,.7vw,10px); text-overflow:ellipsis; white-space:nowrap; }
.executive-panel__tag { align-self:flex-start; margin-top:clamp(14px,2.3dvh,22px); padding:5px 8px; color:var(--solution-card-accent); background:color-mix(in srgb,var(--solution-card-accent) 9%,transparent); font-size:clamp(5px,.5vw,7px); font-weight:800; letter-spacing:.14em; }
.executive-panel h2 { display:-webkit-box; margin:clamp(10px,1.7dvh,17px) 0 0; overflow:hidden; font-size:clamp(17px,1.65vw,26px); font-weight:600; line-height:1.25; letter-spacing:-.025em; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.executive-panel>p { display:-webkit-box; margin:clamp(8px,1.2dvh,13px) 0 0; overflow:hidden; color:var(--executive-muted); font-size:clamp(8px,.76vw,11px); line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.executive-panel__features { display:flex; flex-direction:column; gap:clamp(5px,.7dvh,8px); margin-top:clamp(12px,1.8dvh,18px); overflow:hidden; }
.executive-panel__features span { display:flex; align-items:center; gap:8px; overflow:hidden; color:var(--executive-ink); font-size:clamp(6px,.62vw,9px); font-weight:700; letter-spacing:.03em; text-overflow:ellipsis; white-space:nowrap; }
.executive-panel__features span i { width:13px; height:1px; flex:0 0 auto; background:var(--solution-card-accent); }
.executive-panel>a { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:10px; min-height:clamp(42px,5.4dvh,54px); margin-top:auto; padding:9px 12px 9px 15px; color:#fff; background:var(--executive-navy); border-radius:2px; }
.executive-panel>a>span { overflow:hidden; font-size:clamp(8px,.75vw,11px); font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.executive-panel>a>small { overflow:hidden; max-width:10ch; color:rgba(255,255,255,.58); font-size:clamp(5px,.5vw,7px); text-overflow:ellipsis; white-space:nowrap; }
.executive-panel>a>i { display:grid; place-items:center; width:26px; aspect-ratio:1; color:var(--executive-accent-ink); background:var(--executive-accent); border-radius:50%; font-style:normal; }
.executive-brief__empty { height:100%; display:flex; flex-direction:column; justify-content:center; }
.executive-brief__empty>span { color:var(--executive-accent); font-size:clamp(6px,.58vw,9px); font-weight:800; letter-spacing:.16em; }
.executive-brief__empty>strong { margin-top:14px; font-size:clamp(22px,2.3vw,36px); line-height:1.16; }
.executive-brief__empty>p { max-width:28ch; margin:14px 0 0; color:var(--executive-muted); font-size:clamp(9px,.8vw,12px); line-height:1.6; }

.executive-footer { grid-template-columns:auto minmax(0,1fr) auto; font-size:clamp(5px,.53vw,8px); font-weight:700; letter-spacing:.14em; }
.executive-footer>p { justify-self:center; display:flex; align-items:center; gap:8px; margin:0; color:rgba(245,248,250,.46); }
.executive-footer>p i { width:4px; height:4px; background:var(--executive-accent); border-radius:50%; }
.executive-footer>a { display:flex; align-items:center; gap:9px; color:var(--executive-accent); white-space:nowrap; }

.executive-site.solution-card--blue,.executive-panel.solution-card--blue { --solution-card-accent:#2474a8; }
.executive-site.solution-card--brown,.executive-panel.solution-card--brown { --solution-card-accent:#9b633d; }
.executive-site.solution-card--green,.executive-panel.solution-card--green { --solution-card-accent:#27805e; }
.executive-site.solution-card--purple,.executive-panel.solution-card--purple { --solution-card-accent:#7950aa; }
.executive-site.solution-card--orange,.executive-panel.solution-card--orange { --solution-card-accent:#cc6b2e; }
.executive-site.solution-card--cyan,.executive-panel.solution-card--cyan { --solution-card-accent:#16889a; }

/* Five or more sites scroll only inside the company directory. */
.viewport-layout.layout-12:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .executive-sites {
  grid-template-rows:none;
  grid-auto-rows:minmax(112px,1fr);
  align-content:start;
  overflow-y:auto;
  padding-right:4px;
  scrollbar-color:color-mix(in srgb,var(--executive-accent) 58%,transparent) transparent;
}
.viewport-layout.layout-12.solution-count-0 .executive-sites,
.viewport-layout.layout-12.solution-count-1 .executive-sites { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr); }
.viewport-layout.layout-12.solution-count-2 .executive-sites { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }

/* The shared tone system controls the Executive Portfolio without changing its
   business-first contrast and hierarchy. */
body:not(.tone-original) .layout-12 {
  --executive-navy:var(--tone-bg-dark);
  --executive-navy-2:var(--tone-surface-dark);
  --executive-paper:var(--tone-bg-light);
  --executive-surface:var(--tone-surface-light);
  --executive-ink:var(--tone-text-on-light);
  --executive-muted:var(--tone-text-muted-light);
  --executive-accent:var(--tone-accent);
  --executive-accent-ink:var(--tone-accent-surface-ink);
  --executive-line:var(--tone-line-light);
}

@media (max-width:1050px) {
  .executive-canvas { grid-template-columns:minmax(215px,28%) minmax(300px,42%) minmax(225px,30%); }
  .executive-masthead__scope { display:none; }
  .executive-masthead { grid-template-columns:minmax(0,1fr) auto; }
  .executive-intro,.executive-portfolio,.executive-brief { padding:clamp(16px,2.4vw,28px); }
  .executive-site { padding:11px; }
  .executive-site__arrow { display:none; }
}

@media (max-width:820px) {
  .viewport-layout.layout-12 { grid-template-rows:52px minmax(0,1fr) 25px; }
  .executive-masthead,.executive-footer { gap:9px; padding-inline:12px; }
  .executive-brand>span { width:26px; height:27px; }
  .executive-brand strong { font-size:13px; }
  .executive-brand small { font-size:4px; }
  .executive-status { display:none; }
  .executive-promo { grid-template-columns:minmax(0,80px) 21px; min-height:34px; padding-left:8px; }
  .executive-promo b { width:21px; height:21px; }
  .executive-canvas { grid-template-columns:1fr; grid-template-rows:minmax(126px,25%) minmax(104px,20%) minmax(0,1fr); }
  .executive-intro { justify-content:center; padding:14px 18px; }
  .executive-intro::before { right:-3%; bottom:-78%; width:190px; }
  .executive-kicker { font-size:5px; }
  .executive-kicker i { width:18px; }
  .executive-intro h1 { max-width:none; margin-top:8px; font-size:clamp(25px,7.4vw,34px); line-height:1.24; }
  .executive-intro h1 br:nth-of-type(2) { display:none; }
  .executive-intro>p { max-width:54ch; margin-top:7px; font-size:7px; line-height:1.4; }
  .executive-metrics { position:absolute; right:18px; bottom:14px; width:138px; margin:0; }
  .executive-metrics>span { padding:6px; }
  .executive-metrics b { font-size:13px; }
  .executive-metrics small { font-size:3px; }
  .executive-portfolio { grid-template-columns:auto minmax(0,1fr); grid-template-rows:1fr; gap:9px; padding:8px 12px; border-right:0; border-bottom:1px solid var(--executive-line); }
  .executive-section-head { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:72px; padding:0 8px 0 0; border-right:1px solid var(--executive-line); }
  .executive-section-head span { font-size:4px; }
  .executive-section-head h2 { margin-top:3px; font-size:12px; line-height:1.2; }
  .executive-section-head>small { margin-top:5px; font-size:4px; }
  .executive-sites { display:grid; grid-template-columns:repeat(4,minmax(70px,1fr)); grid-template-rows:1fr; gap:5px; overflow:hidden; }
  .executive-site { grid-template-columns:1fr; place-items:center; align-content:center; gap:4px; padding:6px 4px; text-align:center; }
  .executive-site:hover,.executive-site.is-active { transform:none; box-shadow:none; }
  .executive-site::before { left:0; right:0; top:auto; width:auto; height:3px; transform:scaleX(0); transform-origin:left; }
  .executive-site:hover::before,.executive-site.is-active::before { transform:scaleX(1); }
  .executive-site__logo { width:34px; }
  .executive-logo .solution-media__image { padding:4px; }
  .executive-site__copy small,.executive-site__copy em { display:none; }
  .executive-site__copy strong { margin:0; max-width:11ch; font-size:8px; }
  .executive-site__arrow { display:none; }
  .executive-sites--empty { grid-template-columns:1fr; }
  .viewport-layout.layout-12:is(.solution-count-5,.solution-count-6,.solution-count-7,.solution-count-8,.solution-count-many) .executive-sites {
    display:grid;
    grid-template-columns:none;
    grid-template-rows:1fr;
    grid-auto-flow:column;
    grid-auto-columns:minmax(70px,1fr);
    grid-auto-rows:auto;
    overflow:auto hidden;
    padding:0 0 4px;
  }
  .viewport-layout.layout-12.solution-count-0 .executive-sites,
  .viewport-layout.layout-12.solution-count-1 .executive-sites { grid-template-columns:1fr; grid-template-rows:1fr; }
  .viewport-layout.layout-12.solution-count-2 .executive-sites { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:1fr; }
  .executive-brief { padding:12px 16px; }
  .executive-panel>header { padding-bottom:7px; font-size:5px; }
  .executive-panel__identity { margin-top:9px; gap:9px; }
  .executive-panel__logo { width:43px; }
  .executive-panel__identity strong { font-size:18px; }
  .executive-panel__identity small { margin-top:3px; font-size:6px; }
  .executive-panel__tag { margin-top:8px; padding:3px 5px; font-size:4px; }
  .executive-panel h2 { margin-top:7px; font-size:14px; line-height:1.2; }
  .executive-panel>p { margin-top:5px; font-size:7px; line-height:1.4; -webkit-line-clamp:2; }
  .executive-panel__features { flex-direction:row; flex-wrap:wrap; gap:4px 9px; margin-top:7px; }
  .executive-panel__features span { font-size:5px; }
  .executive-panel__features span i { width:8px; }
  .executive-panel>a { min-height:34px; padding:6px 8px 6px 10px; }
  .executive-panel>a>span { font-size:6px; }
  .executive-panel>a>small { font-size:4px; }
  .executive-panel>a>i { width:21px; font-size:9px; }
  .executive-brief__empty>strong { margin-top:8px; font-size:21px; }
  .executive-brief__empty>p { margin-top:7px; font-size:7px; }
  .executive-footer { font-size:4px; }
  .executive-footer>p { display:none; }
  .executive-footer>a { justify-self:end; }
}

@media (max-width:430px) {
  .executive-intro>p { max-width:29ch; }
  .executive-metrics { width:122px; }
  .executive-section-head { min-width:52px; }
  .executive-sites { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .executive-site__logo { width:30px; }
}

@media (max-height:620px) and (max-width:820px) {
  .executive-canvas { grid-template-rows:105px 88px minmax(0,1fr); }
  .executive-intro h1 { font-size:26px; }
  .executive-intro>p,.executive-metrics { display:none; }
  .executive-site__logo { width:29px; }
  .executive-panel__tag,.executive-panel>p { display:none; }
  .executive-panel__identity { margin-top:6px; }
  .executive-panel h2 { margin-top:5px; }
  .executive-panel__features { margin-top:5px; }
}

@media (max-width:820px) and (max-height:500px) and (min-width:500px) {
  .executive-canvas { grid-template-rows:82px 78px minmax(0,1fr); }
  .executive-intro h1 { font-size:22px; }
  .executive-brief { padding:7px 12px; }
  .executive-panel__logo { width:36px; }
  .executive-panel__identity strong { font-size:16px; }
  .executive-panel h2,.executive-panel>p,.executive-panel__tag,.executive-panel__features { display:none; }
}

@media (max-width:499px) and (max-height:300px) {
  .viewport-layout.layout-12 { min-height:520px; }
}

@media (prefers-reduced-motion:reduce) {
  .executive-site,.executive-site::before { transition:none; }
}