/* Agmo Studio — modern template system, built on the official Agmo Group
   corporate identity (see AGMO_CORPORATE_IDENTITY.md): Agmo Sky Blue /
   Blue Grey / Steel Teal primaries, Mariner Blue / Gem Turquoise
   secondaries, Poppins (headings/UI) + Inter (body) typography.
   Supports light/dark: dark is the default regardless of OS preference,
   and a header toggle can pin an explicit choice via [data-theme] +
   localStorage (see the inline script in _meta/render_shared.py). Light
   therefore only applies on an explicit [data-theme="light"], which is
   also the no-JS fallback. --accent is tuned
   per theme to stay WCAG AA-readable as text/links (Mariner Blue on
   light, Sky Blue on dark — raw Sky Blue fails contrast on a light bg);
   --accent-contrast is the text color to place on top of an --accent
   fill (e.g. the primary button), which likewise flips per theme. */

:root{
  color-scheme: dark;
  --bg: #10151B;
  --bg-rgb: 16,21,27;
  --bg-elevated: #1A212A;
  --bg-elevated-2: #212A35;
  --text: #F1F4F6;
  --text-muted: #99A4AF;
  --border: #2C3642;
  --accent: #1CACCE;
  --accent-hover: #48C2C5;
  --accent-contrast: #0A1015;
  --accent-soft: rgba(28,172,206,.12);
  --prose-text: #D6DCE2;
  --nav-shadow: 0 20px 45px -12px rgba(0,0,0,.5);
  /* the wordmark asset is authored white-on-transparent, so the dark
     default needs no filter — the light theme recolors it below */
  --logo-filter: none;
  --radius: 14px;
  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg: #F5F7F9;
  --bg-rgb: 245,247,249;
  --bg-elevated: #EBEEF1;
  --bg-elevated-2: #E1E6EA;
  --text: #1E252D;
  --text-muted: #5B6672;
  --border: #D7DEE3;
  --accent: #385B9C;
  --accent-hover: #2E4C86;
  --accent-contrast: #FFFFFF;
  --accent-soft: rgba(56,91,156,.10);
  --prose-text: #232B34;
  --nav-shadow: 0 20px 45px -14px rgba(30,45,66,.22);
  --logo-filter: invert(1) brightness(.15) contrast(1.1);
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
html{ transition: background-color .15s ease; }
body{ padding-top: 92px; }
body, .m-footer, .m-card, .m-feature, .m-testi-card, .m-team-card, .m-mobile-panel{ transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
a{ text-decoration: none; color: inherit; }
img{ max-width: 100%; height: auto; display: block; }
.m-container{ max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---------- Typography: Poppins (brand main font) for headings/UI chrome,
   Inter (brand pairing font) for body copy — set as the page default above. */
h1, h2, h3, h4, h5, h6,
.m-nav > a, .m-nav-trigger, .m-mobile-toplink, .m-mobile-section h5,
.m-btn, .m-eyebrow, .m-tag, .m-chip, .m-stat strong,
.m-logo-strip-label, .m-folio-pagenav a, .m-back-link{ font-family: var(--font); }

/* ---------- Header: floating pill at rest -> edge-to-edge bar once scrolled.
   Driven continuously by --p (0..1), which modern.js's initScrollMorph
   updates every animation frame from scroll position
   (eased, not a hard breakpoint) — every geometry rule below reads --p so
   the shape tracks scroll position 1:1 instead of snapping between two
   states. The two chrome layers (pill gradient+shadow vs. solid blurred
   bar) cross-fade via opacity on ::before/::after so the background
   blends too, not just the shape. ---------- */
.m-header{
  position: fixed; z-index: 50;
  top: calc(18px * (1 - var(--p, 0)));
  --floating-inset: max(16px, calc((100% - 900px) / 2));
  left: calc(var(--floating-inset) * (1 - var(--p, 0)));
  right: calc(var(--floating-inset) * (1 - var(--p, 0)));
  border-radius: calc(999px * (1 - var(--p, 0)));
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.m-header::before, .m-header::after{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1; box-sizing:border-box;
  transition: background-color .15s ease, border-color .15s ease;
}
.m-header::before{
  background: linear-gradient(135deg, var(--bg-elevated-2), var(--bg-elevated));
  border: 1px solid var(--border);
  box-shadow: var(--nav-shadow);
  opacity: calc(1 - var(--p, 0));
}
.m-header::after{
  background: rgba(var(--bg-rgb),.85);
  border-bottom: 1px solid var(--border);
  opacity: var(--p, 0);
}
.m-header-inner{
  max-width: 1160px; margin: 0 auto; display:flex; align-items:center; gap: 22px;
  padding: calc(10px + 4px * var(--p, 0)) calc(18px + 6px * var(--p, 0));
}
.m-header .m-logo{
  position:relative; width:96px; height:34px; flex-shrink:0; display:block;
  /* sequence the crossfade (badge out, then wordmark in) instead of a
     straight 50/50 blend, so the two marks don't ghost on top of each
     other mid-scroll */
  --logo-out: clamp(0, calc(1 - var(--p, 0) * 1.6), 1);
  --logo-in: clamp(0, calc((var(--p, 0) - 0.35) * 1.54), 1);
}
.m-logo-badge, .m-logo-full{ position:absolute; left:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; }
.m-logo-badge{
  width:32px; height:32px; border-radius:50%; overflow:hidden; justify-content:center;
  background: var(--bg); border:1px solid var(--border);
  opacity: var(--logo-out);
}
.m-logo-badge img{ width:20px; height:20px; object-fit:contain; }
.m-logo-full{ opacity: var(--logo-in); }
.m-logo-full img{ height: 30px; width:auto; filter: var(--logo-filter, none); }
/* footer keeps the plain wordmark (no badge/crossfade); same recolor need */
.m-footer .m-logo img{ height: 30px; width:auto; filter: var(--logo-filter, none); }
.m-nav{ display:flex; align-items:center; gap: 18px; margin-left: 8px; flex: 1; }
.m-nav > a{ color: var(--text-muted); font-size: .95em; font-weight: 500; transition: color .15s; white-space: nowrap; }
.m-nav > a:hover{ color: var(--text); }
.m-header-cta{ padding: 9px 18px !important; font-size: .92em !important; white-space:nowrap; }
.m-search-link{ color: var(--text-muted); display:flex; align-items:center; flex-shrink:0; transition: color .15s; }
.m-search-link:hover{ color: var(--accent); }

/* ---------- Theme toggle ---------- */
.m-theme-toggle{ background:none; border:1px solid var(--border); border-radius:999px; width:34px; height:34px; display:flex; align-items:center; justify-content:center; color: var(--text-muted); cursor:pointer; padding:0; transition: color .15s, border-color .15s; flex-shrink:0; }
.m-theme-toggle:hover{ color: var(--accent); border-color: var(--accent); }
/* dark is the default, so the sun (switch to light) shows unless an
   explicit light choice is pinned */
.m-theme-icon-sun{ display:block; }
.m-theme-icon-moon{ display:none; }
:root[data-theme="light"] .m-theme-icon-sun{ display:none; }
:root[data-theme="light"] .m-theme-icon-moon{ display:block; }

/* ---------- Nav menu trigger (opens the side panel — see below) ---------- */
.m-nav-trigger{ background:none; border:none; cursor:pointer; color: var(--text-muted); font-size: .95em; font-weight: 500; font-family: inherit; padding:0; transition: color .15s; }
.m-nav-trigger:hover{ color: var(--text); }

/* ---------- Buttons ---------- */
.m-btn{ display:inline-flex; align-items:center; justify-content:center; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: 1em; transition: all .18s ease; border: 1px solid transparent; }
.m-btn-primary{ background: var(--accent); color: var(--accent-contrast); }
.m-btn-primary:hover{ background: var(--accent-hover); transform: translateY(-1px); }
.m-btn-outline{ border-color: var(--border); color: var(--text); }
.m-btn-outline:hover{ border-color: var(--accent); color: var(--accent); }
.m-btn-lg{ padding: 16px 34px; font-size: 1.05em; }

/* ---------- Hero ---------- */
/* Full-bleed: cancel body's fixed-header offset (92px, see body{padding-top})
   so the photo runs up under the floating/scrolled nav instead of starting
   below it. Content is bottom-anchored so the top of the photo stays clear. */
/* Split layout: text column on the left sits on the plain page background
   (not on the photo), so it needs no scrim or text-shadow to stay legible;
   the photo is a contained panel on the right, shown at full clarity apart
   from two soft fades that blend its own edges into the page bg. Still
   overlaps the nav (margin-top cancels body's fixed-header offset) so the
   photo panel runs up to the very top of the viewport. */
.m-hero{
  position: relative; overflow: hidden;
  margin-top: -92px;
  min-height: clamp(560px, 88vh, 780px);
}
.m-hero-bg{ position:absolute; inset:0; z-index:0; background:
  radial-gradient(circle at 15% 30%, var(--accent-soft), transparent 42%),
  radial-gradient(circle at 78% 10%, rgba(72,194,197,.12), transparent 45%); }
/* keeps .m-container's 1160px max-width, auto margins and 24px side
   gutters intact (padding longhand, so the shorthand doesn't zero the
   sides) — that's what lines the hero text up with every other section;
   the narrow text column comes from capping the children, not the
   container, which would otherwise centre a 640px box in the viewport */
.m-hero-inner{ position: relative; z-index:2; padding-top: clamp(150px, 22vh, 220px); padding-bottom: 40px; }
.m-hero-inner > *{ max-width: 640px; }
/* the stats band runs wider than the text column so all four sit on one
   line (they need ~812px; the 640px column would wrap the last one) */
.m-hero-inner > .m-stat-row{ max-width: none; }
/* rotating hero caption: every version sits in the same grid cell, so the
   block keeps the height of the tallest one and the page never jumps */
.m-hero-leads{ display: grid; margin: 0 0 26px; }
.m-hero-leads .m-hero-lead{
  grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.m-hero-leads .m-hero-lead-active{ opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce){ .m-hero-leads .m-hero-lead{ transition: none; transform: none; } }

/* ---------- Hero photo slider: full-width backdrop ---------- */
.m-hero-slider{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.m-hero-slide{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  opacity:0; transition: opacity 1.2s ease;
}
.m-hero-slide.m-hero-slide-active{ opacity: 1; }
.m-hero-slider::before{
  /* scrim spans the left 60%, clearing the photo from there rightwards.
     The text column ends around 57% at desktop widths, so the copy stays
     inside the scrim; it runs slightly past on narrower screens. */
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(var(--bg-rgb),.95) 30%, rgba(var(--bg-rgb),.68) 46%, transparent 60%);
}
.m-hero-slider::after{
  /* fade the panel's own bottom edge so the hero meets the next section cleanly */
  content:""; position:absolute; inset:0; z-index:2;
  background: linear-gradient(180deg, transparent 78%, var(--bg) 100%);
}

/* ---------- Client logo strip (auto-scrolling marquee) ---------- */
/* Every logo keeps its own brand colours, so the rows sit on a light
   panel: the artwork is client-supplied and 26 of the 42 marks are dark
   on transparent backgrounds, which would be invisible straight on the
   dark theme. An inset rounded panel reads as a deliberate surface
   rather than a white gap in the dark layout.
   (_meta/make_logo_alpha.py also strips the opaque white backgrounds the
   five odd logos shipped with, so nothing shows a visible rectangle.) */
.m-logo-strip{ padding: 56px 0; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.m-logo-panel{ background:#fff; border-radius: var(--radius); padding: 34px 0; }
/* light theme: the page is already light, so the panel isn't needed —
   the logos sit straight on the page background (spacing kept the same) */
:root[data-theme="light"] .m-logo-panel{ background: transparent; }
.m-logo-strip-label{ text-align:center; margin-bottom: 20px; }
.m-logo-strip-cta{ text-align:center; margin-bottom: 40px; }
.m-logo-track-wrap{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-logo-track-wrap + .m-logo-track-wrap{ margin-top: 26px; }
.m-logo-track{ display:flex; align-items:center; gap: 72px; width: max-content; animation: m-logo-scroll 56s linear infinite; }
/* staggered durations so the three rows don't march in lockstep */
.m-logo-track-1{ animation-duration: 52s; }
.m-logo-track-2{ animation-duration: 64s; }
.m-logo-track-3{ animation-duration: 58s; }
/* no chip, no crop — each logo keeps its own aspect ratio. The width/height
   attributes in the markup supply that ratio before the lazy image loads,
   so nothing collapses to zero width and the loop maths stay correct. */
.m-logo-track img{ height: 100px; width:auto; max-width:none; object-fit:contain; display:block; flex-shrink:0; }
@keyframes m-logo-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .m-logo-track{ animation: none; } }

/* ---------- Full clients grid page ---------- */
.m-client-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 40px; }
.m-client-logo{ background:#fff; border-radius: 10px; padding: 20px; display:flex; align-items:center; justify-content:center; height: 90px; transition: transform .15s; }
.m-client-logo:hover{ transform: translateY(-2px); }
.m-client-logo img{ max-width:100%; max-height:44px; object-fit:contain; }
@media (max-width: 860px){ .m-client-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .m-client-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Press photo grid ---------- */
.m-press-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.m-press-photo{ display:block; border-radius: 10px; overflow:hidden; aspect-ratio: 1; border: 1px solid var(--border); }
.m-press-photo img{ width:100%; height:100%; object-fit:cover; transition: transform .2s; }
.m-press-photo:hover img{ transform: scale(1.06); }
@media (max-width: 860px){ .m-press-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px){ .m-press-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Testimonials ---------- */
.m-testi-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
.m-testi-card{ padding: 28px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); display:flex; flex-direction:column; gap:16px; }
.m-testi-quote{ color: var(--text); font-size: .98em; line-height: 1.6; margin:0; }
.m-testi-quote::before{ content:"\201C"; color: var(--accent); font-size:1.4em; line-height:0; margin-right:2px; }
.m-testi-author{ color: var(--text-muted); font-size: .85em; font-weight:600; }
.m-h1{ font-size: clamp(2.2em, 5vw, 3.4em); line-height: 1.12; font-weight: 800; margin: 0 0 22px; letter-spacing: -0.01em; }
/* the hero's photo scrim is intentionally light (see .m-hero-slider::after)
   so the image reads clearly; a soft halo in the page's own bg color keeps
   the headline/lead legible over busy image areas without darkening the
   photo itself */
.m-accent-text{ color: var(--accent); }
.m-lead{ font-size: 1em; color: var(--text-muted); max-width: 640px; line-height: 1.6; margin: 0 0 26px; }
.m-hero-ctas{ display:flex; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }
.m-stat-row{ display:flex; gap: clamp(28px, 3.2vw, 44px); flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 24px; }
.m-hero-dots{ display:flex; gap:8px; margin-top: 28px; }
.m-hero-dot{ width:8px; height:8px; border-radius:50%; border:none; padding:0; background: var(--border); cursor:pointer; transition: background-color .2s, transform .2s; }
.m-hero-dot:hover{ background: var(--text-muted); }
.m-hero-dot-active{ background: var(--accent); transform: scale(1.25); }
.m-stat{ display:flex; flex-direction:column; gap:4px; }
.m-stat strong{ font-size: 1.6em; font-weight: 800; }
.m-stat span{ color: var(--text-muted); font-size: .85em; }

/* ---------- Sections ---------- */
.m-section{ padding: 80px 0; }
.m-section-alt{ background: var(--bg-elevated); }
.m-eyebrow{ display:block; color: var(--accent); font-weight: 700; letter-spacing: .12em; font-size: .8em; text-transform: uppercase; margin-bottom: 14px; }
.m-h2{ font-size: clamp(1.6em, 3vw, 2.2em); font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; }
.m-body-text{ color: var(--text-muted); line-height: 1.7; font-size: 1.05em; }
.m-max-70{ max-width: 760px; }
.m-center{ text-align: center; margin-top: 40px; }
.m-center-text{ margin-left:auto; margin-right:auto; }

/* ---------- Chip grid (services) ---------- */
.m-chip-grid{ display:flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.m-chip{ padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated-2); font-size: .92em; font-weight: 500; transition: all .15s; }
.m-chip:hover{ border-color: var(--accent); color: var(--accent); }

/* ---------- Certifications: official badge + commitment statement per standard ---------- */
.m-cert-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
.m-cert-item{ padding: 26px 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); }
/* The real certification badges (CMMI 2.75:1, the three ISO marks 1:1) are
   sized by a box, not by fixed dimensions, so each keeps its own aspect
   ratio — same rule as the client logo strip. No backdrop: every badge
   already carries its own opaque fill with only the area outside the
   circle/rounded-rect transparent, so it reads on the dark theme as-is;
   a white panel behind one would just box a circle in a rectangle. */
.m-cert-logo{ display:flex; align-items:center; height:64px; margin-bottom: 16px; }
.m-cert-logo img{ width:auto; height:auto; max-height:100%; max-width:170px; }
.m-cert-item h3{ margin: 0 0 8px; font-size: 1em; }
.m-cert-item p{ margin:0; color: var(--text-muted); font-size:.88em; line-height:1.55; }
@media (max-width: 860px){ .m-cert-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .m-cert-grid{ grid-template-columns: 1fr; } }

/* ---------- Card grid (portfolio) ---------- */
.m-card-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
.m-card{ border-radius: var(--radius); overflow: hidden; background: var(--bg-elevated-2); border: 1px solid var(--border); transition: transform .18s, border-color .18s; }
.m-card:hover{ transform: translateY(-4px); border-color: var(--accent); }
.m-card img{ width:100%; height: 190px; object-fit: cover; }
.m-card-body{ padding: 18px 20px 22px; }
.m-tag{ display:inline-block; font-size: .75em; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.m-card-body h3{ font-size: 1.05em; margin: 0; font-weight: 700; line-height: 1.4; }

/* ---------- Feature grid ---------- */
.m-feature-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.m-feature{ padding: 26px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated); }
.m-feature h3{ margin: 0 0 10px; font-size: 1.1em; }
.m-feature p{ margin:0; color: var(--text-muted); line-height: 1.6; font-size: .95em; }

/* ---------- Team grid ---------- */
.m-team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.m-team-card{ text-align:center; padding: 24px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elevated-2); }
.m-team-card img{ width: 96px; height: 96px; object-fit: cover; border-radius: 50%; margin: 0 auto 16px; border: 2px solid var(--border); }
.m-team-card h3{ margin: 0 0 4px; font-size: 1.05em; }
.m-team-card span{ color: var(--text-muted); font-size: .88em; }
/* The team collage carries the section on its own now that the individual
   leadership profiles are gone; margin-top matches the grid rhythm the
   other sections use. (.m-team-grid/.m-team-card above are currently
   unused — kept so leadership cards can be restored without rewriting.) */
.m-team-collage{ width: 100%; border-radius: var(--radius); margin-top: 36px; }

/* ---------- CTA section ---------- */
.m-cta-section{ text-align:center; }

/* ---------- Footer ---------- */
.m-footer{ border-top: 1px solid var(--border); padding: 56px 0 28px; background: var(--bg-elevated); }
.m-footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.m-footer-contact p{ color: var(--text); font-size: .92em; margin: 0 0 12px; line-height:1.5; }
.m-footer-contact a{ color: var(--text); }
.m-footer-contact a:hover{ color: var(--accent); }
.m-footer-text{ color: var(--text-muted); font-size: .9em; line-height: 1.6; margin-top: 14px; max-width: 320px; }
.m-footer-grid h4{ font-size: .85em; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin: 0 0 14px; }
.m-footer-grid a{ display:block; color: var(--text); font-size: .92em; margin-bottom: 10px; opacity: .85; }
.m-footer-grid a:hover{ opacity: 1; color: var(--accent); }
.m-footer-bottom{ margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85em; }

/* ---------- Article / detail page hero (blog post, portfolio item, generic page) ---------- */
.m-post-hero{ position: relative; padding: 90px 0 60px; text-align:center; overflow:hidden; }
.m-post-hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.28; filter: saturate(0.7); }
.m-post-hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(var(--bg-rgb),.4), var(--bg) 92%); }
.m-post-hero-inner{ position:relative; max-width: 820px; margin: 0 auto; padding: 0 24px; }
.m-post-title{ font-size: clamp(1.8em, 4vw, 2.6em); font-weight: 800; line-height:1.2; margin: 14px 0 18px; }
.m-post-meta{ color: var(--text-muted); font-size: .9em; }
.m-post-meta a{ color: var(--accent); }

/* ---------- Prose (article body typography) ---------- */
.m-prose{ max-width: 760px; margin: 0 auto; padding: 10px 24px 40px; line-height: 1.8; font-size: 1.08em; color: var(--prose-text); }
.m-prose h2{ font-size: 1.5em; font-weight: 800; margin: 1.6em 0 .6em; color: var(--text); }
.m-prose h3{ font-size: 1.22em; font-weight: 700; margin: 1.4em 0 .5em; color: var(--text); }
.m-prose p{ margin: 0 0 1.2em; }
.m-prose ul, .m-prose ol{ margin: 0 0 1.2em; padding-left: 1.4em; }
.m-prose li{ margin-bottom: .5em; }
.m-prose img{ border-radius: 10px; margin: 1.6em 0; }
.m-prose a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.m-prose strong{ color: var(--text); }
.m-prose hr{ border: none; border-top: 1px solid var(--border); margin: 2.4em 0; }
.m-prose blockquote{ border-left: 3px solid var(--accent); margin: 1.6em 0; padding: .2em 0 .2em 1.2em; color: var(--text-muted); font-style: italic; }
.m-prose blockquote .m-quote-attrib{ font-style: normal; font-size: .9em; margin: .6em 0 0; }
.m-prose .m-story-lead{ font-size: 1.25em; line-height: 1.5; color: var(--text); margin-bottom: .4em; }
.m-prose .m-story-meta{ color: var(--text-muted); font-size: .95em; margin-top: 0; }
.m-prose .m-stat-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 1.6em 0 2em; }
.m-prose .m-stat strong{ font-size: 1.5em; line-height: 1.2; }
@media (max-width: 480px){ .m-prose .m-stat-row{ grid-template-columns: minmax(0, 1fr); } }
.m-prose table{ display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.4em 0; font-size: .95em; }
.m-prose th, .m-prose td{ text-align: left; vertical-align: top; padding: .7em .9em; border-bottom: 1px solid var(--border); }
.m-prose th{ font-weight: 700; color: var(--text); }
.m-prose th[scope="row"]{ min-width: 9em; }
.m-prose iframe{ max-width:100%; border-radius:10px; }
.m-back-link{ display:inline-flex; align-items:center; gap:6px; color: var(--text-muted); font-size: .92em; margin: 32px auto 0; max-width:760px; padding: 0 24px; }
.m-back-link-wrap{ text-align:center; margin-bottom: 20px; }

/* ---------- Portfolio prev/next pagination ---------- */
.m-folio-pagenav{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  max-width: 760px; margin: 40px auto 0; padding: 20px 24px; border-top: 1px solid var(--border);
}
.m-folio-pagenav a{ color: var(--text-muted); font-size: .92em; font-weight:600; white-space:nowrap; }
.m-folio-pagenav a:hover{ color: var(--accent); }
.m-folio-pagenav-all{ color: var(--text) !important; }
.m-folio-pagenav-prev{ text-align:left; }
.m-folio-pagenav-next{ text-align:right; }
@media (max-width: 560px){
  .m-folio-pagenav{ flex-wrap:wrap; justify-content:center; text-align:center; }
  .m-folio-pagenav-all{ order:-1; width:100%; margin-bottom:8px; }
}

/* ---------- Portfolio detail: 2-column layout (content + info sidebar) ---------- */
.m-folio-layout{ display:grid; grid-template-columns: 1fr 300px; gap: 48px; max-width: 1100px; margin: 0 auto; padding: 0 24px 20px; align-items:start; }
.m-folio-layout > .m-prose{ max-width:none; margin:0; padding: 10px 0 0; }
.m-folio-sidebar{ position:sticky; top: 90px; display:flex; flex-direction:column; gap:20px; padding: 24px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); }
.m-folio-info h4{ font-size:.75em; text-transform:uppercase; letter-spacing:.08em; color: var(--accent); margin: 0 0 8px; }
.m-folio-info p{ margin:0; color: var(--text); font-size:.92em; line-height:1.5; }
.m-folio-info-link{ display:block; margin-top:6px; color: var(--text-muted); font-size:.82em; word-break:break-all; }
.m-folio-info-link:hover{ color: var(--accent); }
.m-folio-visit-btn{ text-align:center; }
@media (max-width: 960px){
  .m-folio-layout{ grid-template-columns: 1fr; }
  .m-folio-sidebar{ position:static; }
}

/* ---------- Forms embedded in prose (contact form, etc.) ---------- */
.m-prose form label{ display:block; font-weight:600; color: var(--text); margin: 1.2em 0 .5em; font-size: .95em; }
.m-prose form input[type="text"],
.m-prose form input[type="email"],
.m-prose form input[type="tel"],
.m-prose form textarea{
  width:100%; margin-top:8px; padding: 12px 14px; background: var(--bg-elevated);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text);
  font-size: 1em; font-family: inherit; box-sizing:border-box;
}
.m-prose form input:focus, .m-prose form textarea:focus{ outline:none; border-color: var(--accent); }
.m-prose form input[type="submit"]{ margin-top: .5em; border:none; cursor:pointer; font-size:1em; }

/* ---------- Hamburger (mobile-only header icon) ---------- */
.m-hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px; height:34px; flex-shrink:0; background:none; border:none; cursor:pointer; padding:0; margin-left:8px; }
.m-hamburger span{ display:block; width:100%; height:2px; background: var(--text); transition: transform .2s ease, opacity .2s ease; }
.m-hamburger-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.m-hamburger-open span:nth-child(2){ opacity:0; }
.m-hamburger-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Side panel: single scrollable nav drawer used on every
   screen size, opened by .m-nav-trigger ("Services") on desktop and
   .m-hamburger on mobile only (the desktop "Services" trigger opens the
   .m-mega-menu dropdown below instead — see modern.js). Fixed-width
   drawer on the right on desktop, full-width overlay on mobile.
   Click-triggered, not hover — more robust than a hover mega-menu and
   works the same with touch. ---------- */
.m-panel-backdrop{
  display:none; position: fixed; inset:0; z-index: 99;
  background: rgba(0,0,0,.5); opacity:0; transition: opacity .2s ease;
}
.m-panel-backdrop-open{ display:block; opacity:1; }
.m-mobile-panel{
  position: fixed; top:0; right:0; bottom:0; z-index: 100;
  width: 420px; max-width: 88vw; background: var(--bg-elevated);
  border-left: 1px solid var(--border); overflow-y: auto; padding: 90px 28px 60px;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -20px 0 50px rgba(0,0,0,.4);
}
.m-mobile-panel-open{ transform: translateX(0); }
.m-mobile-toplink{ display:block; font-size: 1.1em; font-weight:700; color: var(--text); padding: 12px 0; border-bottom: 1px solid var(--border); }
.m-mobile-section{ margin-top: 22px; }
.m-mobile-section h5{ font-size:.78em; text-transform:uppercase; letter-spacing:.08em; color: var(--accent); margin: 0 0 10px; }
.m-mobile-section a{ display:block; color: var(--text-muted); font-size: .92em; padding: 8px 0; }
.m-panel-close{
  position:absolute; top:24px; right:24px; width:34px; height:34px; border-radius:50%;
  background: var(--bg-elevated-2); border:1px solid var(--border); color: var(--text);
  font-size:1.1em; cursor:pointer; line-height:1;
}

/* ---------- Desktop "Services" mega-menu (dropdown, >=799px only —
   see the media queries below and .m-mobile-panel above for the mobile
   drawer equivalent) ---------- */
.m-nav-trigger{ display:inline-flex; align-items:center; gap:5px; }
.m-nav-trigger-chevron{ transition: transform .2s ease; }
.m-nav-trigger[aria-expanded="true"] .m-nav-trigger-chevron{ transform: rotate(180deg); }
.m-mega-menu{
  position: fixed; left:0; right:0; z-index: 90;
  display:flex; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.m-mega-menu-open{
  opacity:1; visibility:visible; transform:translateY(0);
  transition: opacity .2s ease, transform .2s ease;
}
.m-mega-menu-inner{
  width:100%; max-width: 1100px; margin: 0 16px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--nav-shadow);
  padding: 32px 36px 30px; max-height: calc(100vh - 120px); overflow-y:auto;
}
.m-mega-grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap: 28px; }
.m-mega-col h5{ font-size:.75em; text-transform:uppercase; letter-spacing:.08em; color: var(--accent); margin: 0 0 12px; }
.m-mega-col a{ display:block; color: var(--text-muted); font-size:.85em; line-height:1.4; padding: 6px 0; transition: color .15s; }
.m-mega-col a:hover{ color: var(--accent); }
/* light theme only: --accent (Mariner Blue) sits at almost the same
   lightness as the resting --text-muted, so the hover barely registered.
   A deeper blue gives ~4x the luminance shift while staying on-brand. */
:root[data-theme="light"] .m-mega-col a:hover{ color: #123C7A; }
@media (max-width: 1100px){ .m-mega-grid{ grid-template-columns: repeat(3, 1fr); } }

/* ---------- Utility classes replacing former inline style="" attributes ---------- */
.m-eyebrow a{ color: inherit; }
.m-panel-cta{ margin-top: 20px; width: 100%; }

/* ---------- Search page ---------- */
.m-search-wrap{ max-width: 760px; }
.m-search-box{ margin: 28px 0; }
.m-search-input{
  width:100%; padding: 14px 18px; font-size: 1.1em; box-sizing: border-box;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; color: var(--text);
}
.m-search-status{ color: var(--text-muted); }
.m-search-result{ padding: 18px 0; border-bottom: 1px solid var(--border); }
.m-search-result a{ font-size: 1.15em; font-weight: 700; color: var(--text); }
.m-search-result p{ color: var(--text-muted); margin: 6px 0 0; }

/* ---------- Responsive ---------- */
/* Header collapses to the hamburger later (800px) than the grid
   breakpoints below (860px): the pill's own content — logo, links, CTA —
   comfortably fits down to ~800px, so a plain "desktop" browser window
   (not resized to tablet/phone) keeps the full nav instead of showing
   the hamburger. */
@media (max-width: 799px){
  .m-nav > a, .m-nav-trigger{ display:none; }
  .m-header-cta{ display:none; }
  .m-hamburger{ display:flex; }
  .m-mega-menu{ display:none !important; }
}
@media (max-width: 900px){
  /* stack: photo becomes a fixed-height band across the top (still runs
     up behind the nav), text flows full-width below it */
  .m-hero{ min-height:auto; }
  .m-hero-slider{ position:relative; top:auto; right:auto; bottom:auto; width:100%; height:300px; }
  .m-hero-slider::before{ display:none; }
  .m-hero-inner{ padding-top: 32px; padding-bottom: 56px; }
  .m-hero-inner > *{ max-width:none; }
}
@media (max-width: 860px){
  .m-mobile-panel{ width:100%; max-width:100%; border-left:none; padding-top: 80px; }
  .m-card-grid, .m-feature-grid, .m-team-grid, .m-testi-grid{ grid-template-columns: 1fr 1fr; }
  .m-footer-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .m-card-grid, .m-feature-grid, .m-team-grid, .m-testi-grid{ grid-template-columns: 1fr; }
  .m-hero-slider{ height:240px; }
  /* three rows of 100px logos eat most of a phone screen */
  .m-logo-track img{ height: 60px; }
  .m-logo-track{ gap: 44px; }
  .m-logo-track-wrap + .m-logo-track-wrap{ margin-top: 18px; }
}