:root {
      --bg: #e9e2d6;
      --bg-2: #e1d8ca;
      --ink: #121826;
      --muted: #5b667a;
      --line: rgba(18, 24, 38, 0.14);
      --card: rgba(238, 231, 221, 0.78);
      --card-2: rgba(246, 241, 233, 0.92);
      --glass: rgba(233, 226, 214, 0.72);
      --shadow: 0 20px 50px rgba(18, 24, 38, 0.12);
      --shadow-2: 0 10px 24px rgba(18, 24, 38, 0.10);
      --radius: 18px;
      --radius-sm: 14px;
      --accent: #ff6a1a;
      --accent-2: #00b3c6;
      --ok: #10b981;
      --max: 1160px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
      background:
        radial-gradient(1200px 700px at 15% 10%, rgba(0, 179, 198, 0.10), transparent 55%),
        radial-gradient(900px 600px at 90% 18%, rgba(255, 106, 26, 0.12), transparent 52%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
      min-height: 100vh;
    }

    .container {
      width: min(var(--max), 92vw);
      margin: 0 auto;
    }

    .noise {
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.08;
      mix-blend-mode: multiply;
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      z-index: -1;
    }

    a { color: inherit; }

    .topbar {
      border-bottom: 1px solid var(--line);
      background: var(--glass);
      backdrop-filter: blur(10px);
    }

    .topbar-inner {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 13px;
      color: var(--muted);
    }

    .topbar-right {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
    }

    .toplink {
      text-decoration: none;
      font-weight: 700;
      color: var(--ink);
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(246, 241, 233, 0.82);
      box-shadow: var(--shadow-2);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--glass);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      min-height: 74px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      min-width: 0;
      padding: 10px 12px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(246, 241, 233, 0.78);
      box-shadow: var(--shadow-2);
    }

    .mark {
      width: 56px;
      height: 56px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      font-weight: 900;
      letter-spacing: 0.2px;
      color: #1b120a;
      background: linear-gradient(135deg, rgba(255,106,26,1), rgba(255,195,150,1));
      box-shadow: 0 18px 40px rgba(255, 106, 26, 0.24);
      flex: 0 0 auto;
    }

    .brand-text {
      display: grid;
      line-height: 1.1;
      min-width: 0;
    }

    .brand-title {
      font-family: "Sora", sans-serif;
      font-weight: 800;
      letter-spacing: -0.4px;
      font-size: clamp(18px, 2.2vw, 24px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand-sub {
      font-size: 13px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .brand:hover,
    .brand:focus-visible {
      outline: none;
      background: rgba(246, 241, 233, 0.92);
      border-color: rgba(18, 24, 38, 0.18);
      transform: translateY(-1px);
    }

    nav {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    nav a {
      text-decoration: none;
      font-weight: 700;
      font-size: 14px;
      color: var(--muted);
      padding: 10px 12px;
      border-radius: 999px;
      transition: background 0.2s ease, color 0.2s ease;
    }

    nav a:hover,
    nav a:focus-visible {
      background: rgba(255, 255, 255, 0.8);
      color: var(--ink);
      outline: none;
    }

    .cta {
      text-decoration: none;
      font-weight: 800;
      font-size: 14px;
      padding: 11px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 106, 26, 0.35);
      color: #1b120a;
      background: linear-gradient(135deg, rgba(255,106,26,1), rgba(255,195,150,1));
      box-shadow: 0 12px 26px rgba(255, 106, 26, 0.18);
      white-space: nowrap;
    }

    .menu {
      display: none;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(246, 241, 233, 0.86);
      padding: 10px 12px;
      font-weight: 800;
      cursor: pointer;
    }

    .hero {
      padding: 28px 0 10px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 18px;
      align-items: stretch;
    }

    .panel {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .panel-inner {
      padding: clamp(18px, 3vw, 28px);
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.72);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent-2), var(--accent));
      box-shadow: 0 0 0 4px rgba(0, 179, 198, 0.12);
    }

    h1 {
      margin: 14px 0 0;
      font-family: "Sora", sans-serif;
      font-weight: 700;
      letter-spacing: -0.6px;
      font-size: clamp(34px, 4.6vw, 54px);
      line-height: 1.08;
    }

    .lead {
      margin: 12px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.7;
      max-width: 60ch;
    }

    .lead-2 {
      margin-top: 10px;
      font-size: 14px;
      line-height: 1.75;
      max-width: 70ch;
      color: rgba(91, 102, 122, 0.92);
    }

    .points {
      margin-top: 16px;
      display: grid;
      gap: 10px;
    }

    .point {
      display: grid;
      grid-template-columns: 22px 1fr;
      gap: 10px;
      align-items: start;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(18, 24, 38, 0.12);
      background: rgba(246, 241, 233, 0.76);
    }

    .icon {
      width: 22px;
      height: 22px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(0, 179, 198, 0.20), rgba(255, 106, 26, 0.16));
      border: 1px solid rgba(18, 24, 38, 0.10);
      color: #1b3b47;
      font-weight: 900;
      font-size: 12px;
    }

    .point strong {
      display: block;
      font-size: 14px;
    }

    .point span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 2px;
    }

    .hero-actions {
      margin-top: 16px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn {
      text-decoration: none;
      font-weight: 800;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(246, 241, 233, 0.86);
      color: var(--ink);
      box-shadow: var(--shadow-2);
      transition: transform 0.18s ease;
      white-space: nowrap;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-2px);
      outline: none;
    }

    .btn-primary {
      border-color: rgba(255, 106, 26, 0.28);
      background: linear-gradient(135deg, rgba(255,106,26,1), rgba(255,195,150,1));
      color: #1b120a;
    }

    .micro {
      color: var(--muted);
      font-size: 12px;
    }

    .media {
      position: relative;
      min-height: 420px;
      background:
        radial-gradient(800px 420px at 20% 30%, rgba(0, 179, 198, 0.18), transparent 55%),
        radial-gradient(800px 520px at 80% 70%, rgba(255, 106, 26, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(18, 24, 38, 0.06), rgba(18, 24, 38, 0.02));
    }

    .photo {
      position: absolute;
      inset: 0;
      /* Optional: replace with your own file at /assets/hero.jpg */
      background: url("/assets/hero.jpg") center/cover no-repeat;
      filter: saturate(1.05) contrast(1.02);
      transform: scale(1.03);
    }

    .media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(233, 226, 214, 0.08) 0%, rgba(233, 226, 214, 0.68) 62%, rgba(233, 226, 214, 0.80) 100%);
    }

    .media-inner {
      position: relative;
      z-index: 1;
      padding: clamp(18px, 3vw, 28px);
      height: 100%;
      display: grid;
      align-content: end;
      gap: 10px;
    }

    .bento {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .tile {
      border: 1px solid var(--line);
      background: rgba(246, 241, 233, 0.88);
      border-radius: 16px;
      padding: 12px;
      box-shadow: var(--shadow-2);
    }

    .tile strong {
      font-family: "Sora", sans-serif;
      letter-spacing: -0.4px;
      font-size: 18px;
    }

    .tile span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-top: 4px;
    }

    .section {
      padding: 20px 0;
    }

    .section-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin: 18px 0 12px;
    }

    .section-head h2 {
      margin: 0;
      font-family: "Sora", sans-serif;
      letter-spacing: -0.5px;
      font-size: 28px;
    }

    .section-head p {
      margin: 0;
      color: var(--muted);
      max-width: 60ch;
      font-size: 14px;
      line-height: 1.6;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 12px;
    }

    .card {
      grid-column: span 12;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card-2);
      box-shadow: var(--shadow-2);
      padding: 14px;
    }

    .card h3 {
      margin: 0;
      font-size: 16px;
      letter-spacing: -0.2px;
    }

    .card p {
      margin: 6px 0 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.6;
    }

    .card p + p {
      margin-top: 10px;
    }

    .k {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

    .k i {
      width: 26px;
      height: 26px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      background: rgba(255, 106, 26, 0.10);
      border: 1px solid rgba(255, 106, 26, 0.18);
      font-style: normal;
      color: #7a2e00;
      font-weight: 900;
    }

    .services .card { grid-column: span 12; }

    .projects {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .project {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card-2);
      box-shadow: var(--shadow-2);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
    }

    .project-media {
      --project-img: none;
      min-height: 170px;
      background-image:
        var(--project-img),
        radial-gradient(420px 220px at 20% 30%, rgba(0, 179, 198, 0.18), transparent 55%),
        radial-gradient(420px 260px at 80% 70%, rgba(255, 106, 26, 0.18), transparent 55%),
        linear-gradient(180deg, rgba(18, 24, 38, 0.06), rgba(18, 24, 38, 0.02));
      background-position: center, 0 0, 0 0, 0 0;
      background-repeat: no-repeat;
      background-size: cover, auto, auto, auto;
      position: relative;
    }

    .project-media.p1 { --project-img: url("/assets/project-1.jpg"); }
    .project-media.p2 { --project-img: url("/assets/project-2.jpg"); }

    .project-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(18, 24, 38, 0.06) 0%, rgba(18, 24, 38, 0.02) 40%, rgba(18, 24, 38, 0.00) 100%);
    }

    .project-body {
      padding: 14px;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .chip {
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.82);
      border-radius: 999px;
      padding: 8px 10px;
      font-size: 12px;
      color: var(--muted);
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .chip:hover,
    .chip:focus-visible {
      outline: none;
      color: var(--ink);
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(18, 24, 38, 0.18);
      transform: translateY(-1px);
    }

    .breadcrumbs {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      color: var(--muted);
      font-size: 13px;
      margin: 18px 0 10px;
    }

    .breadcrumbs a {
      text-decoration: none;
      font-weight: 800;
      color: var(--ink);
      border-bottom: 1px solid rgba(18, 24, 38, 0.18);
    }

    .page-hero {
      padding: 28px 0 10px;
    }

    .page-hero .card {
      padding: clamp(18px, 3vw, 26px);
    }

    .page-hero h1 {
      margin: 10px 0 8px;
      font-family: "Sora", sans-serif;
      letter-spacing: -0.8px;
      line-height: 1.03;
      font-size: clamp(34px, 4.5vw, 50px);
    }

    .page-hero p {
      margin: 0;
      color: var(--muted);
      max-width: 75ch;
      line-height: 1.75;
    }

    .link-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 14px;
    }

    .contact {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .prose p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.85;
    }

    .prose p + p {
      margin-top: 12px;
    }

    .about-aside {
      display: grid;
      gap: 10px;
    }

    .about-aside h3 {
      margin: 0;
      font-family: "Sora", sans-serif;
      letter-spacing: -0.3px;
      font-size: 18px;
    }

    .about-aside ul {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.75;
    }

    .info {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card-2);
      box-shadow: var(--shadow-2);
      padding: 14px;
    }

    .row {
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.82);
      padding: 12px;
      margin-top: 10px;
    }

    .row small {
      display: block;
      color: var(--muted);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-size: 11px;
      margin-bottom: 4px;
    }

    .row a,
    .row span {
      font-weight: 800;
      text-decoration: none;
    }

    form {
      display: grid;
      gap: 10px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card-2);
      box-shadow: var(--shadow-2);
      padding: 14px;
    }

    .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    input,
    select,
    textarea,
    button { font: inherit; }

    input,
    select,
    textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: rgba(255, 255, 255, 0.86);
      outline: none;
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: rgba(0, 179, 198, 0.55);
      box-shadow: 0 0 0 4px rgba(0, 179, 198, 0.12);
    }

    textarea { min-height: 110px; resize: vertical; }

    button {
      cursor: pointer;
      border-radius: 14px;
      border: 1px solid rgba(16, 185, 129, 0.45);
      background: linear-gradient(135deg, rgba(16,185,129,1), rgba(151,242,208,1));
      font-weight: 900;
      padding: 12px;
      color: #0b2a1d;
    }

    .fine {
      color: var(--muted);
      font-size: 12px;
    }

    .floating {
      position: fixed;
      right: 14px;
      bottom: 14px;
      z-index: 50;
      text-decoration: none;
      font-weight: 900;
      padding: 12px 14px;
      border-radius: 999px;
      background: linear-gradient(135deg, rgba(16,185,129,1), rgba(151,242,208,1));
      color: #0b2a1d;
      box-shadow: 0 18px 40px rgba(16, 185, 129, 0.22);
      border: 1px solid rgba(16, 185, 129, 0.35);
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 26px 0 40px;
      color: var(--muted);
      font-size: 13px;
    }

    .reveal {
      opacity: 0;
      transform: translateY(12px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

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

    .title {
      margin: 0;
      font-family: "Sora", sans-serif;
      letter-spacing: -0.3px;
    }

    @media (min-width: 820px) {
      .services .card { grid-column: span 6; }
      .projects { grid-template-columns: 1fr 1fr; }
      .project { grid-template-columns: 0.9fr 1.1fr; }
      .project-media { min-height: auto; }
      .contact { grid-template-columns: 1fr 1fr; }
      .points { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .point { grid-template-columns: 1fr; gap: 8px; }
      .icon { width: 28px; height: 28px; border-radius: 10px; font-size: 13px; }
      .point strong { font-size: 15px; }
      .point span { font-size: 12px; }
      .about-grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
    }

    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; }
      .media { min-height: 360px; }
    }

    @media (max-width: 860px) {
      nav, .cta { display: none; }
      .menu { display: inline-flex; }
      nav.open {
        display: flex;
        position: absolute;
        right: 4vw;
        left: 4vw;
        top: calc(100% + 8px);
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid var(--line);
        border-radius: 18px;
        padding: 10px;
        box-shadow: var(--shadow);
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
      }
      nav.open a { color: var(--ink); }
      nav.open a:hover { background: rgba(18, 24, 38, 0.06); }
      .brand { padding: 8px 10px; border-radius: 16px; }
      .mark { width: 48px; height: 48px; border-radius: 16px; }
    }

    @media (max-width: 720px) {
      .two { grid-template-columns: 1fr; }
      .floating { left: 12px; right: 12px; text-align: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .reveal { transition: none; }
      .btn { transition: none; }
      .hero * { animation: none !important; }
    }