/* ============================================================================
   FILE: css/layout.css
   PURPOSE: The big structural blocks of the page — the skeleton.
   ----------------------------------------------------------------------------
   CONTAINS: sticky header/navigation, the hero (first screen), the generic
   section shell + headings, and the footer.
   Smaller reusable pieces (buttons, cards, forms) live in components.css.
   ========================================================================== */

/* =============================== HEADER =================================== */
/* The bar with the logo and menu that stays glued to the top of the screen. */

header {
  position: fixed;            /* "fixed" = stays in place while page scrolls  */
  inset: 0 0 auto 0;          /* pin to top edge (top:0, left:0, right:0)     */
  z-index: 50;                /* draw ABOVE other content (higher = on top)   */
  border-bottom: 1px solid var(--line);
  background: rgba(247, 249, 252, .88); /* semi-transparent off-white...      */
  backdrop-filter: blur(10px);        /* ...with a frosted-glass blur effect  */
}

/* Flexbox lays the logo (left) and menu (right) on one row.
   justify-content: space-between pushes them to opposite ends. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

/* The clickable logo: small SVG mark + the wordmark text next to it. */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { height: 26px; width: auto; }
.brand b {
  font-family: var(--disp);
  font-weight: 700;
  letter-spacing: .14em;      /* extra space between letters = techy feel     */
  color: var(--paper);
  font-size: 15px;
}
.brand b span { color: var(--aqua); }   /* the "TECH" part gets accent color  */

/* The menu list. On desktop the items sit side by side with 34px gaps. */
nav ul { display: flex; gap: 34px; list-style: none; }
nav a {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  color: var(--titan);
  text-transform: uppercase;
  transition: color .2s;      /* color change fades over 0.2s instead of snapping */
}
nav a:hover { color: var(--paper); }

/* The outlined "Start a project" button inside the menu. */
.cta-mini {
  border: 1px solid var(--cobalt);
  color: var(--paper) !important;
  padding: 9px 18px;
  transition: background .2s;
}
.cta-mini:hover { background: var(--cobalt); }

/* Hamburger-style menu button. Hidden on desktop; responsive.css shows it
   on small screens (and hides the horizontal menu). */
.menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  padding: 8px 14px;
  letter-spacing: .1em;
  cursor: pointer;
}

/* ================================ HERO ==================================== */
/* The first full screen a visitor sees. It has to say WHO we are and WHAT
   we do within ~5 seconds — the most valuable real estate on the site.    */

.hero {
  min-height: 100svh;         /* at least one full screen tall ("svh" = safe
                                 viewport height, correct on mobile browsers) */
  display: flex;
  align-items: center;        /* vertically center the content               */
  position: relative;
  overflow: hidden;

  /* The faint engineering-grid background is drawn with two repeating
     1px-wide gradients — one for vertical lines, one for horizontal.
     No image download needed = faster page. */
  background:
    linear-gradient(rgba(43, 92, 230, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 92, 230, .07) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center;
}

/* A soft cobalt glow placed behind the logo animation, made with a radial
   gradient on a ::after pseudo-element (an invisible extra layer). */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1100px 600px at 68% 40%,
              rgba(43, 92, 230, .08), transparent 65%);
}

/* Two columns: text on the left (slightly wider), animated logo right. */
.hero .wrap {
  position: relative;
  z-index: 2;                 /* sit above the ::after glow layer             */
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items: center;
  padding-top: 110px;         /* clears the fixed header                      */
  padding-bottom: 70px;
}

/* The small uppercase line above the headline ("IT CONSULTING · ...").
   The ::before draws the short aqua dash in front of it. */
.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .22em;
  color: var(--aqua);
  text-transform: uppercase;
  margin-bottom: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--aqua); }

/* The main headline. clamp(min, preferred, max) makes the font size fluid:
   never smaller than 40px, never bigger than 72px, scales with screen width. */
.hero h1 { font-size: clamp(40px, 5.6vw, 72px); letter-spacing: -.01em; }

/* The word "engineered." is filled with the brand gradient. Trick:
   paint a gradient background, then clip it to the text shape. */
.hero h1 em {
  font-style: normal;
  color: transparent;
  background: linear-gradient(90deg, var(--cobalt-soft), var(--aqua));
  -webkit-background-clip: text;
  background-clip: text;
}

/* The paragraph under the headline. max-width in "ch" units limits it to
   ~54 characters per line — the comfortable reading range. */
.hero p.lede { margin: 28px 0 38px; max-width: 54ch; font-size: 18px; }

/* =========================== SECTION SHELL ================================ */
/* Every content section shares this vertical padding + top border. */

section { padding: var(--section-pad) 0; border-top: 1px solid var(--line); }

/* Section header row: title block on the left, intro sentence on the right. */
.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 60px;
  flex-wrap: wrap;            /* stacks vertically when space runs out        */
}

/* Small cobalt label above each section title (e.g. "ENGAGEMENT MODEL"). */
.eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--cobalt-soft);
  text-transform: uppercase;
  margin-bottom: 16px;
}

.sec-head h2 { font-size: clamp(30px, 3.6vw, 46px); }
.sec-head p  { max-width: 44ch; }

/* The ecosystem section gets a slightly lighter background to break rhythm. */
.eco { background: var(--panel); }

/* ================================ FOOTER ================================== */

footer {
  border-top: 1px solid var(--line);
  padding: 54px 0;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}
.foot { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
footer a { text-decoration: none; }
footer a:hover { color: var(--paper); }