@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-Hairline.woff2') format('woff2');
  font-weight:100;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-Thin.woff2') format('woff2');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-SemiBold.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-Bold.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-ExtraBold.woff2') format('woff2');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-Black.woff2') format('woff2');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Zona Pro';
  src:url('../fonts/ZonaPro-Ultra.woff2') format('woff2');
  font-weight:950;
  font-style:normal;
  font-display:swap;
}

:root{
    /* deep blue-violet base — the "night" of the palette */
    --navy-deep:#06061A;
    --navy-base:#0A0A22;
    --surface:#12122E;
    --surface-2:#181838;

    /* copper gold, luminous rather than dark */
    --accent:#E8B071;          /* bright copper gold — primary UI accent */
    --accent-hi:#F7D6A8;       /* highlight / hover */
    --copper-deep:#C07A3C;

    /* violet, kept refined */
    --violet:#9B84E8;
    --violet-deep:#6B57B8;

    --text-primary:#EFE9E1;    /* warm off-white reads richer than pure white */
    --text-muted:#918CAB;
    --ease-cine:cubic-bezier(0.16,1,0.3,1);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy-deep); color:var(--text-primary);
    font-family:'Zona Pro',sans-serif; font-weight:400; cursor:none;
    overflow-x:hidden;
  }
  h1,h2,h3{font-family:'Zona Pro',sans-serif;font-weight:950;letter-spacing:-0.015em;line-height:1.02;}
  p{font-weight:400;line-height:1.7;color:var(--text-muted);}
  .lead{font-weight:200;font-size:19px;line-height:1.62;}
  .fine{font-weight:400;font-size:14.5px;line-height:1.75;color:rgba(145,140,171,0.92);}
  .eyebrow{font-weight:700;font-size:12px;letter-spacing:0.22em;color:var(--accent);text-transform:uppercase;}
  .grad-text{background:linear-gradient(90deg,var(--accent-hi),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}

  /* ---------- faint code running behind the whole page ---------- */
  .code-rain{
    position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent,black 12%,black 88%,transparent);
    mask-image:linear-gradient(180deg,transparent,black 12%,black 88%,transparent);
  }
  .code-col{
    position:absolute;top:-45%;
    font-family:ui-monospace,monospace;font-size:11px;line-height:1.75;
    color:rgba(232,176,113,0.05);white-space:pre;letter-spacing:.06em;
    animation:fall linear infinite;
  }
  @keyframes fall{from{transform:translateY(0);}to{transform:translateY(150%);}}

  /* ---------- globe canvas: fixed background layer ---------- */
  #globeCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease-cine);}
  #globeCanvas.ready{opacity:1;}
  .vignette{
    position:fixed;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(ellipse 75% 65% at 62% 50%, transparent 40%, rgba(4,6,14,0.55) 100%);
  }
  /* darkening panel behind the text column so copy stays readable over the globe */
  .text-scrim{
    position:fixed;left:0;top:0;bottom:0;width:52vw;z-index:1;pointer-events:none;
    background:linear-gradient(90deg, rgba(4,6,14,0.92) 0%, rgba(4,6,14,0.75) 45%, transparent 100%);
  }

  /* ---------- cursor ---------- */
  .cursor-dot{position:fixed;top:0;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 12px 3px rgba(232,176,113,.5);pointer-events:none;z-index:200;transform:translate(-50%,-50%);}
  .cursor-ring{position:fixed;top:0;left:0;width:32px;height:32px;border-radius:50%;
    border:1px solid rgba(232,176,113,.42);pointer-events:none;z-index:200;transform:translate(-50%,-50%);
    transition:width .25s var(--ease-cine),height .25s var(--ease-cine),border-color .25s;}
  .cursor-ring.hovering{width:54px;height:54px;border-color:var(--accent);}

  /* ---------- fixed UI ---------- */
  /* ---------- 3D card menu ---------- */
  .menu-toggle{
    position:fixed; right:5vw; top:50%; transform:translateY(-50%);
    z-index:120; width:60px; height:60px; padding:0; border:none; background:none;
    cursor:none; -webkit-tap-highlight-color:transparent;
    display:flex; align-items:center; justify-content:center;
    opacity:0; animation:fade-up .8s var(--ease-cine) forwards 2.6s;
  }
  .menu-toggle .bars{
    display:flex; flex-direction:column; align-items:flex-end; gap:7px;
    transition:transform .5s var(--ease-cine);
  }
  .menu-toggle .bars i{
    display:block; height:3px; border-radius:2px; background:var(--accent);
    box-shadow:0 0 10px rgba(232,176,113,.35);
    transition:transform .5s var(--ease-cine), opacity .3s, width .4s var(--ease-cine);
  }
  .menu-toggle .bars i:nth-child(1){ width:30px; }
  .menu-toggle .bars i:nth-child(2){ width:22px; }
  .menu-toggle .bars i:nth-child(3){ width:30px; }
  .menu-toggle:hover .bars i:nth-child(2){ width:30px; }
  .menu-toggle[aria-expanded="true"] .bars i:nth-child(1){ width:30px; transform:translateY(10px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .bars i:nth-child(2){ opacity:0; transform:scaleX(.2); }
  .menu-toggle[aria-expanded="true"] .bars i:nth-child(3){ width:30px; transform:translateY(-10px) rotate(-45deg); }

  .menu-backdrop{
    position:fixed; inset:0; z-index:100; opacity:0; pointer-events:none;
    background:radial-gradient(ellipse at 78% 50%, rgba(6,6,26,.34), rgba(4,4,16,.62));
    backdrop-filter:blur(2.5px);
    transition:opacity .5s var(--ease-cine);
  }
  .menu-backdrop.open{ opacity:1; pointer-events:auto; }

  /* the stage supplies the perspective; the card is the object flying in it */
  .menu-stage{
    position:fixed; right:calc(5vw + 96px); top:50%; transform:translateY(-50%);
    z-index:110; perspective:1500px; perspective-origin:88% 50%; pointer-events:none;
  }
  .menu-card{
    position:relative; width:min(340px, 74vw);
    transform-style:preserve-3d;
    transform-origin:right center;
    /* closed: turned away, tucked back, as a page lying against the spine */
    transform:rotateY(-112deg) translateX(30px) translateZ(-50px) scale(.9);
    opacity:0; pointer-events:none;
    transition:transform .6s var(--ease-cine), opacity .4s var(--ease-cine);
  }
  .menu-card.open{
    opacity:1; pointer-events:auto;
    /* the turn overshoots slightly, settles back, then drifts: that is the "air" */
    animation:
      page-turn .95s cubic-bezier(.22,1,.28,1) forwards,
      card-float 7.5s ease-in-out 1.15s infinite;
  }
  @keyframes page-turn{
    0%  { transform:rotateY(-112deg) rotateZ(-2.5deg) translateX(30px) translateZ(-50px) scale(.9); opacity:0; }
    38% { opacity:1; }
    58% { transform:rotateY(9deg) rotateZ(1.2deg) translateX(-6px) translateZ(22px) scale(1.025); }
    78% { transform:rotateY(-3.6deg) rotateZ(-.5deg) translateX(2px) translateZ(6px) scale(.997); }
    91% { transform:rotateY(1.4deg) translateZ(0) scale(1.002); }
    100%{ transform:rotateY(0deg) rotateZ(0deg) translateX(0) translateZ(0) scale(1); opacity:1; }
  }
  @keyframes card-float{
    0%,100%{ transform:rotateY(0deg) rotateX(0deg) translateY(0); }
    33%    { transform:rotateY(-2.2deg) rotateX(1.2deg) translateY(-6px); }
    66%    { transform:rotateY(1.8deg) rotateX(-1deg) translateY(4px); }
  }
  /* a soft blurred double sitting behind the card, so it casts light shade on the page */
  .menu-card::before{
    content:''; position:absolute; inset:6px 4px;
    border-radius:24px; background:rgba(3,3,14,.5);
    filter:blur(22px); transform:translateZ(-26px) translateY(14px) scale(.97);
    opacity:0; transition:opacity .6s var(--ease-cine) .15s;
    pointer-events:none;
  }
  .menu-card.open::before{ opacity:.85; }
  .menu-face{
    position:relative; padding:30px 30px 30px; border-radius:20px;
    background:linear-gradient(150deg, rgba(11,11,32,.965), rgba(6,6,24,.975));
    border:1px solid rgba(232,176,113,.22);
    box-shadow:
      0 18px 40px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.07);
    transform-style:preserve-3d;
  }
  /* thin lit strip along the hinge, so the card has visible thickness */
  .menu-edge{
    position:absolute; right:-3px; top:10px; bottom:10px; width:6px; border-radius:3px;
    background:linear-gradient(180deg, rgba(232,176,113,.5), rgba(155,132,232,.35));
    transform:rotateY(90deg) translateZ(3px);
    opacity:.55;
  }
  .nav-coords{ display:flex; flex-direction:column; gap:13px; }
  .nav-coords .item{
    display:flex; align-items:center; gap:14px; cursor:none;
    font-weight:950; font-size:26px; letter-spacing:-0.01em; text-transform:uppercase;
    color:rgba(145,140,171,.55);
    /* each row starts pushed back in Z and lifts into place when the card opens */
    transform:translateZ(-60px) translateX(26px) rotateX(28deg);
    opacity:0;
    transition:color .3s var(--ease-cine), transform .6s var(--ease-cine), opacity .5s var(--ease-cine);
  }
  .menu-card.open .nav-coords .item{ transform:none; opacity:1; }
  .menu-card.open .nav-coords .item:nth-child(1){ transition-delay:.30s; }
  .menu-card.open .nav-coords .item:nth-child(2){ transition-delay:.36s; }
  .menu-card.open .nav-coords .item:nth-child(3){ transition-delay:.42s; }
  .menu-card.open .nav-coords .item:nth-child(4){ transition-delay:.48s; }
  .menu-card.open .nav-coords .item:nth-child(5){ transition-delay:.54s; }
  .menu-card.open .nav-coords .item:nth-child(6){ transition-delay:.60s; }
  .nav-coords .item:hover{ color:rgba(239,233,225,.9); }
  .nav-coords .item .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
  .nav-coords .item.active{ color:rgba(239,233,225,.92); }
  .nav-coords .item.active .dot{ background:var(--accent); box-shadow:0 0 10px rgba(232,176,113,.6); }

  @media(max-width:600px){
    .menu-toggle{ width:58px; height:58px; }
    .menu-stage{ right:calc(5vw + 78px); perspective:1100px; }
    .nav-coords .item{ font-size:22px; }
    .menu-face{ padding:26px 24px 26px; }
  }

  .progress-rail{position:fixed;left:5vw;top:0;bottom:0;width:1px;z-index:50;background:rgba(232,176,113,.10);}
  .progress-fill{position:absolute;left:0;top:0;width:100%;height:0%;background:linear-gradient(180deg,var(--accent),var(--violet));}
  @media(max-width:1000px){.progress-rail{display:none;}}

  section{position:relative;z-index:5;}
  @keyframes fade-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
  @keyframes line-up{to{transform:translateY(0);}}

  /* ---------- 01 HERO ---------- */
  .ncbcin-hero, #hero{min-height:100vh;display:flex;align-items:center;padding:0 8vw;}
  .hero-content{max-width:640px;}
  .hero-content .eyebrow{opacity:0;margin-bottom:22px;animation:fade-up .8s var(--ease-cine) forwards 1.4s;}
  /* real heading kept in the DOM for search engines and screen readers */
  .headline-sr{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .title-3d{
    width:min(620px, 46vw);
    height:min(300px, 23vw);
    margin-left:-2.2%;          /* optical alignment: bevel adds visual padding */
    pointer-events:none;
  }
  .title-3d canvas{width:100%;height:100%;display:block;}
  @media(max-width:1000px){
    .title-3d{width:min(560px,88vw);height:min(270px,42vw);}
  }
  .headline{font-size:clamp(44px,6.6vw,96px);overflow:hidden;}
  .headline .line{display:block;overflow:hidden;}
  .headline .line span{display:block;transform:translateY(110%);animation:line-up .9s var(--ease-cine) forwards;}
  .headline .line:nth-child(1) span{animation-delay:1.7s;}
  .headline .line:nth-child(2) span{animation-delay:1.82s;}
  .hero-content .subline{margin-top:26px;max-width:540px;opacity:0;animation:fade-up .8s var(--ease-cine) forwards 2.2s;}
  .cta-wrap{margin-top:44px;opacity:0;animation:fade-up .8s var(--ease-cine) forwards 2.4s;}
  .cta{display:inline-flex;align-items:center;gap:10px;font-family:'Zona Pro',sans-serif;font-weight:700;
    font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-deep);background:var(--text-primary);
    padding:15px 28px;border-radius:999px;cursor:none;border:none;
    transition:transform .25s var(--ease-cine),background .25s var(--ease-cine);}
  .cta:hover{background:var(--accent);}
  .scroll-cue{position:absolute;left:8vw;bottom:6vh;z-index:6;display:flex;align-items:center;gap:10px;
    font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
    opacity:0;animation:fade-up .8s var(--ease-cine) forwards 2.8s;}
  .scroll-cue .track{width:1px;height:34px;background:rgba(232,176,113,.18);position:relative;overflow:hidden;}
  .scroll-cue .track::after{content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;
    background:var(--accent);animation:drip 1.8s ease-in-out infinite;}
  @keyframes drip{0%{top:-100%;}60%{top:100%;}100%{top:100%;}}

  /* ---------- 02 ABOUT ---------- */
  .ncbcin-about, #about{min-height:100vh;display:flex;align-items:center;padding:16vh 8vw;}
  .about-inner{max-width:640px;}

  .about-inner p{max-width:520px;margin-bottom:18px;}
  .about-inner p.fine{max-width:500px;margin-top:2px;}
  .about-stats{display:flex;gap:48px;margin-top:42px;}
  .stat-num{font-weight:950;font-size:42px;color:var(--accent);line-height:1;}
  .stat-label{font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-top:8px;}
  .reveal{opacity:0;transform:translateY(30px);}

  /* ---------- 03 EXPERTISE ---------- */
  #expertise-pin{height:100vh;overflow:hidden;}   /* standalone prototype only */
  .exp-stage{
    position:relative; height:100vh; width:100%;
    display:flex; align-items:center; justify-content:center;
    perspective:1250px; perspective-origin:50% 50%;
  }
  .exp-intro{
    position:absolute; left:8vw; top:50%; transform:translateY(-50%);
    /* above the ring: the far cards drift behind the headline instead of over it */
    z-index:200; pointer-events:none;
  }
  .exp-intro h2{ font-size:clamp(32px,4.2vw,58px); max-width:640px; margin-top:20px; }

  .exp-carousel{
    position:relative; width:100%; height:340px;
    transform-style:preserve-3d;
  }
  .exp-card{
    position:absolute; left:50%; top:50%; width:340px; margin:0;
    /* JS owns the transform; the -50% centring is folded into it */
    background:rgba(14,14,38,.52); backdrop-filter:blur(14px);
    border:1px solid rgba(232,176,113,.14); border-radius:18px; padding:36px 30px;
    box-shadow:0 24px 50px rgba(0,0,0,.42);
    transition:border-color .35s;
    will-change:transform, opacity, filter;
  }
  .exp-card.is-front{ border-color:rgba(232,176,113,.34); }
  .exp-card .node-dot{ width:9px; height:9px; border-radius:50%; background:var(--accent); margin-bottom:24px; }
  .exp-card h3{ font-size:22px; margin-bottom:12px; }
  .exp-card p{ font-size:14px; }

  @media(max-width:900px){
    .exp-intro{ left:7vw; top:16vh; transform:none; }
    .exp-card{ width:min(78vw, 340px); padding:30px 26px; }
    .exp-carousel{ height:320px; }
  }

  /* ---------- CAPABILITIES : scroll-driven rolling list ---------- */
  #future{ position:relative; height:320vh; }   /* standalone prototype only */
  .cap-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; padding:0 8vw; }
  .cap-head{ position:absolute; left:8vw; top:14vh; z-index:5; }
  .cap-head .eyebrow{ margin-bottom:18px; }
  .cap-head h2{ font-size:clamp(32px,4.2vw,58px); line-height:1; }

  .cap-window{
    position:absolute; left:8vw; right:8vw; top:36vh; bottom:0;
    overflow:hidden;
    /* fades the rows out at both edges, so the list reads as a rolling drum */
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 16%, #000 74%, transparent);
    mask-image:linear-gradient(180deg, transparent, #000 16%, #000 74%, transparent);
  }
  .cap-list{ will-change:transform; }
  .cap-row{
    display:flex; align-items:baseline; gap:18px;
    height:64px; line-height:64px;
    font-family:'Zona Pro',sans-serif; font-weight:700;
    font-size:clamp(20px,2.6vw,38px); letter-spacing:-0.01em;
    color:rgba(145,140,171,.42);
    transition:color .3s var(--ease-cine), transform .35s var(--ease-cine), opacity .3s;
    white-space:nowrap;
  }
  .cap-row .idx{
    font-weight:400; font-size:11px; letter-spacing:.2em;
    color:rgba(145,140,171,.3); min-width:34px;
  }
  /* the row crossing the focus line steps forward */
  .cap-row.on{
    color:var(--accent-hi); font-weight:950;
    transform:translateX(16px);
  }
  .cap-row.on .idx{ color:var(--accent); }
  .cap-row.near{ color:rgba(239,233,225,.6); }

  @media(max-width:900px){
    #future{ height:280vh; }
    .cap-head{ top:11vh; }
    .cap-window{ top:32vh; }
    .cap-row{ height:52px; line-height:52px; }
  }

  /* ---------- 04 WORK ---------- */
  .ncbcin-work, #work{padding:18vh 8vw;}

  .project-card{
    position:relative; display:block; height:var(--ncbcin-card-h, 350px); border-radius:20px; margin-bottom:26px;
    background:linear-gradient(135deg,rgba(24,24,58,.80),rgba(12,12,34,.85));
    backdrop-filter:blur(12px);
    border:1px solid rgba(232,176,113,.11);
    overflow:hidden; cursor:none; text-decoration:none; color:inherit;
    transition:transform .45s var(--ease-cine), border-color .35s;
  }
  /* the lift is the one motion every card keeps, photo or not */
  .project-card:hover{ transform:translateY(-10px); border-color:rgba(232,176,113,.28); }

  /* light wash: only for cards without a photo */
  .project-card::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at 80% 20%,rgba(232,176,113,.13),transparent 55%);
    opacity:0; transition:opacity .5s var(--ease-cine);
  }
  .project-card:hover::before{ opacity:1; }
  .project-card.has-media::before{ display:none; }

  /* photo layer */
  .p-media{ position:absolute; inset:0; overflow:hidden; }
  .p-media img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .7s var(--ease-cine);
  }
  .project-card:hover .p-media img{ transform:scale(1.05); }
  /* keeps the copy readable over any photo */
  .p-media::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(6,6,24,.25) 0%, rgba(6,6,24,.55) 55%, rgba(6,6,24,.9) 100%);
  }

  .p-inner{ position:absolute; left:38px; right:38px; bottom:38px; z-index:2; }
  .p-eyebrow{ font-weight:700; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
  .project-card h3{ font-size:clamp(28px,3.2vw,44px); transition:transform .4s var(--ease-cine); }
  .p-desc{ font-size:15px; max-width:440px; margin-top:12px; max-height:0; opacity:0; overflow:hidden;
    transition:max-height .4s var(--ease-cine), opacity .4s var(--ease-cine); }
  .project-card:hover h3{ transform:translateX(10px); }
  .project-card:hover .p-desc{ max-height:70px; opacity:1; }
  .p-explore{ position:absolute; top:38px; right:38px; z-index:2; font-weight:700; font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); opacity:0; transform:translateX(-8px);
    transition:opacity .35s, transform .35s, color .35s; }
  .project-card:hover .p-explore{ opacity:1; transform:translateX(0); color:var(--accent); }

  @media(max-width:700px){
    .project-card{ height:300px; }
    .p-inner{ left:26px; right:26px; bottom:26px; }
    .p-explore{ top:26px; right:26px; }
  }

  /* ---------- 05 PROCESS ---------- */
  .ncbcin-process, #process{padding:18vh 8vw;}

  .timeline{position:relative;padding-left:46px;max-width:640px;}
  .timeline::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:1px;
    background:linear-gradient(180deg,var(--accent),var(--violet));opacity:.3;}
  .t-step{position:relative;padding-bottom:52px;}
  .t-step:last-child{padding-bottom:0;}
  .t-step::before{content:'';position:absolute;left:-46px;top:4px;width:11px;height:11px;border-radius:50%;
    background:var(--navy-deep);border:2px solid var(--accent);}
  .t-num{font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--accent);margin-bottom:8px;}
  .t-step h3{font-size:24px;margin-bottom:10px;}
  .t-step p{font-size:15px;max-width:470px;}

  /* ---------- 06 CONTACT ---------- */
  .ncbcin-contact, #contact{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:16vh 8vw;}

  .converge-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 24px 8px rgba(232,176,113,.28);margin:36px auto;}
  .contact-form{display:flex;flex-direction:column;gap:15px;width:100%;max-width:430px;}
  .contact-form input,.contact-form textarea{background:rgba(20,20,50,.72);border:1px solid rgba(232,176,113,.14);
    border-radius:10px;padding:15px 17px;color:var(--text-primary);font-family:'Zona Pro',sans-serif;
    font-weight:400;font-size:15px;outline:none;transition:border-color .25s;}
  .contact-form input::placeholder,.contact-form textarea::placeholder{color:var(--text-muted);font-weight:200;}
  .contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);}
  footer{margin-top:72px;font-size:12px;letter-spacing:.12em;color:var(--text-muted);}

  @media(max-width:1000px){
    body,.cta,.project-card{cursor:auto;}
    .cursor-dot,.cursor-ring{display:none;}
    .text-scrim{width:100vw;background:linear-gradient(180deg,rgba(4,6,14,.9),rgba(4,6,14,.8));}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;}
    .reveal{opacity:1!important;transform:none!important;}
    .headline .line span{transform:none;}
    .hero-content .eyebrow,.hero-content .subline,.cta-wrap,.scroll-cue,.menu-toggle{opacity:1;}
    .menu-card.open .nav-coords .item{opacity:1;transform:none;}
  }


/* ============================================================
   WordPress integration
   ============================================================ */
.screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; z-index:9999; width:auto; height:auto;
  clip:auto; padding:12px 18px; border-radius:8px;
  background:var(--accent); color:var(--navy-deep);
  font-family:'Zona Pro',sans-serif; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.ncbcin-sr-list{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.ncbcin-main{ position:relative; z-index:5; }

/* generic inner pages, posts and archives */
.ncbcin-page, .ncbcin-archive, .ncbcin-404{
  position:relative; z-index:5;
  padding:20vh 8vw 14vh; max-width:1100px;
}
.ncbcin-404{ text-align:center; }
.ncbcin-page-head h1{ font-size:clamp(34px,5vw,72px); margin-top:18px; }
.ncbcin-featured{ margin:42px 0; border-radius:18px; overflow:hidden; }
.ncbcin-featured img{ width:100%; height:auto; display:block; }
.ncbcin-entry{ max-width:720px; margin-top:32px; }
.ncbcin-entry p{ margin-bottom:18px; }
.ncbcin-entry a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(232,176,113,.35); }
.ncbcin-entry a:hover{ color:var(--accent-hi); }
.ncbcin-entry h2,.ncbcin-entry h3{ margin:32px 0 14px; }
.ncbcin-entry ul,.ncbcin-entry ol{ margin:0 0 18px 22px; color:var(--text-muted); }
.ncbcin-entry li{ margin-bottom:8px; }
.ncbcin-entry blockquote{
  margin:28px 0; padding:18px 24px;
  border-left:2px solid var(--accent); background:rgba(20,20,50,.5); border-radius:0 12px 12px 0;
}
.ncbcin-entry img{ max-width:100%; height:auto; border-radius:12px; }

.ncbcin-list-item{ padding:26px 0; border-bottom:1px solid rgba(232,176,113,.12); }
.ncbcin-list-item h2{ font-size:clamp(22px,2.6vw,34px); }
.ncbcin-list-item h2 a{ color:inherit; text-decoration:none; }
.ncbcin-list-item h2 a:hover{ color:var(--accent-hi); }
.ncbcin-list-item p{ margin-top:8px; }

.ncbcin-project-nav{
  display:flex; justify-content:space-between; gap:20px; margin-top:60px;
  padding-top:24px; border-top:1px solid rgba(232,176,113,.14);
  font-family:'Zona Pro',sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.2em; text-transform:uppercase;
}
.ncbcin-project-nav a{ color:var(--text-muted); text-decoration:none; }
.ncbcin-project-nav a:hover{ color:var(--accent); }

.pagination, .nav-links{
  display:flex; gap:12px; margin-top:48px;
  font-family:'Zona Pro',sans-serif; font-weight:700; font-size:13px;
}
.pagination a, .nav-links a{ color:var(--text-muted); text-decoration:none; }
.pagination .current, .nav-links .current{ color:var(--accent); }

.ncbcin-empty{
  padding:20px; border:1px dashed rgba(232,176,113,.3); border-radius:12px;
  color:var(--text-muted);
}

/* the flat-title fallback used when the 3D headline cannot render */
.headline-fallback{ font-size:clamp(44px,6.6vw,96px); line-height:1.02; }

/* Elementor editor: pinned sections cannot pin inside the editor canvas,
   so show the cards laid out instead of stacked on top of each other */
.elementor-editor-active .exp-card{
  position:relative; left:auto; top:auto;
  transform:none!important; opacity:1!important; filter:none!important;
  margin:0 0 20px;
}
.elementor-editor-active .exp-carousel{ height:auto; display:grid; gap:20px; }
.elementor-editor-active .exp-stage{ display:block; height:auto; padding:40px 0; }
.elementor-editor-active .cap-sticky{ position:relative; height:auto; }
.elementor-editor-active .cap-window{ position:relative; inset:auto; height:420px; margin-top:30px; }

/* first-run panel, visible only to administrators */
.ncbcin-setup{
  max-width:720px; margin-bottom:60px; padding:34px 32px;
  background:rgba(20,20,50,.62); backdrop-filter:blur(12px);
  border:1px solid rgba(232,176,113,.2); border-radius:18px;
}
.ncbcin-setup h1{ font-size:clamp(30px,4vw,52px); margin:16px 0 18px; }
.ncbcin-setup ol{ margin:22px 0 0 20px; color:var(--text-muted); line-height:1.8; }
.ncbcin-setup li{ margin-bottom:10px; }
.ncbcin-setup a{ color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(232,176,113,.4); }
.ncbcin-setup a:hover{ color:var(--accent-hi); }

/* Elementor text widgets carrying the theme's type classes */
.lead p, .lead .elementor-widget-container > p{ font-weight:200; font-size:inherit; line-height:inherit; }
.fine p, .fine .elementor-widget-container > p{ font-weight:400; font-size:inherit; line-height:inherit; color:inherit; }
.elementor-widget-text-editor.lead{ font-weight:200; font-size:19px; line-height:1.62; color:var(--text-muted); max-width:520px; }
.elementor-widget-text-editor.fine{ font-weight:400; font-size:14.5px; line-height:1.75; color:rgba(145,140,171,.92); max-width:500px; }
.elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* Elementor sections must not clip the pinned carousel or the sticky list */
.ncbcin-expertise.elementor-section, .ncbcin-capabilities.elementor-section{ overflow:visible; }
.ncbcin-hero .elementor-container, .ncbcin-hero .elementor-column-wrap{ width:100%; }


/* ============================================================
   Hero inside Elementor
   The scroll cue is absolutely positioned. Inside the builder its containing
   block became the widget box, which is only as tall as the copy, so the cue
   landed on top of the paragraph. The widget now provides a full-height
   positioning context of its own.
   ============================================================ */
.elementor-widget-ncbcin_hero > .elementor-widget-container{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.elementor-widget-ncbcin_hero .hero-content{ position:relative; z-index:6; }
.elementor-widget-ncbcin_hero .scroll-cue{
  left:0;
  bottom:5vh;
}
/* the section no longer needs to be a flex box of its own */
.ncbcin-hero.elementor-section{ display:block; min-height:0; padding-left:0; padding-right:0; }

@media(max-width:900px){
  .elementor-widget-ncbcin_hero > .elementor-widget-container{ min-height:92vh; }
  .elementor-widget-ncbcin_hero .scroll-cue{ bottom:3vh; }
}


/* ============================================================
   ONE TYPE SCALE
   Sizes used to hang off prototype section ids (#work h2, .about-inner h2),
   so any heading outside those exact ids fell back to the browser default.
   The scale now belongs to the widgets, which works wherever they are placed.
   ============================================================ */
.ncbcin-title{ margin:0; }
.ncbcin-title .eyebrow{ margin-bottom:18px; }
.ncbcin-title h1,
.ncbcin-title h2,
.ncbcin-title h3,
.exp-intro h2,
.cap-head h2{
  font-family:'Zona Pro',sans-serif; font-weight:950;
  letter-spacing:-0.015em; line-height:1.04;
  margin:0 0 26px;
}
/* size steps, chosen per widget */
.ncbcin-title.size-s  h1, .ncbcin-title.size-s  h2, .ncbcin-title.size-s  h3{ font-size:clamp(22px,2.4vw,34px); }
.ncbcin-title.size-m  h1, .ncbcin-title.size-m  h2, .ncbcin-title.size-m  h3,
.exp-intro h2, .cap-head h2{ font-size:clamp(30px,4.2vw,58px); }
.ncbcin-title.size-l  h1, .ncbcin-title.size-l  h2, .ncbcin-title.size-l  h3{ font-size:clamp(36px,5.2vw,72px); }
.ncbcin-title.size-xl h1, .ncbcin-title.size-xl h2, .ncbcin-title.size-xl h3{ font-size:clamp(42px,6.2vw,84px); }

/* the projects and timeline widgets print their own heading pair */
.elementor-widget-ncbcin_projects > .elementor-widget-container > h2,
.elementor-widget-ncbcin_timeline > .elementor-widget-container > h2{
  font-size:clamp(30px,4.2vw,58px); margin:20px 0 48px;
}
.elementor-widget-ncbcin_projects > .elementor-widget-container > .eyebrow,
.elementor-widget-ncbcin_timeline > .elementor-widget-container > .eyebrow{ margin-bottom:0; }

/* ============================================================
   VERTICAL RHYTHM
   Each prototype section carried its own padding. One rule now, overridable
   per section from Elementor.
   ============================================================ */
.ncbcin-section.elementor-section{ padding-top:16vh; padding-bottom:16vh; }
.ncbcin-section.elementor-section > .elementor-container{ padding-left:8vw; padding-right:8vw; }
.ncbcin-hero.elementor-section{ padding-top:0; padding-bottom:0; }
.ncbcin-expertise.elementor-section,
.ncbcin-capabilities.elementor-section{ padding-top:0; padding-bottom:0; }

/* ============================================================
   SCROLL WRAPPERS
   The widget, not the section, owns the scroll length. Sticky and pinning are
   bounded by the nearest block ancestor, and inside Elementor that ancestor is
   the widget container, which is only as tall as its content.
   ============================================================ */
.cap-scroll{ position:relative; }
.cap-scroll .cap-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; padding:0 8vw; }
.exp-scroll{ position:relative; }
.exp-scroll .exp-stage{ height:100vh; }
.elementor-widget-ncbcin_capabilities > .elementor-widget-container,
.elementor-widget-ncbcin_carousel > .elementor-widget-container{ overflow:visible; }


/* ============================================================
   PROJECT CARDS
   Defined in the Projects widget. The card is a container, not a link: only
   the Explore button navigates, and only when a URL is set.
   ============================================================ */
.ncbcin-projects{ display:grid; gap:26px; }
.ncbcin-projects.cols-1{ grid-template-columns:1fr; }
.ncbcin-projects.cols-2{ grid-template-columns:repeat(2,1fr); }
.ncbcin-projects.cols-3{ grid-template-columns:repeat(3,1fr); }
.ncbcin-projects .project-card{ margin-bottom:0; }

/* the glow is opt-in per card now */
.project-card.no-glow::before{ display:none; }
.project-card.has-media:not(.no-glow)::before{ display:block; }

/* the Explore button is a real link, so it needs its own hit area */
a.p-explore{
  text-decoration:none; pointer-events:auto;
  padding:6px 2px;
}
a.p-explore:hover{ color:var(--accent-hi); }

@media(max-width:900px){
  .ncbcin-projects.cols-2, .ncbcin-projects.cols-3{ grid-template-columns:1fr; }
}