:root {
    --bg: #F5F6F9;
    --surface: #FFFFFF;
    --bg-alt: #E8EBF2;
    --ink: #1A1840;
    --muted: #555977;
    --navy: #272162;
    --on-navy: #F3F4FB;
    --on-navy-soft: rgba(243, 244, 251, 0.78);
    --teal: #17B3A3;
    --rule: #CBD0DE;
    --rule-on-navy: rgba(243, 244, 251, 0.24);
    --font-display: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    --font-body: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0E0D1F; --surface: #15142B; --bg-alt: #181733;
      --ink: #ECEDF7; --muted: #A3A6C4; --navy: #1B1749; --teal: #2CCDBB; --rule: #34335A;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0E0D1F; --surface: #15142B; --bg-alt: #181733;
    --ink: #ECEDF7; --muted: #A3A6C4; --navy: #1B1749; --teal: #2CCDBB; --rule: #34335A;
    color-scheme: dark;
  }

  *, *::before, *::after { box-sizing: inherit; }
  [hidden] { display: none !important; }
  html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 76px); background: var(--bg); -webkit-text-size-adjust: 100%; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1.125rem; line-height: 1.8; }
  body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--navy); z-index: 30; }
  h1, h2, h3 { font-family: var(--font-display); margin: 0; }
  p { margin: 0; }
  a { color: inherit; }
  :focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  main:focus { outline: none; }
  .wrap { max-width: 1120px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }

  /* Header */
  .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--navy); border-bottom: 1px solid var(--rule-on-navy); color: var(--on-navy); }
  .site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; }
  .logo { display: inline-flex; }
  .logo img { display: block; height: 36px; width: auto; }
  .nav { display: flex; align-items: center; gap: 1rem; }
  .nav-links { display: none; gap: clamp(0.9rem, 1.6vw, 1.6rem); }
  .nav-links a { text-decoration: none; color: var(--on-navy-soft); font-size: 0.96rem; padding-block: 0.3rem; white-space: nowrap; }
  .nav-links a:hover { color: var(--on-navy); }
  .nav-links a[aria-current="page"], .menu a[aria-current="page"] { color: var(--on-navy); text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 9px; }
  .hdr-btn { font: inherit; font-size: 0.95rem; color: var(--on-navy); background: transparent; border: 1px solid var(--on-navy-soft); border-radius: 4px; padding: 0.35rem 0.9rem; min-height: 40px; cursor: pointer; }
  .hdr-btn:hover { background: var(--on-navy); color: var(--navy); border-color: var(--on-navy); }
  .menu { position: absolute; inset-inline: 0; top: 100%; background: var(--navy); border-bottom: 1px solid var(--rule-on-navy); padding-block: 0.5rem 1rem; }
  .menu ul { list-style: none; margin: 0; padding: 0; }
  .menu li + li { border-top: 2px dashed var(--rule-on-navy); }
  .menu a { display: block; padding: 0.8rem 0; text-decoration: none; color: var(--on-navy-soft); font-family: var(--font-display); font-weight: 600; }
  @media (min-width: 1100px) { .nav-links { display: flex; } #menuBtn { display: none; } #menuPanel { display: none !important; } }

  /* Buttons */
  .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.7rem 1.7rem; border-radius: 4px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid var(--teal); }
  .btn-solid { background: var(--teal); color: #0B0A24; }
  .btn-solid:hover { background: transparent; color: var(--on-navy); }
  .btn-line { background: transparent; color: var(--on-navy); border-color: var(--on-navy); }
  .btn-line:hover { background: var(--on-navy); color: var(--navy); }
  .on-light .btn-solid:hover { color: var(--ink); }
  .actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.85rem; }

  /* Hero (home) */
  .hero { background: var(--navy); color: var(--on-navy); padding-block: clamp(56px, 11vw, 130px) clamp(40px, 7vw, 80px); }
  .hero-grid { display: grid; gap: 2.5rem; align-items: center; }
  @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }
  .hero-inner { max-width: 40rem; }
  .hero h1 { font-weight: 700; font-size: clamp(2.8rem, 10vw, 6rem); line-height: 1.25; }
  .hero .alt-name { margin-top: 0.3rem; font-family: var(--font-display); font-size: clamp(1.2rem, 3.5vw, 1.7rem); color: var(--teal); }
  .hero .lead { margin-top: 1.75rem; font-size: clamp(1.1rem, 2.4vw, 1.3rem); color: var(--on-navy-soft); max-width: 32rem; }
  .hero-art svg { display: block; width: 100%; height: auto; max-width: 520px; margin-inline: auto; }
  .stitch { display: block; margin-top: clamp(36px, 6vw, 64px); width: 100%; height: 10px; }
  .stitch line { stroke: #2CCDBB; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 18 12; }
  .stitch.sew { animation: sew-ltr 2.4s cubic-bezier(.5, 0, .2, 1) 0.3s both; }
  :root[dir="rtl"] .stitch.sew { animation-name: sew-rtl; }
  @keyframes sew-ltr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes sew-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
  @media (prefers-reduced-motion: reduce) { .stitch.sew, :root[dir="rtl"] .stitch.sew { animation: none; } }

  /* Inner page head */
  .page-head { background: var(--navy); color: var(--on-navy); padding-block: clamp(36px, 6vw, 64px) clamp(28px, 5vw, 44px); }
  .page-head h1 { font-weight: 700; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.3; }
  .page-head .stitch { margin-top: clamp(24px, 4vw, 40px); }
  .crumbs { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.6rem; font-size: 0.95rem; color: var(--on-navy-soft); }
  .crumbs li + li::before { content: "/"; margin-inline-end: 0.6rem; color: var(--teal); }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
  .page-head .sub { margin-top: 0.75rem; color: var(--on-navy-soft); max-width: 36rem; }
  .page-head .wrap { padding-bottom: 0; }
  .head-gap { height: clamp(28px, 5vw, 48px); background: var(--navy); }

  /* Content */
  .content { padding-block: clamp(44px, 7vw, 88px); }
  h2 { font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.3rem); line-height: 1.4; }
  .split { display: grid; gap: 1.75rem; }
  @media (min-width: 800px) { .split { grid-template-columns: 1fr 1.6fr; gap: 3rem; } }
  .text { display: grid; gap: 1.1rem; max-width: 40rem; font-size: 1.12rem; }
  .muted { color: var(--muted); }

  .rows { list-style: none; margin: 0; padding: 0; border-bottom: 2px dashed var(--rule); }
  .rows > li { border-top: 2px dashed var(--rule); }
  .row { display: grid; gap: 0.3rem 1.25rem; padding-block: 1.4rem; text-decoration: none; align-items: center; grid-template-columns: auto 1fr auto; }
  .row .ic { width: 64px; height: 64px; border-radius: 6px; background: var(--navy); display: grid; place-items: center; }
  .row .ic svg { width: 66%; height: auto; color: #F3F4FB; --cut: #272162; }
  .row .ic.t { background: #17B3A3; } .row .ic.t svg { color: #fff; --cut: #17B3A3; }
  .row .ic.w { background: #E8EBF2; border: 1px solid var(--rule); } .row .ic.w svg { color: #272162; --cut: #E8EBF2; }
  .row h3 { font-weight: 600; font-size: 1.3rem; }
  .row p { color: var(--muted); }
  .row .go { font-size: 1.4rem; color: var(--teal); }
  :root[dir="rtl"] .row .go { transform: scaleX(-1); }
  a.row:hover h3 { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 3px; text-underline-offset: 6px; }
  .rows.plain .row { grid-template-columns: 1fr; }
  @media (min-width: 800px) { .rows.plain .row { grid-template-columns: 1fr 1.6fr; align-items: baseline; } }

  .why-grid { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
  .why-grid li { padding-block: 1.4rem; border-top: 2px dashed var(--rule); font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; }
  @media (min-width: 800px) { .why-grid { grid-template-columns: repeat(4, 1fr); gap: 0 2rem; } .why-grid li { font-size: 1.25rem; padding-block: 2rem; } }

  .band { background: var(--navy); color: var(--on-navy); padding-block: clamp(40px, 6vw, 72px); }
  .band .wrap { display: grid; gap: 1.25rem; }
  @media (min-width: 800px) { .band .wrap { grid-template-columns: 1fr auto; align-items: center; } }
  .band p { color: var(--on-navy-soft); margin-top: 0.4rem; }
  .band .actions { margin-top: 0; }

  /* Tiles (sample images) */
  .chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.75rem; }
  .chip { font: inherit; font-size: 0.98rem; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 1.1rem; min-height: 40px; cursor: pointer; }
  .chip:hover { border-color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .tiles { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  @media (min-width: 800px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
  .tile { margin: 0; }
  .ph { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
  .ph::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 12px); pointer-events: none; }
  .ph svg { position: relative; z-index: 1; width: 58%; height: auto; }
  .ph .ex { position: absolute; z-index: 2; top: 10px; inset-inline-start: 10px; font-size: 0.78rem; line-height: 1; padding: 0.3rem 0.6rem; border-radius: 3px; background: rgba(11, 10, 36, 0.72); color: #fff; font-family: var(--font-display); }
  .t1 { background-color: #272162; color: #F3F4FB; --cut: #272162; }
  .t2 { background-color: #17B3A3; color: #fff; --cut: #17B3A3; }
  .t3 { background-color: #E8EBF2; color: #272162; --cut: #E8EBF2; }
  .t4 { background-color: #5A52B8; color: #F3F4FB; --cut: #5A52B8; }
  .t3::after { background-image: repeating-linear-gradient(135deg, rgba(39,33,98,0.06) 0 2px, transparent 2px 12px); }
  .tile figcaption { margin-top: 0.5rem; font-size: 0.95rem; color: var(--muted); }
  .group + .group { margin-top: 3rem; }
  .group h2 { margin-bottom: 1.25rem; }
  .note { margin-top: 2rem; padding-top: 1rem; border-top: 2px dashed var(--rule); font-size: 0.95rem; color: var(--muted); }

  /* Contact / location */
  .info { margin: 0; display: grid; gap: 1.75rem; }
  .info dt { color: var(--muted); font-size: 0.95rem; }
  .info dd { margin: 0.1rem 0 0; font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.7rem); }
  .info dd a { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
  .social { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
  .map { border-radius: 6px; overflow: hidden; border: 1px solid var(--rule); position: relative; }
  .map svg { display: block; width: 100%; height: auto; }
  .map .ex { position: absolute; top: 10px; inset-inline-start: 10px; font-size: 0.78rem; line-height: 1; padding: 0.3rem 0.6rem; border-radius: 3px; background: rgba(11, 10, 36, 0.72); color: #fff; font-family: var(--font-display); }

  /* Footer */
  .footer { background: var(--navy); color: var(--on-navy-soft); padding-block: clamp(36px, 6vw, 56px) 1.5rem; font-size: 0.97rem; }
  .footer .cols { display: grid; gap: 2rem; }
  @media (min-width: 800px) { .footer .cols { grid-template-columns: 1.2fr 1fr 1fr; } }
  .footer img { display: block; height: 40px; width: auto; }
  .footer h3 { font-size: 1rem; color: var(--on-navy); margin-bottom: 0.5rem; }
  .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
  .footer a { text-decoration: none; }
  .footer a:hover { color: var(--on-navy); text-decoration: underline; }
  .footer .copy { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule-on-navy); font-size: 0.92rem; }

  /* Real photos inside tiles */
  .ph.has-img::after { display: none; }
  .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  .map iframe { display: block; width: 100%; height: 340px; border: 0; }
  .map-link { margin-top: 1rem; }

  /* Product photos: white frame, never cropped */
  .ph.has-img { aspect-ratio: 20 / 21; background: #fff; border: 1px solid var(--rule); }
  .ph.has-img a { position: absolute; inset: 0; display: block; }
  .ph.has-img img { object-fit: contain; }

  /* Image viewer */
  .ph.has-img a { cursor: zoom-in; }
  .lb { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(10, 9, 30, 0.93);
        padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px calc(env(safe-area-inset-bottom, 0px) + 72px); }
  .lb img { display: block; max-width: min(94vw, 960px); max-height: 100%; width: auto; height: auto; background: #fff; border-radius: 6px; object-fit: contain; }
  .lb-cap { position: absolute; inset-inline: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); margin: 0; padding-inline: 72px; text-align: center; color: #F3F4FB; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; }
  .lb button { position: absolute; min-width: 48px; min-height: 48px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .lb button:hover { background: rgba(255, 255, 255, 0.25); }
  .lb-close { top: calc(env(safe-area-inset-top, 0px) + 12px); inset-inline-end: 12px; }
  .lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
  .lb-prev { inset-inline-start: 10px; }
  .lb-next { inset-inline-end: 10px; }
  .lb-prev::before { content: "\2039"; }
  .lb-next::before { content: "\203A"; }
  :root[dir="rtl"] .lb-prev::before { content: "\203A"; }
  :root[dir="rtl"] .lb-next::before { content: "\2039"; }
  .lb.single .lb-prev, .lb.single .lb-next { display: none; }

  /* Wide (landscape) product photos */
  .ph.has-img.landscape { aspect-ratio: 4 / 3; }
  .tiles.wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  @media (min-width: 800px) { .tiles.wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }

  /* Image viewer v2: caption is navy on a white chip and never overlaps the photo */
  .lb { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
        padding: calc(env(safe-area-inset-top, 0px) + 60px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px); }
  .lb img { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
  .lb-cap { position: static; inset-inline: auto; bottom: auto; margin: 0; padding: 0.45rem 1.2rem; max-width: min(92vw, 640px);
            border-radius: 999px; background: #fff; color: #272162; font-weight: 700; font-size: 1.05rem; }
  .lb-cap:empty { display: none; }

  /* ---- Compact layout (v3): smaller header and hero, photo-based sector rows, slim footer ---- */
  .site-header .bar { min-height: 60px; }
  .logo img { height: 32px; }
  .hero { padding-block: clamp(22px, 5vw, 60px) clamp(18px, 4vw, 36px); }
  .hero-grid { gap: 1.4rem; }
  @media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }
  .hero h1 { font-size: clamp(1.9rem, 7.5vw, 3.3rem); line-height: 1.2; }
  .hero .alt-name { margin-top: 0.1rem; font-size: clamp(1rem, 3vw, 1.25rem); }
  .hero .lead { margin-top: 0.7rem; font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.65; }
  .hero .actions { margin-top: 1rem; gap: 0.6rem; }
  .hero .btn { min-height: 44px; padding: 0.5rem 1.3rem; font-size: 0.98rem; }
  .hero .stitch { margin-top: clamp(16px, 3vw, 26px); }
  .hero-photos { display: none; }
  @media (min-width: 900px) { .hero-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } }
  .hp { display: flex; flex-direction: column; background: #fff; border-radius: 6px; overflow: hidden; text-decoration: none; color: #272162; }
  .hp img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; }
  .hp span { padding: 0.45rem 0.6rem 0.6rem; font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; text-align: center; line-height: 1.35; }
  .hp:hover span { text-decoration: underline; text-decoration-color: #17B3A3; text-decoration-thickness: 3px; text-underline-offset: 5px; }

  section, .content { padding-block: clamp(26px, 5vw, 60px); }
  .content.alt { background: var(--bg-alt); }
  h2 { font-size: clamp(1.35rem, 3.2vw, 2rem); }
  .band { padding-block: clamp(22px, 4vw, 44px); }
  .page-head { padding-block: clamp(22px, 4.5vw, 46px) clamp(16px, 3vw, 28px); }
  .page-head .stitch { margin-top: clamp(14px, 3vw, 22px); }
  .page-head h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }

  .row { padding-block: 0.85rem; gap: 0.3rem 1rem; }
  .row .thumb { width: 96px; height: 84px; background: #fff; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; display: grid; place-items: center; }
  .row .thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .row h3 { font-size: 1.15rem; }
  @media (min-width: 800px) { .row { padding-block: 1.1rem; } .row .thumb { width: 132px; height: 112px; } .row h3 { font-size: 1.3rem; } }

  .why-grid.compact { grid-template-columns: repeat(2, 1fr); gap: 0 1rem; margin-top: 0.6rem; }
  .why-grid.compact li { padding-block: 0.75rem; font-size: 1rem; }
  @media (min-width: 800px) { .why-grid.compact { grid-template-columns: repeat(4, 1fr); gap: 0 2rem; } .why-grid.compact li { padding-block: 1rem; font-size: 1.1rem; } }

  .footer { padding-block: 22px 12px; }
  .footer .f-main { display: grid; gap: 14px; }
  @media (min-width: 800px) { .footer .f-main { grid-template-columns: 1fr 1.6fr; align-items: center; gap: 32px; } }
  .footer .f-brand p { margin-top: 0.5rem; font-size: 0.95rem; max-width: 24rem; }
  .footer img { height: 34px; }
  .footer .f-links, .footer .f-contact { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
  .footer .f-contact { margin-top: 0.5rem; color: var(--on-navy); }
  .footer .copy { margin-top: 14px; padding-top: 10px; font-size: 0.88rem; }

  /* ---- Hero graphic back next to the brand name, kept compact ---- */
  .hero-grid { gap: 0.9rem; }
  .hero-art svg { display: block; width: 100%; height: auto; max-width: 250px; margin-inline: auto; }
  @media (min-width: 900px) { .hero-grid { gap: 2rem; } .hero-art svg { max-width: 470px; } }

  /* ---- Product pages: header text and cards ---- */
  .psec { padding-top: clamp(18px, 4vw, 40px); }
  .kicker { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.5rem; color: var(--muted); font-size: 1rem; }
  .kicker .dash { display: block; width: 34px; height: 3px; background: var(--teal); }
  .ptitle { font-weight: 800; font-size: clamp(1.8rem, 6.2vw, 3.1rem); line-height: 1.25; color: var(--ink); }
  .pintro { margin-top: 0.7rem; max-width: 46rem; color: var(--muted); font-size: 1.05rem; line-height: 1.9; }
  .pgrid { margin-top: 1.3rem; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
  @media (min-width: 800px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
  @media (min-width: 1100px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
  .pgrid.wide { grid-template-columns: 1fr; }
  @media (min-width: 800px) { .pgrid.wide { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .pgrid.wide { grid-template-columns: repeat(3, 1fr); } }
  .group h2 { margin-top: 0.4rem; }
  .group + .group { margin-top: 2rem; }
  .pcard { display: flex; flex-direction: column; margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; color: #1A1840; }
  .pcard .ph { border: 0; border-radius: 0; border-bottom: 1px solid #E3E5EE; }
  .zoom { position: absolute; z-index: 3; inset-inline-end: 10px; bottom: 10px; width: 40px; height: 40px; border-radius: 50%; background: #272162; color: #fff; display: grid; place-items: center; pointer-events: none; }
  .pbody { display: flex; flex-direction: column; flex: 1; padding: 0.95rem 0.95rem 0.8rem; }
  .pname { font-size: clamp(1.05rem, 3.8vw, 1.3rem); font-weight: 800; line-height: 1.4; color: #1A1840; }
  .pdesc { margin-top: 0.45rem; color: #555977; font-size: 0.92rem; line-height: 1.85; }
  .pfoot { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .plogo { display: block; height: 26px; width: auto; }
  .pcode { direction: ltr; unicode-bidi: isolate; font-size: 0.8rem; color: #555977; letter-spacing: 0.04em; }

  /* ---- Icons: phone, email and social accounts ---- */
  .ico { display: inline-grid; place-items: center; flex: none; }
  .ico svg { display: block; width: 1.1em; height: 1.1em; }
  .has-ico { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
  .info dd .has-ico .num { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .info dd .has-ico .ico { color: var(--muted); }
  .social { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .info dd a.soc { text-decoration: none; }
  .soc { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
  .soc svg { display: block; width: 20px; height: 20px; }
  .soc:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
  .f-social { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
  .footer .soc { width: 38px; height: 38px; border-color: var(--rule-on-navy); color: var(--on-navy); }
  .footer .soc svg { width: 18px; height: 18px; }
  .footer .soc:hover { background: var(--on-navy); border-color: var(--on-navy); color: var(--navy); }
  .footer .f-contact a.has-ico { color: var(--on-navy); }

  /* ---- Home: About block with the teal headline ---- */
  :root { --teal-text: #0E9F8F; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --teal-text: #2CCDBB; } }
  :root[data-theme="dark"] { --teal-text: #2CCDBB; }
  .tagline { font-weight: 800; font-size: clamp(2.2rem, 9.5vw, 4.2rem); line-height: 1.18; color: var(--teal-text); }
  .tagline span { display: block; }
  .about-home .text { font-size: 1.05rem; line-height: 1.9; }
  .about-home .actions { margin-top: 0.4rem; }

  /* ---- From the reference screenshots: product landing cards, back link, quote form ---- */
  .back { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.1rem; color: var(--teal-text); text-decoration: none; font-weight: 500; }
  .back:hover { text-decoration: underline; text-underline-offset: 5px; }
  .back svg { width: 1.1em; height: 1.1em; }
  .ptitle span { display: block; }
  .scards { margin-top: 1.4rem; display: grid; gap: 18px; grid-template-columns: 1fr; }
  @media (min-width: 900px) { .scards { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
  .scard { display: block; background: #fff; border: 1px solid var(--rule); border-bottom: 4px solid var(--teal); color: #fff; text-decoration: none; }
  .scard-media { position: relative; aspect-ratio: 4 / 3; background: #fff; }
  .scard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
  .scard-media::before { content: ""; position: absolute; z-index: 2; inset-inline-start: 0; top: 0; width: 5px; height: 56px; background: var(--teal); }
  .scard-no { position: absolute; z-index: 2; top: 12px; inset-inline-start: 18px; direction: ltr; unicode-bidi: isolate; font-size: 0.76rem; letter-spacing: 0.16em; color: #555977; }
  .scard-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem 1.1rem; background: #272162; }
  .scard-bar h3 { font-size: clamp(1.3rem, 5vw, 1.6rem); font-weight: 800; color: #fff; line-height: 1.3; }
  .scard-bar p { margin-top: 0.15rem; font-size: 0.92rem; color: rgba(243, 244, 251, 0.78); line-height: 1.6; }
  .scard-arrow { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: #2CCDBB; }
  .scard-arrow svg { width: 28px; height: 28px; }
  .scard:hover .scard-bar { background: #1B1749; }
  .btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; gap: 0.6rem; }
  .btn-navy:hover { background: transparent; color: var(--ink); }
  .btn svg { width: 1.1em; height: 1.1em; }

  .qwrap { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 2px dashed var(--rule); }
  .qform { display: grid; gap: 1rem; margin-top: 1rem; max-width: 780px; }
  .qrow { display: grid; gap: 1rem; }
  @media (min-width: 640px) { .qrow { grid-template-columns: 1fr 1fr; } }
  .qform label { display: grid; gap: 0.4rem; font-size: 0.98rem; color: var(--muted); }
  .qform input, .qform select, .qform textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0.7rem 0.8rem; min-height: 48px; width: 100%; }
  .qform textarea { min-height: 150px; resize: vertical; }
  .qform input:focus, .qform select:focus, .qform textarea:focus { outline: 3px solid var(--teal); outline-offset: 1px; }
  .qsubmit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
  .qnote { max-width: 22rem; color: var(--muted); font-size: 0.9rem; line-height: 1.7; }

  /* ---- Menu button: three lines ---- */
  .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .menu-btn { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; }
  .menu-btn svg { display: block; width: 22px; height: 22px; }

  /* ---- Location: map card ---- */
  .mapcard { display: grid; gap: 1rem; padding: 1.4rem; background: #fff; border: 1px solid var(--rule); border-bottom: 4px solid var(--teal); color: #1A1840; }
  .mapcard .mc-top { display: flex; align-items: center; gap: 0.9rem; }
  .mapcard .pin { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #272162; color: #2CCDBB; display: grid; place-items: center; }
  .mapcard .pin svg { width: 24px; height: 24px; }
  .mapcard h3 { font-size: 1.35rem; font-weight: 800; line-height: 1.3; }
  .mapcard .pc { direction: ltr; unicode-bidi: isolate; text-align: start; color: #555977; letter-spacing: 0.05em; font-size: 0.98rem; }
  .mapcard .btn { justify-self: start; }

  /* ---- Headline-only sections (contact, location) ---- */
  .psec.head-only { padding-bottom: 0.5rem; }
  .psec.head-only + .content { padding-top: 1.5rem; }

  /* ---- Home hero: slogan + second sentence ---- */
  .hero .lead.lead-2 { margin-top: 0.55rem; font-size: clamp(0.95rem, 2.2vw, 1.05rem); opacity: 0.92; }