:root {
      --black: #0a0a0a;
      --ink: #111111;
      --muted: #6d6d6d;
      --line: #e7e7e7;
      --soft: #f6f6f4;
      --white: #ffffff;
      --radius: 22px;
      --max: 1440px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 90px;
    }

    body {
      overflow-x: hidden;
      font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--white);
      color: var(--ink);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, a { -webkit-tap-highlight-color: transparent; }

    .container {
      width: min(var(--max), calc(100% - 40px));
      margin-inline: auto;
    }

    /* NAV */
    .nav {
      position: fixed;
      inset: 0 0 auto;
      z-index: 1000;
      height: 76px;
      background: rgba(255,255,255,.82);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid transparent;
      transition: .25s ease;
    }

    .nav.scrolled {
      border-color: var(--line);
      box-shadow: 0 8px 30px rgba(0,0,0,.05);
    }

    .nav-inner {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .brand {
      font-weight: 800;
      letter-spacing: -.05em;
      font-size: 1.05rem;
    }

    .brand span { color: #777; font-weight: 500; }

    .nav-links {
      display: flex;
      gap: 28px;
      list-style: none;
      color: #666;
      font-size: .92rem;
      font-weight: 500;
    }

    .nav-links a:hover, .nav-links a.active { color: var(--black); }
    .nav-links a.active { font-weight: 750; }

    .nav-cta,
    .button-black {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: var(--black);
      color: white;
      border: 1px solid var(--black);
      border-radius: 999px;
      padding: 12px 19px;
      font-weight: 650;
      font-size: .9rem;
      transition: .2s ease;
    }

    .nav-cta:hover,
    .button-black:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgba(0,0,0,.14);
    }

    .menu-button {
      display: none;
      border: 0;
      background: transparent;
      font-size: 1.35rem;
      cursor: pointer;
    }

    /* HERO */
    .hero {
      min-height: 92vh;
      display: flex;
      align-items: center;
      padding: 150px 0 90px;
      position: relative;
      overflow: hidden;
    }

    .hero:before {
      content: "";
      position: absolute;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      background: radial-gradient(circle, #f0f0ee 0%, transparent 68%);
      right: -220px;
      top: 50px;
      pointer-events: none;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid var(--line);
      background: #fafafa;
      border-radius: 999px;
      padding: 7px 12px;
      color: #555;
      font-size: .78rem;
      font-weight: 650;
      text-transform: uppercase;
      letter-spacing: .1em;
      margin-bottom: 25px;
    }

    .eyebrow-dot {
      width: 7px;
      height: 7px;
      background: #111;
      border-radius: 50%;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 70px;
      align-items: end;
    }

    h1 {
      font-size: clamp(3.4rem, 7vw, 6.8rem);
      line-height: .92;
      letter-spacing: -.075em;
      max-width: 850px;
      margin-bottom: 30px;
    }

    .hero-copy {
      max-width: 660px;
      font-size: clamp(1.05rem, 2vw, 1.25rem);
      color: var(--muted);
      line-height: 1.7;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 34px;
    }

    .button-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #d8d8d8;
      border-radius: 999px;
      padding: 12px 19px;
      font-weight: 650;
      font-size: .9rem;
      background: white;
      transition: .2s ease;
    }

    .button-outline:hover {
      border-color: #111;
      transform: translateY(-2px);
    }

    .hero-note {
      border-left: 1px solid #cfcfcf;
      padding-left: 25px;
      color: #666;
      max-width: 360px;
      justify-self: end;
    }

    .hero-note strong {
      display: block;
      color: #111;
      font-size: 1rem;
      margin-bottom: 8px;
    }

    /* HERO SKILL ORBIT */
    .hero-visual {
      position: relative;
      min-height: 500px;
      display: grid;
      place-items: center;
      isolation: isolate;
    }

    .skills-orbit {
      position: relative;
      width: min(470px, 42vw);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
    }

    .skills-orbit::before,
    .skills-orbit::after {
      content: "";
      position: absolute;
      border: 1px solid #dcdcd8;
      border-radius: 50%;
      inset: 12%;
      animation: orbitPulse 5s ease-in-out infinite;
    }

    .skills-orbit::after {
      inset: 29%;
      border-color: #e8e8e5;
      animation-delay: -2.5s;
    }

    .orbit-ring {
      position: absolute;
      border: 1px dashed #d7d7d3;
      border-radius: 50%;
      pointer-events: none;
    }

    .orbit-ring.outer { inset: 4%; transform: rotate(12deg); }
    .orbit-ring.inner { inset: 21%; transform: rotate(-18deg); }

    .orbit-center {
      position: relative;
      width: 142px;
      height: 142px;
      border-radius: 50%;
      background: #0b0b0b;
      display: grid;
      place-items: center;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,.20);
      z-index: 5;
      border: 7px solid #fff;
      outline: 1px solid #d7d7d3;
    }

    .orbit-center::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.16));
      pointer-events: none;
    }

    .orbit-center img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center top;
      border-radius: 50%;
    }

    .skill-node {
      --angle: 0deg;
      --radius: 180px;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 58px;
      height: 58px;
      margin: -29px;
      transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(var(--angle) * -1));
      animation: skillOrbit 18s ease-in-out infinite alternate;
      will-change: transform;
      z-index: 4;
    }

    .skill-node.inner-node { --radius: 112px; animation-duration: 14s; }

    .skill-node button {
      width: 100%;
      height: 100%;
      border: 1px solid #d7d7d3;
      background: rgba(255,255,255,.94);
      border-radius: 18px;
      display: grid;
      place-items: center;
      color: #222;
      box-shadow: 0 12px 30px rgba(0,0,0,.08);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
      cursor: default;
    }

    .skill-node button:hover {
      transform: translateY(-5px) scale(1.08);
      border-color: #111;
      box-shadow: 0 18px 36px rgba(0,0,0,.14);
    }

    .skill-node svg { width: 31px; height: 31px; }
    .skill-node.inner-node { width: 50px; height: 50px; margin: -25px; }
    .skill-node.inner-node svg { width: 26px; height: 26px; }

    .skill-label {
      position: absolute;
      left: 50%;
      top: calc(100% + 8px);
      transform: translateX(-50%);
      white-space: nowrap;
      background: #111;
      color: #fff;
      border-radius: 999px;
      padding: 4px 8px;
      font-size: .62rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s ease;
    }

    .skill-node:hover .skill-label { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .skill-node, .skills-orbit::before, .skills-orbit::after {
        animation: none !important;
      }
    }

    @keyframes skillOrbit {
      0% {
        transform: rotate(var(--angle)) translateX(var(--radius)) rotate(calc(var(--angle) * -1));
      }
      100% {
        transform: rotate(calc(var(--angle) + 360deg)) translateX(var(--radius)) rotate(calc((var(--angle) + 360deg) * -1));
      }
    }

    @keyframes orbitPulse {
      0%,100% { opacity: .55; transform: scale(.98); }
      50% { opacity: 1; transform: scale(1.02); }
    }

    /* SHARED */
    section { padding: 110px 0; }

    .section-kicker {
      color: #777;
      font-size: .75rem;
      text-transform: uppercase;
      letter-spacing: .13em;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .section-heading {
      font-size: clamp(2.4rem, 5vw, 4.4rem);
      line-height: .98;
      letter-spacing: -.065em;
      max-width: 760px;
      margin-bottom: 22px;
    }

    .section-intro {
      color: var(--muted);
      max-width: 650px;
      font-size: 1.05rem;
    }

    /* WORK */
    .work {
      background: var(--soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .work-header {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 30px;
      margin-bottom: 45px;
    }

    .work-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px;
    }

    .project {
      background: white;
      border: 1px solid #dedede;
      border-radius: var(--radius);
      overflow: hidden;
      transition: .25s ease;
    }

    .project:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 55px rgba(0,0,0,.09);
      border-color: #cfcfcf;
    }

    .project-visual {
      min-height: 330px;
      background:
        linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.0)),
        #ededeb;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .project-visual:after {
      content: "";
      position: absolute;
      inset: 24px;
      border: 1px solid rgba(0,0,0,.1);
      border-radius: 14px;
    }

    .project-image-visual {
      min-height: 330px;
      padding: 0;
      background: #111;
    }

    .project-image {
      width: 100%;
      height: 100%;
      min-height: 330px;
      object-fit: cover;
      object-position: center;
      transition: transform .45s ease;
    }

    .project:hover .project-image {
      transform: scale(1.025);
    }

    .project-image-visual:after {
      inset: 0;
      border: 0;
      border-radius: 0;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }

    .browser {
      width: 76%;
      border: 1px solid #d4d4d4;
      background: white;
      border-radius: 12px;
      box-shadow: 0 20px 45px rgba(0,0,0,.13);
      overflow: hidden;
      z-index: 1;
      transform: rotate(-1.2deg);
    }

    .browser-bar {
      height: 28px;
      border-bottom: 1px solid #e5e5e5;
      display: flex;
      align-items: center;
      gap: 5px;
      padding-left: 10px;
    }

    .browser-bar i {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #c7c7c7;
    }

    .browser-content { padding: 24px; }

    .mock-line {
      height: 8px;
      background: #e5e5e5;
      border-radius: 5px;
      margin-bottom: 9px;
    }

    .mock-line.dark { background: #111; width: 62%; height: 15px; }
    .mock-line.short { width: 42%; }
    .mock-block {
      height: 80px;
      margin-top: 22px;
      background: #f1f1ef;
      border-radius: 8px;
    }

    .project-body { padding: 25px 25px 27px; }

    .project-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 13px;
    }

    .tag {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #555;
      background: #f3f3f2;
      padding: 6px 9px;
      border-radius: 999px;
    }

    .project h3 {
      font-size: 1.5rem;
      letter-spacing: -.035em;
      margin-bottom: 8px;
    }

    .project p { color: var(--muted); font-size: .94rem; }

    .project-link {
      display: inline-flex;
      margin-top: 18px;
      font-size: .88rem;
      font-weight: 700;
    }

    .project-link:hover { text-decoration: underline; }

    /* WORK TABS */
    .work-tabs {
      display: inline-flex;
      gap: 6px;
      padding: 6px;
      margin: 0 0 30px;
      background: #e9e9e6;
      border: 1px solid #dcdcd8;
      border-radius: 16px;
    }

    .work-tab {
      border: 0;
      background: transparent;
      color: #6d6d6d;
      border-radius: 11px;
      padding: 11px 16px;
      font: inherit;
      font-size: .88rem;
      font-weight: 750;
      cursor: pointer;
      transition: .2s ease;
    }

    .work-tab:hover { color: #111; }
    .work-tab.active {
      background: #fff;
      color: #111;
      box-shadow: 0 5px 16px rgba(0,0,0,.08);
    }

    .work-panel[hidden] { display: none; }
    .work-panel { animation: workPanelIn .28s ease; }

    .project-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 17px;
      color: #6d6d6d;
      font-size: .82rem;
      font-weight: 650;
    }

    .project-status::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #111;
    }

    @keyframes workPanelIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }


    /* AI WEBSITE SHOWCASE */
    .ai-showcase-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .ai-site-card {
      background: #0b0b0b;
      color: #fff;
      border: 1px solid #242424;
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .ai-site-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 22px 55px rgba(0,0,0,.14);
      border-color: #3a3a3a;
    }

    .ai-video-wrap {
      position: relative;
      aspect-ratio: 16 / 10;
      background: #050505;
      overflow: hidden;
      border-bottom: 1px solid #242424;
    }

    .ai-video-wrap video {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      background: #050505;
    }

    .ai-video-wrap::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    }

    .ai-video-label {
      position: absolute;
      left: 18px;
      top: 18px;
      z-index: 2;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(5,5,5,.72);
      border: 1px solid rgba(255,255,255,.14);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      color: rgba(255,255,255,.9);
      font-size: .68rem;
      font-weight: 750;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .ai-site-body { padding: 22px 22px 24px; }

    .ai-site-meta {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .ai-site-card .tag {
      color: #cfcfcf;
      background: #191919;
    }

    .ai-site-card h3 {
      font-size: 1.55rem;
      letter-spacing: -.04em;
      margin-bottom: 7px;
    }

    .ai-site-card p {
      color: #9b9b9b;
      font-size: .92rem;
      max-width: 560px;
    }

    .ai-x-card {
      grid-column: 1 / -1;
      min-height: 240px;
      position: relative;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 35px;
      align-items: end;
      padding: 38px;
      background: #0b0b0b;
      color: #fff;
      border: 1px solid #242424;
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .ai-x-card::before {
      content: "X";
      position: absolute;
      right: 28px;
      top: -45px;
      font-size: 13rem;
      line-height: 1;
      font-weight: 800;
      color: rgba(255,255,255,.035);
      pointer-events: none;
    }

    .ai-x-card:hover {
      transform: translateY(-5px);
      border-color: #3a3a3a;
      box-shadow: 0 22px 55px rgba(0,0,0,.14);
    }

    .ai-x-card small {
      display: block;
      color: #777;
      font-weight: 750;
      letter-spacing: .1em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .ai-x-card h3 {
      font-size: clamp(2rem, 4vw, 3.7rem);
      line-height: .95;
      letter-spacing: -.06em;
      margin-bottom: 14px;
    }

    .ai-x-card p {
      color: #999;
      max-width: 650px;
      font-size: .98rem;
    }

    .ai-x-action {
      position: relative;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 155px;
      padding: 13px 18px;
      border-radius: 999px;
      background: #fff;
      color: #111;
      font-weight: 750;
      font-size: .88rem;
      white-space: nowrap;
    }

    /* FEATURED SYSTEM */
    .featured {
      background: #0b0b0b;
      color: white;
      overflow: hidden;
    }

    .featured .section-kicker { color: #999; }
    .featured .section-intro { color: #aaa; }

    .system-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 70px;
      align-items: center;
    }

    .system-title {
      font-size: clamp(2.8rem, 5vw, 5rem);
      line-height: .95;
      letter-spacing: -.065em;
      margin-bottom: 24px;
    }

    .system-copy {
      color: #aaa;
      font-size: 1.03rem;
      line-height: 1.75;
    }

    .system-points {
      list-style: none;
      margin-top: 30px;
      display: grid;
      gap: 13px;
    }

    .system-points li {
      display: flex;
      gap: 12px;
      color: #ddd;
      font-size: .92rem;
    }

    .system-points li:before {
      content: "→";
      color: #fff;
      font-weight: 800;
    }

    .app-window {

      background: #151515;
      border: 1px solid #303030;
      border-radius: 20px;
      padding: 15px;
      box-shadow: 0 35px 90px rgba(0,0,0,.45);
    }

    .app-top {
      height: 34px;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 7px;
    }

    .app-top i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #555;
    }

    .app-body {
      background: #f7f7f5;
      color: #111;
      min-height: 360px;
      border-radius: 13px;
      padding: 18px;
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 15px;
    }

    .app-sidebar {
      background: #111;
      border-radius: 10px;
      padding: 12px 8px;
    }

    .app-sidebar div {
      height: 7px;
      border-radius: 4px;
      background: #444;
      margin: 9px 5px;
    }

    .app-main h4 { font-size: 1.15rem; margin: 2px 0 15px; }
    .task-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }

    .task {
      background: white;
      border: 1px solid #e5e5e5;
      border-radius: 9px;
      padding: 12px;
      min-height: 90px;
    }

    .task small { color: #888; font-size: .65rem; }
    .task strong { display: block; font-size: .75rem; margin-top: 8px; }

    /* CAPABILITIES */
    .cap-grid {
      margin-top: 55px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
    }

    .cap {
      padding: 32px 28px 32px 0;
      border-bottom: 1px solid var(--line);
    }

    .cap:not(:nth-child(3n+1)) {
      padding-left: 28px;
      border-left: 1px solid var(--line);
    }

    .cap-number {
      color: #aaa;
      font-size: .75rem;
      font-weight: 800;
      margin-bottom: 45px;
    }

    .cap h3 { font-size: 1.25rem; letter-spacing: -.03em; margin-bottom: 9px; }
    .cap p { color: var(--muted); font-size: .9rem; }

    /* PROCESS */
    .process {
      background: var(--soft);
      border-block: 1px solid var(--line);
    }

    .process-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      margin-top: 50px;
      border-top: 1px solid #d9d9d7;
    }

    .step {
      padding: 25px 25px 0 0;
      min-height: 200px;
    }

    .step + .step { padding-left: 25px; border-left: 1px solid #d9d9d7; }
    .step-number { font-size: .72rem; font-weight: 800; color: #999; }
    .step h3 { margin: 45px 0 8px; font-size: 1.15rem; }
    .step p { color: var(--muted); font-size: .88rem; }

    /* ABOUT */
    .about-grid {
      display: grid;
      grid-template-columns: .65fr 1.35fr;
      gap: 80px;
      align-items: start;
    }

    .profile-frame {
      border-radius: 20px;
      background: #ededeb;
      padding: 12px;
      max-width: 330px;
    }

    .profile-frame img {
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: 13px;
      background: #ddd;
    }

    .about-copy p {
      color: var(--muted);
      font-size: 1.04rem;
      line-height: 1.85;
      margin-bottom: 20px;
      max-width: 720px;
    }

    .about-stats {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 10px;
      margin-top: 35px;
    }

    .stat {
      border-top: 1px solid #ccc;
      padding-top: 13px;
    }

    .stat strong { display: block; font-size: 1.4rem; letter-spacing: -.04em; }
    .stat span { color: #777; font-size: .78rem; }

    /* CONTACT */
    .contact {
      background: #0b0b0b;
      color: white;
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 70px;
      align-items: end;
    }

    .contact .section-kicker { color: #999; }
    .contact .section-heading { max-width: 780px; }
    .contact-copy { color: #aaa; max-width: 590px; }

    .contact-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 30px;
    }

    .button-white {
      background: white;
      color: #111;
      border: 1px solid white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      padding: 13px 20px;
      font-weight: 700;
      font-size: .9rem;
      transition: .2s ease;
    }

    .button-white:hover { transform: translateY(-2px); box-shadow: 0 15px 35px rgba(255,255,255,.12); }

    .contact-card {
      border: 1px solid #333;
      border-radius: 18px;
      padding: 25px;
      background: #111;
    }

    .contact-card small {
      display: block;
      color: #888;
      margin-bottom: 8px;
    }

    .contact-card strong { font-size: 1.1rem; }

    /* FOOTER */
    footer {
      background: #0b0b0b;
      color: #777;
      border-top: 1px solid #252525;
      padding: 25px 0;
      font-size: .78rem;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 20px;
    }


    .agencyos-image {
      width: 100%;
      height: auto;
      min-height: 420px;
      object-fit: contain;
      object-position: center;
      display: block;
      border-radius: 18px;
    }

    /* AGENCYOS IMAGE LIGHTBOX */
    .agencyos-preview { position:relative; width:100%; border:0; color:inherit; text-align:left; cursor:zoom-in; }
    .agencyos-preview:focus-visible { outline:2px solid white; outline-offset:4px; }
    .preview-badge { position:absolute; right:28px; bottom:28px; z-index:3; padding:8px 12px; border-radius:999px; background:rgba(0,0,0,.76); color:#fff; border:1px solid rgba(255,255,255,.18); font-size:.72rem; font-weight:700; opacity:0; transform:translateY(5px); transition:.2s ease; pointer-events:none; }
    .agencyos-preview:hover .preview-badge,.agencyos-preview:focus-visible .preview-badge { opacity:1; transform:none; }
    .image-modal { position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:28px; background:rgba(0,0,0,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
    .image-modal.open { display:flex; }
    .image-modal-content { position:relative; width:min(1280px,96vw); max-height:92vh; display:flex; align-items:center; justify-content:center; }
    .image-modal img { max-width:100%; max-height:88vh; width:auto; height:auto; object-fit:contain; border-radius:18px; box-shadow:0 35px 100px rgba(0,0,0,.55); cursor:zoom-in; transition:transform .25s ease; }
    .image-modal img.zoomed { max-width:none; max-height:none; width:min(1800px,150vw); transform:scale(1.35); cursor:zoom-out; }
    .image-modal-close { position:absolute; top:-18px; right:-18px; width:46px; height:46px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(15,15,15,.92); color:#fff; display:grid; place-items:center; font-size:1.45rem; line-height:1; cursor:pointer; z-index:2; }
    .image-modal-close:hover { background:#fff; color:#111; }
    .image-modal-hint { position:absolute; left:50%; bottom:-42px; transform:translateX(-50%); color:rgba(255,255,255,.72); font-size:.78rem; white-space:nowrap; }
    body.modal-open { overflow:hidden; }

    /* REVEAL */
    .reveal {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity .65s ease, transform .65s ease;
    }

    .reveal.visible { opacity: 1; transform: none; }

    /* RESPONSIVE */
    @media (max-width: 900px) {
      .hero-grid,
      .system-grid,
      .about-grid,
      .contact-grid { grid-template-columns: 1fr; }

      .hero-note { justify-self: start; }
      .work-grid { grid-template-columns: 1fr; }
      .cap-grid { grid-template-columns: repeat(2,1fr); }
      .cap:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
      .cap:nth-child(even) { padding-left: 25px; border-left: 1px solid var(--line); }
      .process-grid { grid-template-columns: repeat(2,1fr); }
      .step:nth-child(3) { border-left: 0; padding-left: 0; }
      .step:nth-child(n+3) { border-top: 1px solid #d9d9d7; padding-top: 25px; }
      .system-grid { gap: 45px; }
    }

    @media (max-width: 1100px) and (min-width: 701px) {
      .container { width: min(var(--max), calc(100% - 40px)); }
      .hero-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
      h1 { font-size: clamp(3.4rem, 6vw, 5.4rem); }
      .skills-orbit { width: min(430px, 43vw); }
      .skill-node { --radius: 165px; }
      .skill-node.inner-node { --radius: 100px; }
    }

    @media (max-width: 700px) {
      .container { width: min(var(--max), calc(100% - 28px)); }
      .hero-grid { gap: 28px; }
      .hero-visual { width: 100%; overflow: visible; }
      .skills-orbit { width: min(430px, 94vw); }
      .nav-links, .nav-cta { display: none; }
      .menu-button { display: block; }
      .nav.open .nav-links {
        display: flex;
        position: absolute;
        top: 75px;
        left: 14px;
        right: 14px;
        background: white;
        border: 1px solid var(--line);
        border-radius: 16px;
        padding: 16px;
        flex-direction: column;
        gap: 5px;
        box-shadow: 0 18px 40px rgba(0,0,0,.1);
      }
      .nav.open .nav-links a { display: block; padding: 10px; }
      section { padding: 78px 0; }
      .hero { padding-top: 125px; min-height: auto; }
      .hero-visual { min-height: 390px; margin-top: 10px; }
      .skills-orbit { width: min(380px, 92vw); }
      .skill-node { --radius: 142px; width: 52px; height: 52px; margin: -26px; }
      .skill-node.inner-node { --radius: 88px; width: 46px; height: 46px; margin: -23px; }
      .orbit-center { width: 124px; height: 124px; }
      .skill-node svg { width: 28px; height: 28px; }
      .skill-node.inner-node svg { width: 23px; height: 23px; }
      .agencyos-image { min-height: 0; }
      h1 { font-size: clamp(3rem, 16vw, 5rem); }
      .work-header { display: block; }
      .work-header .section-intro { margin-top: 18px; }
      .project-visual { min-height: 220px; }
      .project-image { min-height: 220px; }
      .cap-grid,
      .process-grid,
      .about-stats { grid-template-columns: 1fr; }
      .cap, .cap:nth-child(even) { padding: 25px 0; border-left: 0; }
      .cap-number { margin-bottom: 30px; }
      .step, .step + .step { border-left: 0; padding: 24px 0; min-height: auto; }
      .step + .step { border-top: 1px solid #d9d9d7; }
      .app-body { grid-template-columns: 65px 1fr; }
      .task-grid { grid-template-columns: 1fr; }
      .about-grid { gap: 35px; }
      .profile-frame { max-width: 220px; }
      .footer-inner { flex-direction: column; }
      .image-modal { padding:16px; }
      .image-modal-content { width:100%; max-height:88vh; }
      .image-modal img { max-width:100%; max-height:78vh; border-radius:12px; }
      .image-modal img.zoomed { width:160vw; transform:scale(1.2); }
      .image-modal-close { top:-10px; right:-6px; width:42px; height:42px; }
      .image-modal-hint { bottom:-34px; font-size:.68rem; }
      .preview-badge { opacity:1; transform:none; right:18px; bottom:18px; }
      .ai-showcase-grid { grid-template-columns: 1fr; }
      .ai-x-card { grid-column: auto; grid-template-columns: 1fr; min-height: 280px; padding: 28px; }
      .ai-x-action { justify-self: start; }
    }
  

/* Secondary pages: deliberately inherit the existing portfolio typography, palette,
   navigation, cards, buttons and spacing. No new visual theme. */
.subhero{padding:154px 0 94px;border-bottom:1px solid var(--line);background:#fff}
.subhero h1{max-width:1100px;font-size:clamp(3.4rem,7vw,6.8rem);line-height:.96;margin:0 0 30px}
.subhero .section-intro{font-size:clamp(1.05rem,1.7vw,1.22rem);line-height:1.72;max-width:770px}
.subhero .eyebrow{margin-bottom:26px}
.crumbs{font-size:.82rem;color:#797979;margin:0 0 30px}
.crumbs a{color:#303030;text-decoration:underline;text-decoration-color:#ddd;text-underline-offset:4px}
.crumbs span{margin:0 8px;color:#b0b0b0}
.page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.workitem .project-visual{height:290px;min-height:290px;background:#eaeae7;padding:35px}
.workitem .project-visual:after{inset:20px;border-color:#cfcfcb}
.visual-type{font-size:clamp(2.5rem,4vw,4.9rem);font-weight:800;letter-spacing:-.085em;line-height:.93;max-width:90%;text-align:left;word-wrap:break-word}
.visual-number{position:absolute;top:42px;left:44px;font-size:.78rem;color:#777;font-weight:700;letter-spacing:.15em}
.workitem .project-body{padding:26px 28px 30px}
.project-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:16px}
.project-bottom small{color:#888}
.page-band{background:var(--soft);border-bottom:1px solid var(--line)}
.collection-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:34px}
.collection-head .section-heading{font-size:clamp(2rem,4vw,3.5rem);margin-bottom:0}
.text-link{font-size:.9rem;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.case-content{padding:95px 0 110px}
.case-layout{display:grid;grid-template-columns:minmax(0,770px) 280px;justify-content:space-between;gap:60px}
.story h2,.story h3{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.12;letter-spacing:-.055em;margin:0 0 18px}
.story h3{font-size:1.48rem;margin-top:33px}
.story p{font-size:1.04rem;line-height:1.85;color:#555;margin:0 0 18px}
.story-section{margin-bottom:55px}
.story-section+.story-section{border-top:1px solid var(--line);padding-top:40px}
.aside-info{align-self:start;position:sticky;top:110px;border-top:1px solid #222;padding-top:24px}
.aside-info dl{margin:0}
.aside-info dt{color:#888;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-top:23px}
.aside-info dd{margin:5px 0 0;font-size:.94rem;font-weight:600}
.aside-info .tag{display:inline-block;margin:3px}
.journal-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.topic-filters{display:flex;gap:8px;flex-wrap:wrap}
.topic-filter{background:#fff;border:1px solid #ddd;border-radius:999px;padding:9px 15px;color:#666;font-size:.82rem;font-weight:650;cursor:pointer}
.topic-filter:hover,.topic-filter[aria-pressed="true"]{background:#111;color:#fff;border-color:#111}
.journal-search{border:1px solid #ddd;border-radius:999px;padding:10px 15px;color:#111;background:#fff;font:inherit;font-size:.86rem;width:min(300px,100%)}
.journal-search:focus-visible,.topic-filter:focus-visible{outline:2px solid #111;outline-offset:3px}
.journal-list{border-top:1px solid #d6d6d4}
.journal-row{display:grid;grid-template-columns:180px 1fr 75px;align-items:start;gap:28px;padding:35px 2px;border-bottom:1px solid #d9d9d6}
.journal-row:hover .journal-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.journal-row .journal-topic{font-size:.75rem;letter-spacing:.1em;font-weight:700;text-transform:uppercase;color:#777;margin-top:9px}
.journal-row .journal-title{font-size:clamp(1.4rem,2.45vw,2.25rem);letter-spacing:-.055em;line-height:1.15;margin:0 0 10px;max-width:790px}
.journal-row p{color:#777;font-size:.94rem;max-width:680px;margin:0}
.journal-row .journal-date{text-align:right;font-size:.8rem;color:#888;white-space:nowrap;margin-top:8px}
.journal-row[hidden]{display:none}
.empty-search{display:none;padding:30px 0;color:#777}
.article-prose{max-width:770px;margin:auto;padding:80px 0 115px}
.article-prose h2{font-size:clamp(1.8rem,3.4vw,2.65rem);line-height:1.15;letter-spacing:-.055em;margin:54px 0 19px}
.article-prose h2:first-of-type{margin-top:15px}
.article-prose p{color:#515151;font-size:1.12rem;line-height:1.9;margin:0 0 23px}
.article-prose .article-intro{font-size:1.25rem;color:#303030;line-height:1.75}
.article-prose .personal-take{margin-top:70px;padding-top:32px;border-top:2px solid #111}
.article-prose .personal-take h2{margin-top:0}
.article-meta{font-size:.87rem;color:#777;margin-top:24px;display:flex;gap:22px;flex-wrap:wrap}
.after-story{margin-top:45px;padding-top:30px;border-top:1px solid #ddd;display:flex;justify-content:space-between;gap:20px;align-items:center}
.after-story a{font-size:.9rem;font-weight:700}
.tag-line{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0}
.contact-tail{background:#111;color:white;padding:80px 0}
.contact-tail .section-kicker{color:#999}
.contact-tail h2{font-size:clamp(2rem,4vw,3.4rem);letter-spacing:-.06em;line-height:1.04;max-width:850px;margin:0 0 28px}
.contact-tail .button-outline{background:#111;color:#fff;border-color:#666}
.link-card{display:flex;justify-content:space-between;gap:20px;align-items:center;border:1px solid #ddd;padding:20px 24px;border-radius:14px;background:#fff}
.link-card:hover{border-color:#111}
@media(max-width:900px){.case-layout{grid-template-columns:1fr}.aside-info{position:static;order:-1}.page-grid{grid-template-columns:1fr}}
@media(max-width:700px){.subhero{padding:130px 0 70px}.subhero h1{font-size:clamp(3rem,14vw,5rem)}.journal-row{grid-template-columns:1fr;gap:8px;padding:25px 0}.journal-row .journal-topic{margin:0}.journal-row .journal-date{text-align:left;margin:0}.journal-controls{align-items:stretch}.journal-search{width:100%;max-width:none}.collection-head{align-items:start;flex-direction:column}.workitem .project-visual{height:230px;min-height:230px}.visual-type{font-size:3rem}.article-prose{padding:55px 0 75px}.article-prose p{font-size:1.04rem}.case-content{padding:60px 0}.contact-tail{padding:60px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep the original navigation comfortably usable on tablet widths. */
@media (min-width:701px) and (max-width:1050px){
  .nav-links,.nav-cta{display:none}
  .menu-button{display:block}
  .nav.open .nav-links{display:flex;position:absolute;top:75px;left:20px;right:20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;flex-direction:column;gap:5px;box-shadow:0 18px 40px rgba(0,0,0,.1)}
  .nav.open .nav-links a{display:block;padding:10px}
}

/* Failsafe: preserve all content if animation JavaScript is unavailable. */
.reveal{opacity:1!important;transform:none!important}