/*==============================================================================
  ByteSync — site.css
  Hand-written design system. No framework, no build step.
  ------------------------------------------------------------------------------
  Sections: 1 tokens · 2 reset · 3 layout · 4 header/nav · 5 hero
            6 sections · 7 cards · 8 work · 9 services · 10 about
            11 career · 12 contact · 13 footer · 14 utilities
            15 motion · 16 print
==============================================================================*/


/*==============================================================================
  1. TOKENS
==============================================================================*/

:root {
   /* Surfaces */
   --bg: #ffffff;
   --bg-soft: #f5f7fa;
   --surface: #ffffff;
   --border: #e2e7ee;
   --border-strong: #cbd4e0;

   /* Text — all verified >= 4.5:1 on their surfaces */
   --text: #14181f;
   --text-muted: #5b6472;
   --text-faint: #6b7480;

   /* Accents. --accent is 5.9:1 on white and 5.4:1 on --bg-soft, so it is
      safe for text and for white-on-accent. --accent-2 is decorative only. */
   --accent: #0b6357;
   --accent-hover: #084d44;
   --accent-soft: #e6f2ef;
   --accent-2: #679af5;

   /* Type */
   --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
      "Liberation Mono", monospace;

   --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.88rem);
   --step-0: clamp(0.95rem, 0.92rem + 0.18vw, 1.05rem);
   --step-1: clamp(1.10rem, 1.04rem + 0.30vw, 1.30rem);
   --step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.75rem);
   --step-3: clamp(1.60rem, 1.40rem + 1.00vw, 2.25rem);
   --step-4: clamp(2.00rem, 1.60rem + 2.00vw, 3.25rem);

   /* Space */
   --space-1: 0.5rem;
   --space-2: 0.875rem;
   --space-3: 1.25rem;
   --space-4: 1.75rem;
   --space-5: 2.5rem;
   --space-6: 4rem;
   --space-7: 5.5rem;

   --radius: 12px;
   --radius-sm: 8px;
   --radius-lg: 18px;

   --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
   --shadow: 0 4px 16px rgba(16, 24, 40, .07);
   --shadow-lg: 0 12px 32px rgba(16, 24, 40, .10);

   --wrap: 1140px;
   --header-h: 64px;

   /* Explicit light theme. The previous version had a prefers-color-scheme: dark
      branch, which meant anyone with a dark desktop saw a dark site they never
      asked for. Declaring color-scheme also stops the browser auto-darkening
      form controls. */
   color-scheme: light only;
}


/*==============================================================================
  2. RESET
==============================================================================*/

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

html {
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
   font-family: var(--font);
   font-size: var(--step-0);
   line-height: 1.65;
   -webkit-font-smoothing: antialiased;
}

img,
svg { max-width: 100%; }

img { height: auto; display: block; }

h1, h2, h3, h4 {
   margin: 0 0 var(--space-2);
   line-height: 1.2;
   font-weight: 650;
   letter-spacing: -0.015em;
   color: var(--text);
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-3); }

a {
   color: var(--accent);
   text-decoration: none;
}

a:hover { color: var(--accent-hover); }

ul, ol { margin: 0; padding: 0; list-style: none; }

strong { font-weight: 650; color: var(--text); }

/* One visible focus style everywhere. */
:focus-visible {
   outline: 3px solid var(--accent-2);
   outline-offset: 2px;
   border-radius: 4px;
}


/*==============================================================================
  3. LAYOUT
==============================================================================*/

.wrap {
   width: min(100% - 2.5rem, var(--wrap));
   margin-inline: auto;
}

.section { padding-block: var(--space-7); }
.section--soft { background: var(--bg-soft); }

.section-head {
   max-width: 62ch;
   margin-bottom: var(--space-5);
}

.section-head p {
   color: var(--text-muted);
   margin-bottom: 0;
}

.eyebrow {
   display: block;
   font-size: var(--step--1);
   font-weight: 650;
   letter-spacing: .09em;
   text-transform: uppercase;
   color: var(--accent);
   margin-bottom: var(--space-1);
}

.skip-link {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 100;
   background: var(--accent);
   color: #fff;
   padding: .7rem 1.1rem;
   border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
   left: 0;
   color: #fff;
}


/*==============================================================================
  4. HEADER + NAV
==============================================================================*/

.site-header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: color-mix(in srgb, var(--bg) 88%, transparent);
   backdrop-filter: saturate(140%) blur(10px);
   border-bottom: 1px solid var(--border);
}

.site-header__inner {
   height: var(--header-h);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-3);
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   font-weight: 700;
   font-size: var(--step-1);
   color: var(--text);
   letter-spacing: -0.02em;
}

.brand:hover { color: var(--text); }

.brand__mark {
   width: 30px;
   height: 30px;
   flex: 0 0 30px;
   border-radius: 8px;
   background: var(--accent);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: .78rem;
   font-weight: 700;
   letter-spacing: .02em;
}

.brand__sub {
   font-size: var(--step--1);
   font-weight: 450;
   color: var(--text-muted);
   letter-spacing: 0;
}

/* The brand block and its subtitle must never wrap mid-phrase. */
.brand { white-space: nowrap; }

.nav__list {
   display: flex;
   align-items: center;
   gap: .1rem;
}

.nav__link {
   display: block;
   padding: .45rem .5rem;
   border-radius: var(--radius-sm);
   color: var(--text-muted);
   font-size: .84rem;
   font-weight: 550;
   white-space: nowrap;
}

.nav__link:hover {
   color: var(--text);
   background: var(--bg-soft);
}

.nav__link.is-active {
   color: var(--accent);
   background: var(--accent-soft);
}

.site-header__cta {
   margin-left: .4rem;
   padding: .55rem .9rem;
   font-size: .82rem;
   white-space: nowrap;
}

.nav__toggle {
   display: none;
   width: 42px;
   height: 42px;
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   background: var(--surface);
   color: var(--text);
   cursor: pointer;
   padding: 0;
   place-items: center;
}

.nav__toggle svg { width: 20px; height: 20px; }


/*==============================================================================
  5. HERO
==============================================================================*/

.hero {
   padding-block: var(--space-7) var(--space-6);
   background:
      radial-gradient(90ch 45ch at 78% -10%, var(--accent-soft), transparent 70%),
      var(--bg);
}

.hero__grid {
   display: grid;
   grid-template-columns: 1.05fr .95fr;
   gap: var(--space-6);
   align-items: center;
}

.hero h1 {
   margin-bottom: var(--space-3);
   max-width: 20ch;
}

.hero__lede {
   font-size: var(--step-1);
   color: var(--text-muted);
   max-width: 52ch;
   margin-bottom: var(--space-4);
}

.hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2);
}

.hero__figure {
   margin: 0;
   background: #ffffff;
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   box-shadow: var(--shadow-lg);
}

.hero__figure svg { width: 100%; height: auto; }

.hero__stats {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-3);
   margin-top: var(--space-5);
   padding-top: var(--space-4);
   border-top: 1px solid var(--border);
}

.stat__value {
   display: block;
   font-size: var(--step-2);
   font-weight: 700;
   color: var(--text);
   line-height: 1.1;
}

.stat__label {
   display: block;
   font-size: var(--step--1);
   color: var(--text-muted);
   margin-top: .25rem;
}


/*==============================================================================
  6. BUTTONS
==============================================================================*/

.btn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .7rem 1.15rem;
   border-radius: var(--radius-sm);
   border: 1px solid transparent;
   font: inherit;
   font-size: var(--step--1);
   font-weight: 600;
   cursor: pointer;
   text-align: center;
   transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn--primary {
   background: var(--accent);
   color: #fff;
   border-color: var(--accent);
}

.btn--primary:hover {
   background: var(--accent-hover);
   border-color: var(--accent-hover);
   color: #fff;
}

.btn--ghost {
   background: var(--surface);
   color: var(--text);
   border-color: var(--border-strong);
}

.btn--ghost:hover {
   background: var(--bg-soft);
   color: var(--text);
   border-color: var(--text-faint);
}

.btn svg { width: 16px; height: 16px; flex: 0 0 16px; }


/*==============================================================================
  7. CARD PRIMITIVES
==============================================================================*/

.card {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: var(--space-4);
   box-shadow: var(--shadow-sm);
}

.card__title {
   font-size: var(--step-1);
   margin-bottom: var(--space-2);
}

.card__text {
   color: var(--text-muted);
   font-size: var(--step--1);
   margin-bottom: 0;
}

/* Sector / type badge */
.badge {
   display: inline-block;
   padding: .2rem .55rem;
   border-radius: 999px;
   font-size: .72rem;
   font-weight: 650;
   letter-spacing: .04em;
   text-transform: uppercase;
   background: var(--bg-soft);
   color: var(--text-muted);
   border: 1px solid var(--border);
}

.badge--automotive { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge--iot        { background: #eaf1fb; color: #1a4d8f; border-color: transparent; }
.badge--infra      { background: #f3ecfb; color: #5b2ca0; border-color: transparent; }

/* Tech chips */
.chips {
   display: flex;
   flex-wrap: wrap;
   gap: .4rem;
   margin-top: var(--space-3);
}

.chip {
   display: inline-block;
   padding: .2rem .55rem;
   border-radius: var(--radius-sm);
   font-family: var(--font-mono);
   font-size: .74rem;
   background: var(--bg-soft);
   color: var(--text-muted);
   border: 1px solid var(--border);
}


/*==============================================================================
  8. WORK / SHOWCASE
==============================================================================*/

.filters {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   margin-bottom: var(--space-4);
}

.filter {
   padding: .42rem .95rem;
   border-radius: 999px;
   border: 1px solid var(--border-strong);
   background: var(--surface);
   color: var(--text-muted);
   font: inherit;
   font-size: var(--step--1);
   font-weight: 550;
   cursor: pointer;
   transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.filter:hover {
   color: var(--text);
   border-color: var(--text-faint);
}

.filter[aria-pressed="true"] {
   background: var(--accent);
   border-color: var(--accent);
   color: #fff;
}

/* Cards stack full width by default. Each project card is side-by-side once there
   is room, so its diagram gets 400px+ and stays readable; below that the diagram
   sits above the text instead of being crushed into a narrow column. */
.work-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: var(--space-4);
}

/* Case-study card. Cards that carry a console panel split into two columns;
   text-only cards stay single-column (see .work-card:not(:has(...)) below). */
.work-card {
   display: grid;
   grid-template-columns: 400px 1fr;
   align-items: stretch;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   box-shadow: var(--shadow-sm);
   overflow: hidden;
   transition: box-shadow .2s ease, border-color .2s ease;
}

/* Only the four strongest projects carry a visual; the rest are text-only. */
.work-card--text { grid-template-columns: 1fr; }

.work-card:hover {
   box-shadow: var(--shadow);
   border-color: var(--border-strong);
}

.work-card[hidden] { display: none; }

.work-card__figure {
   margin: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-soft);
   border-right: 1px solid var(--border);
   padding: var(--space-4) var(--space-3);
}

/*------------------------------------------------------------------------------
  Console panel — real HTML, not an image. Shows build and verification output,
  which is the evidence a technical buyer actually reads.
------------------------------------------------------------------------------*/

.console {
   width: 100%;
   background: #0f172a;
   border: 1px solid #1e293b;
   border-radius: var(--radius-sm);
   padding: 14px 16px;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.console pre {
   margin: 0;
   font-family: var(--font-mono);
   font-size: .7rem;
   line-height: 1.8;
   color: #cbd5e1;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
}

.console .p { color: #7dd3fc; }
.console .ok { color: #5eead4; font-weight: 600; }
.console .hi { color: #fbbf24; font-weight: 600; }
.console .dim { color: #64748b; }

.work-card__body {
   padding: var(--space-4);
   display: flex;
   flex-direction: column;
   flex: 1;
}

.work-card__meta {
   display: flex;
   align-items: center;
   gap: .6rem;
   margin-bottom: var(--space-2);
}

.work-card__year {
   font-family: var(--font-mono);
   font-size: var(--step--1);
   color: var(--text-faint);
}

.work-card__title {
   font-size: var(--step-1);
   margin-bottom: .35rem;
}

.work-card__org {
   font-size: var(--step--1);
   color: var(--text-faint);
   margin-bottom: var(--space-3);
}

.work-card__dl {
   margin: 0;
   font-size: var(--step--1);
}

.work-card__dl dt {
   font-weight: 650;
   color: var(--text);
   margin-top: var(--space-3);
   font-size: .78rem;
   letter-spacing: .05em;
   text-transform: uppercase;
}

.work-card__dl dd {
   margin: .2rem 0 0;
   color: var(--text-muted);
}

/* Outcome is the row a buyer reads first, so it gets the accent and separation. */
.work-card__outcome {
   margin-top: .2rem;
   padding-top: .5rem;
   border-top: 1px solid var(--border);
   color: var(--text) !important;
   font-weight: 600;
}

.work-card__outcome strong { color: var(--accent); }


/*==============================================================================
  9. SERVICES
==============================================================================*/

.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   gap: var(--space-4);
}

.service-card {
   position: relative;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: var(--space-4);
   box-shadow: var(--shadow-sm);
}

.service-card::before {
   content: "";
   position: absolute;
   inset: 0 auto 0 0;
   width: 3px;
   border-radius: var(--radius) 0 0 var(--radius);
   background: var(--accent);
}

.service-card__title {
   font-size: var(--step-1);
   margin-bottom: .4rem;
}

.service-card__text {
   color: var(--text-muted);
   font-size: var(--step--1);
   margin-bottom: var(--space-2);
}

.service-card__where {
   font-size: var(--step--1);
   color: var(--text-faint);
   margin-bottom: 0;
}


/*==============================================================================
  10. ABOUT
==============================================================================*/

.about-grid {
   display: grid;
   grid-template-columns: .85fr 1.15fr;
   gap: var(--space-6);
   align-items: start;
}

.about-figure {
   margin: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   padding: var(--space-4);
   text-align: center;
   box-shadow: var(--shadow-sm);
}

.monogram {
   width: 96px;
   height: 96px;
   margin: 0 auto var(--space-3);
   border-radius: 50%;
   background: var(--accent);
   color: #fff;
   display: grid;
   place-items: center;
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: .02em;
}

.about-figure figcaption {
   font-size: var(--step--1);
   color: var(--text-muted);
}

.principles {
   display: grid;
   gap: var(--space-3);
   margin-top: var(--space-4);
}

.principle {
   padding-left: var(--space-3);
   border-left: 2px solid var(--border-strong);
}

.principle h4 {
   font-size: var(--step-0);
   margin-bottom: .15rem;
}

.principle p {
   margin: 0;
   font-size: var(--step--1);
   color: var(--text-muted);
}


/*==============================================================================
  11. CAREER TIMELINE
==============================================================================*/

.timeline {
   position: relative;
   padding-left: var(--space-5);
}

.timeline::before {
   content: "";
   position: absolute;
   left: 7px;
   top: .6rem;
   bottom: .6rem;
   width: 2px;
   background: var(--border);
}

.timeline__item {
   position: relative;
   padding-bottom: var(--space-5);
}

.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
   content: "";
   position: absolute;
   left: calc((var(--space-5) - 7px) * -1);
   top: .55rem;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--surface);
   border: 3px solid var(--border-strong);
}

.timeline__item--current::before {
   background: var(--accent);
   border-color: var(--accent-soft);
}

.timeline__head {
   display: flex;
   flex-wrap: wrap;
   align-items: baseline;
   gap: .6rem;
   margin-bottom: .3rem;
}

.timeline__role {
   font-size: var(--step-1);
   margin: 0;
}

.timeline__period {
   font-family: var(--font-mono);
   font-size: var(--step--1);
   color: var(--text-faint);
}

.timeline__org {
   font-weight: 600;
   color: var(--text);
   margin-bottom: .5rem;
}

.timeline__points {
   display: grid;
   gap: .35rem;
   font-size: var(--step--1);
   color: var(--text-muted);
}

.timeline__points li {
   position: relative;
   padding-left: 1.1rem;
}

.timeline__points li::before {
   content: "";
   position: absolute;
   left: 0;
   top: .62em;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: var(--accent);
}

.now-flag {
   display: inline-block;
   padding: .1rem .45rem;
   border-radius: 999px;
   background: var(--accent);
   color: #fff;
   font-size: .68rem;
   font-weight: 700;
   letter-spacing: .06em;
   text-transform: uppercase;
   vertical-align: middle;
}


/*==============================================================================
  12. CONTACT
==============================================================================*/

.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-6);
   align-items: start;
}

.contact-list {
   display: grid;
   gap: var(--space-3);
}

.contact-list li {
   display: flex;
   align-items: flex-start;
   gap: .7rem;
   font-size: var(--step--1);
}

.contact-list svg {
   width: 18px;
   height: 18px;
   flex: 0 0 18px;
   margin-top: .25rem;
   color: var(--accent);
}

.contact-list__label {
   display: block;
   font-size: .74rem;
   font-weight: 650;
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--text-faint);
}

.form {
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: var(--space-4);
   box-shadow: var(--shadow-sm);
}

.field { margin-bottom: var(--space-3); }

.field label {
   display: block;
   font-size: var(--step--1);
   font-weight: 600;
   margin-bottom: .3rem;
}

.field input,
.field textarea {
   width: 100%;
   padding: .65rem .8rem;
   font: inherit;
   font-size: var(--step-0);
   color: var(--text);
   background: var(--bg);
   border: 1px solid var(--border-strong);
   border-radius: var(--radius-sm);
   transition: border-color .18s ease, box-shadow .18s ease;
}

.field textarea {
   resize: vertical;
   min-height: 130px;
}

.field input:focus,
.field textarea:focus {
   border-color: var(--accent);
   box-shadow: 0 0 0 3px var(--accent-soft);
   outline: none;
}

.field__hint {
   display: block;
   margin-top: .3rem;
   font-size: var(--step--1);
   color: var(--text-faint);
}


/*==============================================================================
  13. FOOTER
==============================================================================*/

.site-footer {
   background: var(--bg-soft);
   border-top: 1px solid var(--border);
   padding-block: var(--space-5);
   font-size: var(--step--1);
   color: var(--text-muted);
}

.site-footer__inner {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: flex-start;
   gap: var(--space-4);
}

.site-footer p { margin: 0 0 .3rem; }

.site-footer__links {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
}

.site-footer__links a { color: var(--text-muted); }
.site-footer__links a:hover { color: var(--accent); }


/*==============================================================================
  14. UTILITIES
==============================================================================*/

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0 0 0 0);
   white-space: nowrap;
   border: 0;
}

.empty-note {
   grid-column: 1 / -1;
   padding: var(--space-4);
   border: 1px dashed var(--border-strong);
   border-radius: var(--radius);
   color: var(--text-muted);
   text-align: center;
}


/*==============================================================================
  14b. PROGRAMMES (proof) + WIDE CHIP ROW
==============================================================================*/

.proof {
   display: grid;
   gap: 0;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: var(--surface);
   overflow: hidden;
}

.proof li {
   display: grid;
   grid-template-columns: minmax(200px, 1.1fr) 2fr auto;
   gap: var(--space-3);
   align-items: baseline;
   padding: var(--space-3) var(--space-4);
   border-bottom: 1px solid var(--border);
}

.proof li:last-child { border-bottom: 0; }

.proof__org {
   font-weight: 650;
   color: var(--text);
}

.proof__what {
   color: var(--text-muted);
   font-size: var(--step--1);
}

.proof__when {
   font-family: var(--font-mono);
   font-size: var(--step--1);
   color: var(--text-faint);
   white-space: nowrap;
}

.chips--wide {
   gap: .5rem;
   margin-top: 0;
}

.chips--wide .chip {
   padding: .35rem .7rem;
   font-size: .8rem;
}

@media (max-width: 760px) {
   .proof li {
      grid-template-columns: 1fr;
      gap: .25rem;
   }

   .proof__when { justify-self: start; }
}


/*==============================================================================
  15. MOTION
  .is-reveal is added by js/site.js only for elements still below the fold, so
  markup is never hidden without JavaScript. Removing the class reveals the
  element; the transition lives on .reveal so it animates on removal.
==============================================================================*/

.reveal {
   transition: opacity .45s ease, transform .45s ease;
}

.is-reveal {
   opacity: 0;
   transform: translateY(14px);
}

@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }

   *,
   *::before,
   *::after {
      animation-duration: .001ms !important;
      transition-duration: .001ms !important;
   }

   .is-reveal {
      opacity: 1;
      transform: none;
   }
}


/*==============================================================================
  16. RESPONSIVE
==============================================================================*/

@media (max-width: 1180px) {
   .brand__sub { display: none; }
   .site-header__cta { display: none; }
}

@media (max-width: 980px) {
   .hero__grid,
   .about-grid,
   .contact-grid {
      grid-template-columns: 1fr;
      gap: var(--space-5);
   }

   .hero__figure { order: -1; }
}

/* The case-study card is diagram-beside-text, which needs room for both. Below
   this width the diagram sits above the text instead of squeezing the column. */
@media (max-width: 880px) {
   .work-card {
      grid-template-columns: 1fr;
   }

   .work-card__figure {
      border-right: 0;
      border-bottom: 1px solid var(--border);
      padding: var(--space-3);
   }

   .work-card__figure svg,
   .work-card__figure img {
      max-width: 300px;
   }
}

@media (max-width: 760px) {
   :root { --header-h: 58px; }

   .nav__toggle { display: grid; }

   .nav {
      position: fixed;
      inset: var(--header-h) 0 auto;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      padding: var(--space-3) 0;
      display: none;
   }

   .nav.is-open { display: block; }

   .nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: .15rem;
   }

   .nav__link {
      padding: .75rem 1rem;
      font-size: var(--step-0);
   }

   .site-header__cta {
      display: none;
   }

   .mobile-cta { display: block; margin-top: var(--space-2); }

   .hero__stats {
      grid-template-columns: 1fr;
      gap: var(--space-2);
   }

   .timeline { padding-left: var(--space-4); }

   .timeline__item::before {
      left: calc((var(--space-4) - 7px) * -1);
   }
}

@media (min-width: 761px) {
   .mobile-cta { display: none; }
}


/*==============================================================================
  17. PRINT — Ctrl+P produces a clean CV
==============================================================================*/

@media print {
   :root {
      --bg: #fff;
      --bg-soft: #fff;
      --surface: #fff;
      --text: #000;
      --text-muted: #333;
      --text-faint: #444;
      --accent: #000;
      --shadow: none;
      --shadow-sm: none;
      --shadow-lg: none;
   }

   @page { margin: 12mm 13mm; }

   body {
      font-size: 8.2pt;
      line-height: 1.26;
   }

   h1 { font-size: 15pt; }
   h2 { font-size: 12pt; }
   h3 { font-size: 10.5pt; }
   h4 { font-size: 9.5pt; }

   p { margin-bottom: .3rem; }

   /* Programme list and chip row: compact in print. */
   .proof li { padding: .25rem .4rem; gap: .5rem; }
   .proof__org { font-size: 8.5pt; }
   .chips { gap: .2rem; margin-top: .3rem; }
   .chip { font-size: 7pt; padding: .1rem .35rem; }

   /* Nothing interactive or decorative belongs in a printed CV. */
   .site-header,
   .nav,
   .nav__toggle,
   .hero__actions,
   .filters,
   .form,
   .skip-link,
   .site-footer__links,
   .hero__figure,
   .empty-note { display: none !important; }

   .section,
   .hero {
      padding-block: .2rem;
      background: #fff;
      break-inside: auto;
   }

   .section--soft { background: #fff; }

   /* Two columns keeps the CV short without shrinking text to unreadable. */
   .work-grid,
   .services-grid {
      grid-template-columns: 1fr 1fr;
      gap: .4rem;
   }

   .work-card {
      break-inside: avoid;
   }

   .card,
   .service-card,
   .work-card,
   .about-figure,
   .principle,
   .timeline__item {
      border: 1px solid #ccc;
      box-shadow: none;
      break-inside: avoid;
   }

   .work-card {
      grid-template-columns: 1fr;
   }

   .work-card__figure {
      display: none;
   }

   .work-card__body,
   .card,
   .service-card { padding: .35rem .45rem; }

   .work-card__dl dt { margin-top: .35rem; }

   .work-card__outcome {
      margin-top: .35rem;
      padding-top: .35rem;
      border-top: 0;
   }

   .hero__stats {
      margin-top: .6rem;
      padding-top: .5rem;
      gap: .6rem;
   }

   .stat__value { font-size: 12pt; }

   .timeline { padding-left: 1rem; }
   .timeline__item { padding-bottom: .6rem; border: 0; }
   .timeline__item::before { display: none; }
   .timeline__points { gap: .1rem; }

   .contact-grid,
   .about-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

   .monogram {
      width: 54px;
      height: 54px;
      font-size: 1.1rem;
      background: #eee;
      color: #000;
   }

   a { color: #000; text-decoration: none; }

   .is-reveal { opacity: 1 !important; transform: none !important; }
}