/* ===== Colours: the same as your CV ===== */
:root {
  --bg: #ffffff;         /* page background */
  --tint: #faf6f1;       /* soft warm panels */
  --ink: #1b1513;        /* main text and lines */
  --muted: #5d534e;      /* secondary text */
  --wine: #7a2335;       /* burgundy accent: buttons, links, small details */
  --wine-dark: #5e1a29;  /* button hover */
  --gold: #b98a3e;       /* gold accent: lines, dots, windows */
  --gold-text: #8a6428;  /* deeper gold, only for text (easier to read) */
  --line: #e7dfd6;       /* thin lines */
  --line-strong: #cfc4b8;

  --serif: "Lora", Georgia, serif;
  --sans: "Inter", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, monospace;

  /* Spacing scale: every gap on the page uses one of these */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Text sizes */
  --t-xs: 0.8125rem;   /* 13px: labels, dates */
  --t-sm: 0.9375rem;   /* 15px: secondary text, buttons */
  --t-md: 1.0625rem;   /* 17px: body */
  --t-lg: 1.25rem;     /* 20px: small headings, lead */
  --t-xl: 1.5rem;      /* 24px: card headings */
  --t-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem);
  --t-h1: clamp(2.125rem, 1.4rem + 3vw, 3.5rem);

  --radius: 16px;
  --shadow: 0 1px 2px rgba(27, 21, 19, 0.04), 0 8px 24px rgba(27, 21, 19, 0.05);
  --gutter: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ===== Basics ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans); font-size: var(--t-md); line-height: 1.65;
  color: var(--ink); background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; }
a { color: inherit; }
::selection { background: var(--wine); color: #fff; }
:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4, .logo { font-family: var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 700; line-height: 1.08; }
h1 em { font-style: italic; font-weight: 500; color: var(--wine); }
h2 { font-size: var(--t-h2); font-weight: 700; line-height: 1.15; margin-bottom: var(--s3); }
h3 { font-weight: 600; line-height: 1.25; }
p { text-wrap: pretty; }
.section-intro { color: var(--muted); max-width: 58ch; margin-bottom: var(--s7); }

/* small uppercase label, used sparingly */
.label {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--wine);
}

.skip { position: absolute; left: var(--s4); top: -100px; z-index: 50; padding: var(--s3) var(--s4); background: var(--ink); color: #fff; border-radius: 8px; }
.skip:focus { top: var(--s3); }

/* ===== Top bar ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav {
  max-width: 1200px; margin: 0 auto; padding: var(--s3) var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s5);
}
.logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.25rem; font-style: italic; font-weight: 500; text-decoration: none; color: var(--ink); white-space: nowrap;
}
#site-nav { display: flex; gap: var(--s2); align-items: center; }
#site-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s3);
  text-decoration: none; color: var(--muted); font-size: var(--t-sm); font-weight: 500;
  border-radius: 999px; transition: color 0.2s;
}
#site-nav a:hover { color: var(--ink); }
#site-nav .nav-cta { margin-left: var(--s2); padding: 0 var(--s5); color: #fff; background: var(--wine); transition: background 0.2s; }
#site-nav .nav-cta:hover { color: #fff; background: var(--wine-dark); }

.menu-toggle {
  display: none; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4);
  font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  background: transparent; border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
}
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 1.5px; background: currentColor; transition: transform 0.25s var(--ease), opacity 0.2s; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -5px; }
.menu-icon::after { top: 5px; }
.menu-open .menu-icon { background: transparent; }
.menu-open .menu-icon::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-icon::after { transform: translateY(-5px) rotate(-45deg); }

/* ===== Layout ===== */
section { max-width: 1120px; margin: 0 auto; padding: var(--s9) var(--gutter); }
/* full-width off-white band behind a section */
/* (border-image paints outside the box without ever causing sideways scrolling) */
.band { border-image: conic-gradient(var(--tint) 0 0) fill 0 / / 0 100vw; }
main { position: relative; z-index: 0; }

/* ===== Hero ===== */
.hero {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s7) var(--s8); align-items: center;
  padding-top: var(--s8); padding-bottom: var(--s7);
}
.kicker {
  display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5);
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wine);
}
.kicker::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.lead { color: var(--muted); font-size: 1.125rem; max-width: 52ch; margin-top: var(--s5); }

/* the quiet line of facts under the hero */
.facts {
  grid-column: 1 / -1; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  padding-top: var(--s5); border-top: 1px solid var(--line);
  color: var(--muted); font-size: var(--t-sm);
}
.facts li { display: inline-flex; align-items: center; gap: var(--s3); }
.facts li::before { content: ""; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); flex: none; }

/* ===== Buttons ===== */
.buttons { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5); border-radius: 999px;
  border: 1px solid var(--ink); background: #fff; color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--tint); }
.btn.primary { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn.primary:hover { background: var(--wine-dark); border-color: var(--wine-dark); }
.btn.small { min-height: 44px; padding: 0 var(--s4) 0 var(--s5); }

/* ===== The hero scene: plays once, then rests on the finished workflow ===== */
.scene { display: block; width: 100%; height: auto; max-width: 460px; justify-self: center; overflow: hidden; }
.scene text { font-family: var(--sans); }
.ground { stroke: var(--ink); stroke-width: 1.5; stroke-opacity: 0.6; }
.shadow { fill: var(--ink); fill-opacity: 0.08; }
.b-body { fill: #fff; stroke: var(--ink); stroke-width: 1.6; }
.b-line { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.b-door { fill: var(--wine); stroke: var(--ink); stroke-width: 1.4; }
.windows rect { fill: var(--gold); stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1; fill-opacity: inherit; }
.windows { fill-opacity: 0; }
.node rect { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.node .port { fill: var(--gold); }
.node text { fill: var(--ink); font-size: 13px; font-weight: 600; text-anchor: middle; }
.n3 rect { stroke: var(--wine); }
.wires path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 150; stroke-dashoffset: 150; }
.pulse { fill: var(--wine); offset-path: path("M85 132 H335 V252 H85"); offset-rotate: 0deg; opacity: 0; }
.caption { fill: var(--wine); font-size: 15px; font-style: italic; text-anchor: middle; opacity: 0; font-family: var(--serif) !important; }

/* timeline (about 9 seconds, once):
   0.2s building rises in · 1.2-2.6s windows light up · 3.8s building fades away
   4.4s workflow steps appear one by one · 5.6s wires connect · 7.1s one data pulse runs through */
.building, .shadow { animation: rise-in 1.1s var(--ease) 0.2s both, fade-away 0.8s ease-in 3.8s forwards; }
.w-a { animation: lights 0.8s ease-out 1.2s both; }
.w-b { animation: lights 0.8s ease-out 1.7s both; }
.w-c { animation: lights 0.8s ease-out 2.2s both; }
.c1  { animation: show 0.6s ease-out 0.9s both, fade-away 0.5s ease-in 3.8s forwards; }
.node { animation: rise-in 0.8s var(--ease) both; }
.n1 { animation-delay: 4.4s; }
.n2 { animation-delay: 4.7s; }
.n3 { animation-delay: 5s; }
.n4 { animation-delay: 5.3s; }
.wires path { animation: connect 0.7s ease-in-out forwards; }
.wires path:nth-child(1) { animation-delay: 5.6s; }
.wires path:nth-child(2) { animation-delay: 6s; }
.wires path:nth-child(3) { animation-delay: 6.4s; }
.pulse { animation: flow 2.6s linear 7.1s both; }
.c2  { animation: show 0.6s ease-out 4.8s both; }

@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-away { to { opacity: 0; transform: translateY(-6px); } }
@keyframes show { from { opacity: 0; } to { opacity: 1; } }
@keyframes lights { from { fill-opacity: 0; } to { fill-opacity: 0.9; } }
@keyframes connect { to { stroke-dashoffset: 0; } }
@keyframes flow {
  0% { offset-distance: 0%; opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ===== Projects: short cards that open one at a time ===== */
.cases { display: grid; gap: var(--s4); }
.case {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); scroll-margin-top: 96px;
  transition: border-color 0.25s;
}
.case:hover, .case.open { border-color: var(--line-strong); }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding: var(--s5) var(--s6); }
.case h3 { font-size: var(--t-xl); }
.case-sum { color: var(--muted); margin-top: var(--s1); max-width: 60ch; }

/* the "View details" button, with a small arrow that flips when open */
.case-toggle { flex: none; }
.case-toggle::after {
  content: ""; width: 6px; height: 6px; margin-left: var(--s1);
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.3s var(--ease);
}
.case.open .case-toggle { border-color: var(--wine); color: var(--wine); }
.case.open .case-toggle::after { transform: translateY(2px) rotate(225deg); }

/* the details slide open (without JavaScript they are simply always shown) */
.case-details { display: grid; }
.js .case-details { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.35s var(--ease), visibility 0s 0.35s; }
.js .case.open .case-details { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.35s var(--ease), visibility 0s; }
.case-inner { overflow: hidden; min-height: 0; }
.case-body {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s6); align-items: start;
  margin: 0 var(--s6); padding: var(--s5) 0 var(--s6); border-top: 1px solid var(--line);
}
.js .case-body { opacity: 0; transition: opacity 0.3s; }
.js .case.open .case-body { opacity: 1; transition-delay: 0.1s; }

.case-body .label { margin-bottom: var(--s2); }
.case-body h4 { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s3); }
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s3); }
.steps li { counter-increment: step; position: relative; padding-left: 40px; }
.steps li::before {   /* numbered gold circle */
  content: counter(step); position: absolute; left: 0; top: 0.15em; width: 26px; height: 26px;
  display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold-text); font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
}
.case-note { margin-top: var(--s4); color: var(--muted); font-size: var(--t-sm); }
.case-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s2);
  color: var(--wine); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(122, 35, 53, 0.35);
  text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color 0.2s;
}
.case-link::after { content: "\2197"; margin-left: 6px; }
.case-link:hover { text-decoration-color: var(--wine); }
.case-disclaimer { color: var(--muted); font-size: var(--t-xs); font-style: italic; }

/* picture gallery with small tabs */
.tabs { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.tabs button {
  min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: 999px; background: #fff;
  font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--muted);
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tabs button:hover { color: var(--ink); border-color: var(--ink); }
.tabs [aria-selected="true"], .tabs [aria-selected="true"]:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.gallery-label { margin-bottom: var(--s3); color: var(--muted); font-size: var(--t-sm); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.shot {
  position: relative; display: block; width: 100%; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px; background: var(--ink); cursor: zoom-in;
  transition: border-color 0.2s;
}
.shot:hover { border-color: var(--ink); }
.shot img { display: block; width: 100%; height: 300px; object-fit: contain; }
.shot-hint {
  position: absolute; right: var(--s3); bottom: var(--s3); padding: var(--s1) var(--s3); border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: var(--t-xs); font-weight: 500;
  opacity: 0.85; transition: opacity 0.2s;
}
.shot:hover .shot-hint { opacity: 1; }

/* ===== Picture viewer ===== */
.lightbox {
  margin: auto; padding: 56px 0 0; border: 0; background: transparent; overflow: visible;
  max-width: min(94vw, 1400px); max-height: 94vh;
}
.lightbox::backdrop { background: rgba(27, 21, 19, 0.88); }
.lightbox[open] { animation: show 0.2s ease-out; }
.lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 110px); margin: 0 auto; border-radius: 10px; }
.lightbox-caption { margin-top: var(--s3); text-align: center; color: #fff; font-size: var(--t-sm); }
.lightbox .lightbox-close {
  position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background 0.2s;
}
.lightbox .lightbox-close:hover { background: var(--tint); }
html:has(.lightbox[open]) { overflow: hidden; }   /* the page behind stays still */

/* ===== Videos ===== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.video-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.video-card video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0e1a14; }
.video-card figcaption { padding: var(--s4) var(--s5) var(--s5); display: grid; gap: var(--s1); }
.video-card figcaption strong { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; line-height: 1.3; }
.video-card figcaption span { color: var(--muted); font-size: var(--t-sm); }

/* ===== Services ===== */
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.service {
  padding: var(--s5) var(--s5) var(--s6);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.service::before { content: ""; display: block; width: 24px; height: 2px; margin-bottom: var(--s4); background: var(--gold); }
.service h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }
.service p { color: var(--muted); font-size: var(--t-sm); }

/* ===== About ===== */
.about-grid { display: grid; grid-template-columns: 320px 1fr; gap: var(--s8); align-items: start; }
.about-grid p { color: var(--muted); max-width: 62ch; }
.about-grid p + p { margin-top: var(--s3); }
.about-grid .based { color: var(--ink); font-weight: 500; font-size: var(--t-sm); }
.about-grid .label { margin-top: var(--s5); color: var(--wine); }
/* the photo sits in an arch, like a doorway on a drawing */
.portrait { position: relative; }
.portrait::before {   /* thin gold outline offset behind the photo */
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1.5px solid var(--gold); border-radius: 999px 999px 14px 14px;
}
.portrait img {
  position: relative; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top;
  border-radius: 999px 999px 14px 14px; border: 1px solid var(--ink);
  box-shadow: 0 20px 40px rgba(27, 21, 19, 0.10); background: var(--tint);
}
.skills { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.skills li { padding: var(--s1) var(--s3); border: 1px solid var(--line-strong); border-radius: 6px; font-size: var(--t-sm); background: #fff; }

/* ===== Experience timeline ===== */
.timeline { list-style: none; position: relative; max-width: 880px; }
.timeline::before { content: ""; position: absolute; left: 150px; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: var(--s7); padding-bottom: var(--s6); position: relative; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::after {   /* dot on the line */
  content: ""; position: absolute; left: 146px; top: 9px; width: 9px; height: 9px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--gold);
}
.timeline li:first-child::after { background: var(--wine); border-color: var(--wine); }
.t-when { color: var(--gold-text); font-family: var(--mono); font-size: var(--t-xs); font-weight: 500; padding-top: 4px; }
.timeline h3 { font-size: var(--t-lg); }
.t-where { color: var(--wine); font-weight: 500; font-size: var(--t-sm); margin: 2px 0 var(--s2); }
.timeline p:not(.t-where) { color: var(--muted); max-width: 62ch; }
.edu-title { margin-top: var(--s8); }

/* ===== Contact ===== */
.contact { text-align: center; }
.contact .section-intro { margin-left: auto; margin-right: auto; }
.contact .buttons { justify-content: center; margin-top: var(--s3); }
.contact-form {
  max-width: 600px; margin: 0 auto; text-align: left; display: grid; gap: var(--s4);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s6); box-shadow: var(--shadow);
}
.contact-form label { display: block; font-weight: 500; font-size: var(--t-sm); color: var(--ink); }
.contact-form input, .contact-form textarea {
  display: block; width: 100%; margin-top: var(--s2); min-height: 48px; padding: var(--s3) var(--s4);
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 10px; transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 128px; line-height: 1.5; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #8a807a; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(122, 35, 53, 0.12); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.contact-form .btn { justify-self: start; }
.contact-form .btn:disabled { opacity: 0.6; cursor: wait; }
.form-note { color: var(--wine); font-weight: 500; font-size: var(--t-sm); }
.form-note:empty { display: none; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.contact-or { margin-top: var(--s6); color: var(--muted); font-size: var(--t-sm); }

/* ===== Footer ===== */
.footer { padding: var(--s7) var(--gutter) var(--s6); color: var(--muted); font-size: var(--t-sm); }
.footer-inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4) var(--s6); }
.footer-name { font-family: var(--serif); font-weight: 600; font-size: var(--t-lg); color: var(--ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
.footer-links a:hover { color: var(--wine); text-decoration-color: var(--wine); }
.footer-copy { max-width: 1120px; margin: var(--s5) auto 0; padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-xs); }

/* ===== Gentle fade-in on scroll ===== */
.js .reveal, .js .case { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color 0.25s; }
.js .reveal.visible, .js .case.visible { opacity: 1; transform: none; }

/* ===== Tablets ===== */
@media (max-width: 980px) {
  .video-grid { grid-template-columns: 1fr; max-width: 640px; }
  .service-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  section { padding-top: var(--s8); padding-bottom: var(--s8); }
  .hero { grid-template-columns: 1fr; gap: var(--s6); padding-top: var(--s7); }
  .scene { max-width: 380px; }
  .case-head { flex-direction: column; align-items: flex-start; gap: var(--s4); padding: var(--s5); }
  .case-body { grid-template-columns: 1fr; gap: var(--s5); margin: 0 var(--s5); }
  .shot img { height: 240px; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .portrait { width: min(260px, 80%); margin: 0 auto; }
  .timeline::before { left: 4px; }
  .timeline li { grid-template-columns: 1fr; gap: var(--s1); padding-left: var(--s6); }
  .timeline li::after { left: 0; top: 7px; }
  .t-when { padding-top: 0; }
}

/* ===== Phones ===== */
@media (max-width: 720px) {
  .menu-toggle { display: inline-flex; }
  #site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s2) var(--gutter) var(--s4);
    background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(27, 21, 19, 0.06);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0s 0.2s;
  }
  .menu-open #site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity 0.2s, transform 0.2s var(--ease), visibility 0s; }
  #site-nav a { min-height: 48px; padding: 0; font-size: var(--t-md); color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 0; }
  #site-nav .nav-cta { margin: var(--s4) 0 0; justify-content: center; border-radius: 999px; border-bottom: 0; }
  .service-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :root { --t-md: 1rem; }
  section { padding-top: var(--s7); padding-bottom: var(--s7); }
  .hero { padding-top: var(--s6); }
  .lead { font-size: var(--t-md); }
  .buttons .btn { flex: 1 1 auto; }
  .section-intro { margin-bottom: var(--s6); }
  .facts { flex-direction: column; gap: var(--s2); }
  .case-head { padding: var(--s5) var(--s4); }
  .case-body { margin: 0 var(--s4); }
  .shot img { height: 220px; }
  .contact-form { padding: var(--s5) var(--s4); }
  .field-row { grid-template-columns: 1fr; }
  .contact-form .btn { justify-self: stretch; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ===== Respect people who turn off motion: show the finished workflow straight away ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .building, .shadow, .c1, .pulse { display: none; }
  .wires path { stroke-dashoffset: 0; }
  .c2 { opacity: 1; }
  .js .reveal, .js .case, .js .case-body { opacity: 1; transform: none; }
}