/* ============================================================
   adam — swiss-design — server build (index.html)
   Base + responsive layer. Inline styles in the HTML carry the
   original look; rules here use !important only where they must
   override those inline styles (same pattern the original used).
   ============================================================ */

/* ---- self-hosted fonts: no third-party requests, no IP leak ----
   latin + latin-ext subsets (English + Czech). unicode-range lets the
   browser skip the ext file unless an accented glyph is actually used. */

/* Archivo is a variable font — one file per subset covers weights 400–900 */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100%; font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 900; font-stretch:100%; font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* IBM Plex Mono (static per weight) */
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-mono-600-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/ibm-plex-mono-600-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background:#E8400C; color:#fff; }
a { color: inherit; }

.page  { background:#F4F4F1; color:#111; font-family:'Archivo',sans-serif; min-height:100vh; }
.shell { max-width:1120px; margin:0 auto; border-left:1px solid #d9d9d3; border-right:1px solid #d9d9d3; }

.nav-burger { display:none; }

/* ---- loop video: cover its frame, fade handled by JS overlay ---- */
.loop-video      { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.loop-fade       { position:absolute; inset:0; pointer-events:none; opacity:0; z-index:5;
                   transition:opacity .28s linear; background:#ffffff; }
.loop-video.is-failed { display:none; }

/* ---- fluid headings: scale smoothly instead of one hard jump ---- */
.hero-h1    { font-size:clamp(38px, 6.8vw, 62px) !important; }
.contact-h2 { font-size:clamp(30px, 5vw, 46px) !important; }

/* ============================================================
   Intermediate breakpoint — tablets / small laptops.
   ============================================================ */
@media (max-width: 1024px) {
  .svc-grid  { grid-template-columns:repeat(2,1fr) !important; }
  .svc-grid > div:nth-child(2) { border-right:none !important; }
}

/* ---- original mobile breakpoint (moved out of the HTML) ---- */
@media (max-width: 820px) {
  .topnav      { padding:16px 20px !important; }
  .nav-desktop { display:none !important; }
  .nav-avail   { display:none !important; }
  .nav-burger  { display:flex !important; }
  .hero-sec    { padding:44px 20px !important; }
  .qfacts      { grid-template-columns:repeat(2,1fr) !important; }
  .proj        { display:flex !important; flex-direction:column !important; gap:28px !important; padding:40px 20px !important; }
  .proj-media  { order:2 !important; width:100% !important; max-width:420px !important; margin-left:auto !important; margin-right:auto !important; }
  .svc-grid    { grid-template-columns:1fr !important; }
  .svc-grid > div { border-right:none !important; }
  .spec-grid   { grid-template-columns:repeat(2,1fr) !important; }
  .exp > div   { display:block !important; }
  .exp > div > div:first-child { margin-bottom:8px !important; }
  .contact-sec { padding:44px 20px !important; }
  .contact-h2  { max-width:100% !important; }
  .hero-sec p, section p { max-width:100% !important; }
}

/* ---- phones: collapse the tightest grids, drop the edge borders ---- */
@media (max-width: 560px) {
  .shell     { border-left:none !important; border-right:none !important; }
  .qfacts    { grid-template-columns:1fr !important; }
  .qfacts > div { border-right:none !important; border-bottom:1px solid #d9d9d3; }
  .spec-grid { grid-template-columns:1fr !important; }
  .spec-grid > div { border-right:none !important; }
  .hero-h1   { font-size:clamp(30px, 8vw, 38px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-video { /* JS reads this and leaves them paused on first frame */ }
}