/* keep your reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

/* full-page background canvas */
#canvas1 {
  position: fixed;     /* stays put while scrolling */
  inset: 0;            /* top/right/bottom/left: 0 */
  width: 100vw;
  height: 100vh;       /* or: height: 100dvh; for mobile address-bar quirks */
  z-index: -1;         /* behind your content */
  pointer-events: none;/* clicks go through */
  display: block;
  background: #15282f;   /* optional, for contrast while loading */
}
/* Translucent header */
#header {
  position: sticky;       /* stays at top while scrolling */
  top: 0;
  z-index: 1000;

  /* Fallback tint (80% opacity) */
  background: rgba(4, 4, 4, 0.70);   /* same as #6c2501cc */

  /* Fancy glass effect (optional) */
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);

  border-bottom: 1px solid rgba(255,255,255,.08); /* subtle separator */
  color: #fff;
}
#link{
  color: #eea735
}
header a { color: #fff; }
header a:hover, header a:focus { text-decoration: underline; }
#main {
  position: relative;
  z-index: 1;
  background-image:
    linear-gradient(to bottom, #6c250180, #6c250100);
  color: #fff;
}
    :root { --max: 1000px; }
    * { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; }
    a { color: inherit; text-decoration: none; }
    .container { max-width: var(--max); margin: 0 auto; padding: 1rem; }
    header { border-bottom: 1px solid #e5e7eb; background: #fff; position: sticky; top: 0; z-index: 10; }
    .brand { display: flex; align-items: center; gap: .75rem; }
    .brand img { height: 90px; width: 90px; object-fit: contain; }
    nav ul { list-style: none; display: flex; gap: 1rem; padding: 0; margin: 0; flex-wrap: wrap; }
    .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    main section { padding: 3rem 0; border-bottom: 1px solid #f1f5f9; }
    h1, h2 { margin: 0 0 .5rem; line-height: 1.2; }
    .grid { display: grid; gap: 1rem; }
    @media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
    form label { display: block; font-weight: 600; margin-top: 1rem; }
    input, textarea { width: 100%; padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; }
    button { margin-top: 1rem; padding: .75rem 1rem; border: 0; border-radius: .5rem; background: #111827; color: #fff; cursor: pointer; }
    footer { text-align: center; padding: 2rem 1rem; color: #6b7280; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
    .skip { position: absolute; left: -9999px; top: -9999px; }
    .skip:focus { left: 1rem; top: 1rem; background: #111827; color: #fff; padding: .5rem .75rem; border-radius: .5rem; }
:root{
      /* Tweak these to your brand + opacity */
      --tintA: rgb(108 37 1 / 0.22);    /* #6c2501 @ 22% */
      --tintB: rgb(18 24 38 / 0.22);    /* deep slate @ 22% */
      --radius: 16px;
      --maxw: 1100px;
    }
    *{ box-sizing: border-box; }
    body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b0b0c; color:#fff; }
    a{ color:inherit; }
    .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 2rem 1rem 4rem; }

    .services{ display: grid; gap: 1.25rem; margin-top: 2rem; }

    .service{
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.25rem;
      padding: 2rem;
      border-radius: var(--radius);
      backdrop-filter: blur(6px) saturate(120%);
      -webkit-backdrop-filter: blur(6px) saturate(120%);
      color:#fff;
      border: 1px solid rgba(255,255,255,.08);
    }
    .service:nth-child(odd){ background: var(--tintA); }
    .service:nth-child(even){ background: var(--tintB); }

    .service .media{
      width: 100%;
      aspect-ratio: 5/4;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 6px 24px rgba(0,0,0,.35);
    }
    .service img{
      width: 100%;
      height: 100%;
      object-fit: fit;
      display:block;
    }
    .service h2{ margin: 0 0 .5rem; font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem); }
    .service p{ margin: 0; opacity: .92; }

    /* Two-column on larger screens */
    @media (min-width: 820px){
      .service{ grid-template-columns: 1fr 1fr; align-items: center; padding: 2.5rem; }
      /* Default layout: text left, image right */
      .service .body{ order: 0; }
      .service .media{ order: 1; }
      /* Even items flip (image left, text right) */
      .service:nth-child(even) .body{ order: 1; }
      .service:nth-child(even) .media{ order: 0; }
    }