:root {
      --nav-h: 68px;
      --pad: clamp(20px, 4vw, 64px);
      --ease: cubic-bezier(.2,.8,.2,1);
      --ink: #f4f4f1;
      --muted: rgba(244,244,241,.62);
      --line: rgba(244,244,241,.16);
    }

    * { box-sizing: border-box; }
    html {
      scroll-behavior: smooth;
      scroll-snap-type: y proximity;
      background: #111;
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #111;
      color: var(--ink);
      overflow-x: hidden;
    }

    a { color: inherit; text-decoration: none; }
    button { font: inherit; }




    /* ---------- ENETPULSE BRAND STORY ---------- */
    .brand-view { font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; }
    .brand-view .anton { font-family:'Anton', Impact, sans-serif; font-weight:400; text-transform:uppercase; }
    .brand-view .outline { color:transparent; -webkit-text-stroke:clamp(1.5px,.14vw,2.5px) #CA1744; paint-order:stroke fill; }
    .brand-view .micro { font-size:10px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; opacity:.6; }
    .brand-view .brand-copy { position:relative; z-index:3; max-width:610px; font-size:clamp(15px,1.35vw,20px); line-height:1.62; opacity:.72; margin-top:32px; }
    .brand-view .brand-index { position:absolute; right:var(--pad); bottom:34px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; opacity:.45; }

    .brand-intro-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:70px; align-items:end; }
    .brand-intro-layout > *, .type-stage > *, .colour-stage > * { min-width:0; }
    .brand-intro-title { position:relative; z-index:1; font-size:clamp(88px,14vw,220px); line-height:.96; letter-spacing:-.02em; margin:0; color:transparent; -webkit-text-stroke:clamp(1.5px,.14vw,2.5px) #CA1744; paint-order:stroke fill; }
    .brand-intro-title .pink { color:#CA1744; }
    .brand-logo-float { align-self:center; display:grid; place-items:center; min-height:420px; position:relative; }
    .brand-logo-float::before { content:''; position:absolute; width:min(460px,70vw); aspect-ratio:1; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
    .brand-logo-float img { width:min(440px,85%); position:relative; z-index:1; filter:drop-shadow(0 24px 50px rgba(0,0,0,.3)); }

    .logo-stage { display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; align-items:center; }
    .logo-system { min-height:580px; position:relative; display:grid; place-items:center; }
    .logo-primary-card { position:absolute; width:88%; padding:70px 55px; background:#f1f0eb; border-radius:20px; transform:rotate(-2deg); box-shadow:0 35px 90px rgba(0,0,0,.28); }
    .logo-primary-card img { width:100%; display:block; }
    .logo-secondary-card { position:absolute; width:180px; height:180px; right:0; bottom:20px; display:grid; place-items:center; background:#CA1744; border-radius:18px; transform:rotate(5deg); box-shadow:0 25px 60px rgba(0,0,0,.3); }
    .logo-secondary-card img { width:58%; }
    .clearspace { position:absolute; inset:13% 10%; border:1px dashed rgba(255,255,255,.3); pointer-events:none; }
    .clearspace::before { content:'CLEAR SPACE'; position:absolute; top:-20px; left:0; font-size:9px; letter-spacing:.14em; opacity:.55; }

    .type-stage { display:flex; flex-direction:column; justify-content:center; gap:28px; }
    .type-heading { width:100%; }
    .type-specimens { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
    .type-card { border:1px solid rgba(255,255,255,.2); padding:clamp(24px,2.6vw,42px); min-height:470px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; }
    .type-card-name { font-size:clamp(24px,2vw,34px); font-weight:600; margin-bottom:20px; }
    .type-card-aa { font-size:clamp(92px,10vw,170px); line-height:.85; margin:8px 0 34px; }
    .type-card-anton .type-card-aa, .type-card-anton .type-chars { font-family:'Anton',Impact,sans-serif; font-weight:400; }
    .type-card-poppins .type-card-aa, .type-card-poppins .type-chars { font-family:'Poppins',sans-serif; font-weight:300; }
    .type-chars { font-size:clamp(18px,1.65vw,28px); line-height:1.55; overflow-wrap:anywhere; }
    .type-chars + .type-chars { margin-top:8px; }
    .type-card-foot { margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:10px; text-transform:uppercase; letter-spacing:.15em; opacity:.58; }

    .colour-stage { display:grid; grid-template-columns:1fr auto; gap:72px; align-items:center; }
    .colour-stack { display:grid; grid-template-columns:repeat(2,1fr); width:min(44vw,560px); aspect-ratio:1 / 1; border-radius:4px; overflow:visible; box-shadow:0 35px 90px rgba(0,0,0,.18); position:relative; isolation:isolate; justify-self:end; }
    .colour-block { padding:28px; display:flex; flex-direction:column; justify-content:space-between; aspect-ratio:1 / 1; min-height:0; position:relative; z-index:1; cursor:default; transition:transform .38s var(--ease), box-shadow .38s var(--ease), opacity .3s ease, filter .3s ease; }
    .colour-block:nth-child(1){border-radius:4px 0 0 0}.colour-block:nth-child(2){border-radius:0 4px 0 0}.colour-block:nth-child(3){border-radius:0 0 0 4px}.colour-block:nth-child(4){border-radius:0 0 4px 0}
    .colour-block strong { font-family:'Anton',sans-serif; font-size:clamp(40px,5vw,78px); font-weight:400; text-transform:uppercase; line-height:.9; }
    .colour-block span { font-size:11px; line-height:1.7; font-weight:600; }
    .colour-stack.has-focus .colour-block:not(.is-focus) { opacity:.38; filter:saturate(.35); transform:scale(.975); }
    .colour-block.is-focus { z-index:8; transform:translateY(-12px) scale(1.075); box-shadow:0 30px 70px rgba(0,0,0,.28); }
    .c-red { background:#CA1744; color:#fff; }
    .c-black { background:#000000; color:#fff; }
    .c-offwhite { background:#F9F9F9; color:#000; border:1px solid rgba(0,0,0,.08); }
    .c-white { background:#FFFFFF; color:#000; border:1px solid rgba(0,0,0,.08); }

    .headline-stage { position:relative; min-height:620px; display:flex; flex-direction:column; justify-content:center; }
    .headline-stage .line { font-size:clamp(78px,13vw,205px); line-height:.78; letter-spacing:-.02em; white-space:nowrap; }
    .headline-stage .line:nth-child(2) { margin-left:10vw; color:#CA1744; }
    .headline-stage .line:nth-child(3) { margin-left:3vw; }
    .curve-demo { position:absolute; right:-10vw; top:8%; width:45vw; height:85%; border:2px solid rgba(255,255,255,.2); border-left:0; border-radius:50% 0 0 50%; transform:skewX(-8deg); pointer-events:none; }
    .headline-note { position:absolute; right:2%; bottom:10%; max-width:280px; font-size:12px; line-height:1.55; opacity:.62; }

    .system-stage { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
    .icon-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
    .fake-icon { aspect-ratio:1; border:1px solid rgba(255,255,255,.22); border-radius:14px; display:grid; place-items:center; font-family:'Anton'; font-size:clamp(24px,3vw,48px); color:#CA1744; transition:transform .3s ease, background .3s ease; }
    .fake-icon:hover { transform:translateY(-5px); background:rgba(255,255,255,.06); }
    .system-poster { min-height:560px; border-radius:20px; overflow:hidden; position:relative; background:#f0efe9; color:#111; padding:42px; box-shadow:0 35px 90px rgba(0,0,0,.25); }
    .system-poster::after { content:''; position:absolute; width:72%; height:115%; right:-30%; top:-8%; border:32px solid #CA1744; border-left:0; border-radius:55% 0 0 55%; transform:rotate(7deg); }
    .system-poster h3 { position:relative; z-index:2; font-size:clamp(70px,9vw,140px); line-height:.78; margin:0; }
    .system-poster p { position:absolute; z-index:2; left:42px; bottom:38px; width:45%; font-size:13px; line-height:1.5; }

    .brand-outro { display:grid; place-items:center; text-align:center; color:#000; }
    .brand-outro img { width:min(410px,48vw); margin-bottom:55px; }
    .brand-outro h2 { font-size:clamp(70px,12vw,190px); line-height:.98; margin:0; color:#000; }
    .brand-outro .brand-copy, .brand-outro .next-project, .brand-outro .brand-index { color:#000; }
    .next-project { margin-top:42px; font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.55; }

    .guide-preview-stage { display:grid; grid-template-columns:.58fr 1.42fr; gap:clamp(40px,6vw,100px); align-items:center; }
    .guide-preview-copy { position:relative; z-index:5; }
    .guide-preview-copy h2 { font-size:clamp(76px,10vw,160px); line-height:.96; margin:0; }
    .guide-preview-copy .brand-copy { max-width:470px; }
    .guide-book { position:relative; min-height:660px; display:grid; grid-template-columns:repeat(12,1fr); grid-template-rows:repeat(10,1fr); gap:10px; isolation:isolate; }
    .guide-sheet { position:relative; min-width:0; min-height:0; border-radius:4px; overflow:hidden; background:#fff; box-shadow:0 16px 42px rgba(0,0,0,.22); cursor:pointer; transition:opacity .26s ease, filter .26s ease, transform .3s var(--ease), box-shadow .3s var(--ease); }
    .guide-sheet img { width:100%; height:100%; object-fit:cover; display:block; }
    .guide-sheet:nth-child(1){grid-column:1 / span 6; grid-row:1 / span 4}
    .guide-sheet:nth-child(2){grid-column:7 / span 6; grid-row:1 / span 3}
    .guide-sheet:nth-child(3){grid-column:1 / span 4; grid-row:5 / span 6}
    .guide-sheet:nth-child(4){grid-column:5 / span 5; grid-row:4 / span 7}
    .guide-sheet:nth-child(5){grid-column:10 / span 3; grid-row:4 / span 3}
    .guide-sheet:nth-child(6){grid-column:10 / span 3; grid-row:7 / span 4}
    .guide-sheet::after { content:attr(data-label); position:absolute; left:12px; bottom:10px; padding:6px 9px; background:rgba(0,0,0,.76); color:#fff; font-size:8px; letter-spacing:.12em; text-transform:uppercase; opacity:0; transform:translateY(4px); transition:.22s ease; }
    .guide-sheet:hover { transform:translateY(-3px); box-shadow:0 22px 50px rgba(0,0,0,.3); }
    .guide-sheet:hover::after { opacity:1; transform:none; }
    .guide-book.has-focus .guide-sheet { opacity:.2; filter:grayscale(.5); }
    .guide-focus { position:absolute; z-index:30; width:min(560px,72%); aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-48%) scale(.96); border-radius:4px; overflow:hidden; background:#fff; box-shadow:0 40px 110px rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .34s var(--ease); }
    .guide-book.has-focus .guide-focus { opacity:1; transform:translate(-50%,-50%) scale(1); }
    .guide-focus img { width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
    .guide-focus-label { position:absolute; left:16px; bottom:14px; padding:7px 10px; background:rgba(0,0,0,.8); color:#fff; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
    .guide-hint { position:absolute; right:0; bottom:-25px; z-index:40; font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.48; }


    @media(min-width:901px){
      .brand-intro-layout .brand-copy { max-width:520px; }
      .colour-stage .brand-copy { max-width:460px; }
    }

    @media(max-width:900px){
      .brand-intro-layout,.logo-stage,.type-stage,.colour-stage,.system-stage,.guide-preview-stage{grid-template-columns:1fr}
      .brand-logo-float,.logo-system{min-height:430px}
      .guide-book{min-height:500px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr)}
      .guide-sheet:nth-child(n){grid-column:auto;grid-row:auto}
      .guide-focus{width:min(380px,86%)}
      .colour-stack{min-height:0;width:min(100%,560px);justify-self:start}
      .headline-stage .line{white-space:normal}
    }


    #brand-colours { color:#000; }
    #brand-colours .eyebrow, #brand-colours .brand-copy { color:#000; }
    #brand-colours .eyebrow::before { background:#CA1744; }
    #brand-colours .brand-copy { opacity:.68; }

    .brand-logo-lockup {
      align-self:stretch;
      display:grid;
      place-items:center;
      min-height:620px;
      margin:0;
    }
    .brand-logo-showcase {
      width:min(620px,100%);
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:18px;
      align-items:stretch;
    }
    .brand-logo-card {
      min-height:210px;
      border:1px solid rgba(255,255,255,.12);
      border-radius:4px;
      display:grid;
      place-items:center;
      padding:34px;
      position:relative;
      overflow:hidden;
      background:rgba(255,255,255,.025);
    }
    .brand-logo-card.primary { grid-column:span 2; min-height:190px; }
    .brand-logo-card.primary img { width:min(420px,88%); max-height:105px; }
    .brand-logo-card.secondary img { width:min(105px,55%); max-height:105px; }
    .brand-logo-card.colour { background:#F9F9F9; }
    .brand-logo-card.dark { background:#000; }
    .brand-logo-card .logo-label {
      position:absolute;
      left:16px;
      bottom:13px;
      font-size:9px;
      letter-spacing:.14em;
      text-transform:uppercase;
      opacity:.48;
    }
    .brand-logo-card.colour .logo-label { color:#000; }
    .brand-logo-card.dark .logo-label { color:#fff; }
    .brand-logo-showcase-note {
      grid-column:1 / -1;
      text-align:center;
      font-size:9px;
      letter-spacing:.15em;
      text-transform:uppercase;
      opacity:.42;
      margin-top:2px;
    }

    /* ---------- PAGE COLOR TRANSITIONS ---------- */
    body {
      background: transparent;
    }

    .color-stage {
      position: fixed;
      inset: 0;
      z-index: 0;
      background: #173a30;
      transition: background-color 900ms cubic-bezier(.22,.75,.2,1);
      pointer-events: none;
    }

    .section {
      z-index: 1;
    }

    /* Sections are transparent so the shared background can blend between them. */
    #intro,
    #brand-project,
    #brand-type,
    #brand-colours,
    #brand-guide-preview,
    #brand-outro,
    #web-project,
    #data-project,
    #predictor-project,
    #ai-project,
    #fc-project,
    #about {
      background: transparent !important;
    }

    /* ---------- PROJECT PROGRESS ---------- */
    .project-progress {
      position:fixed;
      z-index:110;
      top:calc(var(--nav-h) + 16px);
      right:var(--pad);
      width:min(260px,28vw);
      opacity:0;
      transform:translateY(-8px);
      pointer-events:none;
      transition:opacity .28s ease, transform .28s ease;
      mix-blend-mode:difference;
      color:#fff;
    }
    .project-progress.is-visible { opacity:1; transform:none; }
    .project-progress-meta { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:8px; font-size:9px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
    .project-progress-track { height:2px; background:rgba(255,255,255,.28); overflow:hidden; }
    .project-progress-fill { width:10%; height:100%; background:#fff; transform-origin:left center; transition:width .12s linear; }
    @media(max-width:900px){ .project-progress{display:none} }

    /* ---------- NAV ---------- */
    .nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 100;
      height: var(--nav-h);
      display: flex;
      align-items: center;
      gap: 26px;
      padding: 0 var(--pad);
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(15,15,15,.72);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }

    .brand {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -.04em;
      flex: 0 0 auto;
    }

    .nav-scroll {
      display: flex;
      gap: 20px;
      align-items: center;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
      white-space: nowrap;
      flex: 1;
    }

    .nav-scroll::-webkit-scrollbar { display: none; }

    .nav-link {
      position: relative;
      color: rgba(255,255,255,.48);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      transition: color .25s var(--ease);
      padding: 25px 0 22px;
    }

    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 16px;
      height: 2px;
      transform: scaleX(0);
      transform-origin: left;
      background: currentColor;
      transition: transform .3s var(--ease);
    }

    .nav-link:hover,
    .nav-link.active { color: #fff; }

    .nav-link.active::after { transform: scaleX(1); }

    /* ---------- SHARED ---------- */
    .section {
      position: relative;
      min-height: 100svh;
      scroll-snap-align: start;
      scroll-margin-top: var(--nav-h);
      overflow: hidden;
      padding: calc(var(--nav-h) + 34px) var(--pad) 46px;
      display: grid;
      align-items: center;
    }

    .section-inner {
      width: min(1500px, 100%);
      margin: 0 auto;
    }

    .eyebrow {
      display: flex;
      gap: 12px;
      align-items: center;
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .14em;
      opacity: .62;
      margin-bottom: 22px;
    }

    .eyebrow::before {
      content: "";
      width: 42px;
      height: 2px;
      background: currentColor;
    }

    h1,h2,h3,p { margin-top: 0; }
    .display {
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
      letter-spacing: -.055em;
      line-height: .92;
      margin-bottom: 24px;
    }

    .lead {
      max-width: 680px;
      font-size: clamp(16px, 1.7vw, 23px);
      line-height: 1.45;
      opacity: .78;
    }

    .meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 22px;
      margin-top: 28px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .6;
    }

    .mock {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.25);
    }

    /* fade/slide when section becomes active */
    /* Local-first: content must always be visible, even if JavaScript is unavailable. */
    .reveal {
      transform: translateY(0);
      opacity: 1;
      transition: transform .8s var(--ease), opacity .8s var(--ease);
    }

    .section.in-view .reveal {
      transform: translateY(0);
      opacity: 1;
    }

    /* ---------- INTRO ---------- */
    #intro {
      background:
        radial-gradient(circle at 75% 25%, rgba(178,142,37,.16), transparent 24%),
        linear-gradient(145deg, #1d4c3c 0%, #173a30 52%, #10241e 100%);
    }

    #intro .section-inner {
      display: grid;
      grid-template-columns: 1fr;
      gap: 38px;
    }

    .intro-kicker {
      font-size: 12px;
      letter-spacing: .11em;
      text-transform: uppercase;
      opacity: .72;
    }

    .intro-title {
      font-size: clamp(70px, 15vw, 220px);
      margin: 0;
    }

    .intro-name {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(32px, 5vw, 78px);
      letter-spacing: -.04em;
      margin: 0;
    }

    .intro-bottom {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      align-items: flex-end;
      border-top: 1px solid rgba(255,255,255,.18);
      padding-top: 22px;
    }

    .intro-bottom p {
      margin: 0;
      max-width: 550px;
      line-height: 1.5;
      opacity: .72;
    }

    .scroll-cue {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .12em;
      white-space: nowrap;
      opacity: .7;
    }

    /* ---------- BRAND ---------- */
    #brand-project {
      background: #171717;
      color: #f5f5f0;
    }

    .brand-grid {
      display: grid;
      grid-template-columns: .85fr 1.35fr;
      gap: clamp(28px, 5vw, 90px);
      align-items: center;
    }

    .brand-title {
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(78px, 11vw, 180px);
      line-height: .78;
      letter-spacing: -.045em;
      color: transparent;
      -webkit-text-stroke: 2px #CA1744;
      text-transform: uppercase;
      margin-bottom: 30px;
    }

    .brand-cards {
      position: relative;
      min-height: 540px;
    }

    .brand-card {
      position: absolute;
      background: #efefeb;
      color: #171717;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 24px 80px rgba(0,0,0,.28);
      transition: transform .45s var(--ease);
    }

    .brand-card:nth-child(1){ inset: 2% 30% 47% 0; transform: rotate(-4deg); }
    .brand-card:nth-child(2){ inset: 22% 0 24% 35%; transform: rotate(3deg); }
    .brand-card:nth-child(3){ inset: 56% 38% 0 10%; transform: rotate(-1deg); background:#0b0b0b; color:white; }

    .brand-card:hover { transform: rotate(0deg) scale(1.02); z-index: 5; }

    .brand-card h3 {
      font-family: Georgia, serif;
      font-size: 30px;
      margin-bottom: 12px;
    }

    .swatches {
      display:flex; gap:10px; margin-top:22px;
    }

    .swatch { height: 48px; flex:1; border-radius: 4px; }
    .s1{background:#111}.s2{background:#CA1744}.s3{background:#f4f1e8}

    /* ---------- WEB ---------- */
    #web-project {
      background: #ecebe7;
      color: #111;
    }

    #web-project .eyebrow,
    #web-project .lead,
    #web-project .meta { color: #111; }

    .web-grid {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      align-items: center;
      gap: clamp(36px,5vw,90px);
    }

    .browser {
      border-radius: 18px;
      background: #111;
      box-shadow: 0 30px 90px rgba(0,0,0,.23);
      overflow: hidden;
      transform: rotate(1deg);
    }

    .browser-top {
      height: 38px;
      background: #272727;
      display:flex;
      align-items:center;
      gap:7px;
      padding:0 14px;
    }

    .browser-top i {
      width:9px; height:9px; border-radius:50%; background:#656565; display:block;
    }

    .website-hero {
      min-height: 460px;
      padding: 54px;
      color:white;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      background:
        linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.55)),
        radial-gradient(circle at 70% 40%, #5a5a5a, #111 50%);
    }

    .site-nav { display:flex; justify-content:space-between; font-size:11px; opacity:.8; }
    .site-headline {
      font-family: Impact, sans-serif;
      font-size: clamp(50px,7vw,110px);
      line-height:.84;
      max-width: 600px;
      text-transform:uppercase;
    }

    /* ---------- DATA ---------- */
    #data-project {
      background: #e84f2e;
      color: #fff8e9;
    }

    .data-grid {
      display:grid;
      grid-template-columns:.55fr 1.45fr;
      gap: clamp(32px, 5vw, 80px);
      align-items:center;
    }

    .dashboard {
      background:#f6f6f4;
      min-height:560px;
      color:#171717;
      display:grid;
      grid-template-columns: 190px 1fr;
    }

    .dash-sidebar {
      border-right:1px solid #ddd;
      padding:20px 16px;
      background:#fafafa;
    }

    .dash-logo {
      font-weight:900; margin-bottom:24px;
    }

    .filter {
      border:1px solid #ddd;
      border-radius:6px;
      height:34px;
      margin:8px 0;
      padding:9px;
      font-size:10px;
      color:#777;
      background:#fff;
    }

    .dash-main { padding:26px; }
    .dash-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
    .dash-title { font-weight:900; font-size:20px; }
    .table {
      border:1px solid #ddd;
      border-radius:8px;
      overflow:hidden;
    }
    .row {
      display:grid;
      grid-template-columns: 1.1fr .8fr 1.4fr .6fr;
      gap:10px;
      padding:12px 14px;
      border-bottom:1px solid #e5e5e5;
      font-size:10px;
    }
    .row:first-child { font-weight:800; background:#f0f0ee; }
    .row:last-child { border-bottom:0; }


/* ---------- DATA CASE v0.32 ---------- */
.data-view{
  color:#fff8e9;
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  overflow:hidden;
}
.data-view .section-inner{position:relative;z-index:2}
.data-view .anton{
  font-family:'Anton',Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
}
.data-view .data-copy{
  max-width:610px;
  font-size:clamp(15px,1.25vw,19px);
  line-height:1.65;
  opacity:.82;
  margin-top:28px;
}
.data-view .data-index{
  position:absolute;right:var(--pad);bottom:34px;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.48;
}
.data-view .eyebrow{color:inherit}
.data-progress .project-progress-fill{background:#fff8e9}
.data-progress .project-progress-meta{color:#fff8e9}

.data-intro-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(34px,5vw,82px);
  align-items:center;
}
.data-title{
  font-size:clamp(60px,7.5vw,122px);
  line-height:.88;
  letter-spacing:-.02em;
  margin:18px 0 0;
}
.data-screen{
  position:relative;
  border-radius:4px;
  overflow:hidden;
  background:#f7f7f7;
  box-shadow:0 35px 90px rgba(63,20,8,.24);
}
.data-screen img{display:block;width:100%;height:auto}
.data-intro-screen{transform:rotate(.6deg);width:108%}
.data-intro-screen::after{
  content:"";
  position:absolute;inset:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  pointer-events:none;
}

.data-process-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(40px,5vw,90px);
  align-items:center;
}
.data-board-window{
  height:min(76vh,760px);
  border-radius:4px;
  overflow:hidden;
  position:relative;
  box-shadow:0 35px 90px rgba(63,20,8,.22);
  background:#808080;
}
.data-board-window img{
  position:absolute;
  width:150%;
  max-width:none;
  left:-22%;
  top:-8%;
  transition:transform 8s ease;
}
.data-board-window:hover img{transform:translate3d(-4%, -3%, 0) scale(1.03)}
.data-callout{
  display:inline-flex;
  margin-top:28px;
  padding:9px 12px;
  border:1px solid rgba(255,248,233,.35);
  border-radius:999px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.data-simple-layout{
  display:grid;
  grid-template-columns:.62fr 1.38fr;
  gap:clamp(36px,5vw,80px);
  align-items:center;
}
.data-ui-stage{
  position:relative;
  min-height:min(76vh,760px);
}
.data-ui-main{
  position:absolute;
  right:-5%;
  top:7%;
  width:92%;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 35px 90px rgba(63,20,8,.24);
}
.data-ui-main img{display:block;width:100%}
.data-ui-detail{
  position:absolute;
  left:-1%;
  bottom:2%;
  width:38%;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 22px 65px rgba(63,20,8,.28);
  border:5px solid #fff;
  background:#808080;
  transform:rotate(-1.5deg);
}
.data-ui-detail img{display:block;width:100%}
.data-ui-chip{
  position:absolute;
  right:2%;
  bottom:4%;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:9px 13px;
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.data-result-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:clamp(38px,5vw,82px);
  align-items:center;
}
.data-result-stack{
  position:relative;
  min-height:min(73vh,730px);
}
.data-result-main{
  position:absolute;
  width:100%;
  top:7%;
  left:0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 35px 90px rgba(63,20,8,.25);
}
.data-result-main img{display:block;width:100%}
.data-table-strip{
  position:absolute;
  width:58%;
  right:-4%;
  bottom:0;
  border:5px solid #fff;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 20px 55px rgba(63,20,8,.28);
  background:#808080;
}
.data-table-strip img{display:block;width:100%}
.data-next{color:#fff8e9}
@media(max-width:900px){
  .data-intro-grid,.data-process-layout,.data-simple-layout,.data-result-layout{grid-template-columns:1fr}
  .data-intro-screen{width:100%;transform:none}
  .data-board-window{height:55vh}
  .data-ui-stage,.data-result-stack{min-height:55vh}
  .data-ui-main{width:100%;right:0}
  .data-ui-detail{width:42%}
}

    /* ---------- PREDICTOR ---------- */
    #predictor-project {
      background: #0d4db3;
      color: white;
    }

    .predictor-grid {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      align-items:center;
      gap: clamp(30px,5vw,70px);
    }

    .phone-wrap {
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:620px;
      position:relative;
    }

    .phone {
      width:min(360px, 78vw);
      height:650px;
      background:#0c0c0c;
      border-radius:52px;
      padding:12px;
      box-shadow:0 40px 100px rgba(0,0,0,.35);
      transform: rotate(-2deg);
    }

    .phone-screen {
      width:100%; height:100%;
      border-radius:41px;
      background:#f5f5f3;
      color:#111;
      padding:42px 22px 24px;
      overflow:hidden;
    }

    .notch {
      width:100px; height:28px;
      border-radius:20px;
      background:#000;
      margin:-31px auto 26px;
    }

    .phone-screen h3 { text-align:center; margin-bottom:8px; }
    .phone-screen small { display:block; text-align:center; opacity:.55; margin-bottom:24px; }
    .tabs { display:grid; grid-template-columns:1fr 1fr 1fr; background:#e6e6e3; border-radius:8px; padding:3px; font-size:11px; margin-bottom:20px; }
    .tabs span { padding:8px; text-align:center; }
    .tabs span:first-child { background:white; border-radius:6px; }
    .group-title { font-weight:900; margin-bottom:10px; }
    .team-select { border:1px solid #ddd; background:white; padding:11px; border-radius:8px; margin:7px 0; font-size:11px; display:flex; justify-content:space-between; }

    /* ---------- AI ---------- */
    #ai-project {
      background:#5f82a0;
      color:#fff;
    }

    .ai-grid {
      display:grid;
      grid-template-columns:.75fr 1.25fr;
      gap: clamp(36px, 5vw, 80px);
      align-items:center;
    }

    .customizer {
      display:grid;
      grid-template-columns:1fr 220px;
      background:#f4f5f6;
      color:#161616;
      min-height:520px;
    }

    .preview-pane {
      padding:32px;
      display:grid;
      place-items:center;
    }

    .widget {
      width:min(460px, 90%);
      background:#fff;
      border:1px solid #ddd;
      border-radius:18px;
      padding:26px;
      box-shadow:0 16px 50px rgba(0,0,0,.12);
      transition: all .35s var(--ease);
    }

    .widget.dark { background:#111; color:#fff; border-color:#111; }
    .score { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; text-align:center; gap:18px; }
    .score strong { font-size:34px; }
    .team-badge { width:42px; height:42px; border-radius:50%; background:#eee; margin:0 auto 8px; }

    .controls {
      border-left:1px solid #ddd;
      padding:24px 18px;
      background:#fff;
    }

    .controls h4 { margin:0 0 18px; }
    .control-label { display:block; font-size:11px; font-weight:800; margin:18px 0 8px; text-transform:uppercase; letter-spacing:.08em; }
    .toggle {
      width:100%;
      padding:10px 12px;
      border:1px solid #ccc;
      background:#f4f4f4;
      border-radius:8px;
      cursor:pointer;
    }
    input[type="range"] { width:100%; }

    /* ---------- FC ---------- */
    #fc-project {
      background:
        linear-gradient(135deg, rgba(0,0,0,.35), transparent 45%),
        #b5191d;
      color:white;
    }

    .fc-grid {
      display:grid;
      grid-template-columns:.8fr 1.2fr;
      align-items:center;
      gap:clamp(30px,5vw,90px);
    }

    .crest-stage {
      min-height:620px;
      display:grid;
      place-items:center;
      position:relative;
      background:
        repeating-linear-gradient(90deg,#111 0 80px,#1b1b1b 80px 160px);
      border-radius:24px;
      box-shadow:0 40px 100px rgba(0,0,0,.35);
    }

    .crest {
      width:min(360px,65%);
      aspect-ratio:.78;
      clip-path: polygon(50% 0, 94% 16%, 88% 72%, 50% 100%, 12% 72%, 6% 16%);
      background:
        linear-gradient(90deg, #111 0 18%, #b5121b 18% 36%, #111 36% 54%, #b5121b 54% 72%, #111 72%);
      border:10px solid #d2a248;
      display:grid;
      place-items:center;
      text-align:center;
      font-family:Impact,sans-serif;
      font-size:70px;
      line-height:.8;
      box-shadow:0 24px 50px rgba(0,0,0,.4);
      transform:rotate(-2deg);
    }

    .crest small { display:block; font-size:18px; letter-spacing:.08em; }

    /* ---------- ABOUT ---------- */
    #about {
      background:#111;
      color:white;
    }

    .about-grid {
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:70px;
      align-items:end;
    }

    .about-big {
      font-family:Georgia,serif;
      font-size:clamp(48px,8vw,120px);
      line-height:.95;
      letter-spacing:-.05em;
      margin:0;
    }

    .about-copy {
      font-size:18px;
      line-height:1.55;
      opacity:.7;
      max-width:520px;
    }

    .footer-note {
      margin-top:34px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.14);
      font-size:11px;
      letter-spacing:.12em;
      text-transform:uppercase;
      opacity:.55;
    }

    @media (max-width: 900px) {
      :root { --nav-h: 62px; }
      .brand-grid, .web-grid, .data-grid, .predictor-grid, .ai-grid, .fc-grid, .about-grid {
        grid-template-columns:1fr;
      }
      .section { min-height:auto; padding-top:calc(var(--nav-h) + 54px); padding-bottom:70px; }
      html { scroll-snap-type:y proximity; }
      .brand-cards { min-height:500px; margin-top:10px; }
      .dashboard { min-height:480px; grid-template-columns:140px 1fr; }
      .phone-wrap { min-height:0; }
      .customizer { grid-template-columns:1fr; }
      .controls { border-left:0; border-top:1px solid #ddd; }
      .intro-bottom { align-items:flex-start; flex-direction:column; }
      .crest-stage { min-height:500px; }
    }

    @media (max-width: 600px) {
      .nav { gap:16px; }
      .brand { font-size:22px; }
      .nav-link { font-size:10px; }
      .brand-cards { min-height:430px; }
      .brand-card { padding:16px; }
      .brand-card h3 { font-size:22px; }
      .dashboard { grid-template-columns:1fr; }
      .dash-sidebar { display:none; }
      .website-hero { min-height:420px; padding:32px; }
      .customizer { min-height:0; }
      .controls { display:none; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *, *::before, *::after { transition:none !important; animation:none !important; }
    }
  
/* v0.14 — Guide focus refinement */
#brand-guide-preview .guide-focus{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  padding:clamp(18px,2.5vw,34px);
  place-items:start center;
}
#brand-guide-preview .guide-focus img{
  margin-top:clamp(4px,1.8vh,18px);
  max-width:min(84vw,960px);
  max-height:calc(100vh - var(--nav-h) - 52px);
  box-shadow:0 42px 120px rgba(0,0,0,.58), 0 12px 36px rgba(0,0,0,.28);
  border-radius:2px;
}
#brand-guide-preview .guide-focus-label{display:none;}


/* v0.29 · responsive iPhone carousel */
.responsive-phone-wrap{
  min-height:min(78vh,780px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  position:relative;
}
.responsive-iphone{
  position:relative;
  height:min(72vh,720px);
  aspect-ratio: 9 / 19.5;
  padding:10px;
  border-radius:52px;
  background:#090909;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    0 34px 90px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.06);
}
.responsive-iphone::before{
  content:"";
  position:absolute;
  left:-4px;
  top:20%;
  width:3px;
  height:12%;
  border-radius:3px 0 0 3px;
  background:#181818;
  box-shadow:0 58px 0 #181818, 0 94px 0 #181818;
}
.responsive-iphone::after{
  content:"";
  position:absolute;
  right:-4px;
  top:27%;
  width:3px;
  height:18%;
  border-radius:0 3px 3px 0;
  background:#181818;
}
.responsive-iphone-screen{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  border-radius:43px;
  background:#0b0b0b;
}
.responsive-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .7s var(--ease), transform 1s var(--ease);
}
.responsive-slide.is-active{
  opacity:1;
  transform:scale(1);
}
.responsive-dots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
}
.responsive-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(0,0,0,.18);
  transition:width .3s var(--ease), background .3s var(--ease), border-radius .3s var(--ease);
}
.responsive-dot.is-active{
  width:24px;
  border-radius:999px;
  background:#CA1744;
}
@media(max-width:900px){
  .responsive-phone-wrap{min-height:58vh}
  .responsive-iphone{height:min(56vh,620px);border-radius:42px;padding:8px}
  .responsive-iphone-screen{border-radius:35px}
  }
@media(prefers-reduced-motion:reduce){
  .responsive-slide{transition:none}
}



/* ---------- v0.13: clearer Brand progress + full-page Guide previews ---------- */
.project-progress{
  position:fixed;
  z-index:140;
  top:var(--nav-h);
  left:0;
  right:0;
  width:auto;
  height:20px;
  opacity:0;
  transform:none;
  pointer-events:none;
  transition:opacity .2s ease;
  color:#fff;
  mix-blend-mode:normal;
}
.project-progress.is-visible{opacity:1;transform:none}
.project-progress-meta{
  position:absolute;
  right:var(--pad);
  top:8px;
  display:flex;
  gap:10px;
  margin:0;
  padding:5px 8px;
  border-radius:3px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:'Poppins',sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.13em;
  line-height:1;
  text-transform:uppercase;
}
.project-progress-track{
  position:absolute;
  left:0; right:0; top:0;
  height:4px;
  background:rgba(255,255,255,.2);
  overflow:hidden;
}
.project-progress-fill{
  width:10%;
  height:100%;
  background:#CA1744;
  transition:width .08s linear;
}

#brand-guide-preview .guide-preview-stage{
  grid-template-columns:.55fr 1.45fr;
  gap:clamp(44px,6vw,96px);
}
#brand-guide-preview .guide-book{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:none;
  gap:14px;
  align-content:center;
  isolation:isolate;
}
#brand-guide-preview .guide-sheet,
#brand-guide-preview .guide-sheet:nth-child(n){
  grid-column:auto;
  grid-row:auto;
  aspect-ratio:1 / 1;
  min-width:0;
  min-height:0;
  margin:0;
  border-radius:3px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  transform:none;
}
#brand-guide-preview .guide-sheet img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
#brand-guide-preview .guide-sheet::after{display:none}
#brand-guide-preview .guide-sheet:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 18px 42px rgba(0,0,0,.34);
}
#brand-guide-preview .guide-book.has-focus .guide-sheet{
  opacity:.3;
  filter:none;
}
#brand-guide-preview .guide-book.has-focus .guide-sheet:hover{opacity:.7}
#brand-guide-preview .guide-focus{
  position:fixed;
  z-index:135;
  inset:var(--nav-h) 0 0 0;
  width:auto;
  height:auto;
  aspect-ratio:auto;
  display:grid;
  place-items:center;
  padding:clamp(26px,4vw,58px);
  border-radius:0;
  overflow:visible;
  background:rgba(5,5,5,.38);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:none;
  opacity:0;
  pointer-events:none;
  transform:none;
  transition:opacity .2s ease;
}
#brand-guide-preview .guide-book.has-focus .guide-focus{
  opacity:1;
  transform:none;
}
#brand-guide-preview .guide-focus img{
  display:block;
  width:auto;
  height:auto;
  max-width:min(82vw,920px);
  max-height:calc(100vh - var(--nav-h) - 70px);
  object-fit:contain;
  background:transparent;
  box-shadow:0 36px 100px rgba(0,0,0,.62);
}
#brand-guide-preview .guide-hint{bottom:-24px}
@media(max-width:1100px){
  #brand-guide-preview .guide-book{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .project-progress{display:none}
  #brand-guide-preview .guide-book{grid-template-columns:repeat(3,minmax(0,1fr))}
  #brand-guide-preview .guide-focus img{max-width:90vw;max-height:calc(100vh - var(--nav-h) - 50px)}
}



/* v0.15 — Guide focus: no dark overlay, just the page + shadow */
#brand-guide-preview .guide-focus{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
#brand-guide-preview .guide-focus img{
  margin-top:-3vh;
  box-shadow:0 50px 140px rgba(0,0,0,.62), 0 14px 42px rgba(0,0,0,.32);
}



/* v0.23 - Enetpulse.com case */
.web-view{color:#111;font-family:'Poppins',ui-sans-serif,system-ui,sans-serif}
.web-view .section-inner{position:relative;z-index:2}
.web-intro-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(34px,5vw,88px);align-items:center}
.web-title,.web-section-title,.web-outro-title{font-family:Anton,Impact,sans-serif;text-transform:uppercase;line-height:.91;letter-spacing:-.02em;margin:16px 0 26px}
.web-title{font-size:clamp(62px,7.2vw,126px)}
.web-section-title{font-size:clamp(58px,6.4vw,112px)}
.web-outro-title{font-size:clamp(60px,7vw,122px)}
.web-hero-shot{width:min(64vw,1050px);justify-self:end;position:relative;overflow:visible;transform:rotate(.7deg)}
.web-hero-shot>img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 32px 90px rgba(0,0,0,.2)}
.web-hero-mobile{position:absolute;right:-3%;bottom:-8%;width:min(16vw,230px);margin:0;overflow:hidden;border-radius:4px;background:#111;box-shadow:0 24px 70px rgba(0,0,0,.34);transform:rotate(-3deg);transition:transform .35s var(--ease)}
.web-hero-mobile img{display:block;width:100%;height:auto}.web-hero-shot:hover .web-hero-mobile{transform:rotate(-1deg) translateY(-8px)}
.web-live-link{display:inline-flex;margin-top:28px;padding-bottom:5px;border-bottom:2px solid #CA1744;color:#111;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.02em}
.web-live-link:hover{color:#CA1744}
.web-index{position:absolute;right:4vw;bottom:24px;font:700 10px Poppins,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:.42}
.web-system-layout{display:grid;grid-template-columns:.62fr 1.38fr;gap:clamp(30px,5vw,80px);align-items:center}
.web-system-copy{color:#fff;position:relative;z-index:5}.light{color:#fff}.light-copy{color:rgba(255,255,255,.72)!important}
.web-shot-wall{height:min(72vh,720px);position:relative}
.web-shot{position:absolute;margin:0;overflow:hidden;border-radius:4px;box-shadow:0 30px 90px rgba(0,0,0,.42);transition:transform .38s var(--ease),filter .38s var(--ease),opacity .38s var(--ease);background:#fff}
.web-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.shot-products img{object-fit:contain;background:#fff}
.shot-products{left:0;top:3%;width:67%;height:auto;aspect-ratio:1.84/1;transform:rotate(-1.3deg)}
.shot-info{right:0;top:29%;width:62%;height:52%;transform:rotate(1.6deg)}
.shot-about{left:8%;bottom:0;width:58%;height:40%;transform:rotate(.4deg)}
.web-shot-wall:hover .web-shot{filter:brightness(.55);opacity:.62}.web-shot-wall .web-shot:hover{filter:none;opacity:1;transform:rotate(0) scale(1.035);z-index:8}
.web-responsive-layout{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(32px,5vw,90px);align-items:center}
.mobile-strip{height:min(76vh,760px);display:flex;align-items:center;justify-content:flex-end;gap:clamp(12px,1.7vw,28px)}
.mobile-shot{height:78%;width:min(17vw,250px);margin:0;overflow:hidden;border-radius:4px;background:#fff;box-shadow:0 26px 70px rgba(0,0,0,.18);transition:transform .35s var(--ease),opacity .35s var(--ease),filter .35s var(--ease)}
.mobile-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}.m1{transform:translateY(-5%)}.m2{transform:translateY(7%)}.m3{transform:translateY(-1%)}
.mobile-strip:hover .mobile-shot{opacity:.5;filter:grayscale(.25)}.mobile-strip .mobile-shot:hover{opacity:1;filter:none;transform:translateY(0) scale(1.055);z-index:5}
.web-outro-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(34px,5vw,90px);align-items:center}
.web-outro-visual{height:min(68vh,690px);position:relative}
.web-outro-main{position:absolute;inset:4% 8% 8% 0;margin:0;overflow:hidden;border-radius:4px;box-shadow:0 30px 90px rgba(0,0,0,.16);background:#111}
.web-outro-main img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;display:block}
.web-outro-phone{position:absolute;right:0;bottom:0;width:min(16vw,225px);height:72%;margin:0;overflow:hidden;border-radius:4px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.24);transform:rotate(2deg)}
.web-outro-phone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.dark-link{color:#111}.web-next{color:#111}
.web-progress .project-progress-fill{background:#CA1744}
@media(max-width:900px){.web-intro-grid,.web-system-layout,.web-responsive-layout,.web-outro-layout{grid-template-columns:1fr}.web-hero-shot{width:94%;margin-right:auto}.web-hero-mobile{width:28vw;right:-4%;bottom:-10%}.web-shot-wall{height:52vh}.mobile-strip{height:58vh;justify-content:center}.mobile-shot{width:29vw}.web-outro-visual{height:52vh}.web-outro-phone{width:30vw}.web-index{display:none}}



/* v0.20 — consistent Brand case corner radius */
#brand-intro .brand-logo-card,
#brand-type .type-card,
#brand-colours .colour-stack,
#brand-guide-preview .guide-sheet,
#brand-guide-preview .guide-focus img {
  border-radius:4px;
}
#brand-colours .colour-block:nth-child(1){border-radius:4px 0 0 0}
#brand-colours .colour-block:nth-child(2){border-radius:0 4px 0 0}
#brand-colours .colour-block:nth-child(3){border-radius:0 0 0 4px}
#brand-colours .colour-block:nth-child(4){border-radius:0 0 4px 0}

/* v0.34 local-file robustness */
img { max-width:100%; }
.brand-logo-card img { display:block; }

/* v0.35: every portfolio section uses the shared animated background stage */
.section[data-bg] {
  background: transparent !important;
}

/* v0.36 background-layer fix */
html { background:#173a30; }
.color-stage { will-change:background-color; }


/* v0.37 · Project-specific typography systems */

/* Enetpulse Brand + Website keep the Enetpulse identity fonts. */
.brand-view,
.web-view {
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
}

.brand-view .anton,
.web-view .anton,
.brand-view h1,
.brand-view h2,
.brand-view h3,
.web-view h1,
.web-view h2,
.web-view h3 {
  font-family:'Anton',Impact,sans-serif;
}

/* From DATA onward we deliberately leave the Enetpulse brand typography behind. */
.data-view,
#predictor-project,
#ai-project,
#fc-project,
#about {
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
}

.data-view .anton,
#predictor-project .anton,
#ai-project .anton,
#fc-project .anton,
#about .anton,
.data-view h1,
.data-view h2,
.data-view h3,
#predictor-project h1,
#predictor-project h2,
#predictor-project h3,
#ai-project h1,
#ai-project h2,
#ai-project h3,
#fc-project h1,
#fc-project h2,
#fc-project h3,
#about h1,
#about h2,
#about h3 {
  font-family:'Domine',Georgia,serif;
  font-weight:600;
  text-transform:none;
  letter-spacing:-.025em;
}

/* DATA's large titles had Anton-specific uppercase geometry.
   Keep the scale, but let Domine behave like Domine. */
.data-view .data-title {
  font-family:'Domine',Georgia,serif;
  font-weight:600;
  text-transform:none;
  line-height:.94;
  letter-spacing:-.035em;
}

/* Small UI labels and metadata from DATA onward also use DM Sans. */
.data-view .eyebrow,
.data-view .meta,
.data-view .data-callout,
.data-view .data-ui-chip,
.data-view .data-index,
#predictor-project .eyebrow,
#predictor-project .meta,
#ai-project .eyebrow,
#ai-project .meta,
#fc-project .eyebrow,
#fc-project .meta,
#about .eyebrow,
#about .meta {
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
}

/* v0.38 · DATA headings use natural casing with Domine */
.data-view h1,
.data-view h2,
.data-view h3,
.data-view .data-title {
  text-transform:none !important;
}

/* v0.39 · DATA views 02 + 03 condensed into one process view */
.data-merged-layout{
  display:grid;
  grid-template-columns:minmax(270px,.78fr) minmax(0,1.52fr);
  gap:clamp(28px,4vw,72px);
  align-items:center;
}
.data-merged-copy{max-width:520px}
.data-merged-stage{
  position:relative;
  min-height:min(68vh,690px);
}
.data-merged-board{
  position:absolute;
  inset:0 8% 13% 0;
  margin:0;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 28px 70px rgba(0,0,0,.18);
}
.data-merged-board img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform 7s ease;
}
.data-merged-stage:hover .data-merged-board img{transform:scale(1.035)}
.data-merged-ui{
  position:absolute;
  width:48%;
  right:0;
  bottom:0;
  margin:0;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.data-merged-ui img{display:block;width:100%;height:auto}
.data-merged-detail{
  position:absolute;
  width:26%;
  right:7%;
  top:4%;
  margin:0;
  overflow:hidden;
  border-radius:4px;
  box-shadow:0 18px 42px rgba(0,0,0,.22);
}
.data-merged-detail img{display:block;width:100%;height:auto}
@media(max-width:900px){
  .data-merged-layout{grid-template-columns:1fr}
  .data-merged-stage{min-height:560px}
}

/* v0.41 · WEB ends on the responsive view */
.web-live-link{
  display:inline-flex;
  align-items:center;
  width:max-content;
  margin-top:18px;
  font-family:'Poppins',ui-sans-serif,system-ui,sans-serif;
  font-size:13px;
  font-weight:600;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:opacity .2s ease;
}
.web-live-link:hover{opacity:.58}

/* v0.42 · WEB intro: mobile screenshot stays still */
.web-view:first-of-type .web-mobile-shot,
.web-view:first-of-type .web-mobile-overlay,
.web-view:first-of-type .web-hero-mobile,
.web-view:first-of-type .mobile-shot,
.web-view:first-of-type .phone-overlay {
  transform:none !important;
  transition:none !important;
}

/* DATA view 02: continuous slow breathing zoom, no hover required */
.data-merged-board img {
  animation:dataBoardBreath 14s ease-in-out infinite alternate;
  transform-origin:center center;
  transition:none !important;
}
.data-merged-stage:hover .data-merged-board img {
  transform:none;
}
@keyframes dataBoardBreath {
  0%   { transform:scale(1); }
  100% { transform:scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .data-merged-board img { animation:none; }
}

/* v0.43 · DATA view 02: stronger continuous zoom + pan */
.data-merged-board img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  animation:dataBoardExplore 22s cubic-bezier(.45,.05,.55,.95) infinite;
  transform-origin:center center;
  will-change:transform;
  transition:none !important;
}
.data-merged-stage:hover .data-merged-board img {
  transform:none;
}
@keyframes dataBoardExplore {
  0% {
    transform:scale(1) translate3d(0,0,0);
  }
  22% {
    transform:scale(1.16) translate3d(-3%,2%,0);
  }
  48% {
    transform:scale(1.28) translate3d(7%,-4%,0);
  }
  72% {
    transform:scale(1.22) translate3d(-6%,-2%,0);
  }
  88% {
    transform:scale(1.10) translate3d(2%,1%,0);
  }
  100% {
    transform:scale(1) translate3d(0,0,0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .data-merged-board img {
    animation:none !important;
    transform:none !important;
  }
}

/* v0.44 · Unified small keyword/info labels
   One visual language everywhere: compact rectangular labels, 4px radius. */
.data-callout,
.data-ui-chip,
.web-meta-chip,
.meta-chip,
.project-chip,
.project-tag {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:9px 12px;
  border:1px solid currentColor;
  border-radius:4px !important;
  background:transparent;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:none !important;
}

/* DATA had a rounded pill before. Keep the content, remove the pill look. */
.data-callout {
  border-radius:4px !important;
}

/* Any existing decorative pseudo-elements on these labels are suppressed. */
.data-callout::before,
.data-callout::after,
.data-ui-chip::before,
.data-ui-chip::after,
.web-meta-chip::before,
.web-meta-chip::after,
.meta-chip::before,
.meta-chip::after,
.project-chip::before,
.project-chip::after,
.project-tag::before,
.project-tag::after {
  content:none !important;
}

/* v0.45 · WORLD CUP 2026 PREDICTOR */
.predictor-view{
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
  overflow:hidden;
}
.predictor-view .eyebrow,
.predictor-view .meta,
.predictor-view .lead,
.predictor-view .data-callout{
  font-family:'DM Sans',ui-sans-serif,system-ui,sans-serif;
}
.predictor-title{
  font-family:'Domine',Georgia,serif;
  font-weight:600;
  text-transform:none;
  letter-spacing:-.04em;
  line-height:.92;
  font-size:clamp(58px,7.5vw,124px);
  margin:14px 0 28px;
}
.predictor-hero{color:#fff8ed;position:relative}
.predictor-world-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.predictor-shape{position:absolute;display:block;filter:saturate(.9);opacity:.9}
.predictor-shape-a{
  width:52vw;height:52vw;left:-18vw;top:-19vw;border-radius:44% 56% 62% 38% / 56% 39% 61% 44%;
  background:#9f2635;transform:rotate(14deg);
  animation:predictorFloatA 18s ease-in-out infinite alternate;
}
.predictor-shape-b{
  width:46vw;height:40vw;right:-15vw;top:3vh;border-radius:62% 38% 43% 57% / 38% 61% 39% 62%;
  background:#1c6570;transform:rotate(-13deg);
  animation:predictorFloatB 20s ease-in-out infinite alternate;
}
.predictor-shape-c{
  width:43vw;height:32vw;left:38vw;bottom:-18vw;border-radius:38% 62% 57% 43% / 63% 39% 61% 37%;
  background:#b87535;transform:rotate(8deg);
  animation:predictorFloatC 22s ease-in-out infinite alternate;
}
.predictor-26{
  position:absolute;right:-.04em;bottom:-.23em;
  font-family:'Domine',Georgia,serif;font-size:min(52vw,690px);line-height:.8;font-weight:700;
  color:transparent;-webkit-text-stroke:1px rgba(255,248,237,.22);
  opacity:.8;
}
@keyframes predictorFloatA{to{transform:translate3d(3vw,2vh,0) rotate(19deg) scale(1.05)}}
@keyframes predictorFloatB{to{transform:translate3d(-2vw,3vh,0) rotate(-8deg) scale(1.04)}}
@keyframes predictorFloatC{to{transform:translate3d(-3vw,-2vh,0) rotate(13deg) scale(1.06)}}

.predictor-live-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(300px,.82fr) minmax(460px,1.18fr);
  gap:clamp(36px,6vw,100px);align-items:center;
}
.predictor-copy{max-width:610px}
.predictor-copy .lead{max-width:570px;color:rgba(255,248,237,.88)}
.predictor-try{
  margin-top:34px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:.7;
}

/* Interactive demo, intentionally based only on the supplied concept screens */
.predictor-demo-wrap{display:flex;justify-content:center;align-items:center}
.predictor-demo{
  width:min(620px,100%);
  background:#f7f7f5;color:#171717;border:1px solid rgba(0,0,0,.09);border-radius:4px;
  padding:22px;box-shadow:0 38px 90px rgba(0,0,0,.28);
}
.predictor-demo-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.predictor-demo-head strong{font-size:17px}
.predictor-demo-head small{display:block;margin-top:3px;font-size:11px;opacity:.48}
.predictor-demo-state{
  flex:0 0 auto;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  border:1px solid #cfcfcb;border-radius:4px;padding:7px 9px;
}
.predictor-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#ebebe8;padding:3px;margin-bottom:19px}
.predictor-tabs button{
  appearance:none;border:0;background:transparent;padding:9px 7px;font:600 11px 'DM Sans',sans-serif;cursor:pointer;color:#202020;
}
.predictor-tabs button.active{background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.06)}
.predictor-panel{display:none}
.predictor-panel.active{display:block}
.predictor-panel-label{font-size:13px;font-weight:700;margin-bottom:10px}
.predictor-ranks{display:grid;gap:7px}
.predictor-rank{position:relative}
.predictor-select{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid #d9d9d5;background:#fff;padding:10px 11px;border-radius:4px;
  font:500 12px 'DM Sans',sans-serif;cursor:pointer;text-align:left;
}
.predictor-select .rank-no{
  display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid #5ab448;color:#287c1e;
  border-radius:4px;font-size:10px;font-weight:700;margin-right:8px;
}
.predictor-select-main{display:flex;align-items:center;min-width:0}
.predictor-menu{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:10;
  background:#fff;border:1px solid #d1d1cc;border-radius:4px;padding:4px;
  box-shadow:0 15px 35px rgba(0,0,0,.16);
}
.predictor-rank.open .predictor-menu{display:block}
.predictor-option{
  width:100%;display:flex;align-items:center;gap:9px;border:0;background:transparent;
  padding:9px;border-radius:3px;font:500 12px 'DM Sans',sans-serif;cursor:pointer;text-align:left;
}
.predictor-option:hover{background:#f0f0ed}
.predictor-option:disabled{opacity:.28;cursor:not-allowed}
.predictor-available{margin-top:15px;padding-top:12px;border-top:1px dashed #d2d2cd}
.predictor-available>span{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;opacity:.55}
#predictorAvailable{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.predictor-pick{
  font-size:10px;border:1px solid #d4d4cf;background:#fff;border-radius:4px;padding:6px 8px;
}
.predictor-continue,.predictor-reset{
  width:100%;margin-top:16px;border:0;border-radius:4px;padding:11px 14px;
  background:#171717;color:#fff;font:600 11px 'DM Sans',sans-serif;cursor:pointer;
}
.predictor-continue:disabled{opacity:.18;cursor:not-allowed}
.predictor-bracket{display:grid;grid-template-columns:1fr 34px 1fr;gap:7px 4px;align-items:center;min-height:235px}
.predictor-bracket-team{
  border:1px solid #ddd;background:#fff;border-radius:4px;padding:10px;font-size:11px;
}
.predictor-bracket-line{height:1px;background:#c8c8c4}
.predictor-bracket-winner{grid-column:3;align-self:center;border-color:#7ebf73}
.predictor-summary{display:grid;gap:7px}
.predictor-summary-row{
  display:grid;grid-template-columns:94px 1fr;gap:12px;align-items:center;
  border-bottom:1px solid #e2e2de;padding:8px 2px;font-size:11px;
}
.predictor-summary-row span:first-child{font-weight:700;opacity:.5}
.predictor-champion{
  margin-top:10px;min-height:150px;border-radius:4px;padding:24px;
  display:grid;place-items:center;text-align:center;color:white;
  background:linear-gradient(145deg,#a63846,#c2705f 55%,#8f2437);
}
.predictor-champion strong{font-family:'Domine',Georgia,serif;font-size:25px}

.predictor-index{
  position:absolute;right:24px;bottom:18px;z-index:2;
  font:600 10px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.08em;opacity:.55;
}

/* Process view */
.predictor-process{color:#1e2523}
.predictor-process-grid{
  display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.48fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.predictor-process-copy{max-width:520px}
.predictor-process-copy .lead{font-size:clamp(16px,1.35vw,21px)}
.predictor-process-note{font-size:14px;line-height:1.65;opacity:.72;margin:22px 0}
.predictor-process-stage{position:relative;min-height:min(69vh,700px)}
.predictor-breakdown{
  position:absolute;inset:0 7% 7% 0;margin:0;border-radius:4px;overflow:hidden;
  background:#777;box-shadow:0 25px 65px rgba(36,29,20,.17);
}
.predictor-breakdown img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.predictor-mockups{
  position:absolute;right:0;bottom:0;width:46%;margin:0;border-radius:4px;overflow:hidden;
  box-shadow:0 22px 55px rgba(36,29,20,.25);background:#777;
}
.predictor-mockups img{display:block;width:100%;height:auto}

@media(max-width:900px){
  .predictor-live-grid,.predictor-process-grid{grid-template-columns:1fr}
  .predictor-world-bg{opacity:.75}
  .predictor-demo{width:100%}
  .predictor-process-stage{min-height:560px}
}
@media(prefers-reduced-motion:reduce){
  .predictor-shape{animation:none!important}
}

/* v0.46 · Predictor refinement */
.predictor-hero{
  background:#29207f !important;
}
.predictor-world-bg{
  background:
    linear-gradient(115deg, transparent 0 57%, rgba(92,75,214,.48) 57% 72%, transparent 72%),
    linear-gradient(162deg, rgba(75,55,185,.50) 0 18%, transparent 18% 100%),
    linear-gradient(24deg, transparent 0 67%, rgba(39,29,122,.72) 67% 100%),
    linear-gradient(135deg,#251b78 0%,#33258f 45%,#4d3bc1 100%);
}
.predictor-shape{
  border-radius:0 !important;
  filter:none !important;
  opacity:.42 !important;
}
.predictor-shape-a{
  width:70vw;height:18vw;left:-18vw;top:8vh;
  background:linear-gradient(90deg,transparent,rgba(119,96,236,.8),transparent);
  transform:rotate(-12deg);
  animation:predictorPurpleBandA 18s ease-in-out infinite alternate;
}
.predictor-shape-b{
  width:58vw;height:15vw;right:-15vw;top:35vh;
  background:linear-gradient(90deg,transparent,rgba(78,60,194,.85),transparent);
  transform:rotate(10deg);
  animation:predictorPurpleBandB 21s ease-in-out infinite alternate;
}
.predictor-shape-c{
  width:52vw;height:11vw;left:20vw;bottom:5vh;
  background:linear-gradient(90deg,transparent,rgba(140,116,244,.55),transparent);
  transform:rotate(-6deg);
  animation:predictorPurpleBandC 24s ease-in-out infinite alternate;
}
@keyframes predictorPurpleBandA{
  to{transform:translate3d(7vw,2vh,0) rotate(-8deg)}
}
@keyframes predictorPurpleBandB{
  to{transform:translate3d(-6vw,-2vh,0) rotate(6deg)}
}
@keyframes predictorPurpleBandC{
  to{transform:translate3d(5vw,-1vh,0) rotate(-10deg)}
}
.predictor-26{
  color:transparent;
  -webkit-text-stroke:1px rgba(224,216,255,.20);
}

/* Narrower, simpler live preview */
.predictor-live-grid{
  grid-template-columns:minmax(320px,1fr) minmax(340px,.78fr);
}
.predictor-demo-wrap{justify-content:center}
.predictor-demo{
  width:min(470px,100%);
  padding:20px;
}
.predictor-group-label{
  font-size:13px;font-weight:700;margin:4px 0 10px;
}

/* v0.47 · Predictor view 02: explore the Figma board automatically */
.predictor-breakdown img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transform-origin:center center;
  will-change:transform;
  animation:predictorBoardExplore 26s cubic-bezier(.45,.05,.55,.95) infinite;
}

@keyframes predictorBoardExplore{
  0%{
    transform:scale(1) translate3d(0,0,0);
  }
  16%{
    transform:scale(1.38) translate3d(12%,8%,0);
  }
  36%{
    transform:scale(1.52) translate3d(-9%,7%,0);
  }
  56%{
    transform:scale(1.46) translate3d(-13%,-8%,0);
  }
  74%{
    transform:scale(1.34) translate3d(8%,-12%,0);
  }
  88%{
    transform:scale(1.16) translate3d(3%,-4%,0);
  }
  100%{
    transform:scale(1) translate3d(0,0,0);
  }
}

@media(prefers-reduced-motion:reduce){
  .predictor-breakdown img{
    animation:none !important;
    transform:none !important;
  }
}

/* v0.48 · Purple 2026 atmosphere across both Predictor views */
.predictor-process.predictor-purple{
  color:#fff8ed;
  position:relative;
}
.predictor-process.predictor-purple .section-inner,
.predictor-process.predictor-purple .predictor-index{
  position:relative;
  z-index:1;
}
.predictor-process.predictor-purple .lead,
.predictor-process.predictor-purple .predictor-process-note{
  color:rgba(255,248,237,.86);
}
.predictor-process.predictor-purple .data-callout{
  color:#fff8ed;
  border-color:rgba(255,248,237,.55);
}
.predictor-process.predictor-purple .predictor-breakdown,
.predictor-process.predictor-purple .predictor-mockups{
  box-shadow:0 25px 65px rgba(10,5,45,.34);
}

/* v0.49 · User-supplied World Cup 2026 mark replaces the decorative 26 */
.predictor-wc-logo{
  position:absolute;
  right:-3vw;
  bottom:-8vh;
  width:min(37vw,560px);
  height:auto;
  opacity:.12;
  transform:rotate(-4deg);
  filter:brightness(0) invert(1);
  pointer-events:none;
  user-select:none;
}
.predictor-process .predictor-wc-logo{
  right:-1vw;
  bottom:-10vh;
  width:min(34vw,520px);
  opacity:.10;
  transform:rotate(3deg);
}
@media(max-width:900px){
  .predictor-wc-logo{
    width:min(65vw,430px);
    right:-12vw;
    opacity:.10;
  }
}

/* v0.50 · Predictor view 01 now shows the full concept together with the live demo */
.predictor-demo-wrap{
  position:relative;
  min-height:min(70vh,700px);
  display:block;
}
.predictor-hero-overview{
  position:absolute;
  width:min(92%,760px);
  right:2%;
  top:50%;
  transform:translateY(-50%);
  margin:0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 30px 75px rgba(10,5,45,.30);
  opacity:.92;
}
.predictor-hero-overview img{
  display:block;
  width:100%;
  height:auto;
}
.predictor-demo{
  position:absolute;
  z-index:2;
  width:min(390px,58%);
  left:-3%;
  bottom:3%;
  box-shadow:0 30px 75px rgba(10,5,45,.38);
}
@media(max-width:1100px){
  .predictor-demo{left:0;width:min(360px,60%)}
  .predictor-hero-overview{right:0;width:90%}
}
@media(max-width:900px){
  .predictor-demo-wrap{min-height:620px}
  .predictor-hero-overview{width:100%;top:10%;transform:none}
  .predictor-demo{width:min(390px,82%);left:5%;bottom:0}
}

/* v0.51 · Predictor interactive rebuilt from supplied Figma reference states */
.predictor-demo-exact{
  width:min(420px,58%);
  left:-2%;
  bottom:2%;
  font-family:"DM Sans",Arial,sans-serif;
  color:#202020;
}
.predictor-demo-exact .pd-card{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:13px;
  padding:18px 15px 14px;
  box-shadow:0 28px 70px rgba(10,5,45,.34);
}
.pd-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.pd-head h3{margin:0;font:700 25px/1.15 "DM Sans",Arial,sans-serif;letter-spacing:-.5px}
.pd-group{display:grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#3654ff;color:#fff;font:500 20px/1 "DM Sans",Arial,sans-serif}
.pd-slots{display:grid;gap:13px}
.pd-slot-wrap{position:relative}
.pd-slot{
  width:100%;height:52px;box-sizing:border-box;border:1px solid #e7e7e7;border-radius:10px;background:#fafafa;
  display:flex;align-items:center;padding:0 16px 0 10px;cursor:pointer;font:400 20px/1 "DM Sans",Arial,sans-serif;color:#292929;
}
.pd-slot.active{background:#fff}
.pd-rank{width:31px;height:31px;display:grid;place-items:center;margin-right:11px;flex:0 0 auto;font-size:19px}
.pd-rank.done,.pd-rank.next{border:2px solid #0b8b0b;border-radius:6px}
.pd-team{display:flex;align-items:center;gap:8px;min-width:0}
.pd-flag{width:28px;height:28px;border:1px solid #ececec;border-radius:7px;display:grid;place-items:center;background:#fff;overflow:hidden;font-size:22px;line-height:1}
.pd-chevron{margin-left:auto;width:10px;height:10px;border-right:2px solid #111;border-bottom:2px solid #111;transform:rotate(45deg) translateY(-2px);transform-origin:center;transition:transform .15s}
.pd-slot.open .pd-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.pd-menu{
  position:absolute;z-index:20;left:4px;right:0;top:58px;background:#fff;border:1px solid #dedede;border-radius:11px;
  padding:7px;box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.pd-option{min-height:46px;display:flex;align-items:center;gap:8px;padding:0 7px;border-radius:7px;cursor:pointer;font-size:19px}
.pd-option:hover,.pd-option.focus{background:#d4d4d4}
.pd-option .pd-flag{width:29px;height:29px}
.pd-option-copy{display:flex;flex-direction:column}
.pd-swap{font-size:15px;color:#858585;margin-top:2px}
.pd-available{margin-top:20px}
.pd-available-title{font-size:17px;margin-bottom:8px}
.pd-rule{border-top:1px dashed #d2d2d2;margin-bottom:10px}
.pd-picks{display:flex;gap:9px;flex-wrap:wrap}
.pd-pick{height:28px;padding:0 9px 0 6px;border-radius:6px;background:#f7f7f7;display:flex;align-items:center;gap:6px;font-size:14px}
.pd-pick .pd-mini-flag{font-size:17px;line-height:1}
.pd-pick.used{opacity:.28}
@media(max-width:900px){
  .predictor-demo-exact{width:min(390px,82%);left:5%}
}

/* v0.52 · One metadata language across the entire portfolio */
.meta{gap:8px !important;opacity:1 !important}
.meta span{
  display:inline-flex;align-items:center;width:max-content;max-width:100%;
  padding:9px 12px;border:1px solid currentColor;border-radius:4px;
  background:transparent;font-size:11px;line-height:1;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;box-shadow:none;
}

/* Predictor: make the full overview a real piece of evidence, not background decoration */
.predictor-demo-wrap{min-height:min(78vh,790px)}
.predictor-hero-overview{
  width:min(112%,980px);right:-12%;top:49%;opacity:1;
  box-shadow:0 34px 90px rgba(10,5,45,.34);
}
.predictor-demo-exact{width:min(430px,56%);left:-4%;bottom:1%;z-index:4}
@media(max-width:1100px){
  .predictor-hero-overview{width:105%;right:-8%}
}
@media(max-width:900px){
  .predictor-demo-wrap{min-height:700px}
  .predictor-hero-overview{width:112%;right:-12%;top:8%}
}

/* AI case reconstructed from the supplied Figma Make screen recording */
.ai-case{color:#172033;overflow:hidden}
.ai-case-grid{display:grid;grid-template-columns:.68fr 1.32fr;gap:clamp(34px,4vw,70px);align-items:center}
.ai-case .eyebrow,.ai-case .lead,.ai-case .meta{font-family:'DM Sans',sans-serif}
.ai-title{font-family:'Domine',Georgia,serif;font-size:clamp(54px,6.4vw,106px);line-height:.94;letter-spacing:-.045em;margin:14px 0 26px;font-weight:600}
.ai-try{font:600 11px/1 'DM Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;margin-top:28px}
.ai-dashboard{display:grid;grid-template-columns:minmax(0,1fr) 205px;background:#f5f7fb;border-radius:12px;box-shadow:0 30px 80px rgba(20,30,55,.18);padding:14px;gap:14px;font-family:'DM Sans',sans-serif;min-height:570px}
.ai-preview-card,.ai-controls{background:#fff;border-radius:8px;box-shadow:0 5px 18px rgba(30,40,60,.08)}
.ai-preview-card{padding:16px;display:flex;flex-direction:column}
.ai-preview-head{display:flex;justify-content:space-between;font-size:12px;margin-bottom:14px}
.ai-preview-stage{position:relative;flex:1;min-height:390px;background:#eef1f3;border-radius:5px;display:grid;place-items:center;padding:28px 18px 58px;overflow:hidden}
.ai-sports-widget{width:75%;min-width:220px;max-width:100%;height:154px;background:#fff;border:2px dashed #59a7e9;border-radius:8px;box-shadow:0 12px 26px rgba(0,0,0,.16);transition:.22s ease;overflow:hidden;font-size:8px;color:#222}
.ai-widget-top{height:23px;padding:0 9px;display:flex;justify-content:space-between;align-items:center;color:#777;border-bottom:1px solid #eee}
.ai-match{height:94px;display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;text-align:center}
.ai-team{display:flex;flex-direction:column;align-items:center;gap:4px}.ai-team strong{font-size:9px}.ai-team small{font-size:7px;color:#1a9b37}
.ai-club{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:8px;font-weight:800}.ai-club-fck{background:#eaf0ff;color:#173d9b}.ai-club-mu{background:#fff1dc;color:#c31c18}
.ai-score{display:flex;flex-direction:column;align-items:center;gap:4px}.ai-score b{font-size:17px}.ai-score span,.ai-score small{background:#999;color:#fff;padding:2px 5px;border-radius:3px;font-size:6px}.ai-score small{background:#eee;color:#777}
.ai-widget-bottom{height:35px;border-top:1px solid #eee;display:flex;justify-content:center;gap:14px;align-items:center;color:#777}
.ai-bg-swatches{position:absolute;right:14px;bottom:14px;display:flex;gap:5px;background:#fff;padding:7px;border-radius:7px;box-shadow:0 5px 14px rgba(0,0,0,.13)}
.ai-bg-swatches button{width:20px;height:20px;border:1px solid #d7d7d7;border-radius:2px;background:var(--sw);cursor:pointer}.ai-bg-swatches button:nth-child(1){background:#fff}.ai-bg-swatches button:nth-child(2){background:#f4f5f7}.ai-bg-swatches button:nth-child(3){background:#eef1f3}.ai-bg-swatches button:nth-child(4){background:#25282d}.ai-bg-swatches button:nth-child(5){background:#171b25}.ai-bg-swatches button:nth-child(6){background:#090d18}.ai-bg-swatches button.active{outline:2px solid #388cf0;outline-offset:2px}
.ai-dimensions{display:flex;justify-content:center;gap:8px;margin-top:12px}.ai-dimensions span{font-size:8px;background:#f4f5f8;padding:6px 9px;border-radius:5px;color:#697080}
.ai-controls{padding:17px 14px;display:flex;flex-direction:column;gap:9px;font-size:9px}.ai-controls h3{font-size:13px;margin:0 0 5px}.ai-controls label{font-weight:700;color:#566070;margin-top:4px}.ai-controls select{height:31px;border:1px solid #d6dbe3;border-radius:5px;background:#fff;font-size:9px;padding:0 8px}.ai-controls input[type=range]{accent-color:#2672e8}
.ai-presets{display:grid;grid-template-columns:1fr 1fr;gap:6px}.ai-presets button{border:1px solid #e0e3e9;background:#f7f8fa;border-radius:6px;padding:8px 3px;font-size:9px;cursor:pointer}.ai-presets button:last-child{grid-column:1/2}.ai-presets small{display:block;color:#8a919c;margin-top:2px}
.ai-toggle{display:flex;justify-content:space-between;align-items:center;border:1px solid #cfd6e0;background:#f6f7fa;border-radius:6px;padding:9px;cursor:pointer;font-size:9px}.ai-toggle.on{border-color:#3c91e8;background:#e7f1ff}.ai-toggle b{color:#77808c}.ai-toggle.on b{color:#2878d7}
.ai-reset{border:0;border-radius:6px;background:#2467ed;color:#fff;padding:10px;font-weight:700;font-size:9px;cursor:pointer}
@media(max-width:1100px){.ai-case-grid{grid-template-columns:.58fr 1.42fr}.ai-dashboard{grid-template-columns:1fr 180px}}
@media(max-width:900px){.ai-case-grid{grid-template-columns:1fr}.ai-dashboard{grid-template-columns:1fr}.ai-controls{border-top:1px solid #eee}.ai-preview-stage{min-height:330px}}

.pd-flag img,.pd-mini-flag img{display:block;width:100%;height:100%;object-fit:cover}.pd-mini-flag{width:18px;height:18px;display:inline-block;border-radius:50%;overflow:hidden}

/* v0.53 · AI contrast correction + real club identities */
.ai-case{
  color:#172033 !important;
}
.ai-case .eyebrow,
.ai-case .lead,
.ai-case .meta,
.ai-case .ai-try,
.ai-case .ai-title{
  color:#172033 !important;
}
.ai-case .lead{opacity:.82}
.ai-case .eyebrow{opacity:.72}
.ai-case .meta span{color:#172033 !important;border-color:rgba(23,32,51,.38)}
.ai-case .ai-try{opacity:.78}

.ai-club-logo{
  width:34px;
  height:34px;
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.ai-club-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.ai-form{
  display:flex;
  gap:3px;
  align-items:center;
  justify-content:center;
  font-size:6px !important;
}
.ai-form span{
  width:11px;
  height:11px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-weight:700;
  line-height:1;
}
.ai-form .win{background:#dff5e4;color:#1e8d3a}
.ai-form .draw{background:#eceef2;color:#687080}
.ai-form .loss{background:#f8dddd;color:#b63838}

/* v0.54 · Compact handling for Manchester derby club names */
.ai-team strong{
  max-width:108px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* v0.55 · Premier League header with England flag */
.ai-league{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.ai-league img{
  width:12px;
  height:12px;
  object-fit:cover;
  border-radius:50%;
  display:block;
}

/* v0.56 · Every metadata / keyword is its own label */
.meta,
.keyword-label,
.project-label,
.case-label,
.detail-label,
.data-label,
.predictor-label{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}
.meta span,
.keyword-label span,
.project-label span,
.case-label span,
.detail-label span,
.data-label span,
.predictor-label span{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:9px 12px;
  border:1px solid currentColor;
  border-radius:4px;
  background:transparent;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:none;
}

/* v0.57 · Predictor hero composition */
.predictor-demo-wrap{
  min-height:min(80vh,820px);
}
.predictor-hero-overview{
  width:min(132%,1120px);
  max-width:none;
  right:-25%;
  top:46%;
  transform:translateY(-50%);
  opacity:1;
  z-index:1;
}
.predictor-demo-exact{
  width:min(430px,56%);
  left:-4%;
  bottom:auto;
  top:48%;
  transform:translateY(-50%);
  z-index:4;
}
@media(max-width:1100px){
  .predictor-hero-overview{
    width:124%;
    right:-20%;
    top:46%;
  }
  .predictor-demo-exact{
    top:49%;
    left:-1%;
  }
}
@media(max-width:900px){
  .predictor-demo-wrap{min-height:760px}
  .predictor-hero-overview{
    width:125%;
    right:-18%;
    top:7%;
    transform:none;
  }
  .predictor-demo-exact{
    width:min(390px,82%);
    left:5%;
    top:auto;
    bottom:5%;
    transform:none;
  }
}

/* v0.58 · Enetpulse FC, football editorial / kit launch */
.fc-view{
  position:relative;
  overflow:hidden;
  font-family:"DM Sans",sans-serif;
}
.fc-view .eyebrow,.fc-view .lead,.fc-view .meta{font-family:"DM Sans",sans-serif}
.fc-hero{color:#fff}
.fc-stripes{
  position:absolute;inset:0;pointer-events:none;opacity:.18;
  background:repeating-linear-gradient(105deg,transparent 0 8vw,rgba(0,0,0,.34) 8vw 14vw);
}
.fc-hero:after{
  content:"";position:absolute;inset:auto -10vw -26vh 34vw;height:72vh;
  background:#111;transform:rotate(-8deg);opacity:.94;pointer-events:none;
}
.fc-hero-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:.72fr 1.28fr;
  gap:clamp(28px,4vw,76px);align-items:center;
}
.fc-hero-copy{position:relative;z-index:4}
.fc-crest-logo{width:clamp(82px,7vw,125px);height:auto;margin:22px 0 20px;filter:drop-shadow(0 16px 24px rgba(0,0,0,.22))}
.fc-title{
  font-family:"Domine",Georgia,serif;font-size:clamp(62px,7.8vw,132px);
  line-height:.9;letter-spacing:-.055em;margin:0 0 28px;font-weight:600;
}
.fc-lead{max-width:520px;color:#fff!important;opacity:.88}
.fc-hero .meta span{color:#fff;border-color:rgba(255,255,255,.62)}
.fc-shirt-stage{position:relative;z-index:3;height:min(78vh,820px);display:grid;place-items:center}
.fc-shirt-img{
  position:relative;z-index:3;width:min(108%,970px);max-width:none;height:auto;
  filter:drop-shadow(0 42px 55px rgba(0,0,0,.35));
  transform:rotate(1.5deg);
}
.fc-giant-type{
  position:absolute;z-index:1;right:-4vw;top:44%;transform:translateY(-50%);
  font:800 clamp(260px,31vw,590px)/.7 "DM Sans",sans-serif;letter-spacing:-.12em;
  color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.17);white-space:nowrap;
}
.fc-kit-note{
  position:absolute;z-index:5;right:2%;bottom:7%;font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.55);
  padding-top:9px;
}

/* second FC view */
.fc-process{color:#f3eee9}
.fc-process:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.23;
  background:linear-gradient(115deg,transparent 0 54%,#a9151d 54% 72%,transparent 72%);
}
.fc-process-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:.68fr 1.32fr;
  gap:clamp(34px,5vw,88px);align-items:center;
}
.fc-process-title{
  font-family:"Domine",Georgia,serif;font-size:clamp(55px,6.5vw,108px);
  line-height:.93;letter-spacing:-.05em;margin:16px 0 26px;font-weight:600;
}
.fc-process-copy .lead{color:#f3eee9!important;opacity:.78;max-width:540px}
.fc-result{max-width:520px;font-size:15px;line-height:1.65;color:#aaa;margin:18px 0 26px}
.fc-process .meta span{color:#f3eee9;border-color:rgba(243,238,233,.42)}
.fc-process-visuals{position:relative;height:min(76vh,760px)}
.fc-sketch-card,.fc-detail-card{
  position:absolute;margin:0;background:#eee;padding:8px 8px 30px;
  box-shadow:0 30px 75px rgba(0,0,0,.42);border-radius:2px;overflow:hidden;
}
.fc-sketch-card{width:72%;left:0;top:3%;transform:rotate(-2.5deg);z-index:1}
.fc-detail-card{width:55%;right:0;bottom:2%;transform:rotate(2.2deg);z-index:3}
.fc-sketch-card img,.fc-detail-card img{display:block;width:100%;height:auto}
.fc-sketch-card figcaption,.fc-detail-card figcaption{
  color:#191919;font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;padding:9px 4px 0;
}
.fc-floating-crest{
  position:absolute;width:clamp(100px,11vw,180px);right:9%;top:3%;z-index:5;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.48));transform:rotate(5deg);
}
@media(max-width:1050px){
  .fc-hero-grid,.fc-process-grid{grid-template-columns:.8fr 1.2fr}
  .fc-shirt-img{width:118%}
}
@media(max-width:900px){
  .fc-hero-grid,.fc-process-grid{grid-template-columns:1fr}
  .fc-shirt-stage{height:54vh}
  .fc-shirt-img{width:min(105%,760px)}
  .fc-hero:after{inset:auto -20vw -20vh 0}
  .fc-process-visuals{height:620px}
}

/* v0.60 · FC polish: calmer motion, larger image hovers, no giant letterform */
.fc-giant-type{display:none !important}

/* Let the background stripes drift slowly */
.fc-stripes{
  background-size:140% 140%;
  animation:fcStripeDrift 18s ease-in-out infinite alternate;
}
.fc-process:before{
  animation:fcProcessDrift 20s ease-in-out infinite alternate;
}
@keyframes fcStripeDrift{
  0%{transform:translate3d(-2%,0,0) scale(1.02)}
  50%{transform:translate3d(2%,-1%,0) scale(1.05)}
  100%{transform:translate3d(-1%,1%,0) scale(1.03)}
}
@keyframes fcProcessDrift{
  0%{transform:translate3d(-2%,0,0) scale(1.02)}
  100%{transform:translate3d(3%,0,0) scale(1.06)}
}

/* Hover enlargement for the FC visuals */
.fc-shirt-img,
.fc-sketch-card,
.fc-detail-card{
  transition:transform .42s cubic-bezier(.2,.7,.2,1), box-shadow .42s ease;
  transform-origin:center center;
}
@media (hover:hover) and (pointer:fine){
  .fc-shirt-img:hover{
    transform:rotate(1.5deg) scale(1.06);
    z-index:8;
  }
  .fc-sketch-card:hover{
    transform:rotate(-1deg) scale(1.12);
    z-index:8;
    box-shadow:0 40px 95px rgba(0,0,0,.55);
  }
  .fc-detail-card:hover{
    transform:rotate(1deg) scale(1.12);
    z-index:9;
    box-shadow:0 40px 95px rgba(0,0,0,.55);
  }
}
@media (prefers-reduced-motion:reduce){
  .fc-stripes,
  .fc-process:before{animation:none}
  .fc-shirt-img,
  .fc-sketch-card,
  .fc-detail-card{transition:none}
}

/* v0.61 · Final keyword-label consistency fix */
.predictor-process .keyword-label,
.data-process .keyword-label,
.data-view .keyword-label,
.predictor-view .keyword-label{
  display:flex !important;
  flex-wrap:wrap;
  gap:8px !important;
  width:auto !important;
  border:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.predictor-process .keyword-label > span,
.data-process .keyword-label > span,
.data-view .keyword-label > span,
.predictor-view .keyword-label > span{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:9px 12px;
  border:1px solid currentColor;
  border-radius:4px;
  background:transparent;
  font-size:11px;
  line-height:1;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* v0.62 · Consistent next-project cue on the final view of every case */
.project-next{
  position:absolute;
  left:50%;
  bottom:clamp(28px,4vh,48px);
  transform:translateX(-50%);
  z-index:12;
  font-family:"DM Sans",sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:.62;
}
.web-view .project-next,
.data-view .project-next,
.predictor-view .project-next,
.fc-view .project-next,
.ai-case .project-next{
  color:currentColor;
}
@media(max-width:900px){
  .project-next{bottom:22px}
}

/* v0.63 · About closes the portfolio in the same green language it opens with */
.about-final{
  position:relative;overflow:hidden;color:#f4efe6;
  font-family:"DM Sans",sans-serif;
}
.about-final .eyebrow,.about-final .meta{font-family:"DM Sans",sans-serif}
.about-ambient{
  position:absolute;inset:-15%;pointer-events:none;opacity:.22;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.12), transparent 25%),
    radial-gradient(circle at 82% 70%, rgba(255,255,255,.07), transparent 28%);
  animation:aboutDrift 18s ease-in-out infinite alternate;
}
@keyframes aboutDrift{
  0%{transform:translate3d(-1%,0,0) scale(1)}
  100%{transform:translate3d(2%,-1%,0) scale(1.06)}
}
.about-grid{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(60px,8vw,150px);align-items:center;
}
.about-title{
  font-family:"Domine",Georgia,serif;font-size:clamp(58px,7.2vw,122px);
  line-height:.92;letter-spacing:-.055em;font-weight:600;margin:16px 0 32px;
  color:#f4efe6;
}
.about-copy{max-width:650px;font-size:clamp(16px,1.25vw,20px);line-height:1.62;color:rgba(244,239,230,.78)}
.about-copy p{margin:0 0 18px}
.about-info{display:flex;flex-direction:column;gap:42px}
.about-block{border-top:1px solid rgba(244,239,230,.26);padding-top:15px}
.about-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.52;margin-bottom:17px}
.about-tags{max-width:570px}
.about-final .meta span{color:#f4efe6;border-color:rgba(244,239,230,.5)}
.about-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.about-block strong{display:block;font:500 clamp(20px,2vw,30px)/1.2 "Domine",Georgia,serif}
.about-block p{margin:7px 0 0;color:rgba(244,239,230,.62);font-size:14px}
.about-contact p{font-size:16px}
.about-signoff{
  position:absolute;z-index:3;left:clamp(30px,5vw,90px);right:clamp(30px,5vw,90px);
  bottom:clamp(24px,4vh,45px);display:flex;justify-content:space-between;align-items:flex-end;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.62);
}
.about-krx{font-size:20px;font-weight:800;letter-spacing:-.04em;color:#f4efe6;text-transform:none}
@media(max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:55px;padding-bottom:100px}
  .about-pair{grid-template-columns:1fr}
  .about-info{gap:30px}
}
@media(prefers-reduced-motion:reduce){.about-ambient{animation:none}}

/* v0.64 · Locked opening/About palette only
   Hunter 2: #235240
   Amber:    #F4B400
   Sand:     #D9BE72
*/
#intro,
.about-final{
  color:#D9BE72 !important;
}
#intro h1,
#intro h2,
#intro .hero-title,
#intro .title,
.about-final .about-title,
.about-final h1,
.about-final h2{
  color:#F4B400 !important;
}
#intro p,
#intro .lead,
#intro .intro,
#intro .eyebrow,
.about-final .about-copy,
.about-final .about-copy p,
.about-final .about-block p,
.about-final .eyebrow,
.about-final .about-label,
.about-final .about-signoff{
  color:#D9BE72 !important;
}
.about-final .about-block strong,
.about-final .about-krx{
  color:#F4B400 !important;
}
.about-final .meta span{
  color:#D9BE72 !important;
  border-color:rgba(217,190,114,.58) !important;
}

/* v0.65 · Front/About palette adjustment */
#intro h1,#intro h2,#intro .hero-title,#intro .title,
.about-final .about-title,.about-final h1,.about-final h2,
.about-final .about-block strong,.about-final .about-krx{
  color:#FAFAFA !important;
}
#intro p,#intro .lead,#intro .intro,#intro .eyebrow,
.about-final .about-copy,.about-final .about-copy p,
.about-final .about-block p,.about-final .eyebrow,
.about-final .about-label,.about-final .about-signoff{
  color:#D9BE72 !important;
}

/* v0.65 · One keyword = one actual box. 
   Remove border/padding from the parent wrapper completely. */
.keyword-label{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  padding:0 !important;
  margin-left:0;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  font-size:0 !important;
  letter-spacing:0 !important;
}
.keyword-label > .keyword-chip{
  display:inline-flex !important;
  align-items:center;
  width:max-content !important;
  padding:9px 12px !important;
  border:1px solid currentColor !important;
  border-radius:4px !important;
  background:transparent !important;
  font-family:"DM Sans",sans-serif;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase;
  white-space:nowrap;
}

/* v0.66 · About contact links */
.about-contact-links{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
}
.about-contact-links a{
  color:#D9BE72;
  text-decoration:none;
  font-size:16px;
  line-height:1.35;
  border-bottom:1px solid rgba(217,190,114,.32);
  padding-bottom:3px;
  transition:border-color .2s ease, opacity .2s ease;
}
.about-contact-links a:hover{
  border-color:#D9BE72;
  opacity:.78;
}

/* v0.67 · KRX master logo in top navigation */
.nav .brand-logo{
  display:flex;
  align-items:center;
  width:auto;
  height:30px;
  padding:0;
}
.nav .brand-logo img{
  display:block;
  width:auto;
  height:24px;
  filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(103%) contrast(96%);
  transition:filter .45s ease, opacity .2s ease, transform .2s ease;
}
.nav .brand-logo:hover img{
  opacity:.78;
  transform:scale(1.025);
}

/* On the locked green intro/About palette the logo uses Snow */
body:has(#intro.is-active) .nav .brand-logo img,
body:has(.about-final.is-active) .nav .brand-logo img{
  filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(103%) contrast(96%);
}

/* v0.68 · HARD FIX: Data/Predictor keyword groups
   Parent has ZERO visual box. Every direct keyword-chip gets its own box. */
.data-callout{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  width:auto !important;
  max-width:100% !important;
  margin-top:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  font-size:0 !important;
  letter-spacing:0 !important;
}
.data-callout::before,
.data-callout::after{
  display:none !important;
  content:none !important;
}
.data-callout > .keyword-chip{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:9px 12px !important;
  margin:0 !important;
  border:1px solid currentColor !important;
  border-radius:4px !important;
  background:transparent !important;
  box-shadow:none !important;
  font-family:"DM Sans",sans-serif !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
.data-view .data-callout > .keyword-chip{
  color:#fff8ed !important;
  border-color:rgba(255,248,237,.72) !important;
}
.predictor-view .data-callout > .keyword-chip{
  color:#fff8ed !important;
  border-color:rgba(255,248,237,.62) !important;
}

/* v0.68 · KRX master logo in About signoff */
.about-krx-logo{
  display:flex;
  align-items:center;
  height:28px;
}
.about-krx-logo img{
  display:block;
  width:auto;
  height:25px;
  filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(103%) contrast(96%);
}

/* v0.69 · Intro copy now introduces Søren and the work ahead */
#intro p{
  max-width:680px;
}
#intro p:first-of-type{
  font-size:clamp(18px,1.55vw,24px);
  line-height:1.45;
  color:#D9BE72 !important;
}
#intro p:last-of-type{
  opacity:.72;
}

/* v0.70 · Brand colours: three-colour interactive palette */
#brand-colours{
  --colour-bg:#FFFFFF;
  --colour-head:#000000;
  --colour-body:#000000;
  background:var(--colour-bg) !important;
  transition:background-color .38s ease,color .38s ease;
}
#brand-colours .colour-stage,
#brand-colours .reveal,
#brand-colours .colour-stack{
  position:relative;
  z-index:2;
}
#brand-colours .anton.outline{
  color:transparent !important;
  -webkit-text-stroke:2px var(--colour-head) !important;
  text-stroke:2px var(--colour-head) !important;
  transition:-webkit-text-stroke-color .38s ease;
}
#brand-colours .brand-copy,
#brand-colours .eyebrow,
#brand-colours .brand-index{
  color:var(--colour-body) !important;
  transition:color .38s ease;
}
#brand-colours .colour-stack{
  grid-template-columns:repeat(3,1fr) !important;
}
#brand-colours .colour-block{
  cursor:pointer;
}

/* v0.71 · Brand colour tiles: three equal squares + hover hint */
#brand-colours .colour-stack{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:14px !important;
  align-items:start !important;
}
#brand-colours .colour-block{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  height:auto !important;
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  padding:26px 28px !important;
  margin:0 !important;
  border-radius:0 !important;
}
#brand-colours .colour-block strong{
  font-size:clamp(36px,4vw,66px) !important;
  line-height:.95 !important;
}
#brand-colours .colour-block span{
  font-size:12px !important;
  line-height:1 !important;
}
#brand-colours .colour-hover-hint{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:6px;
  font-family:"DM Sans",sans-serif;
  font-size:10px;
  line-height:1;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--colour-body);
  opacity:.58;
  transition:color .38s ease;
}
@media(max-width:900px){
  #brand-colours .colour-stack{
    grid-template-columns:1fr !important;
  }
  #brand-colours .colour-block{
    max-width:420px;
    justify-self:center;
  }
}

/* v0.72 · Brand colour tiles stand alone, larger and centered */
#brand-colours .colour-stack{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(220px, 1fr)) !important;
  gap:20px !important;
  width:min(900px, 92%) !important;
  max-width:none !important;
  margin:0 auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  align-self:center !important;
  justify-self:center !important;
}
#brand-colours .colour-stack::before,
#brand-colours .colour-stack::after{
  content:none !important;
  display:none !important;
}
#brand-colours .colour-block{
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-width:0 !important;
  max-width:none !important;
  padding:32px !important;
  box-shadow:0 18px 45px rgba(0,0,0,.08) !important;
}
#brand-colours .colour-hover-hint{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:10px;
}
#brand-colours .colour-stage{
  grid-template-columns:minmax(360px,.85fr) minmax(620px,1.15fr) !important;
  gap:clamp(60px,7vw,120px) !important;
  align-items:center !important;
}
@media(max-width:1200px){
  #brand-colours .colour-stack{
    width:min(760px, 96%) !important;
    grid-template-columns:repeat(3, minmax(180px,1fr)) !important;
  }
}
@media(max-width:900px){
  #brand-colours .colour-stage{
    grid-template-columns:1fr !important;
  }
  #brand-colours .colour-stack{
    grid-template-columns:1fr !important;
    width:min(420px,92%) !important;
  }
}

/* v0.73 · Align Brand colour tiles with the bottom of "COLOURS." */
#brand-colours .colour-stack{
  transform:translateY(108px) !important;
}
@media(max-width:1200px){
  #brand-colours .colour-stack{
    transform:translateY(90px) !important;
  }
}
@media(max-width:900px){
  #brand-colours .colour-stack{
    transform:none !important;
  }
}

/* v0.74 · Brand Guide previews: remove legacy wrapper/card treatment */
#brand-guide .guide-thumb,
#brand-guide .guide-page,
#brand-guide .guide-preview,
#brand-guide [class*="guide-thumb"],
#brand-guide [class*="guide-card"]{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
}
#brand-guide .guide-thumb{
  padding:0 !important;
  margin:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
}
#brand-guide .guide-thumb img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  border:0 !important;
  box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
  border-radius:4px !important;
}

/* v0.76 · The Guide: actual page previews only, no square wrapper underneath */
#brand-guide-preview .guide-book{
  align-items:center !important;
}
#brand-guide-preview .guide-sheet,
#brand-guide-preview .guide-sheet:nth-child(n){
  aspect-ratio:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#brand-guide-preview .guide-sheet img{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
  background:none !important;
  border-radius:4px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.18) !important;
}

/* v0.78 · Portfolio-wide capability taxonomy */
.taxonomy-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
  margin-top:24px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.taxonomy-tags > span{
  display:inline-flex !important;
  align-items:center !important;
  width:max-content !important;
  max-width:100% !important;
  padding:8px 11px !important;
  margin:0 !important;
  border:1px solid currentColor !important;
  border-radius:4px !important;
  background:transparent !important;
  font-family:"DM Sans","Poppins",sans-serif !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}

/* v0.81 · Predictor overview screenshot focus on hover
   Corrected selector: the actual element is .predictor-hero-overview. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  #predictor-project .predictor-hero-overview{
    cursor: zoom-in;
    transition:
      transform 520ms cubic-bezier(.2,.75,.2,1),
      opacity 320ms ease,
      box-shadow 320ms ease,
      z-index 0s linear 0s !important;
    transform-origin:center center !important;
  }

  #predictor-project .predictor-hero-overview:hover{
    z-index:30 !important;
    transform:translateY(-50%) scale(1.22) !important;
    opacity:1 !important;
    box-shadow:0 34px 90px rgba(10,5,45,.48) !important;
  }

  #predictor-project .predictor-demo-wrap:has(.predictor-hero-overview:hover) .predictor-demo-exact{
    opacity:.12 !important;
    transform:translateY(-50%) scale(.95) !important;
    pointer-events:none;
    transition:opacity 280ms ease, transform 420ms ease !important;
  }
}