/* =========================================================================
   Layout and components for serinet.com.tr.

   This is the xAI system, "warm cream laboratory with a black pill". It
   replaces the light adaptation of hubx.co that shipped on 2026-09-01, and it
   shares no selector, no token and no habit with it.

   Four rules decide nearly everything below.

   Type carries the hierarchy, and it carries it through size rather than
   weight. There are two weights on this page, 400 and 500, and every display
   size is set at 400. A headline at 72px with 1.0 line height and -0.025em of
   tracking becomes a typographic slab rather than a column of text, and it
   reads as authority without ever being bold.

   Color is rationed to almost nothing. Warm white page, cream cards, near
   black ink, one warm wash on two bands. There is no accent. The only
   saturated color anywhere is the three dots on the chrome of a product
   illustration, and they are decoration inside a drawing.

   There are no shadows. A cream surface separates a card from the page and a
   single hairline appears only where a boundary has to be seen.

   Content arrives, quietly. Anything below the fold fades up over 600ms the
   first time it is scrolled into view, once only. The guard directly below
   switches all of it off under prefers-reduced-motion, and the hidden state
   is applied only by script, so the page with JavaScript disabled is the
   finished page.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--sp-16));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .reveal, .motion .reveal { opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--steel);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Body copy is Steel, not the reference's Fog. See the departure note in
   tokens.css: Fog is 3.69:1 on this canvas and fails AA for normal text,
   while Steel is 7.57:1 and reads as the same quiet gray. */

h1, h2, h3, h4 {
  margin: 0;
  color: var(--jet);
  font-weight: var(--w-regular);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display);
}
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { max-width: 100%; display: block; }

a { color: var(--jet); text-decoration: none; transition: color var(--transition-duration) ease; }
a:hover { text-decoration: underline; }

/* The focus indicator is Jet Ink on a white spacer ring. The reference puts
   Dove on a focus outline, which cannot be seen at 1.41:1. */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-input); }

::selection { background: var(--jet); color: var(--on-jet); }

.wrap {
  width: 100%;
  max-width: calc(var(--site-width) + var(--page-x) * 2);
  margin-inline: auto;
  padding-inline: var(--page-x);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--jet); color: var(--on-jet);
  padding: var(--sp-8) var(--sp-16); border-radius: 0 0 var(--r-small) 0;
  font-size: var(--text-sm); font-weight: var(--w-medium);
}
.skip:focus { left: 0; text-decoration: none; }

/* ---- Entrance animation ----------------------------------------------------
   The hidden state is scoped to .motion, which the page script adds to the
   root element only when the visitor has not asked for reduced motion. With
   no JavaScript, or with reduced motion, .reveal is inert.
   --------------------------------------------------------------------------- */
.motion .reveal { opacity: 0; }
.motion .reveal.is-in {
  animation: rise var(--entrance-duration) cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
.motion .reveal-fade.is-in { animation-name: fade-in; }
.d1 { --reveal-delay:  60ms; }
.d2 { --reveal-delay: 120ms; }
.d3 { --reveal-delay: 180ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Type helpers ----------------------------------------------------------
   Five display steps, 24, 30, 48, 60 and 72, all at -0.025em and all at
   weight 400. Running text is 14, 16 and 18 and never leaves that range.
   ---------------------------------------------------------------------------- */
.display {
  font-size: clamp(2.75rem, 6.4vw, var(--text-display));
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--w-regular);
}
.h2 {
  font-size: clamp(2rem, 4vw, var(--text-h2));
  line-height: var(--lh-display);
}
.h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
.h4 {
  font-size: var(--text-h4); line-height: var(--lh-h4);
  font-weight: var(--w-medium);
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-regular);
  color: var(--steel);
}

/* Eyebrows and field names are the page's metadata, so they are set in the
   mono face. That is the reference's own rule for technical marks, and it is
   the only place a second typeface appears. They are uppercase labels rather
   than prose, which is why they are allowed below the 14px floor that running
   text is held to.

   The color split across the page is simple and worth stating once: an
   uppercase label is Slate, which is the reference's own role for it, and
   running prose is Steel. Both clear AA on all three light surfaces. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-caption); line-height: 1.4;
  font-weight: var(--w-medium); letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--slate);
}
.eyebrow-muted { color: var(--steel); }

.caption { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--steel); }

/* The tag pill, the reference's own badge shape: warm wash ground, jet label,
   full pill radius. It sits on the sand hero band, so it takes Paper rather
   than Sand to separate itself from the band, with a hairline to close it. */
.pill {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  border: var(--hairline);
  border-radius: var(--r-pill);
  padding: var(--sp-4) var(--sp-12);
  background: var(--paper);
  color: var(--jet);
  font-size: var(--text-sm); line-height: var(--lh-sm);
  font-weight: var(--w-medium); letter-spacing: var(--ls-body);
}
.pill-dot { width: .375rem; height: .375rem; border-radius: 50%; background: var(--jet); flex: none; }

/* ---- Buttons ----------------------------------------------------------------
   The black pill is the defining interaction of this system and the only high
   contrast element on the page. Everything else is a ghost.

   Filled primary: Jet Ink ground, white label, 12px by 20px, 14px at weight
   500, pill radius, no border and no shadow. Ghost secondary: transparent,
   Jet Ink label, no border at rest, a hairline ring on hover.

   The doubled class on the fill rules, .btn.btn-primary, is a house guard. A
   descendant selector once outranked a single class fill on the product sites
   and repainted a button into an unreadable state.
   ----------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--w-medium);
  line-height: var(--lh-sm); letter-spacing: var(--ls-body);
  padding: var(--sp-12) var(--sp-20);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--transition-duration) ease,
              border-color var(--transition-duration) ease,
              color var(--transition-duration) ease;
}
.btn:hover { text-decoration: none; }
.btn.btn-primary { background: var(--jet); color: var(--on-jet); border-color: var(--jet); }
.btn.btn-primary:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--on-jet); }
.btn.btn-outline { background: transparent; color: var(--jet); border-color: transparent; }
.btn.btn-outline:hover { border-color: var(--dove); color: var(--jet); }

/* The compact nav button. It is the one control that has to be legible as a
   control while sitting still, so its resting ring is Fog at 3.69:1 rather
   than the reference's Dove at 1.41:1. */
.btn-sm {
  padding: var(--sp-8) var(--sp-12);
  background: var(--paper); color: var(--jet);
  border: var(--control-ring);
}
.btn-sm:hover { background: var(--sand); border-color: var(--jet); }
.btn-block { width: 100%; }

/* ---- Navigation --------------------------------------------------------------
   One sticky bar, 64px, on the page ground with a hairline under it. No
   blur, no raised surface, no background on any link.
   ------------------------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: var(--hairline);
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-24); min-height: var(--header-height); }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-8); flex: none;
  color: var(--jet); font-size: var(--text-lead); font-weight: var(--w-medium);
  letter-spacing: var(--ls-display);
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 1.5rem; height: 1.5rem; flex: none; }

/* The language switcher and the CTA sit outside .nav-links on purpose, so the
   descendant rule below can never reach them and repaint a button. */
.nav-links { display: flex; align-items: center; gap: var(--sp-32); margin-left: auto; }
.nav-links a {
  color: var(--steel); font-size: var(--text-sm); line-height: var(--lh-sm);
  font-weight: var(--w-medium); letter-spacing: var(--ls-body);
}
.nav-links a:hover { color: var(--jet); text-decoration: none; }
.nav-cta { flex: none; }

/* ---- Language switcher --------------------------------------------------------
   One link naming the other language, written in that language, rather than
   two letter codes side by side. The pair ran together into a single string
   at caption size and never said which half was the current page. A label a
   visitor can read tells them what following it does, and the globe marks the
   control as a language choice rather than another nav item.

   The radius is still the pill, because this system has no fifth radius and a
   control is a pill or a card and nothing between. The Fog ring is gone: the
   nav CTA beside it is an outlined pill, and a second outlined pill of the
   same height read as a second button rather than as the quieter control it
   is. A Sand fill on the Paper bar separates the two without a border, and
   hover brings the ring in rather than changing the fill. Steel on Sand rests
   at 6.50:1, Jet Ink on Sand at 17.00:1 on hover.
   -------------------------------------------------------------------------------- */
.lang { display: inline-flex; flex: none; }
.lang a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--sand);
  font-size: var(--text-sm); line-height: 1.4;
  font-weight: var(--w-medium); letter-spacing: var(--ls-body);
  color: var(--steel); white-space: nowrap;
}
.lang a:hover { color: var(--jet); border-color: var(--dove); text-decoration: none; }
.lang-globe { width: 15px; height: 15px; flex: none; }

/* ---- Sections -----------------------------------------------------------------
   80px between sections, which is the reference's stated section gap, carried
   as 40px of padding on each side of a section.
   --------------------------------------------------------------------------------- */
.section { padding-block: var(--sp-40); }
.section-head { display: grid; gap: var(--sp-16); max-width: 44rem; }
.section-head .lead { max-width: 56ch; }

/* A warm wash band. Sand is the reference's section tint, and it is the only
   thing on this page that marks a change of room. Cream is reserved for
   cards, so the two never compete. */
.band { background: var(--sand); }

/* ---- Hero -------------------------------------------------------------------
   Text first and centered, which is the reference's opening composition.

   THE MOTIF IS GONE, and that is a decision rather than an omission. The
   build this replaces opened on a drafting grid with a crimson datum rule and
   nodes on the intersections. The rule was the thing that made the field read
   as drawn; without a chromatic accent the grid collapses into texture behind
   the headline. The obvious substitute in this reference, a blurred coral orb
   bleeding behind the type, is the single fastest way to make a page look
   generated, and the README has already rejected it once on this site. The
   system's own answer is that type leads and decoration is rationed, so the
   hero is a warm Sand band carrying a 72px headline at weight 400 and one
   black pill, and there is nothing drawn on it at all. The color and the
   product illustrations further down carry the visual interest instead.
   ------------------------------------------------------------------------------- */
.hero {
  background: var(--sand);
  padding-block: var(--sp-96) var(--sp-96);
}
.hero-inner {
  display: grid; gap: var(--sp-24); justify-items: center; text-align: center;
}
.hero-inner .display { max-width: 16ch; }
.hero-lead { max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); justify-content: center; margin-top: var(--sp-8); }

/* ---- Consulting services -------------------------------------------------------
   Four flat cream cards, two by two. No border, no shadow and no rule above
   the heading: the cream ground is the whole of what separates a card from
   the page, which is the reference's stated card pattern.
   ---------------------------------------------------------------------------------- */
.svc-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-24); margin-top: var(--sp-48);
}
.svc-item {
  display: grid; gap: var(--sp-12); align-content: start;
  background: var(--cream); border-radius: var(--r-card);
  padding: var(--card-padding);
}
.svc-item p { color: var(--steel); }

/* ---- Products ---------------------------------------------------------------------
   One large cream card each. Lima leads with copy on the left, Saga reverses,
   so the two do not scan as a repeated template.
   ------------------------------------------------------------------------------------- */
.product {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-40); align-items: center;
  background: var(--cream);
  border-radius: var(--r-card);
  padding: var(--card-padding);
  margin-top: var(--sp-48);
}
.product-reverse .product-copy { order: 2; }
.product-reverse .product-side { order: 1; }
.product-copy { display: grid; gap: var(--sp-16); align-content: start; justify-items: start; }
.product-side { display: grid; gap: var(--sp-24); align-content: start; }
.product-name {
  font-size: clamp(2.25rem, 4vw, var(--text-h2));
  line-height: var(--lh-display); font-weight: var(--w-regular);
  letter-spacing: var(--ls-display);
}
.product-role {
  font-family: var(--font-mono);
  font-size: var(--text-caption); font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase; color: var(--slate);
}
.product-copy p:not(.product-role) { color: var(--steel); max-width: 46ch; }
.product-copy .btn { margin-top: var(--sp-4); }

/* The outbound link to each product site is a black pill, .btn .btn-primary,
   declared once under Buttons. The system forbids a chromatic button
   outright, which also removes the old question of whether the parent should
   borrow a product's own red. On the two column layout the cards alternate,
   so one pill sits at the left of the first card and the other at the right
   of the second, and stacked, a whole product figure and a card gap fall
   between them. */

/* ---- Product figures ----------------------------------------------------------------
   Hand-built. No screenshots exist for either product.

   Each figure sits inside a Charcoal panel with the three traffic light dots
   on its chrome, which is the reference's terminal block used as the frame
   for a product illustration. It is the only dark surface on the page and the
   only place any saturated color appears. The dots carry no state and no
   meaning; they are the decoration the system allows.

   NOTE THE INVERSION IN THE GRAYS, because it is the reverse of the rule the
   rest of this file follows. On paper, Fog is 3.69:1 and fails as text while
   Steel is 7.57:1 and passes. On Charcoal the two swap: Fog is 4.95:1 and
   Pewter is 6.73:1, while Steel collapses to 2.41:1 and cannot be used at
   all. Every stroke and every label inside this panel is therefore Fog,
   Pewter, Dove or Paper, and never Steel or Slate.
   ---------------------------------------------------------------------------------------- */
.figure-panel {
  background: var(--charcoal);
  border-radius: var(--r-small);
  padding: var(--sp-16) var(--sp-20) var(--sp-20);
  display: grid; gap: var(--sp-16);
}
.figure-chrome { display: flex; gap: var(--sp-8); }
.figure-chrome span { width: .5rem; height: .5rem; border-radius: 50%; }
.figure-chrome span:nth-child(1) { background: var(--ember); }
.figure-chrome span:nth-child(2) { background: var(--sunbeam); }
.figure-chrome span:nth-child(3) { background: var(--sprout); }

.figure { width: 100%; height: auto; }
.figure .frame { fill: none; stroke: var(--fog); stroke-width: 1.25; }
.figure .frame-lit { stroke: var(--paper); stroke-width: 1.75; }
/* The second state is a dash pattern rather than a second hue. In a
   monochrome system a state has to differ in form. */
.figure .frame-alt { stroke: var(--dove); stroke-dasharray: 5 3; }
.figure .wire { stroke: var(--fog); stroke-width: 1; fill: none; }
.figure .wire-lit { stroke: var(--paper); stroke-width: 1.75; }
.figure .fill-accent { fill: var(--paper); }
.figure .fill-alt { fill: var(--dove); }
.figure .fill-mark { fill: var(--dove); }
.figure .fill-quiet { fill: var(--pewter); }
.figure text {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  letter-spacing: .04em; text-transform: uppercase; fill: var(--fog);
}
.figure text.lit { fill: var(--paper); }

.license-note {
  margin-top: var(--sp-32); color: var(--steel); max-width: 68ch;
  font-size: var(--text-sm); line-height: var(--lh-sm);
}

/* ---- Structure band --------------------------------------------------------------------
   A warm wash band carrying one argument in prose. Nothing here is a card and
   nothing here is a bullet.
   -------------------------------------------------------------------------------------------- */
/* Two columns, headline against argument. As one column at 60rem the band
   was a headline the width of a slide over three lines of text, with the
   right two fifths of a full width tint empty, and it read as an unfinished
   section rather than as a deliberate pause. Splitting it puts the claim and
   its support side by side, brings the headline down to a readable measure,
   and uses the tint it is printed on. */
.thesis {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-24) var(--sp-64); align-items: start;
}
.thesis .eyebrow { grid-column: 1 / -1; }
.thesis h2 { max-width: 18ch; }
.thesis p { color: var(--steel); font-size: var(--text-lead); line-height: var(--lh-lead); max-width: 52ch; }

/* ---- Contact -------------------------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--sp-40); align-items: start; }
.contact-copy { display: grid; gap: var(--sp-16); align-content: start; position: sticky; top: calc(var(--header-height) + var(--sp-32)); }
.contact-copy .lead { max-width: 36ch; }

.form {
  display: grid; gap: var(--sp-16);
  background: var(--cream);
  border-radius: var(--r-card);
  padding: var(--card-padding);
}
.field { display: grid; gap: var(--sp-8); }
.field label {
  font-family: var(--font-mono);
  font-size: var(--text-caption); line-height: 1.4; font-weight: var(--w-medium);
  letter-spacing: var(--ls-caption); text-transform: uppercase; color: var(--slate);
}
/* A field is an interactive control, so its resting boundary is Fog at
   3.69:1 on paper and 3.48:1 on the cream card, not Dove at 1.41:1. */
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: var(--text-body); line-height: var(--lh-body);
  font-weight: var(--w-regular); color: var(--jet); background: var(--paper);
  border: var(--control-ring); border-radius: var(--r-input);
  padding: var(--sp-12) var(--sp-16);
  transition: border-color var(--transition-duration) ease;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%),
                    linear-gradient(135deg, var(--steel) 50%, transparent 50%);
  background-position: calc(100% - 1.375rem) 1.375rem, calc(100% - 1rem) 1.375rem;
  background-size: .375rem .375rem, .375rem .375rem;
  background-repeat: no-repeat;
}
.field select option { background: var(--paper); color: var(--jet); }
.field textarea { resize: vertical; min-height: 8.75rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--steel); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--jet); box-shadow: var(--focus-ring);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent {
  display: grid; grid-template-columns: 1.125rem 1fr; gap: var(--sp-8); align-items: start;
  font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--steel);
  margin-block: var(--sp-4);
}
.consent input { width: 1.125rem; height: 1.125rem; margin: .1875rem 0 0; accent-color: var(--jet); }

/* The two states of the form message differ by the weight of their boundary,
   not by hue, because the system carries no red and no green. The message
   itself states the outcome in words, so color was never the only cue. */
.form-msg {
  font-size: var(--text-sm); line-height: var(--lh-sm); border-radius: var(--r-input);
  padding: var(--sp-12) var(--sp-16); display: none;
  border: var(--control-ring); color: var(--jet);
  background: var(--paper);
}
.form-msg.show { display: block; }
.form-msg.ok  { border-color: var(--fog); }
.form-msg.err { border-color: var(--jet); border-width: 2px; }

/* ---- Legal documents -------------------------------------------------------------------------
   The privacy notice at /privacy/ and the KVKK aydinlatma metni at
   /aydinlatma/. They are legal documents rather than pages of this system's
   usual furniture, so they carry no hero, no band, no illustration and no
   product mockup. Everything visible on them comes from the classes above:
   .wrap, .section, .eyebrow, .h2, .h4, .lead, .caption, .svc-item for the
   controller identity block, and the same nav and footer as the landing page.

   What is added here is only what a long document needs and a landing page
   never does. A reading measure, because a legal paragraph running the full
   1200px is unreadable and 68 characters sits inside the 45 to 75 range that
   keeps a line scannable. Vertical rhythm, because thirteen sections need
   more air above a heading than between two paragraphs. And the list marker,
   because the base reset removes it and a reader has to be able to count the
   rights in a rights list.

   No new color and no new type step appears here, which is why
   contrast-light.php needed no new pair: the documents are the same jet on
   paper, steel prose and slate labels as everything else.
   ------------------------------------------------------------------------------------------------ */
.legal { display: grid; gap: var(--sp-16); max-width: 68ch; }
.legal h2 { margin-top: var(--sp-32); }
.legal ul {
  list-style: disc; padding-inline-start: var(--sp-24);
  display: grid; gap: var(--sp-8);
}

/* The controller identity block is a label and value list, which is what this
   system already uses an eyebrow for. The registered name is long and fully
   capitalized, so it sits on its own line at the tighter small-text leading
   rather than running inside a sentence, where it would read as shouting. */
.legal-id { display: grid; gap: var(--sp-4); }
.legal-id dd { color: var(--jet); }
.legal-id dd + dt { margin-top: var(--sp-16); }
.legal-id .legal-name { font-weight: var(--w-medium); line-height: var(--lh-sm); }

/* A link sitting inside running text is underlined. This palette has no
   second hue to mark one with, and Jet Ink on Steel measures 2.46:1, which is
   under the 3:1 that lets color alone carry the distinction between a link
   and the sentence around it. The underline is the distinction, not a
   decoration, and it is the reason the consent line's link to the privacy
   notice can be seen at all.

   It is scoped to the two places where prose actually contains a link: the
   consent line under the contact form, and the legal documents. Every other
   link on this site is a nav item, a footer item or a button, and each of
   those is identified by its position and its shape rather than by its
   color, so none of them needs one. */
.consent a, .legal a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- Footer ------------------------------------------------------------------------------- */
.footer { border-top: var(--hairline); padding-block: var(--sp-48) var(--sp-40); }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--sp-32) var(--sp-40); justify-content: space-between; align-items: start; }
.footer-brand { display: grid; gap: var(--sp-12); max-width: 40ch; }
.footer-brand p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--steel); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-12) var(--sp-32); }
.footer-nav a {
  color: var(--steel); font-size: var(--text-sm); line-height: var(--lh-sm);
  font-weight: var(--w-regular); letter-spacing: var(--ls-body);
}
.footer-nav a:hover { color: var(--jet); }
/* The two notices have their own row at the foot of the page, under a
   hairline, rather than sitting inside the footer navigation. A legal
   document is not a section of this page, and mixing the two made the list
   read as six places to go and two files to open. */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-32);
  margin-top: var(--sp-32); padding-top: var(--sp-24);
  border-top: var(--hairline);
}
.footer-legal a {
  color: var(--steel); font-size: var(--text-sm); line-height: var(--lh-sm);
  font-weight: var(--w-regular); letter-spacing: var(--ls-body);
}
.footer-legal a:hover { color: var(--jet); }

/* ---- Responsive ----------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .nav-links { gap: var(--sp-20); }
  .hero { padding-block: var(--sp-64); }
  .product { gap: var(--sp-32); }
}
/* 56rem, not 64rem. At 1024 the two column grids still hold a readable
   measure; collapsing them there gave a 976px card carrying two lines of
   text, which reads as a stripe rather than as a card. */
@media (max-width: 56rem) {
  .svc-grid { grid-template-columns: 1fr; gap: var(--sp-16); }
  .product { grid-template-columns: 1fr; }
  .product-reverse .product-copy, .product-reverse .product-side { order: 0; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .contact-copy { position: static; }
  /* One column below 56rem, same as every other pair on the page. */
  .thesis { grid-template-columns: 1fr; }
  .thesis h2 { max-width: 24ch; }
}
@media (max-width: 48rem) {
  .nav-links { display: none; }
  /* With .nav-links hidden the switcher takes the free space, so the pair of
     controls stays together on the right rather than splitting the row. */
  .lang { margin-left: auto; }
  .nav-cta { margin-left: 0; }
  .hero { padding-block: var(--sp-48); }
}
@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }
}
/* The header button is dropped on the narrowest phones. Brand, switcher and
   button fit at 390px with nothing to spare, and at 360px the button loses
   its last word off the right edge. 26.25rem keeps a margin over that. The
   hero carries the same call to action at full width, within the same
   screen. Measured in a 360px frame, because headless Chrome will not open a
   window below about 500px. */
@media (max-width: 26.25rem) {
  .nav-cta { display: none; }
}