/* ===== Reset & base ===== */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      font-size: 16px; line-height: 1.6; color: #171717; background: #fff;
    }
    img { display:block; max-width:100%; height:auto; }
    :root {
      --maxw: 1200px;
      --pad-x: clamp(16px, 3vw, 32px);
      --brand: #0f766e; /* teal-700 */
      --brand-ink: #134e4a; /* teal-900 */
      --ink: #171717;
      --muted: #525252;
      --surface: #ffffff;
      --surface-2: #f7f7f7;
      --shadow: 0 10px 25px rgba(0,0,0,.08);
      scroll-behavior: smooth;
    }

    /* ===== Layout helpers ===== */
    .container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
    .stack { display:flex; flex-direction:column; gap: clamp(12px, 2.2vw, 20px); }
    .grid { display:grid; gap: clamp(16px, 2.4vw, 32px); }

    /* ===== Header / Nav ===== */
    .header { position: sticky; top: 0; z-index: 50; background: #000; box-shadow: 0 1px 0 rgba(255,255,255,.06); }
    .header-inner { display:flex; align-items:center; justify-content:space-between; min-height: 72px; }
    .brand { display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-weight:700; letter-spacing:.2px; padding-block: 10px; }
    .brand-logo { height: 40px; width:auto; display:block; }
    .brand-text { font-size: 1.05rem; }
    .nav { display:flex; align-items:center; }
    .nav-list { list-style:none; display:flex; gap: clamp(16px, 3vw, 32px); margin:0; padding:0; }
    .nav-link { color:#fff; text-decoration:none; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size: .92rem; }
    .nav-link:focus-visible, .nav-link:hover { text-decoration: underline; text-underline-offset: 4px; }

    /* ===== Hero ===== */
    .hero { position:relative; isolation:isolate; }
    .hero::before {
      content:""; position:absolute; inset:0;
      background: center / cover no-repeat url("../img/background.jpg");
      z-index:-2;
    }
    .hero::after {
      content:""; position:absolute; inset:0; background: rgba(0,0,0,.6); z-index:-1;
    }
    .hero-inner { display:grid; place-items:center; min-height: clamp(520px, 86vh, 860px); padding-block: clamp(48px, 8vh, 96px); }
    .hero-card { max-width: 900px; color:#fff; text-align:left; }
    .hero-title { font-size: clamp(30px, 5vw, 56px); line-height:1.1; margin:0 0 12px; font-weight:800; }
    .hero-text { font-size: clamp(18px, 2.2vw, 22px); opacity:.95; margin: 0 0 16px; }
    .hero-services { list-style: none; padding:0; margin: 8px 0 0; display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; }
    .hero-services li { font-size: clamp(16px, 2vw, 18px); position:relative; padding-left: 22px; }
    .hero-services li::before { content:"•"; position:absolute; left:0; top:0; }

    /* ===== About / Company ===== */
    .section { padding-block: clamp(40px, 7vw, 80px); background: var(--surface); }
    .section .section-title { font-size: clamp(28px, 3.2vw, 40px); line-height:1.2; margin:0 0 12px; font-weight:800; color: var(--ink); }
    .section .lead { color: var(--muted); }
    .company { }
    .company-layout { grid-template-columns: 1.6fr 1fr; align-items:start; }
    @media (max-width: 960px){ .company-layout { grid-template-columns: 1fr; } }
    .company p { margin:0 0 14px; }
    .company h3 { margin: 18px 0 8px; font-size: clamp(18px, 2.2vw, 22px); color: var(--brand-ink); }

    .products { display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .product { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow); background:#eee; }

    /* ===== Services timeline ===== */
    .services { background: var(--surface-2); }
    .timeline { position:relative; max-width: var(--maxw); margin-inline:auto; padding: 10px var(--pad-x) 40px; }
    .timeline::after { content:""; position:absolute; top:0; bottom:0; left:50%; width:0; background:#e5e7eb; transform: translateX(-50%); box-shadow: inset 0 0 0 1px #fff; }

    /* single item */
    .tl-item { position: relative; display:grid; grid-template-columns: 1fr; gap: 14px; min-height: 120px; padding-block: 18px; }
    .tl-item .card { background:#fff; border-radius: 12px; box-shadow: var(--shadow); padding: 20px; position:relative; }
    .tl-item .date { color: var(--brand); font-weight: 700; font-size: 1.05rem; }
    .tl-item .title { margin: 2px 0 6px; font-size: clamp(20px, 2.2vw, 24px); }
    .tl-item .copy { margin:0; color:#374151; }

    .tl-media { position:absolute; top: 18px; width: 84px; height: 84px; border-radius: 50%; overflow:hidden; box-shadow: var(--shadow); border: 4px solid #fff; background:#ddd; }
    .tl-media img { width:100%; height:100%; object-fit:cover; }

    /* left/right alignment for ≥ 768px */
    @media (min-width: 768px) {
      .tl-item { min-height: 140px; }
      .tl-item--left  { padding-right: clamp(40px, 6vw, 80px); }
      .tl-item--right { padding-left:  clamp(40px, 6vw, 80px); }
      .tl-item--left  { grid-template-columns: 1fr minmax(0, 1fr); }
      .tl-item--right { grid-template-columns: minmax(0, 1fr) 1fr; }
      .tl-item--left  .card { grid-column: 1; text-align: right; }
      .tl-item--right .card { grid-column: 2; text-align: left; }
      .tl-item--left  .tl-media { right: calc(50% - 42px); }
      .tl-item--right .tl-media { left:  calc(50% - 42px); }
    }

    /* mobile stack */
    @media (max-width: 767px){
      .timeline::after { left: 60px; transform:none; }
      .tl-media { left: 18px; }
      .tl-item { padding-left: 110px; }
      .tl-item .card { text-align:left; }
    }

    /* ===== Footer spacing (if needed) ===== */
    .spacer { height: 24px; }

    /* ===== Footer ===== */
    .footer { background:#000; color:#e5e7eb; }
    .footer a { color:#e5e7eb; text-decoration:none; }
    .footer a:hover, .footer a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
    .footer-inner { display:grid; gap: clamp(16px, 2.4vw, 32px); grid-template-columns: 1.4fr 1fr 1fr; padding-block: clamp(28px, 4vw, 48px); }
    .footer h4 { margin:0 0 8px; font-size: 1.05rem; color:#fff; }
    .footer p { margin:0; color:#cbd5e1; }
    .footer small { color:#9ca3af; }
    @media (max-width: 900px){ .footer-inner { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 640px){ .footer-inner { grid-template-columns: 1fr; } }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }