:root {
    --sandstone: #c4a882;       /* warm clay tan */
    --sandstone-dk: #a88962;
    --sandstone-lt: #d8c2a1;
    --slate: #3a3a3a;           /* deep charcoal */
    --slate-2: #2a2a2a;
    --slate-3: #5a5a5a;
    --cream: #faf6ef;
    --cream-2: #f1ead8;
    --cream-3: #e6dcc4;
    --terracotta: #8b3a2f;      /* brick red accent */
    --terracotta-dk: #6e2c21;
    --line: rgba(58,58,58,0.10);
    --line-soft: rgba(58,58,58,0.06);
    --muted: #7a7568;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; }
  body { background: var(--cream); color: var(--slate); font-family: 'Inter', system-ui, sans-serif; font-size: 16.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 700px) { .wrap { padding: 0 20px; } }

  h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: -0.012em; color: var(--slate); line-height: 1.06; }
  h1 em, h2 em, h3 em { font-style: italic; color: var(--terracotta); font-weight: 500; }
  .eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--terracotta); font-family: 'Inter', sans-serif; }
  .eyebrow.on-dark { color: var(--sandstone); }

  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; transition: all 0.18s; cursor: pointer; border: 1.5px solid transparent; }
  .btn-primary { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
  .btn-primary:hover { background: var(--terracotta-dk); border-color: var(--terracotta-dk); }
  .btn-slate { background: var(--slate); color: var(--cream); border-color: var(--slate); }
  .btn-slate:hover { background: var(--slate-2); border-color: var(--slate-2); }
  .btn-ghost { background: transparent; color: var(--slate); border-color: rgba(58,58,58,0.35); }
  .btn-ghost:hover { border-color: var(--slate); background: rgba(58,58,58,0.04); }
  .btn-ghost.on-dark { color: var(--cream); border-color: rgba(250,246,239,0.3); }
  .btn-ghost.on-dark:hover { border-color: var(--cream); background: rgba(250,246,239,0.06); }
  .arr { transition: transform 0.18s; }
  .btn:hover .arr { transform: translateX(3px); }

  /* TOPBAR */
  .topbar { background: var(--slate); color: var(--cream); font-size: 12.5px; padding: 10px 0; }
  .topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
  .topbar .tb-l { display: flex; gap: 24px; align-items: center; color: rgba(250,246,239,0.78); }
  .topbar .tb-l .dot { width: 6px; height: 6px; background: var(--sandstone); display: inline-block; margin-right: 8px; vertical-align: middle; }
  .topbar .tb-r { display: flex; gap: 14px; align-items: center; color: rgba(250,246,239,0.7); }
  .topbar a:hover { color: var(--sandstone); }
  @media (max-width: 760px) { .topbar .tb-l span:not(:first-child), .topbar .tb-r span:not(:first-child) { display: none; } }

  /* NAV */
  header.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,246,239,0.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); }
  header.nav .wrap { display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; gap: 32px; }
  .brand { display: flex; align-items: center; gap: 14px; }
  .brand .mk { width: 48px; height: 48px; background: var(--terracotta); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 1px; padding: 4px; }
  .brand .mk i { background: var(--sandstone-lt); }
  .brand .mk i:nth-child(1) { background: var(--cream); }
  .brand .mk i:nth-child(4) { background: var(--cream); }
  .brand .mk i:nth-child(5) { background: var(--sandstone-lt); }
  .brand .bn { line-height: 1.1; }
  .brand .bn .n1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 20px; color: var(--slate); letter-spacing: -0.01em; }
  .brand .bn .n2 { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
  nav.main { display: flex; align-items: center; gap: 30px; }
  nav.main a { font-size: 14.5px; font-weight: 500; color: var(--slate-3); position: relative; padding: 6px 0; }
  nav.main a:hover, nav.main a.active { color: var(--slate); }
  nav.main a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--terracotta); }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  .nav-phone { font-family: 'Fraunces', serif; font-size: 17px; color: var(--slate); white-space: nowrap; font-weight: 500; }
  @media (max-width: 1100px) { nav.main { display: none; } }
  @media (max-width: 620px) { .nav-phone { display: none; } }

  /* HERO */
  .hero { background: var(--cream); position: relative; overflow: hidden; }
  .hero .wrap { padding: 90px 32px 90px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 70px; align-items: center; }
  .hero-copy h1 { font-size: clamp(2.5rem, 5.8vw, 4.6rem); margin: 26px 0; line-height: 1.04; }
  .hero-copy .lead { font-size: 18px; color: var(--slate-3); line-height: 1.65; margin-bottom: 38px; max-width: 32em; }
  .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-media { position: relative; aspect-ratio: 4/5; overflow: hidden; }
  .hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02); }
  .hero-media .frame { position: absolute; inset: -10px; border: 1px solid var(--terracotta); pointer-events: none; }
  .hero-media .badge { position: absolute; bottom: 32px; left: -22px; background: var(--cream); padding: 18px 24px; border-left: 3px solid var(--terracotta); max-width: 270px; }
  .hero-media .badge .lbl { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; }
  .hero-media .badge h4 { font-family: 'Fraunces', serif; font-size: 20px; margin-top: 6px; line-height: 1.2; font-weight: 500; }
  .hero-media .badge p { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
  @media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 40px; padding-top: 60px; } .hero-media .badge { left: 0; bottom: 0; } }

  /* TRUST STRIP */
  .trust { background: var(--slate); color: var(--cream); }
  .trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; }
  .trust .c { padding: 36px 28px; border-right: 1px solid rgba(250,246,239,0.10); }
  .trust .c:last-child { border-right: none; }
  .trust .c .num { font-family: 'Fraunces', serif; font-size: 40px; color: var(--sandstone); line-height: 1; font-weight: 500; }
  .trust .c .lbl { font-size: 13px; color: rgba(250,246,239,0.78); margin-top: 12px; line-height: 1.45; }
  @media (max-width: 760px) { .trust .wrap { grid-template-columns: 1fr 1fr; } .trust .c:nth-child(2) { border-right: none; } }

  /* SECTION */
  .block { padding: 100px 0; }
  .sec-head { max-width: 720px; margin-bottom: 56px; }
  .sec-head .eyebrow { display: inline-block; margin-bottom: 16px; }
  .sec-head h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); margin-bottom: 18px; }
  .sec-head p { font-size: 17px; color: var(--slate-3); max-width: 600px; line-height: 1.65; }

  /* SERVICES */
  .services-band { background: var(--cream); }
  .svc-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .svc-row { display: grid; grid-template-columns: 80px 1fr 2fr 120px; gap: 32px; padding: 28px 0; align-items: center; border-bottom: 1px solid var(--line); transition: background 0.18s; cursor: pointer; }
  .svc-row:hover { background: var(--cream-2); padding-left: 12px; padding-right: 12px; }
  .svc-row .n { font-family: 'Fraunces', serif; font-style: italic; color: var(--terracotta); font-size: 22px; font-weight: 500; }
  .svc-row h3 { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 500; line-height: 1.15; }
  .svc-row .desc { font-size: 14.5px; color: var(--slate-3); line-height: 1.55; }
  .svc-row .more { font-size: 13px; color: var(--terracotta); font-weight: 600; text-align: right; }
  @media (max-width: 800px) { .svc-row { grid-template-columns: 1fr; gap: 8px; } .svc-row .more { text-align: left; } }

  /* SECTORS */
  .sectors-band { background: var(--cream-2); }
  .sectors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 50px; }
  .sector { background: var(--cream); padding: 36px 28px; }
  .sector .num { font-family: 'Fraunces', serif; font-style: italic; color: var(--terracotta); font-size: 22px; font-weight: 500; margin-bottom: 14px; }
  .sector h3 { font-family: 'Fraunces', serif; font-size: 21px; font-weight: 500; margin-bottom: 12px; }
  .sector p { font-size: 14px; color: var(--slate-3); line-height: 1.55; }
  @media (max-width: 900px) { .sectors-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .sectors-grid { grid-template-columns: 1fr; } }

  /* PROCESS */
  .process-band { background: var(--slate); color: var(--cream); }
  .process-band .sec-head h2 { color: var(--cream); }
  .process-band .sec-head h2 em { color: var(--sandstone); }
  .process-band .sec-head p { color: rgba(250,246,239,0.7); }
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: rgba(250,246,239,0.1); border: 1px solid rgba(250,246,239,0.1); margin-top: 50px; }
  .step { background: var(--slate); padding: 32px 24px; }
  .step .sn { font-family: 'Fraunces', serif; font-style: italic; color: var(--sandstone); font-size: 32px; font-weight: 500; line-height: 1; }
  .step h3 { font-family: 'Fraunces', serif; color: var(--cream); font-size: 18px; font-weight: 500; margin-top: 14px; margin-bottom: 10px; }
  .step p { font-size: 13.5px; color: rgba(250,246,239,0.7); line-height: 1.55; }
  @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }

  /* CTA BAND */
  .cta-band { background: var(--terracotta); color: #fff; padding: 80px 0; }
  .cta-band .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: center; }
  .cta-band h2 { color: #fff; font-size: 2.2rem; margin-bottom: 14px; }
  .cta-band h2 em { color: var(--cream-2); }
  .cta-band p { color: rgba(255,255,255,0.92); font-size: 16px; max-width: 540px; }
  .cta-band .eyebrow { color: rgba(255,255,255,0.85); }
  .cta-side { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .cta-side .lbl { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.78); font-weight: 600; }
  .cta-side .ph { font-family: 'Fraunces', serif; font-size: 36px; color: #fff; font-weight: 500; }
  .cta-side .actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  @media (max-width: 800px) { .cta-band .wrap { grid-template-columns: 1fr; gap: 24px; } }

  /* FOOTER */
  .ft { background: var(--slate-2); color: rgba(250,246,239,0.66); padding: 70px 0 30px; }
  .ft .fcols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 60px; }
  .ft .fb .mk { width: 44px; height: 44px; background: var(--terracotta); margin-bottom: 18px; }
  .ft .fb .n1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--cream); }
  .ft .fb p { font-size: 13.5px; margin-top: 10px; line-height: 1.55; max-width: 320px; }
  .ft h4 { color: var(--cream); margin-bottom: 16px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
  .ft ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
  .ft ul a, .ft ul li { font-size: 13.5px; color: rgba(250,246,239,0.66); }
  .ft ul a:hover { color: var(--sandstone); }
  .ft .fbot { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(250,246,239,0.1); margin-top: 50px; padding-top: 22px; font-size: 12px; color: rgba(250,246,239,0.42); }
  @media (max-width: 760px) { .ft .fcols { grid-template-columns: 1fr 1fr; gap: 32px; } }

  /* REVEAL */
  .reveal { opacity: 1; animation: rev 0.7s cubic-bezier(0.2,0.7,0.3,1) both; }
  @keyframes rev { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }