:root {
      --ivory: #fffaf3;
      --ivory-2: #f8efe6;
      --rose: #f4ded8;
      --rose-2: #fff4f0;
      --crimson: #990f1b;
      --crimson-2: #7d0c15;
      --charcoal: #151b2c;
      --muted: #687083;
      --line: rgba(21, 27, 44, 0.12);
      --card: rgba(255, 255, 255, 0.76);
      --shadow: 0 24px 60px rgba(37, 29, 25, 0.08);
      --radius-xl: 28px;
      --radius-md: 18px;
      --max: 1180px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: "Inter", system-ui, sans-serif;
      color: var(--charcoal);
      background:
        radial-gradient(circle at top right, rgba(244, 222, 216, .7), transparent 34rem),
        linear-gradient(180deg, var(--ivory), #fff 48%, var(--ivory));
      line-height: 1.7;
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    .container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
    .eyebrow {
      color: var(--crimson);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    h1, h2, h3 { font-family: "Cormorant Garamond", Georgia, serif; line-height: 1.05; margin: 0; }
    h1 { font-size: clamp(2.6rem, 6.3vw, 5rem); letter-spacing: -.035em; }
    h2 { font-size: clamp(2.2rem, 4vw, 4rem); letter-spacing: -.03em; }
    h3 { font-size: 1.65rem; }
    p { margin: 0; color: var(--muted); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(18px);
      background: rgba(255, 250, 243, .82);
      border-bottom: 1px solid rgba(21, 27, 44, .07);
    }
    .nav {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand { display: inline-flex; align-items: center; gap: 12px; }
    .brand-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(21,27,44,.12); background: #fff; }
    .brand-text { display: flex; flex-direction: column; gap: 2px; }
    .brand-text strong {
      font-family: "Cormorant Garamond", Georgia, serif;
      color: var(--crimson);
      font-size: 1.65rem;
      line-height: 1;
    }
    .brand-text span { font-size: .78rem; font-weight: 600; color: var(--charcoal); }
    .nav-links { display: flex; align-items: center; gap: 28px; font-size: .88rem; font-weight: 700; }
    .nav-links a { color: var(--charcoal); opacity: .88; }
    .nav-links a:hover { color: var(--crimson); }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 0 22px;
      border-radius: 12px;
      border: 1px solid var(--crimson);
      font-weight: 800;
      font-size: .9rem;
      transition: .2s ease;
      cursor: pointer;
    }
    .btn.primary { color: #fff; background: var(--crimson); box-shadow: 0 12px 24px rgba(153, 15, 27, .16); }
    .btn.secondary { color: var(--crimson); background: rgba(255,255,255,.7); }
    .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(21, 27, 44, .1); }

    .hero {
      padding: 72px 0 64px;
      border-bottom: 1px solid rgba(21,27,44,.08);
    }
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
      gap: 46px;
      align-items: center;
    }
    .hero-copy { display: grid; gap: 22px; max-width: 610px; }
    .hero-copy .lead { font-size: 1.08rem; max-width: 560px; color: #3e4555; }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

    /* Guardrail: prevent orphan CTA rows from rendering outside intended sections */
    main > .hero-actions,
    body > .hero-actions { display: none !important; }
    .portrait-card {
      min-height: 360px;
      border-radius: 34px;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      overflow: hidden;
      background: #fff;
    }
    .portrait-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    section { padding: 78px 0; }
    .section-head { display: grid; gap: 12px; text-align: center; max-width: 780px; margin: 0 auto 38px; }
    .grid { display: grid; gap: 20px; }
    .grid.five { grid-template-columns: repeat(5, 1fr); }
    .grid.three { grid-template-columns: repeat(3, 1fr); }
    .card {
      border: 1px solid var(--line);
      background: var(--card);
      border-radius: var(--radius-md);
      padding: 28px;
      box-shadow: 0 18px 45px rgba(21,27,44,.05);
    }
    .icon {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--rose-2);
      color: var(--crimson);
      font-weight: 900;
      font-size: 1.55rem;
      margin-bottom: 22px;
    }
    .card h3 { margin-bottom: 10px; font-family: "Inter", sans-serif; font-size: 1rem; font-weight: 900; }
    .card p { font-size: .94rem; }

    .projects { background: rgba(255,255,255,.48); border-top: 1px solid rgba(21,27,44,.08); border-bottom: 1px solid rgba(21,27,44,.08); }
    .projects-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; }
    .project-card { padding: 0; overflow: hidden; transition: .22s ease; position: relative; }
    .project-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(21,27,44,.11); border-color: rgba(153,15,27,.55); }
    .project-card.featured { border: 1.5px solid rgba(153,15,27,.52); }
    .project-link { display: block; height: 100%; }
    .project-preview {
      height: 210px;
      padding: 18px;
      background: linear-gradient(135deg, #fff, #f8ede8);
      border-bottom: 1px solid var(--line);
    }
    .mock-window { height: 100%; border-radius: 16px; border: 1px solid rgba(21,27,44,.12); background: rgba(255,255,255,.74); padding: 14px; }
    .window-dots { display: flex; gap: 5px; margin-bottom: 12px; }
    .window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #e7c8c3; display: block; }
    .dash-layout { display: grid; grid-template-columns: 1fr .62fr; gap: 12px; height: calc(100% - 20px); }
    .rows { display: grid; gap: 8px; }
    .row { height: 22px; border-radius: 9px; background: #f4ebe7; display: flex; align-items: center; gap: 8px; padding: 0 8px; }
    .row:before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: #f0d9d2; }
    .score { border-radius: 16px; background: #fff; border: 1px solid rgba(153,15,27,.12); display: grid; place-items: center; text-align: center; font-weight: 900; color: var(--crimson); }
    .score span { display:block; font-size: 2.2rem; line-height: 1; }
    .project-body { padding: 26px; display: grid; gap: 14px; }
    .badge {
      display: inline-flex;
      width: fit-content;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--crimson);
      color: #fff;
      font-size: .76rem;
      font-weight: 900;
    }
    .tags { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag { padding: 7px 10px; border: 1px solid rgba(21,27,44,.1); border-radius: 999px; background: rgba(255,255,255,.72); font-size: .76rem; font-weight: 800; }
    .project-cta { color: var(--crimson); font-weight: 900; margin-top: 6px; }

    .quote-band {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      border-radius: var(--radius-xl);
      overflow: hidden;
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      background: #fff;
    }
    .quote-left { background: linear-gradient(135deg, var(--crimson), #b62530); color: #fff; padding: 42px; }
    .quote-left p { color: rgba(255,255,255,.86); }
    .quote-left h2 { font-size: clamp(2rem, 3vw, 3.5rem); margin-bottom: 14px; }
    .quote-right { padding: 42px; display: grid; gap: 20px; align-content: center; }

    .form-status {
      margin-top: 1rem;
      font-size: 0.95rem;
      line-height: 1.5;
    }

    .form-status.success {
      color: #2f6b3f;
    }

    .form-status.error {
      color: #9f1d1d;
    }


    .contact-form { gap: 12px; }
    .form-control {
      min-height: 46px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid var(--line);
      font: inherit;
      color: var(--charcoal);
    }
    .contact-submit { min-height: 50px; }
    footer {
      background: #111827;
      color: #fff;
      padding: 46px 0;
    }
    footer p, footer a { color: rgba(255,255,255,.72); }
    .footer-grid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }


    @media (max-width: 1120px) {
      .nav { height: auto; min-height: 76px; padding: 12px 0; gap: 16px; }
      .nav-links { gap: 18px; font-size: .82rem; }
      .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 34px; }
      .hero-copy { max-width: 560px; }
      .grid.five { grid-template-columns: repeat(3, 1fr); }
    }

    @media (max-width: 920px) {
      .nav { justify-content: space-between; align-items: center; }
      .nav-links { display: none; }
      .nav .btn { min-height: 44px; padding: 0 16px; font-size: .82rem; }
      .hero { padding: 56px 0 54px; }
      .hero-grid, .quote-band { grid-template-columns: 1fr; }
      .hero-copy { max-width: 100%; gap: 18px; }
      .portrait-card { min-height: 330px; max-width: 560px; width: 100%; margin: 0 auto; }
      .grid.five, .grid.three { grid-template-columns: 1fr 1fr; }
      .quote-left, .quote-right { padding: 34px; }
    }
    @media (max-width: 640px) {
      .container { width: min(100% - 24px, var(--max)); }
      h1 { font-size: clamp(2.1rem, 11vw, 3.2rem); }
      h2 { font-size: clamp(1.9rem, 9vw, 2.7rem); }
      .brand-text strong { font-size: 1.2rem; }
      .brand-logo { width: 40px; height: 40px; border-radius: 10px; }
      .brand-text span { font-size: .68rem; }
      .nav .btn { display: none; }
      .hero { padding: 44px 0 46px; }
      .hero-actions { gap: 10px; }
      .hero-actions .btn { min-height: 42px; padding: 0 14px; font-size: .82rem; }
      .hero-copy .lead { font-size: 1rem; }
      .grid.five, .grid.three { grid-template-columns: 1fr; }
      .projects-head { align-items: start; flex-direction: column; }
      .project-body, .card { padding: 22px; }
      .portrait-card { min-height: 290px; border-radius: 24px; }
      .quote-left, .quote-right { padding: 26px 22px; }
      .footer-grid { gap: 14px; }
    }
  

.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--crimson);
  outline-offset: 2px;
}