/* ===== DESIGN TOKENS ===== */
  :root{
    --ral-anthracite: #24292b;   /* RAL 7016 */
    --ral-anthracite-2: #1a1d1e;
    --ral-traffic-grey: #8f999f; /* RAL 7042 */
    --ral-steel: #3c4a52;
    --ral-yellow: #f7b500;       /* RAL 1023 */
    --ral-yellow-dim: #c99000;
    --ral-white: #f5f6f5;        /* RAL 9010 */
    --ink: #cfd4d3;

    --font-display: "Oswald", "Arial Narrow", sans-serif;
    --font-body: "Inter", -apple-system, sans-serif;
    --font-mono: "Roboto Mono", "Courier New", monospace;

    --radius: 2px;
    --edge: 1px solid rgba(245,246,245,0.12);
  }

  @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--ral-anthracite-2);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  a{ color:inherit; text-decoration:none; }
  img,svg{ display:block; max-width:100%; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }
  h1,h2,h3{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; color:var(--ral-white); text-transform:uppercase; }
  .eyebrow{
    font-family:var(--font-mono); font-size:12px; letter-spacing:.14em;
    color:var(--ral-yellow); text-transform:uppercase; display:flex; align-items:center; gap:8px;
  }
  .eyebrow::before{ content:""; width:16px; height:2px; background:var(--ral-yellow); }
  :focus-visible{ outline:2px solid var(--ral-yellow); outline-offset:3px; }
  @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

  /* ===== HEADER ===== */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(26,29,30,0.92); backdrop-filter:blur(6px);
    border-bottom:var(--edge);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
  .logo{ font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--ral-white); letter-spacing:.02em; display:flex; align-items:center; gap:10px;}
  .logo .dot{ width:9px; height:9px; background:var(--ral-yellow); border-radius:50%; display:inline-block;}
  .nav-links{ display:flex; gap:28px; font-size:14px; text-transform:uppercase; letter-spacing:.05em; }
  .nav-links a{ opacity:.8; transition:opacity .15s; }
  .nav-links a:hover{ opacity:1; color:var(--ral-yellow); }
  .btn{
    font-family:var(--font-mono); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
    padding:11px 20px; border-radius:var(--radius); border:1px solid var(--ral-yellow);
    display:inline-flex; align-items:center; gap:8px; transition:.15s;
  }
  .btn-solid{ background:var(--ral-yellow); color:var(--ral-anthracite-2); font-weight:600; }
  .btn-solid:hover{ background:#ffc933; }
  .btn-ghost{ color:var(--ral-white); }
  .btn-ghost:hover{ background:rgba(247,181,0,0.1); }
  .menu-toggle{ display:none; }

  /* ===== HERO ===== */
  .hero{
    position:relative; overflow:hidden;
    padding:96px 0 64px;
    background:
      radial-gradient(ellipse at 80% 0%, rgba(60,74,82,0.55), transparent 60%),
      linear-gradient(180deg, var(--ral-anthracite-2), var(--ral-anthracite) 90%);
    border-bottom:var(--edge);
  }
  .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
  .hero h1{ font-size:clamp(34px,5vw,54px); line-height:1.05; margin:16px 0 20px; }
  .hero h1 em{ font-style:normal; color:var(--ral-yellow); }
  .hero p{ font-size:17px; color:var(--ral-traffic-grey); max-width:46ch; margin-bottom:28px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

  /* torque-gauge illustration */
  .gauge-wrap{ position:relative; aspect-ratio:1/1; max-width:380px; margin:0 auto; }
  .gauge-ring{ stroke:var(--ral-steel); stroke-width:10; fill:none; }
  .gauge-fill{ stroke:var(--ral-yellow); stroke-width:10; fill:none; stroke-linecap:round;
    stroke-dasharray:565; stroke-dashoffset:565;
    animation:fillgauge 1.6s .3s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes fillgauge{ to{ stroke-dashoffset:145; } }
  .gauge-center{ font-family:var(--font-mono); }
  .gauge-num{ font-size:46px; fill:var(--ral-white); font-weight:600; }
  .gauge-label{ font-size:11px; fill:var(--ral-traffic-grey); letter-spacing:.12em; }

  /* hero photo */
  .hero-photo{ position:relative; border:1px solid rgba(245,246,245,0.15); border-radius:var(--radius); overflow:hidden; }
  .hero-photo::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(26,29,30,0.5); pointer-events:none; }
  .hero-photo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:saturate(1.05) contrast(1.03); }
  .photo-tag{
    position:absolute; left:14px; bottom:14px; z-index:2;
    background:var(--ral-yellow); color:var(--ral-anthracite-2);
    font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em;
    padding:6px 10px; border-radius:var(--radius);
  }

  /* ===== TICKER — signature perforated strip ===== */
  .ticket-strip{
    background:var(--ral-yellow); color:var(--ral-anthracite-2);
    overflow:hidden; white-space:nowrap; position:relative;
    border-top:2px dashed rgba(26,29,30,0.3); border-bottom:2px dashed rgba(26,29,30,0.3);
  }
  .ticket-strip::before, .ticket-strip::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:16px; height:16px; background:var(--ral-anthracite-2); border-radius:50%; z-index:2;
  }
  .ticket-strip::before{ left:-8px; } .ticket-strip::after{ right:-8px; }
  .ticket-track{ display:inline-block; padding:10px 0; font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.06em; animation:scroll 28s linear infinite; }
  .ticket-track span{ margin:0 22px; }
  @keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

  /* ===== SECTION shell ===== */
  section{ padding:88px 0; }
  .section-head{ max-width:640px; margin-bottom:48px; }
  .section-head h2{ font-size:clamp(26px,3.4vw,36px); margin-top:14px; }
  .section-head p{ color:var(--ral-traffic-grey); margin-top:14px; font-size:16px; }

  /* ===== SERVICES ===== */
  .svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(245,246,245,0.1); border:var(--edge); }
  .svc-card{ display:block; background:var(--ral-anthracite-2); padding:32px 28px; transition:background .2s; }
  .svc-card:hover{ background:var(--ral-anthracite); }
  .svc-icon{ width:40px; height:40px; margin-bottom:18px; }
  .svc-card h3{ font-size:17px; margin-bottom:8px; }
  .svc-card p{ font-size:14px; color:var(--ral-traffic-grey); }

  /* ===== PROCESS — service-ticket motif ===== */
  .ticket{
    background:var(--ral-anthracite);
    border:var(--edge); border-radius:var(--radius);
    display:grid; grid-template-columns:repeat(4,1fr);
  }
  .ticket-stub{ padding:28px 24px; border-right:2px dashed rgba(245,246,245,0.15); position:relative; }
  .ticket-stub:last-child{ border-right:none; }
  .ticket-stub::before{
    content:""; position:absolute; right:-9px; top:50%; transform:translateY(-50%);
    width:16px; height:16px; background:var(--ral-anthracite-2); border-radius:50%;
  }
  .ticket-stub:last-child::before{ display:none; }
  .stub-code{ font-family:var(--font-mono); font-size:12px; color:var(--ral-yellow); letter-spacing:.1em; }
  .ticket-stub h3{ font-size:15px; margin:10px 0 8px; }
  .ticket-stub p{ font-size:13.5px; color:var(--ral-traffic-grey); }

  /* ===== WHY US ===== */
  .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .why-item{ border-left:2px solid var(--ral-yellow); padding-left:18px; }
  .why-item h3{ font-size:15px; margin-bottom:6px; }
  .why-item p{ font-size:14px; color:var(--ral-traffic-grey); }

  /* ===== REVIEWS ===== */
  .review-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .review-card{ background:var(--ral-anthracite); border:var(--edge); padding:26px; border-radius:var(--radius); }
  .stars{ color:var(--ral-yellow); font-family:var(--font-mono); letter-spacing:3px; margin-bottom:12px; }
  .review-card p{ font-size:14.5px; color:var(--ink); margin-bottom:14px; }
  .review-name{ font-family:var(--font-mono); font-size:12px; color:var(--ral-traffic-grey); }

  /* ===== CONTACT ===== */
  .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
  .info-row{ display:flex; gap:14px; padding:16px 0; border-bottom:var(--edge); }
  .info-row .k{ font-family:var(--font-mono); font-size:12px; color:var(--ral-traffic-grey); width:110px; flex-shrink:0; text-transform:uppercase; letter-spacing:.06em; }
  .info-row .v{ font-size:15px; color:var(--ral-white); }
  form{ display:flex; flex-direction:column; gap:14px; }
  label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ral-traffic-grey); margin-bottom:6px; display:block; }
  input, textarea{
    width:100%; background:var(--ral-anthracite); border:var(--edge); color:var(--ral-white);
    padding:12px 14px; font-family:var(--font-body); font-size:14px; border-radius:var(--radius);
  }
  input:focus, textarea:focus{ border-color:var(--ral-yellow); }
  textarea{ resize:vertical; min-height:100px; }

  footer{ border-top:var(--edge); padding:32px 0; }
  .foot-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--ral-traffic-grey); }

  /* ===== RESPONSIVE ===== */
  @media (max-width:860px){
    .nav-links{ display:none; }
    .hero-grid{ grid-template-columns:1fr; }
    .hero-photo{ order:-1; }
    .svc-grid{ grid-template-columns:1fr 1fr; }
    .ticket{ grid-template-columns:1fr 1fr; }
    .ticket-stub{ border-right:none; border-bottom:2px dashed rgba(245,246,245,0.15); }
    .ticket-stub::before{ display:none; }
    .why-grid, .review-row{ grid-template-columns:1fr; }
    .contact-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:520px){
    .svc-grid{ grid-template-columns:1fr; }
    .ticket{ grid-template-columns:1fr; }
  }

  /* ===== SUBPAGE: breadcrumb + page hero ===== */
  .breadcrumb{ font-family:var(--font-mono); font-size:12px; color:var(--ral-traffic-grey); letter-spacing:.04em; padding:20px 0; }
  .breadcrumb a{ color:var(--ral-traffic-grey); }
  .breadcrumb a:hover{ color:var(--ral-yellow); }
  .breadcrumb .sep{ margin:0 8px; opacity:.5; }
  .page-hero{ padding:24px 0 56px; border-bottom:var(--edge); }
  .page-hero h1{ font-size:clamp(30px,4.4vw,46px); margin:14px 0 16px; }
  .page-hero .lede{ color:var(--ral-traffic-grey); font-size:16.5px; max-width:62ch; }
  .back-cta{ margin-top:28px; }

  /* task list */
  .task-list{ display:grid; gap:1px; background:rgba(245,246,245,0.1); border:var(--edge); margin:36px 0; }
  .task-row{ background:var(--ral-anthracite-2); padding:22px 26px; display:flex; gap:20px; align-items:flex-start; }
  .task-row .mark{ color:var(--ral-yellow); font-family:var(--font-mono); font-size:13px; margin-top:3px; flex-shrink:0; }
  .task-row h3{ font-size:15.5px; margin-bottom:6px; text-transform:none; }
  .task-row p{ font-size:14px; color:var(--ral-traffic-grey); }

  /* price table */
  .price-table{ width:100%; border-collapse:collapse; margin:20px 0 8px; font-size:14.5px; }
  .price-table th{ text-align:left; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ral-yellow); padding:12px 16px; border-bottom:2px solid rgba(247,181,0,0.3); }
  .price-table td{ padding:14px 16px; border-bottom:var(--edge); color:var(--ink); }
  .price-table tr:last-child td{ border-bottom:none; }
  .price-table td:last-child{ font-family:var(--font-mono); color:var(--ral-white); text-align:right; white-space:nowrap; }
  .price-note{ font-size:12.5px; color:var(--ral-traffic-grey); margin-top:14px; font-style:italic; }

  .related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; }
  .related-card{ background:var(--ral-anthracite); border:var(--edge); padding:20px; border-radius:var(--radius); transition:border-color .15s; }
  .related-card:hover{ border-color:var(--ral-yellow); }
  .related-card .eyebrow{ margin-bottom:8px; }
  .related-card h3{ font-size:14.5px; text-transform:none; }

  @media (max-width:700px){
    .task-row{ flex-direction:column; gap:8px; }
    .related-grid{ grid-template-columns:1fr; }
    .price-table{ font-size:13px; }
    .price-table th, .price-table td{ padding:10px; }
  }