/* ============================================================
   DESKTOP LAYOUT  (≥761px refinements)
   ------------------------------------------------------------
   Desktop-specific styling. Phone rules (≤760px) are untouched
   and win where they overlap.
   ============================================================ */

/* ---------- Home hero ----------
   The hexagon cluster and the blue arrow-burst behind
   "Try a Digital Twin" stay as-is (they respond via clamp() sizing
   on all viewports). Only the evidence row is restyled. */

/* Wide desktop: enough room for all 4 items on one spread row. */
@media (min-width:1101px){
  .evidence-bar{
    border-top:0; padding-top:0;
    justify-content:space-between;
    color:rgba(255,255,255,.85);
    font-size:clamp(11px,.9vw,14px);
  }
  .evidence-dot{ color:#ff9d00; }
}

/* Tablet / small-laptop range (761–1100px): a single row is too narrow
   for 4 long entries and used to wrap unevenly (3 items spread across
   the row, 4th dropping to its own line, nothing lined up). Switch to
   the same 2-column grid used on phone so it always lines up cleanly. */
@media (min-width:761px) and (max-width:1100px){
  .evidence-bar{
    display:grid; grid-template-columns:1fr 1fr;
    gap:10px 24px; align-items:start;
    border-top:0; padding-top:0;
    color:rgba(255,255,255,.85);
    font-size:clamp(11px,1vw,13px);
  }
  .evidence-item{ display:flex; gap:6px; align-items:flex-start; white-space:normal; }
  /* Row order: Maslow | NAICS  /  Bronfenbrenner | Human Capital. */
  .evidence-item:nth-child(1){ order:1; }  /* Maslow */
  .evidence-item:nth-child(4){ order:2; }  /* NAICS */
  .evidence-item:nth-child(3){ order:3; }  /* Bronfenbrenner */
  .evidence-item:nth-child(2){ order:4; }  /* Human Capital */
  .evidence-dot{ color:#ff9d00; flex:0 0 auto; }
}

/* ---------- Question bar (light pill, bold label, quoted hint) ---------- */
.qbar{ background:#d6d6d6; }
.qbar-icon{ color:#1c1c1c; }
.qbar-label{ color:#111; font-weight:700; }
.qbar-input{ color:#1c1c1c; }
.qbar-input::placeholder{ color:#7c7c7c; font-style:italic; }
.qbar-send{ background:#9c9c9c; color:#f4f4f4; }

/* ---------- Cookie disclosure (light card, grey pill buttons) ----------
   Wrapped in the desktop media query on purpose: previously this rule had
   no @media guard, so it overrode the mobile-specific .cookie styling in
   09-mobile.css too (same specificity + later in the cascade), which is
   why the popup looked oversized on phones as well. */
@media (min-width:761px){
  .cookie{
    background:rgba(214,214,214,.62); border:1px solid rgba(255,255,255,.3);
    border-radius:14px;
    width:min(320px,30vw);
    display:block;
    backdrop-filter:blur(10px) saturate(140%);
    -webkit-backdrop-filter:blur(10px) saturate(140%);
  }
  .cookie-text{ color:#2b2b2b; }
  .cookie-text strong{
    display:block; color:#555; font-size:clamp(13px,1vw,15px);
    font-weight:600; margin-bottom:3px;
  }
  .cookie-actions{ margin-top:9px; justify-content:flex-end; }
  .cookie-btn{
    background:#696969; color:#fff; border:0;
    border-radius:999px; padding:6px 16px;
    font-size:clamp(11px,.85vw,13px);
  }
  .cookie-btn:hover{ background:#585858; }
  .cookie-btn-ghost{ background:#696969; color:#fff; }
}

/* ---------- Dock tabs ("Use Cases" filled grey, rest uppercase) ---------- */
.dock-tab.is-active{ background:#474a50; }
.dock-tab[data-tab="usecases"]{ text-transform:none; letter-spacing:.02em; font-size:clamp(11px,.9vw,14px); }

/* ---------- Contact panel: plain centred layout ---------- */
@media (min-width:761px){
  .cat-panel-contact{
    background:none; border:0; border-radius:0;
  }
  .contact-kicker{ color:#cfd4db; letter-spacing:.12em; }
  .contact-headline{ font-weight:600; }
  .contact-stages span{ color:var(--ink); }
  .contact-cta{
    background:#0a0f18; border:1.5px solid rgba(255,255,255,.75);
    border-radius:10px; font-size:clamp(14px,1.2vw,19px); font-weight:600;
    letter-spacing:.02em; text-transform:uppercase;
  }
  .contact-cta.is-primary{ background:var(--gold); border-color:var(--gold); color:#101010; }
}

/* ---------- Access Your Twin: desktop popup ---------- */
@media (min-width:761px){
  .access-window{
    width:min(1060px,90vw); min-height:min(660px,84vh);
    border:0; border-radius:26px;
    display:grid; grid-template-columns:1.05fr 1fr;
    align-items:center;
    padding:clamp(28px,4vh,48px) clamp(28px,3vw,56px);
    column-gap:clamp(24px,3vw,48px);
  }
  /* Left half: CubeLogo + wordmark centred over the teal side of
     the artwork. */
  .access-view{ display:contents; }
  .access-brand{ align-self:center; justify-self:center; align-items:center; }
  .access-brand-cube{ height:110px; }
  .access-brand-word{ font-size:26px; }
  .access-brand-studios{ font-size:12px; }
  .access-brand-tag{ font-size:12px; }
  .access-brand-note{ text-align:center; font-size:13px; max-width:30ch; }
  .access-form-col{
    align-self:stretch; display:flex; flex-direction:column; justify-content:center;
    padding:clamp(26px,4vh,44px) clamp(22px,2.4vw,40px);
  }
  .access-welcome{ margin-top:0; }
  .access-field label{ font-size:12px; }
  .access-field input{ background:#d8d8d8; border:0; }
  .access-submit{ background:#ffba00; border:0; color:#141414; }
  .access-submit:hover{ background:#ffcb3d; }
}

/* ---------- Example window ---------- */
.example-window{ border-radius:26px; }
@media (min-width:761px){
  .overlay-window.example-window{
    width:min(1860px,97.5vw); height:min(1040px,96vh);
    background:#070e18;
  }
  /* Scroll the window as one document so the stage scrolls away with the content */
  .overlay-window.example-window{ overflow-y:auto; overflow-x:hidden; }
  .example-stage{
    height:clamp(340px, 66vh, 720px); border-bottom:0;
    flex:0 0 auto; position:relative;
  }
  .example-content{ flex:0 0 auto; overflow:visible; min-height:0; }
  .example-stage .example-loading{ background:#a8a8a8; color:#333; }
  .example-stage .example-loading .spinner{ border-color:rgba(0,0,0,.15); border-top-color:#555; }
}
/* Gold circular close — pinned to the LEFT.
   z-index must clear the GIS engine's own chrome (toolbar/panels/tour
   card top out at 1300 in css/15-gis.css) or a GIS map experience can
   visually bury this button under its own UI. */
#exampleOverlay .overlay-close{
  position:fixed;
  top:calc(50% - min(1040px, 96vh) / 2 + 14px);
  left:calc(max(1.25vw, (100vw - min(1860px, 97.5vw)) / 2) + 14px);
  right:auto;
  z-index:1400;
  flex:0 0 auto;
  box-sizing:border-box;
  width:40px; height:40px; aspect-ratio:1 / 1; border-radius:50%;
  background:var(--gold); color:#141414; border:0;
  font-weight:800;
}
#exampleOverlay .overlay-close:hover{ background:var(--gold-bright); }

/* Phones: the window is full-bleed, so pin to the viewport corner. */
@media (max-width:760px){
  #exampleOverlay .overlay-close{
    top:calc(2vh + 14px);
    left:calc(3vw + 14px);
  }
}
/* Fullscreen experience owns the screen — the close button steps aside. */
body:has(#exampleStage:fullscreen) #exampleOverlay .overlay-close,
body:has(#exampleStage.is-faux-fullscreen) #exampleOverlay .overlay-close{
  display:none;
}

.example-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:clamp(14px,2vw,28px); flex-wrap:wrap;
  margin-bottom:clamp(10px,1.4vh,16px);
}
.example-head-copy{ min-width:0; }
.example-title{ font-weight:500; font-size:clamp(24px,2vw,34px); }
.example-meta{ flex-direction:column; align-items:flex-start; gap:6px; margin:10px 0 0; }
.example-meta-row{ display:flex; align-items:center; gap:8px; }
.example-meta-label{ color:rgba(255,255,255,.85); font-size:12.5px; }
.meta-chip{ background:#d9d9d9; color:#1c1c1c; border:0; font-weight:600; }
.example-cta-row{ flex:0 0 auto; align-items:flex-start; margin-top:6px; }
.example-cta{
  background:var(--gold); color:#141414; border:0; border-radius:10px;
  font-weight:700; font-size:clamp(12px,1vw,15px); padding:12px 18px;
}
.example-cta:hover{ background:var(--gold-bright); }
.example-cta-icon{ padding:12px 14px; display:flex; align-items:center; }

/* PROJECT EVIDENCE band */
.example-evidence{ margin:clamp(18px,2.4vh,28px) 0; }
.example-evidence-band{
  display:flex; align-items:center; gap:clamp(14px,2vw,30px);
  background:rgba(255,255,255,.07);
  margin:0 calc(-1 * clamp(20px,2.8vw,40px));
  padding:clamp(14px,2vh,22px) clamp(20px,2.8vw,40px);
}
.example-evidence-lede{ display:flex; flex-direction:column; gap:4px; flex:0 0 auto; }
.example-evidence-sub,
.example-evidence-note{ color:rgba(255,255,255,.85); font-size:12.5px; line-height:1.4; }
.example-evidence-note{ margin-left:auto; flex:0 0 auto; text-align:left; }
.example-evidence-tabs{ margin:0; flex:1 1 auto; flex-wrap:wrap; }
.example-evidence-tabs button{
  border:1px solid rgba(255,255,255,.65); border-radius:6px;
  color:#eaeaea; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 16px; background:transparent;
}
.example-evidence-tabs button.is-active{
  background:#686868; border-color:#686868; color:#fff;
}
.example-evidence-body{ margin:14px 0 0; }

/* Media tiles */
.example-tile{
  display:block; background:#4a4a4a; border-radius:14px; min-height:150px;
}
.example-section-title{
  font-weight:500; font-size:clamp(19px,1.5vw,26px);
  margin:clamp(20px,3vh,32px) 0 clamp(12px,1.8vh,18px);
}
/* Count-driven media grid (0-4 items, set by js/app.js via data-count).
   Desktop column counts; tablet and phone overrides live further down. */
.example-media-grid{
  display:grid; gap:clamp(14px,1.6vw,24px);
  grid-auto-rows:minmax(180px, auto);
}
.example-media-grid[data-count="0"]{ grid-template-columns:1fr; }
.example-media-grid[data-count="1"]{ grid-template-columns:1fr; }
.example-media-grid[data-count="2"]{ grid-template-columns:repeat(2, 1fr); }
.example-media-grid[data-count="3"]{ grid-template-columns:repeat(3, 1fr); }
.example-media-grid[data-count="4"]{ grid-template-columns:repeat(2, 1fr); }

/* A lone item shouldn't stretch the full width like a banner. */
.example-media-grid[data-count="1"]{ max-width:min(760px, 100%); }
.example-media-grid[data-count="1"] .example-tile{ min-height:clamp(240px,32vh,420px); }

/* Tiles fill their cell whatever the count. */
.example-media-grid .example-tile{ width:100%; height:100%; min-height:180px; }
.example-tile-tall{ min-height:100%; }

/* Empty state */
.example-media-empty{
  margin:0; padding:clamp(28px,5vh,56px) 20px;
  border:1px dashed rgba(255,255,255,.18); border-radius:14px;
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.55);
  font-size:clamp(13px,1vw,15px); text-align:center;
}

/* Video tiles: poster image plus a play badge. */
.example-tile-video{ position:relative; overflow:hidden; text-decoration:none; }
.example-tile-video .example-tile-photo{ width:100%; height:100%; object-fit:cover; border-radius:14px; }
.example-tile-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.7);
}
.example-tile-play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}
.example-tile-video:hover .example-tile-play{ background:rgba(0,0,0,.75); }

/* Real project imagery (portfolio extractions) in the media mosaic. */
img.example-tile-photo{
  width:100%; height:100%; min-height:150px;
  object-fit:cover; border-radius:14px;
}

/* Related live experiences & videos (link inventory) */
.example-links{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px; margin-top:clamp(12px,1.8vh,18px);
}
.example-links-label{
  flex-basis:100%;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.example-link-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:#fff; text-decoration:none;
  font-size:13px; line-height:1.2;
  transition:background .18s ease, border-color .18s ease;
}
.example-link-chip:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.5);
}
.example-link-chip svg{ flex:none; opacity:.75; }

/* More from {Sector} */
.example-more{ margin-bottom:clamp(24px,4vh,40px); }
.example-more-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(14px,1.6vw,24px);
}
.example-more-card{
  appearance:none; cursor:pointer; text-align:left;
  background:#4a4a4a; color:#fff; border:0; border-radius:14px;
  min-height:170px; padding:18px;
  display:flex; flex-direction:column; gap:8px; justify-content:flex-end;
  font-family:var(--sans);
  transition:background .15s, transform .15s;
}
.example-more-card:hover{ background:#565656; transform:translateY(-2px); }
.example-more-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.example-more-name{ font-size:15px; font-weight:700; }
.example-more-text{ font-size:12px; color:rgba(255,255,255,.8); line-height:1.45; }

/* ---------- Fullscreen experience pane ----------
   Enter Twin fullscreens the stage and plays the same centre-out
   seam reveal as the home page's twin layer (02-home.css), so the
   two entrances read as one gesture. Geometry, easing and duration
   are copied from .twin-reveal / .twin-seam deliberately — if you
   retune one, retune the other. */
#exampleStage:fullscreen,
#exampleStage:-webkit-full-screen,
#exampleStage.is-faux-fullscreen{
  width:100vw; height:100vh; max-height:none;
  border-radius:0; border-bottom:0; background:#0a1018;
}
#exampleStage:fullscreen iframe,
#exampleStage:-webkit-full-screen iframe,
#exampleStage.is-faux-fullscreen iframe{
  width:100%; height:100%; border:0;
}

/* The reveal clips the stage's live content (iframe + loading veil).
   .is-revealing mounts it as a narrow centre slice; .is-revealed
   expands it to full width. */
#exampleStage.is-revealing iframe,
#exampleStage.is-revealing .example-loading{
  -webkit-clip-path:inset(0 49.85% 0 49.85%);
  clip-path:inset(0 49.85% 0 49.85%);
  transition:clip-path 1.15s cubic-bezier(.72,.02,.26,1),
             -webkit-clip-path 1.15s cubic-bezier(.72,.02,.26,1);
}
#exampleStage.is-revealing.is-revealed iframe,
#exampleStage.is-revealing.is-revealed .example-loading{
  -webkit-clip-path:inset(0 0 0 0);
  clip-path:inset(0 0 0 0);
}

/* Thin vertical seam the reveal grows out of. */
.example-seam{
  position:absolute; top:0; bottom:0; left:50%; width:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.85);
  opacity:0; pointer-events:none; z-index:4;
  transition:opacity .3s ease;
}
#exampleStage.is-revealing:not(.is-revealed) .example-seam{ opacity:1; }
#exampleStage.is-revealing.is-revealed .example-seam{
  opacity:0; transition:opacity .5s ease .25s;
}

/* Hide the back-to-top FAB while the stage is fullscreen. */
#exampleStage:fullscreen ~ .example-fab,
#exampleStage.is-faux-fullscreen ~ .example-fab{ display:none; }

/* CSS fallback for browsers without element fullscreen (iOS Safari). */
#exampleStage.is-faux-fullscreen{
  position:fixed; inset:0; z-index:120;
  height:100dvh;
}
/* Escape hatch for the fallback, since there's no browser exit chrome. */
#exampleStage.is-faux-fullscreen::after{
  content:"Press Esc or tap here to exit";
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  padding:8px 16px; border-radius:999px;
  background:rgba(0,0,0,.6); color:#fff; font-size:12px;
  font-family:var(--sans); pointer-events:none; z-index:6;
}

/* Respect reduced-motion: skip the slice, just show the experience. */
@media (prefers-reduced-motion:reduce){
  #exampleStage.is-revealing iframe,
  #exampleStage.is-revealing .example-loading{
    -webkit-clip-path:none; clip-path:none; transition:none;
  }
  .example-seam{ display:none; }
}

/* Gold FAB — stays pinned bottom-right while the window scrolls.
   position:sticky keeps it in flow but glued to the viewport edge,
   which survives the window being the scroll container. */
.example-fab{
  position:sticky;
  bottom:clamp(18px,3vh,34px);
  align-self:flex-end;
  margin-right:clamp(18px,2vw,34px); margin-bottom:clamp(18px,3vh,34px);
  z-index:6;
  appearance:none; cursor:pointer;
  width:clamp(48px,4vw,64px); height:clamp(48px,4vw,64px);
  border:0; border-radius:16px;
  background:rgba(214,168,73,.55); color:#141414;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  opacity:.7;
  transition:opacity .18s ease, background .18s ease;
}
.example-fab:hover{ background:var(--gold-bright); opacity:1; }
@media (max-width:760px){ .example-fab{ display:none; } }

/* Tablet (761-1100px): cap at two columns so tiles stay legible. */
@media (min-width:761px) and (max-width:1100px){
  .example-media-grid[data-count="3"],
  .example-media-grid[data-count="4"]{ grid-template-columns:repeat(2, 1fr); }
  .example-media-grid .example-tile{ min-height:160px; }
}

/* ---------- Sector projects window: full-screen mosaic ---------- */
@media (min-width:761px){
  .projects-window{
    width:min(1860px,97.5vw); height:min(1040px,96vh); max-height:96vh;
    background:#070e18;
  }
  .projects-brand{
    background:transparent; border-bottom:0;
    padding:14px 16px 0;
  }
  .projects-brand-logo{ height:34px; }
  .projects-title{
    font-size:clamp(24px,1.8vw,34px); letter-spacing:.02em;
    margin:clamp(14px,2.4vh,26px) 16px clamp(10px,1.6vh,18px);
  }
  /* Mosaic: tall / two stacked / tall. */
  .projects-list{
    display:grid;
    grid-template-columns:1.25fr 1fr 1.3fr;
    grid-template-rows:repeat(2, minmax(180px, 1fr));
    grid-template-areas:"a b d" "a c d";
    gap:clamp(16px,1.8vw,28px);
    padding:0 clamp(40px,8vw,160px) clamp(60px,9vh,110px);
  }
  .projects-list .project-card:nth-child(1){ grid-area:a; }
  .projects-list .project-card:nth-child(2){ grid-area:b; }
  .projects-list .project-card:nth-child(3){ grid-area:c; }
  .projects-list .project-card:nth-child(4){ grid-area:d; }
  /* The mosaic above only resolves for exactly four cards: with fewer, areas
     c/d stay empty and the sheet reads as half-built; with more, the extra
     cards have no area at all. data-count is set by openProjects() in
     js/app.js from the sector's real card count. Every sector ships two
     cards today, so this is the live path, not a defensive branch. */
  .projects-list[data-count="1"],
  .projects-list[data-count="2"],
  .projects-list[data-count="3"]{
    grid-template-areas:none;
    grid-template-rows:minmax(240px, 1fr);
  }
  .projects-list[data-count="1"]{ grid-template-columns:minmax(0, 720px); justify-content:center; }
  .projects-list[data-count="2"]{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .projects-list[data-count="3"]{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .projects-list[data-count="1"] .project-card,
  .projects-list[data-count="2"] .project-card,
  .projects-list[data-count="3"] .project-card{ grid-area:auto; }
  .project-card{ background:#4a4a4a; border-radius:18px; min-height:0; }
}

/* ---------- Client portal: desktop layout ---------- */
.portal-nav{ display:none; }
@media (min-width:761px){
  .portal{ background:#1d202e; }
  .portal-topbar{ padding:12px 22px; gap:22px; }
  /* Horizontal HOME / APPS / Manage / Support links in the light
     bar; the burger + tile-menu overlay stay a phone affordance. */
  .portal-burger{ display:none; }
  .portal-menu{ display:none; }
  .portal-nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
  .portal-nav-link{
    appearance:none; cursor:pointer; background:none; border:0;
    font-family:var(--sans); font-size:clamp(13px,1vw,16px); font-weight:700;
    color:#1c1c1c; padding:6px 2px; border-bottom:2px solid transparent;
  }
  .portal-nav-link:hover{ color:#000; }
  .portal-nav-link.is-active{ border-bottom-color:#1c1c1c; }
  .portal-clientlogo{
    flex:0 1 auto; margin:0 auto;
    background:#5a5a5a;
    min-width:min(300px,26vw);
  }
  /* HOME — asymmetric tile grid. */
  .portal-main{ padding:clamp(24px,4vh,44px) clamp(28px,5vw,90px); }
  .portal-tiles{
    max-width:none;
    grid-template-columns:0.9fr 1.5fr 0.9fr;
    grid-template-rows:minmax(120px,.8fr) minmax(180px,1.2fr);
    grid-template-areas:"apps main support" "manage main support";
    gap:clamp(16px,1.8vw,28px);
  }
  .portal-tile-primary{ grid-area:main; grid-column:auto; min-height:0; }
  .portal-tiles .portal-tile:nth-child(2){ grid-area:apps; }
  .portal-tiles .portal-tile:nth-child(3){ grid-area:support; }
  .portal-tile-manage{ grid-area:manage; }
  /* APPS — 3-up card grid. */
  .portal-apps-title{ max-width:none; margin:2px 0 22px; }
  .portal-apps-list{
    max-width:none;
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:clamp(18px,2vw,32px);
    align-items:start;
  }
  .portal-app{ text-align:left; margin-bottom:0; }
  .portal-app-media{ background:#565656; min-height:150px; width:100%; }
  .portal-app-title{ font-size:17px; }
}

/* Example-window adjustments on phones: stack the header, keep the
   evidence band inside the pane, single-column tiles. */
@media (max-width:760px){
  .example-head{ flex-direction:column; }
  .example-evidence-band{
    flex-wrap:wrap; margin:0; border-radius:12px;
    padding:14px 16px;
  }
  .example-evidence-note{ margin-left:0; }
  .example-more-grid{ grid-template-columns:1fr; }
  /* Phones: always a single column regardless of count. */
  .example-media-grid,
  .example-media-grid[data-count="2"],
  .example-media-grid[data-count="3"],
  .example-media-grid[data-count="4"]{ grid-template-columns:1fr; }
  .example-media-grid[data-count="1"]{ max-width:100%; }
  .example-media-grid .example-tile{ min-height:200px; }
  .example-media-grid[data-count="1"] .example-tile{ min-height:220px; }
}