/* ============================================================
   GUSCOTT ENGINEERING — SITE LAYOUT
   Page-level layout, responsive grids, and the on-brand
   placeholder frames. Reproduced from the design's <helmet>
   styles; the placeholder block is new (replaces the
   drag-to-fill <image-slot> elements with static frames).
   ============================================================ */

*{box-sizing:border-box;}
body{margin:0;background:var(--paper);}
img{max-width:100%;}

@keyframes geFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ---- Header nav ---- */
.ge-nav{display:none;}
@media(min-width:780px){.ge-nav{display:flex !important;}}
.ge-navlink{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-300);text-decoration:none;
  padding:12px 18px;
  transition:color .15s;
}
.ge-navlink:hover{color:#fff;}

/* ---- Header bar (adaptive light/dark) ----
   Fixed bar floats over sections of alternating brightness. Default theme is
   dark (over dark sections); app.js adds .ge-header--light over light ones. */
.ge-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(10,12,15,.62);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background .3s ease, border-color .3s ease;
}
.ge-header--light{
  background:rgba(250,251,252,.72);
  border-bottom:1px solid var(--hairline);
}
.ge-logo{color:#fff;transition:color .3s ease;}
.ge-logo__sub{color:var(--volt-400);transition:color .3s ease;}
.ge-header--light .ge-logo{color:var(--ink-900);}
.ge-header--light .ge-logo__sub{color:var(--volt-600);}
.ge-header--light .ge-navlink{color:var(--ink-600);}
.ge-header--light .ge-navlink:hover{color:var(--ink-900);}

/* ---- Responsive section grids ---- */
.ge-hero-grid{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
@media(min-width:920px){.ge-hero-grid{grid-template-columns:1.05fr .95fr;gap:60px;}}

.ge-about-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
@media(min-width:840px){.ge-about-grid{grid-template-columns:.82fr 1.18fr;}}

.ge-avail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px;}
.ge-trust-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
.ge-portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;}
.ge-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;}

.ge-break-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:start;}
@media(min-width:760px){.ge-break-grid{grid-template-columns:.85fr 1.15fr;}}

/* ---- Gallery thumbnails ---- */
.ge-thumb{transition:opacity .15s,box-shadow .2s;opacity:.55;}
.ge-thumb[data-active="true"]{opacity:1;box-shadow:0 0 0 2px var(--volt-500);}
.ge-thumb:hover{opacity:1;}

/* ---- Lucide icon wrapper ---- */
.ge-lico{display:inline-flex;}
.ge-lico svg{width:1em;height:1em;}

/* ---- Placeholder frames (replace the fillable image-slots) ----
   On-brand faceted dark frame with an icon + mono caption. Swap
   for a real <img> when product/workspace photos are available. */
.ge-slot{
  position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:18px;
  color:var(--ink-300);
  border:1px solid rgba(255,255,255,.08);
}
.ge-slot .ge-slot__ico{display:inline-flex;width:26px;height:26px;color:var(--ink-400);}
.ge-slot .ge-slot__ico svg{width:100%;height:100%;}
.ge-slot .ge-slot__cap{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-400);max-width:90%;line-height:1.5;
}