*,*::before,*::after{ box-sizing:border-box; }
  :root{
    --paper:#f5f4f5; --surface:#fff; --line:#d7d8d7;
    --slate:#505d75; --ink:#202331; --edge:#e95c20;
    --display:'Archivo','Helvetica Neue',Arial,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
    --pad:clamp(18px,4.5vw,64px); --hd:74px;
  }
  body{ margin:0; background:var(--paper); color:var(--slate); font-family:var(--display); }

  .stage{ position:relative; height:660vh; padding:0; }
  @media (max-width:820px){ .stage{ height:540vh; } }
  .sticky{ position:sticky; top:var(--hd); height:calc(100vh - var(--hd)); height:calc(100svh - var(--hd)); overflow:hidden; }
  .scene{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.16; }

  .title{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
          text-align:center; z-index:4; width:min(92vw,900px); will-change:transform,opacity; }
  .title h1{ margin:0; font-size:clamp(42px,10vw,128px); line-height:.9; letter-spacing:-.045em;
             text-transform:uppercase; color:var(--ink); font-weight:700;
             display:flex; flex-direction:column; align-items:center; }
  .title h1 span{ color:var(--slate); }
  .title .rule{ width:92px; height:1px; background:var(--edge); margin:20px auto 0; }
  .title p{ margin:16px 0 0; font-family:var(--mono); font-size:clamp(10px,1.4vw,12.5px);
            letter-spacing:.24em; text-transform:uppercase; color:var(--slate); }

  .cards{ position:absolute; left:var(--pad); right:var(--pad); bottom:18px; z-index:3;
          display:grid; grid-template-columns:repeat(10,1fr); gap:6px; max-width:1380px; margin-inline:auto; }
  .pcard{ min-width:0; margin:0; display:block; text-decoration:none; color:inherit; pointer-events:none;
          background:var(--surface); border:1px solid var(--line); border-top:1px solid transparent;
          opacity:0; transform:translateY(14px);
          transition:opacity .5s ease, transform .5s ease, border-top-color .5s ease; }
  .pcard.on{ opacity:1; transform:none; border-top-color:var(--edge); pointer-events:auto; cursor:pointer; }
  .pcard.on:hover{ border-color:var(--edge); }
  .pcard.on:hover .pt{ color:var(--edge); }
  .pcard .pimg{ aspect-ratio:3/2; border-bottom:1px solid var(--line); background:var(--paper); overflow:hidden;
                display:grid; place-items:center; }
  .pcard .pimg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .pcard .pimg img.fit{ object-fit:contain; background:#ffffff; }
  .pcard .pimg em{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
                   font-style:normal; color:var(--slate); }
  .pcard .pcap{ padding:9px 11px; display:flex; align-items:baseline; gap:8px; }
  .pcard .pn{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--edge); }
  .pcard .pt{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
  @media (max-width:760px){
    .cards{ grid-template-columns:repeat(5,1fr); gap:4px; bottom:8px; }
    .pcard .pcap{ padding:6px 7px; flex-direction:column; gap:1px; }
    .pcard .pt{ font-size:8.5px; letter-spacing:.04em; }
  }

  .hint{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); font-family:var(--mono);
         font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--slate);
         z-index:4; display:flex; align-items:center; gap:10px; }
  .hint i{ display:block; width:1px; height:24px; background:var(--edge); }

  .tag text{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; fill:#202331; text-transform:uppercase; }
  .tag .num{ fill:#e95c20; }


  @media (max-width:640px){ :root{ --hd:62px; } }
  h1,h2,h3{ color:var(--ink); font-weight:700; letter-spacing:-.025em; text-wrap:balance; margin:0; line-height:1.1; }
  p{ margin:0; } a{ color:inherit; }
  :focus-visible{ outline:2px solid var(--edge); outline-offset:3px; }
  .wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:var(--pad); }
  .label{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em;
          text-transform:uppercase; color:var(--slate); display:flex; align-items:center; gap:12px; }
  .label::before{ content:""; width:28px; height:1px; background:var(--edge); flex:none; }
  .sh{ font-size:clamp(26px,3.8vw,42px); margin:16px 0 16px; text-transform:uppercase; }

  header{ position:sticky; top:0; z-index:60; background:var(--paper); border-bottom:1px solid var(--edge); }
  .bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:var(--hd); }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
  .brand .mark{ width:32px; height:32px; flex:none; border:1px solid var(--edge); display:grid; place-items:center;
                font-family:var(--mono); font-size:12px; color:var(--ink); }
  .brand .name{ font-weight:700; font-size:16px; letter-spacing:.05em; color:var(--ink); text-transform:uppercase; white-space:nowrap; }
  .brand .sub{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:var(--slate); text-transform:uppercase; }
  nav.main{ display:flex; align-items:center; gap:clamp(10px,2.4vw,34px); flex-wrap:nowrap; }
  nav.main a{ font-family:var(--mono); font-size:clamp(9px,1.35vw,12px); letter-spacing:.1em; text-transform:uppercase;
              text-decoration:none; color:var(--slate); padding:6px 0; border-bottom:1px solid transparent; white-space:nowrap; }
  nav.main a:hover{ color:var(--ink); border-bottom-color:var(--line); }
  nav.main a.on{ color:var(--ink); border-bottom-color:var(--edge); }
  .bar .tel{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-decoration:none; color:var(--ink);
             border:1px solid var(--edge); padding:10px 16px; white-space:nowrap; }
  .bar .tel:hover{ color:var(--edge); }
  @media (max-width:980px){ .bar .tel{ display:none; } }
  @media (max-width:760px){ .brand .sub{ display:none; } }
  @media (max-width:620px){
    .brand .name{ display:none; }
    .brand .mark{ width:28px; height:28px; font-size:11px; }
    nav.main{ gap:12px; flex:1; justify-content:flex-end; }
    nav.main a{ font-size:9.5px; letter-spacing:.05em; }
  }

  .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
        text-transform:uppercase; text-decoration:none; color:var(--ink); background:transparent;
        border:1px solid var(--edge); padding:12px 20px; transition:color .18s ease; }
  .btn:hover{ color:var(--edge); }
  .btn.quiet{ border-color:var(--line); color:var(--slate); }
  .btn.quiet:hover{ border-color:var(--edge); color:var(--ink); }

  section{ padding:clamp(52px,7vw,96px) 0; }
  .head{ margin-bottom:clamp(28px,4vw,48px); max-width:70ch; }

  .about{ border-top:1px solid var(--line); }
  .about .g{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:start; }
  @media (max-width:820px){ .about .g{ grid-template-columns:1fr; } }
  .about p.big{ font-size:clamp(18px,2.2vw,23px); color:var(--ink); line-height:1.5; }
  .facts{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
  .facts > div{ background:var(--surface); padding:20px 22px; }
  .facts .k{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
  .facts .v{ font-weight:600; font-size:16px; color:var(--ink); margin-top:5px; }

  .infoband{ background:var(--ink); }
  .infoband h2{ color:var(--paper); } .infoband .label{ color:var(--line); } .infoband p{ color:var(--line); }
  .infoband .g{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(215,216,215,.22);
                border:1px solid rgba(215,216,215,.22); margin-top:clamp(24px,3vw,40px); }
  @media (max-width:900px){ .infoband .g{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .infoband .g{ grid-template-columns:1fr; } }
  .infoband .g > div{ background:var(--ink); padding:26px 24px; }
  .infoband .g .k{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--edge); }
  .infoband .g .v{ color:var(--paper); font-weight:500; font-size:17px; margin-top:9px; font-variant-numeric:tabular-nums; }
  .infoband .g .v a{ text-decoration:none; border-bottom:1px solid var(--edge); padding-bottom:2px; }
  .infoband .g .v small{ display:block; font-weight:400; font-size:14px; color:var(--line); margin-top:5px; }

  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
  @media (max-width:940px){ .grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .grid{ grid-template-columns:1fr; } }
  .card{ background:var(--surface); padding:0 0 26px; position:relative; min-width:0; }
  .card::after{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:var(--edge);
                transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
  .card:hover::after{ transform:scaleX(1); }
  .card .ph{ aspect-ratio:16/10; border-bottom:1px solid var(--line); background:var(--paper); overflow:hidden; }
  .card .ph img{ width:100%; height:100%; object-fit:cover; display:block; }
  .card .body{ padding:22px 24px 0; }
  .card .body.pad{ padding-top:28px; }
  .card .cat{ font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
  .card h3{ font-size:20px; margin:9px 0; }
  .card .spec{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--edge); margin-bottom:8px; }
  .card p{ font-size:15.5px; line-height:1.6; }

  .contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,70px); align-items:start; }
  @media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
  dl.info{ margin:0; border-top:1px solid var(--line); }
  dl.info > div{ display:grid; grid-template-columns:150px 1fr; gap:16px; padding:19px 0;
                 border-bottom:1px solid var(--line); align-items:baseline; }
  @media (max-width:520px){ dl.info > div{ grid-template-columns:1fr; gap:5px; } }
  dl.info dt{ font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--slate); }
  dl.info dd{ margin:0; color:var(--ink); font-weight:500; font-size:17px; font-variant-numeric:tabular-nums; }
  dl.info dd a{ text-decoration:none; border-bottom:1px solid var(--edge); padding-bottom:2px; }
  dl.info dd small{ display:block; font-weight:400; font-size:14.5px; color:var(--slate); margin-top:4px; }
  .callout{ border:1px solid var(--line); background:var(--surface); padding:clamp(24px,3vw,36px); }
  .callout h3{ font-size:23px; margin:14px 0 12px; text-transform:uppercase; }
  .callout .cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

  footer{ background:var(--ink); border-top:1px solid var(--edge); color:var(--line); }
  .foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:30px 0;
         font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; }
  .foot a{ text-decoration:none; } .foot a:hover{ color:var(--edge); }

  .rev{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease; }
  .rev.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){ .rev{ opacity:1; transform:none; transition:none; } }