/* Self-hosted, so that reading this page tells Google nothing.
   Generated by build/fonts.py — edit that, not this. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/source-serif-4-400.woff2) format("woff2");
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/source-serif-4-600.woff2) format("woff2");
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/libre-franklin-400.woff2) format("woff2");
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/libre-franklin-500.woff2) format("woff2");
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/libre-franklin-600.woff2) format("woff2");
}

  /* THE MATURE PASS
     The layout tested well and is untouched. What changed is the register:
     a chartered practice acting for landlords and investors should read as
     a professional firm, not a consumer app. Serif headlines over a neutral
     sans, navy as the dominant colour with green demoted to an accent,
     hairline rules and 3px corners in place of 36px slabs, and motion cut
     back to what a reader would not notice. */
  :root {
    --ink: #0f1a33;          /* the navy carries the brand now */
    --ink-soft: #1c2b52;
    --grey: #4f596f;         /* body copy on white */
    --mute: #666f86;         /* AA on white and on the band */
    --paper: #f6f6f3;        /* neutral band — replaces the green tints */
    --line: #e3e3dd;         /* hairlines do the work borders used to */
    --accent: #9dd83e;       /* THE green. One value, both grounds. */
    /* #9dd83e is 3.2:1 on white — fine as a fill, not as small text. This is
       the darkened variant for type on a light ground, the same value
       accentInk() derives for the newsletter. */
    /* Two values, one green. --accent is the brand colour: 10.1:1 on navy,
       where it is superb, and 1.7:1 on white, where it cannot be type at all
       — not even large type, which needs 3:1. --accent-ink is that same
       green shaded until it is legible: identical hue (83 degrees), 5.0:1 on
       white, which is what lets the brand colour carry words on the light
       sections. Do not collapse them into one. */
    --accent-ink: #587923;
    --accent-2: #9dd83e;     /* decorative green */
    --accent-2: var(--accent);   /* kept as an alias only — there is one green */
    --gold: #b08a3c;
    --r: 3px;
    color-scheme: light;   /* brand palette is fixed — one theme, deliberately */
    --green: var(--accent); --green-deep: var(--accent-2); --card: var(--paper); --cream: var(--paper); --amber: var(--gold);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: #ffffff; color: var(--grey);
    font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 400; font-size: 16.5px; line-height: 1.72;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; font-weight: 600; color: var(--ink); text-wrap: balance; }
  .btn, .eyebrow, nav a, .logo-word, h5, label { font-family: 'Libre Franklin', -apple-system, 'Segoe UI', Arial, sans-serif; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 0 34px; }
  section { padding: 72px 0; }
  .center { text-align: center; }
  h2 { font-size: clamp(28px, 3.8vw, 40px); line-height: 1.18; letter-spacing: -.2px; }
  .sub { color: var(--grey); font-size: 17.5px; max-width: 620px; margin: 16px auto 0; }
  /* Eyebrow labels — the big-firm grammar (Knight Frank, Mishcon):
     a quiet marker above every composed headline. The rule is a hairline
     now, not a 3px bar. */
  .eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
  .eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--accent); opacity: .8; }
  /* Arrival: a slow fade up. Nothing springs, nothing slides sideways.
     These are section labels, not content — a label that arrives quickly
     draws the eye it is meant to hand on to the heading below it. */
  @media (prefers-reduced-motion: no-preference) {
    .js .eyebrow { transition: transform 1.5s cubic-bezier(.16,.84,.44,1), opacity 1.2s ease; }
    .js .eyebrow:not(.in) { transform: translateY(8px); opacity: 0; }
  }

  /* About — the firm's own voice, editorial two-column (Montagu Evans cue) */
  .about .grid2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
  .about h2 { font-size: clamp(26px, 3.4vw, 36px); }
  .about .body p { color: var(--grey); font-size: 17px; margin-bottom: 16px; }
  .about .creds { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
  .about .cred { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 7px 14px; font-size: 12.5px; font-weight: 500; color: var(--grey); letter-spacing: .01em; }

  /* Our thinking — editorial credibility strip (Burges Salmon / Freshfields cue) */
  .insights .card { background: #fff; box-shadow: none; }
  .insights .card:hover { border-color: var(--ink); transform: none; box-shadow: none; }
  .insights .tag { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
  .insights h3 { margin-top: 12px; }
  @media (max-width: 800px) { .about .grid2 { grid-template-columns: 1fr; gap: 30px; } }

  /* Section bands — full-bleed neutral ground with hairline edges. The
     rounded floating slabs were the loudest childish signal. */
  .band { background: var(--paper); border-radius: 0; margin: 0; box-shadow: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .band > .wrap { padding-left: 34px; padding-right: 34px; }
  .band .card { background: #ffffff; }

  /* One button system — square-ish, quiet */
  .btn { display: inline-block; background: var(--ink); color: #fff; font-weight: 500; text-decoration: none; padding: 15px 30px; border-radius: var(--r); font-size: 15.5px; letter-spacing: .01em; border: 1px solid var(--ink); cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  .btn:hover { background: var(--ink-soft); border-color: var(--ink-soft); }
  .btn.green { background: var(--accent); color: var(--ink); border-color: var(--accent); }
  .btn.green:hover { filter: brightness(.94); }
  .btn.line { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
  .btn.line:hover { background: var(--ink); color: #fff; }

  /* Header — white, hairline, navy. Was a full-bleed lime bar. */
  header { background: #ffffff; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); }
  /* padding-top/bottom only — a `padding: 16px 0` shorthand here cancels
     .wrap's horizontal padding and puts the logo flush to the screen edge */
  .head-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 16px; padding-bottom: 16px; }
  .logo { display: inline-flex; text-decoration: none; flex-shrink: 0; }
  .logo-img { height: 40px; width: auto; display: block; }
  .rics-img { height: 72px; width: auto; display: block; }
  footer .logo-img { height: 36px; }
  /* x1.5 (Jacob). The footer instance is the only one on either page;
     the base above keeps its relationship to it. */
  footer .rics-img { height: 63px; }
  .logo-row { display: flex; align-items: center; }
  .logo-word { font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: -.4px; line-height: 1; }
  .logo-o { width: 25px; height: 25px; margin-left: 2px; }
  .logo-sub { font-size: 9px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); margin-top: 4px; }
  .rics { display: inline-flex; flex-direction: column; align-items: flex-start; }
  .rics-reg { font-size: 13px; color: #4d545c; padding-bottom: 5px; border-bottom: 2px solid #b7bec6; margin-bottom: 5px; letter-spacing: .2px; }
  .rics-word { font-size: 26px; font-weight: 600; color: #4d545c; letter-spacing: .5px; line-height: 1; }
  .rics-word sup { font-size: 10px; font-weight: 500; }
  .rics.inverse .rics-reg { color: #a9b2c8; border-bottom-color: #3a4666; }
  .rics.inverse .rics-word { color: #ffffff; }
  .logo.inverse .logo-word { color: #ffffff; }
  .logo.inverse .logo-sub { color: #a9b2c8; }
  nav { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
  nav a { color: var(--grey); text-decoration: none; font-size: 15px; font-weight: 500; }
  nav a:hover { color: var(--ink); }
  nav a.tel { color: var(--ink); font-weight: 500; }
  nav .tel-reveal { background: none; border: 0; padding: 0; cursor: pointer; color: var(--grey); display: inline-flex; align-items: center; }
  nav .tel-reveal:hover { color: var(--ink); }
  nav a.signin { background: transparent; border: 1px solid var(--ink); color: var(--ink); padding: 10px 20px; border-radius: var(--r); font-size: 14.5px; }
  nav a.signin:hover { background: var(--ink); color: #ffffff; }

  /* Hero — navy ground, serif headline, square corners */
  .hero { background: var(--ink); border-radius: 0; padding: 96px 0 104px; text-align: center; position: relative; overflow: hidden; min-height: 540px; display: flex; align-items: center; }
  .hero > .wrap { position: relative; z-index: 1; width: 100%; }
  /* static (Jacob): the label above the headline holds still while the
     headline arrives — two things fading in above each other read as a
     page still loading. The :not(.in) reveal is exempted, not fought. */
  .hero .eyebrow { color: var(--accent); }
  .js .hero .eyebrow, .js .hero .eyebrow:not(.in) {
    transition: none; transform: none; opacity: 1; }
  .hero .eyebrow::before { background: var(--accent); opacity: .7; }
  .hero h1 { font-size: clamp(38px, 5.6vw, 62px); font-weight: 600; line-height: 1.1; letter-spacing: -.4px; max-width: 860px; margin: 0 auto; color: #ffffff; }
  .hero p { margin: 24px auto 0; max-width: 610px; font-size: 18.5px; color: #c2cadd; line-height: 1.65; }
  /* The headline fades up a line at a time, the second a beat behind the
     first. The animation sits on the spans, not the h1, so each line can
     carry its own delay.

     It is the page's largest contentful paint and an element at zero opacity
     has not painted, so this duration is what the fade costs on load. */
  /* Two animations, not one. The rise lasts 1.7s — the slow arrival Jacob
     asked for — while the opacity is done at .8s. That matters because an
     element still at zero opacity has not painted, so a single 1.7s fade would
     have put the page's largest contentful paint 1.7s out. This way the
     movement is twice as slow and the paint is barely later. */
  h1.fade-in > span { display: inline-block;
    animation: h1-fade .8s ease both,
               h1-rise 1.7s cubic-bezier(.16,.84,.44,1) both; }
  /* line two arrives at half line one's pace: a slower fade over the same
     rise, starting later. The marker and the stop shift down the same
     beat so the sequence keeps its rhythm. */
  h1.fade-in > span + br + span { animation-duration: 1.6s, 2.2s;
    animation-delay: .8s, .8s; }
  /* <i> because it is a span of text set apart from the prose around it,
     which is what the element is for; it carries no italics here. Green on
     this navy is 10.1:1. */
  /* A fine rule under "detail", drawn carefully once the line has landed.
     2px, straight, and LINEAR: a pen moves at constant speed, and easing in
     and out is what makes a drawn line read as a swipe instead. 1.1s for
     roughly 190px is a deliberate, careful pace. */
  .mark { font-style: normal; position: relative; }
  .mark::after { content: ""; position: absolute;
    left: 0.02em; right: 0.05em; bottom: 0.08em; height: 2px;
    background: var(--accent); border-radius: 1px;
    transform: scaleX(0); transform-origin: left center;
    animation: mark-draw 1.1s linear 2.5s both; }
  @keyframes mark-draw { to { transform: scaleX(1); } }

  /* the stop, once the line is ruled */
  h1 .fs { font-style: normal; color: var(--accent);
    animation: fs-in .35s ease 3.7s both; }
  @keyframes fs-in { from { opacity: 0; } }

  @keyframes h1-fade { from { opacity: 0; } }
  @keyframes h1-rise { from { transform: translateY(14px); } }
  @media (prefers-reduced-motion: reduce) {
    h1.fade-in > span, h1 .fs, .mark::after { animation: none; }
    .mark::after { transform: scaleX(1); }
  }

  /* Everything we handle, and the promise with it. A navy band after the six
     cards: the cards are the categories, this is the detail inside them.

     The list is a real <ul> and the window is only a crop over it, so a screen
     reader meets all eighteen as a list while the eye sees one. Green on navy
     is 5.3:1, so the accent can carry type here where it could not on white.

     Position is set in em on a custom property, so a resize, a zoom or a font
     swap moves the column correctly with nothing measured. */
  .breadth { position: relative; background: var(--ink); color: #ffffff;
    padding: 74px 0 68px; overflow: hidden; }
  /* No accent wash. There was a radial here to give the flat navy a centre;
     Jacob does not want green in a gradient anywhere, and the band does not
     need one — the lit discipline is the centre. */
  .breadth > .wrap { position: relative; }
  /* the same eyebrow as every other section, on the navy ground; the rule
     and the letterform come from .eyebrow itself */
  .breadth .eyebrow { color: var(--accent); margin-bottom: 22px; }

  /* Running text, not a grid: the light travels along a line the way an eye
     reads. Every discipline is legible whether or not the script ever runs —
     the lit class only decides which one is currently green. */
  .breadth-all { list-style: none; margin: 0 auto; padding: 0; max-width: 34em;
    font-family: 'Libre Franklin', Arial, sans-serif;
    font-size: clamp(16px, 1.9vw, 22px); font-weight: 500; line-height: 1.85;
    letter-spacing: .005em; }
  .breadth-all li { display: inline; color: rgba(255,255,255,.55);
    transition: color .6s ease; }
  /* The names are the way in. inherit, so a link takes the lit colour with
     everything else rather than opting out of the travelling light; and no
     underline at rest, because eighteen underlined names is a wall of rules
     rather than a sentence. */
  /* No colour transition on the link — only the border. The li already
     transitions colour over .6s and the link inherits it; giving the link its
     own .25s transition on the same property put two of them on one visual
     change, so the word and its underline drifted apart as the light passed. */
  .breadth-all a { color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent; transition: border-color .25s ease; }
  .breadth-all a:hover { color: #ffffff; border-bottom-color: var(--accent); }
  .breadth-all a:focus-visible { outline: 2px solid var(--accent);
    outline-offset: 3px; border-radius: 2px; }
  .breadth-all li + li::before { content: " · ";
    color: rgba(255,255,255,.28); }
  .breadth-all li.lit { color: var(--accent); }

  .breadth .breadth-note { max-width: 28em; margin: 38px auto 0;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: clamp(18px, 2.3vw, 23px); line-height: 1.5; color: #ffffff; }
  .breadth .breadth-note::before { content: ""; display: block; width: 46px;
    height: 1px; margin: 0 auto 30px; background: var(--accent); }

  @media (max-width: 640px) { .breadth { padding: 54px 0 50px; }
    .breadth-all { max-width: none; line-height: 1.95; } }

  /* No movement: nothing is lit, and the list is brought up so it does not
     read as eighteen things waiting to be switched on. */
  @media (prefers-reduced-motion: reduce) {
    .breadth-all li { color: rgba(255,255,255,.78); transition: none; } }

  .hero .acts { margin-top: 40px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  .hero .acts .btn { min-width: 210px; text-align: center; background: #ffffff; color: var(--ink); border-color: #ffffff; }
  .hero .acts .btn:hover { background: #e8ecf5; border-color: #e8ecf5; }
  /* the first action carries the accent; the second stays quiet beside it */
  .hero .acts .btn:first-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .hero .acts .btn:first-child:hover { filter: brightness(.94); background: var(--accent); border-color: var(--accent); }
  .hero .acts .btn.plain { background: transparent; color: #ffffff; border-color: rgba(255,255,255,.45); }
  .hero .acts .btn.plain:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.7); }
  .hero .btn.plain { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,.42); }
  .hero .btn.plain:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); }
  /* Hero photography — Survo's own shots of estates they manage. Desaturated
     and laid under a navy scrim so they read as the brand's own material
     rather than stock, and so the headline stays crisp over any frame. */
  .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
  .shot { position: absolute; inset: 0;
    filter: saturate(.5) contrast(1.04) brightness(.86);
    opacity: 0; transition: opacity 2.6s ease-in-out; will-change: opacity, transform; }
  .shot.on { opacity: 1; }
  /* Every photograph is an <img> so it can carry a srcset; object-fit is what
     background-size: cover used to do, and picture is inline by default. */
  .shot picture, .svc-shot picture, .svc-band picture { display: contents; }
  .shot img, .svc-shot img, .svc-band-img {
    width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg,
    rgba(15,26,51,.90) 0%, rgba(15,26,51,.78) 40%, rgba(15,26,51,.66) 76%, rgba(15,26,51,.80) 100%); }
  /* The city, alive. Animating brightness on the photographs would pulse the
     whole frame — sky, water, road — which is not what a night city does.
     color-dodge divides the backdrop by (1 - blend), which is multiplicative:
     it moves a bright pixel far more than a dark one in absolute terms, so it
     is the lit windows and the streetlights that lift.

     The blend colour must be a DARK grey. Against white the division is by
     zero and every non-black pixel clamps to white, which makes the layer a
     uniform veil and defeats the whole point. #1c1c1c gives about x1.14 at
     full opacity.

     It sits UNDER the scrim, not over it. Over the scrim the dynamic range is
     already compressed to mid-darks and the whole frame just brightens; under
     it the layer meets the photograph's real highlights, so the lights lift
     away from everything around them and the scrim then darkens the result
     evenly. That is the difference between the city brightening and the city
     having lights in it.

     One layer, not two: a full-viewport blended layer repaints continuously,
     and two of them is real work on a cheap phone for an effect measured in
     hundredths of an opacity. The unevenly spaced stops are what stop a
     13-second loop reading as a pulse. */
  .hero-media::before, .svc-head-media::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: #262626; mix-blend-mode: color-dodge; opacity: .12;
    animation: citylights 13s ease-in-out infinite; }
  .hero-scrim { z-index: 2; }
  @keyframes citylights {
    0%   { opacity: .12; }
    11%  { opacity: .85; }
    19%  { opacity: .28; }
    28%  { opacity: .62; }
    37%  { opacity: .16; }
    52%  { opacity: 1; }
    61%  { opacity: .35; }
    73%  { opacity: .74; }
    88%  { opacity: .20; }
    100% { opacity: .12; } }
  @media (prefers-reduced-motion: reduce) {
    .hero-media::before, .svc-head-media::before { animation: none; opacity: .3; } }

  /* every frame drifts continuously, so nothing snaps back as it fades out */
  @media (prefers-reduced-motion: no-preference) {
    .shot { animation: drift 34s ease-in-out infinite alternate; }
    .shot:nth-child(2) { animation-delay: -12s; }
    .shot:nth-child(3) { animation-delay: -24s; }
    .shot:nth-child(4) { animation-delay: -25s; }
    .shot:nth-child(5) { animation-delay: -32s; }
    .shot:nth-child(6) { animation-delay: -39s; }
    .shot:nth-child(7) { animation-delay: -46s; }
  }
  @keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.13); } }

  /* Stats band — white card on the navy hero edge */
  .stats { max-width: 1012px; margin: -44px auto 0; background: #ffffff; color: var(--ink); border-radius: var(--r); border: 1px solid var(--line);
    display: flex; flex-wrap: wrap; overflow: hidden; position: relative; z-index: 2; }
  .stat { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 21px 14px; background: #ffffff; }
  .stat svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }
  .stat span { font-size: 13px; white-space: nowrap; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
  .stat + .stat { border-left: 1px solid var(--line); }

  /* Services — one card, 3×2, symmetric */
  /* .cards carries a top margin because it normally follows a heading. On the
     services index it is the first thing in its section, so that margin sat on
     top of the section's own padding and left a hundred pixels of nothing. */
  .wrap > .cards:first-child { margin-top: 0; }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 48px; }
  .card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 28px; text-decoration: none; color: inherit; text-align: left; transition: border-color .18s ease; }
  .card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
  .card svg { width: 30px; height: 30px; margin-bottom: 20px; color: var(--accent); }
  .card h3, .card h2 { font-size: 20px; font-weight: 600; margin-bottom: 8px; letter-spacing: -.1px; }
  .card p { font-size: 15px; color: var(--grey); line-height: 1.62; }
  .card { position: relative; }
  .card .chev { position: absolute; top: 26px; right: 24px; width: 18px; height: 18px; border-radius: 0; background: none; color: var(--mute); display: grid; place-items: center; transition: color .18s ease, transform .18s ease; }
  .card .chev svg { width: 14px; height: 14px; margin: 0; }
  .card:hover .chev { background: none; color: var(--ink); transform: translateX(3px); }

  /* Fieldwork — the drawings stay, restyled to the new palette */
  .field .panel { background: #ffffff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px 24px 26px; text-align: center; }
  .field .panel picture { display: contents; }
  .field .panel svg, .field .panel .field-art { display: block; width: 100%; max-width: 290px;
    height: auto; margin: 0 auto 18px; }
  .field .panel h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
  .field .panel p { font-size: 15px; color: var(--grey); line-height: 1.62; }

  /* How we work — the layout makes the section's own argument. The left
     column is what varies (ten disciplines); the navy panel is what doesn't.
     Choosing a discipline changes only the head of the panel — the three
     constants below the rule never move, which is the whole point. */
  .disc-split { display: grid; grid-template-columns: 1fr 1.02fr; margin-top: 54px;
    border: 1px solid var(--line); background: #fff; text-align: left; }
  .disc-list { display: flex; flex-direction: column; }
  .d-row { position: relative; display: block; width: 100%; text-align: left; background: none;
    border: 0; border-bottom: 1px solid var(--line); padding: 15px 24px 15px 26px;
    font-family: inherit; cursor: pointer; transition: background-color .18s ease; }
  .d-row:last-child { border-bottom: 0; }
  .d-row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px;
    background: var(--accent); opacity: 0; transition: opacity .18s ease; }
  .d-icon { display: none; }
  .d-name { display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 19px;
    font-weight: 600; color: var(--grey); transition: color .18s ease; }
  .d-blurb { display: none; }
  .d-row:hover .d-name { color: var(--ink); }
  .d-row.on { background: var(--paper); }
  .d-row.on::before { opacity: 1; }
  .d-row.on .d-name { color: var(--ink); }

  .disc-panel { background: var(--ink); display: flex; flex-direction: column;
    justify-content: space-between; gap: 30px; padding: 34px 34px 32px; }
  /* the changing half centres itself in whatever height the list leaves,
     so the panel never reads as a short block with a hole under it */
  .dp-head { flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .dp-icon svg { width: 38px; height: 38px; color: var(--accent); display: block; margin-bottom: 24px; }
  .disc-panel .eyebrow { color: var(--accent); margin-bottom: 12px; }
  .disc-panel .eyebrow::before { background: var(--accent); opacity: .55; }
  .dp-name { font-size: 26px; color: #ffffff; margin-bottom: 9px; }
  .dp-blurb { font-size: 16px; line-height: 1.6; color: #c2cadd; max-width: 34ch; }
  .dp-fixed { border-top: 1px solid rgba(255,255,255,.15); padding-top: 26px; }
  .dp-fixed ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .dp-fixed li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: #dfe4ef; }
  .dp-fixed li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 4px; color: var(--accent); }

  /* Narrow: no room for a master/detail, so every blurb shows in the list and
     the panel keeps only the constants. Works with JS off, too. */
  @media (max-width: 880px) {
    .disc-split { grid-template-columns: 1fr; }
    .d-row { cursor: default; padding: 16px 22px; }
    .d-row::before { display: none; }
    .d-row.on { background: transparent; }
    .d-name { color: var(--ink); font-size: 18px; }
    .d-blurb { display: block; margin-top: 3px; font-size: 14.5px; color: var(--grey); line-height: 1.55; }
    .dp-head { display: none; }
    .disc-panel { padding: 28px 22px; }
    .dp-fixed { border-top: 0; padding-top: 0; }
  }

  /* How we work — multidisciplinary hub, not a linear process (Jacob) */
  .how { background: var(--paper); border-radius: 0; margin: 0; box-shadow: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 48px; }
  .step { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 32px 26px; text-align: center; }
  .step .n { width: auto; height: auto; border-radius: 0; background: none; color: var(--accent-ink); font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; font-size: 26px; display: block; margin: 0 auto 14px; }
  .step h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
  .step p { font-size: 15px; color: var(--grey); }

  /* Claims — same card language */
  .claims .card { background: #fff; border: 1px solid var(--line); box-shadow: none; text-align: center; }
  .claims .card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
  .claims .card svg { margin: 0 auto 18px; display: block; }

  /* Newsletter — recent issues + subscribe */
  .news .card { background: #ffffff; }
  .news .issue { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
  .news h3 { margin-top: 12px; }
  .subscribe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
  .subscribe input { width: min(340px, 100%); background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; font-family: inherit; font-size: 15px; color: var(--ink); }
  .subscribe input:focus { border-color: var(--ink); }
  /* the button was sitting on the last issue row; it is an action, not the
     end of the list */
  .news .btn { margin-top: 34px; }
  .news .fine { font-size: 13px; color: var(--mute); margin-top: 14px; }

  /* Coverage — the UK, pinned */
  .coverage .ukmap { display: block; width: min(430px, 88%); height: auto; margin: 40px auto 0; }

  /* Testimonial — ink panel, centred */
  .quote .box { background: var(--ink); color: #fff; border-radius: var(--r); padding: 54px 40px; text-align: center; }
  .quote .stars { color: var(--gold); font-size: 15px; letter-spacing: 5px; margin-bottom: 24px; }
  .quote blockquote { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(22px, 2.9vw, 32px); font-weight: 400; max-width: 800px; margin: 0 auto; line-height: 1.42; color: #ffffff; }
  .quote blockquote span { color: var(--accent); }
  .quote cite { display: block; margin-top: 26px; font-style: normal; font-size: 12px; color: #a9b2c8; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

  /* Enquiry — symmetric two-column card */
  .enq-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 52px 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; margin-top: 44px; }
  .enq-box h3 { font-size: 24px; font-weight: 600; letter-spacing: -.1px; }
  .enq-box .side p { color: var(--grey); margin: 14px 0 26px; }
  .contact-lines { font-size: 16px; line-height: 2.1; font-weight: 500; }
  .contact-lines a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
  .contact-lines a:hover { border-bottom-color: var(--ink); }
  .contact-lines small { display: block; font-weight: 400; color: var(--mute); font-size: 14px; line-height: 1.6; }
  form label { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); margin: 18px 0 7px; }
  form input, form select, form textarea {
    width: 100%; background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 12px 14px; font-family: inherit; font-size: 15px; color: var(--ink);
  }
  form input:focus, form select:focus, form textarea:focus { border-color: var(--ink); }
  /* every interactive thing gets the same visible keyboard ring */
  a:focus-visible, button:focus-visible, input:focus-visible,
  select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }
  .hero a:focus-visible { outline-color: var(--accent); }
  form textarea { min-height: 96px; resize: vertical; }
  form .btn { margin-top: 24px; }

  /* Form validation, and the two things a keyboard user needs */
  .field-error { min-height: 0; font-size: 13.5px; color: #b03a2b; margin-top: 6px; }
  .field-error:empty { display: none; }
  .field-error.center { text-align: center; }
  form input.bad, form select.bad, form textarea.bad { border-color: #b03a2b; }
  .trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .enq-done { text-align: left; }
  .enq-done h3 { font-size: 22px; margin-bottom: 10px; }
  .enq-done p { color: var(--grey); font-size: 16px; }
  .enq-done:focus { outline: none; }
  .skip { position: absolute; left: 16px; top: -60px; z-index: 40; background: var(--ink); color: #fff;
    padding: 12px 18px; border-radius: var(--r); font-size: 15px; font-weight: 500; text-decoration: none;
    transition: top .18s ease; }
  .skip:focus { top: 16px; }
  main:focus { outline: none; }

  footer { background: var(--ink); color: #a9b2c8; padding: 58px 0 40px; font-size: 14px; margin-top: 0; border-top: 1px solid var(--ink); }
  .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
  /* The registered office, labelled. The label sits on its own line above the
     address rather than running into it, so the address reads as an address. */
  footer .reg-office { margin-top: 12px; }
  footer .reg-office span { display: block; margin-bottom: 4px;
    color: rgba(255,255,255,.55); }

  footer h2.foot-head { color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 14px; }
  footer a { color: #a9b2c8; text-decoration: none; display: block; line-height: 2.05; }
  footer a:hover { color: #ffffff; }
  .foot-run { margin-top: 38px; padding-top: 18px; border-top: 1px solid #1c2b52; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; }
  @media (max-width: 520px) {
    .eyebrow { font-size: 11px; letter-spacing: .12em; gap: 10px; }
    .eyebrow::before { width: 22px; }
    nav { gap: 16px; }
    nav a.signin { padding: 9px 14px; font-size: 14px; }
  }
  @media (max-width: 1060px) {
    .stat { flex: 1 1 46%; }
    .stat span { white-space: normal; }
    .stat + .stat { border-left: 0; }
    .stat:nth-child(even) { border-left: 1px solid var(--line); }
    .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 560px) {
    .stat { flex: 1 1 100%; }
    .stat:nth-child(even) { border-left: 0; }
    .stat:nth-child(n+2) { border-top: 1px solid var(--line); }
  }
  @media (max-width: 820px) { .enq-box { grid-template-columns: 1fr; gap: 30px; padding: 34px 24px; } .stats { margin-left: 22px; margin-right: 22px; } section { padding: 54px 0; } }

  /* ============================================================
     LAYOUT PASS — breaking the centred rhythm
     Five sections ran to the identical shape: centred eyebrow,
     centred headline, centred sub, three equal cards. Read top to
     bottom it beat like a metronome, and Coverage was a lone map
     floating in dead space. Three sections change shape; nothing
     moves position and no copy is invented.
     ============================================================ */

  /* --- Coverage: the map earns a column, the copy earns the other --- */
  /* Coverage on navy. Six light sections ran consecutively from here to the
     footer, which is why the lower half of the page read even-toned. This is
     also the one section that is better dark than light on its own merits: on
     navy the map reads as a shape rather than as a diagram, and the pins have
     somewhere to sit.

     The eyebrow reverts to --accent here: the darker --accent-ink is the
     light-ground variant and would sink into this. */
  /* No accent wash here. There was one, placed at 72% across so it sat behind
     the map in the two-column layout — but the columns stack on a phone, so it
     landed behind the paragraph instead and read as a stain across the copy.
     The green in this section is the divider, which is where the section
     changes gear and is the same at every width. */
  .coverage { background: var(--ink); color: #ffffff; }
  .coverage h2 { color: #ffffff; }
  .coverage .eyebrow { color: var(--accent); }
  .coverage .sub { color: rgba(255, 255, 255, .82); }
  /* The divider goes green rather than the paragraph under it. Green here is
     10.1:1, so setting the prose in it would read fine — but that paragraph
     is the quiet elaboration below the rule, and colouring it would make the
     footnote louder than the line it is footnoting. A 1px rule takes the
     accent to the point where the section changes gear and costs nothing in
     hierarchy, and it echoes the rule under the eyebrow above it. */
  .coverage .cov-note { color: rgba(255, 255, 255, .7);
    border-top-color: rgba(157, 216, 62, .8); }

  .coverage .cov { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 56px; align-items: center; }
  .coverage .cov-copy { text-align: left; }
  .coverage .cov-copy .sub { margin: 16px 0 0; max-width: 46ch; }
  .coverage .ukmap { width: 100%; max-width: 520px; margin: 0 auto; }
  .cov-note { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line);
              font-size: 16px; color: var(--grey); max-width: 46ch; }

  /* --- Our thinking: a lead story, not three equal ones ---
     A newsroom leads with one piece. The lead sits on navy so the
     eye lands somewhere; the other two are plain hairline rows. */
  .insights .cards { grid-template-columns: 1.15fr 1fr; gap: 0 48px; margin-top: 44px; align-items: start; }
  .insights .card { background: none; border: 0; border-radius: 0; padding: 0; }
  .insights .card:hover { border-color: transparent; }
  .insights .card.lead { grid-row: span 2; background: var(--ink); border-radius: var(--r);
                         padding: 38px 34px 32px; align-self: stretch;
                         display: flex; flex-direction: column; }
  .insights .card.lead .chev { display: none; }
  .insights .lead-more { margin-top: auto; padding-top: 34px; font-size: 14px; font-weight: 500;
                         letter-spacing: .01em; color: #ffffff;
                         display: inline-flex; align-items: center; gap: 9px; }
  .insights .lead-more::after { content: ""; width: 22px; height: 1px; background: var(--accent);
                                transition: width .18s ease; }
  .insights .card.lead:hover .lead-more::after { width: 34px; }
  .insights .card.lead .tag { color: var(--accent); }
  .insights .card.lead h3 { color: #ffffff; font-size: clamp(23px, 2.6vw, 28px); line-height: 1.26; margin-top: 16px; }
  .insights .card.lead p { color: #b9c1d4; font-size: 16px; margin-top: 12px; }
  .insights .card.lead .chev { top: 36px; right: 30px; color: #8b95ad; }
  .insights .card.lead:hover .chev { color: #ffffff; }
  .insights .card:not(.lead) { padding: 22px 0; border-top: 1px solid var(--line); }
  .insights .card.lead + .card { border-top: 0; padding-top: 0; }
  .insights .card:not(.lead) h3 { font-size: 19px; padding-right: 26px; }
  .insights .card:not(.lead) .chev { top: 24px; right: 0; }
  .insights .card.lead + .card .chev { top: 2px; }
  .insights .card:not(.lead):hover h3 { color: var(--accent-ink); }

  /* --- Why clients stay: three promises, not three boxes ---
     Boxing a promise makes it look like a product tile. Hairlines. */
  .claims .cards { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 46px;
                   border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .claims .card { border: 0; border-left: 1px solid var(--line); border-radius: 0;
                  background: none; padding: 38px 32px; }
  .claims .card:first-child { border-left: 0; }
  .claims .card:hover { border-color: transparent; border-left-color: var(--line); }
  .claims .card:first-child:hover { border-left-color: transparent; }
  .claims .card svg { width: 26px; height: 26px; }
  .claims .card h3 { font-size: 19px; }

  .card h3, .card h2 { line-height: 1.3; }

  @media (max-width: 900px) {
    .coverage .cov { grid-template-columns: 1fr; gap: 40px; }
    .coverage .cov-copy .sub { max-width: none; }
    .coverage .ukmap { max-width: 360px; }
    .insights .cards { grid-template-columns: 1fr; gap: 0; }
    .insights .card.lead { grid-row: auto; margin-bottom: 30px; }
    .claims .cards { grid-template-columns: 1fr; }
    .claims .card { border-left: 0; border-top: 1px solid var(--line); padding: 30px 0; }
    .claims .card:first-child { border-top: 0; }
    .claims .card:hover { border-left-color: transparent; }
  }

  /* Newsletter archive — dated rows, not invented headlines.
     Held to the same 820px measure as the questions: across the full wrap the
     middle column stretched, and "Read the issue" ended up marooned half a
     screen from the title it belonged to. */
  .issue-list { max-width: 820px; margin: 42px auto 0; text-align: left;
                border-top: 1px solid var(--line); }
  .issue-row { display: grid; grid-template-columns: 84px 1fr auto 18px; gap: 16px;
               align-items: center; padding: 18px 4px 18px 0;
               border-bottom: 1px solid var(--line);
               text-decoration: none; color: inherit;
               border-left: 2px solid transparent;
               transition: background-color .18s ease, border-left-color .18s ease, padding-left .18s ease; }
  /* the accent arrives on hover rather than sitting there — the archive is a
     list to scan, and six green bars would be six things asking for attention */
  .issue-row:hover { background: #ffffff; border-left-color: var(--accent); padding-left: 14px; }
  .issue-row:hover .issue-title { color: var(--accent-ink); }
  .issue-no { font-size: 11.5px; font-weight: 600; letter-spacing: .14em;
              text-transform: uppercase; color: var(--accent-ink); }
  .issue-when { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px;
                font-weight: 400; color: var(--mute); display: flex; flex-direction: column-reverse;
                gap: 3px; }
  .issue-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 19px;
                 font-weight: 600; color: var(--ink); line-height: 1.3;
                 transition: color .18s ease; }
  .issue-go { font-size: 14px; color: var(--mute); }
  .issue-row .chev { position: static; width: 16px; height: 16px; color: var(--mute); }
  .issue-row:hover .issue-go, .issue-row:hover .chev { color: var(--ink); }
  .issue-row:hover .chev { transform: translateX(3px); }
  @media (max-width: 620px) {
    .issue-row { grid-template-columns: 1fr auto 18px; gap: 12px; }
    .issue-no { grid-column: 1 / -1; }
    .issue-go { font-size: 13px; }
  }

  /* The three fieldwork panels are a set — auto-fit was dropping to 2+1 and
     orphaning the third. Three across, then one; never two and a straggler. */
  .field .cards { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 860px) { .field .cards { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

  /* ---------------- The Services page (survo-services.html) ----------------
     Its own page rather than a section on the home page: six long
     descriptions need room. Each entry is numbered, carries the same icon as
     its card on the home page, and cross-links to the one service its own
     copy already refers to. */
  .svc-head { position: relative; background: var(--ink); color: #fff; overflow: hidden;
              padding: 96px 0 88px; }
  .svc-head-media { position: absolute; inset: 0; z-index: 0; }
  .svc-shot { position: absolute; inset: 0;
              filter: saturate(.5) contrast(1.04) brightness(.86); }
  /* the skyline was framed at 42% down, and object-position has to keep it there */
  .svc-shot img { object-position: 50% 42%; }
  /* Lighter than it was (.92/.82/.88): the photographs were barely visible
     (Jacob). The copy sits left, so the wash stays heavier on the left where
     the text needs it and eases off across the frame. */
  .svc-head-scrim { position: absolute; inset: 0; background: linear-gradient(100deg,
    rgba(15,26,51,.82) 0%, rgba(15,26,51,.62) 55%, rgba(15,26,51,.45) 100%); }
  .svc-head-in { position: relative; z-index: 1; }
  .svc-head .eyebrow { color: var(--accent); }
  .svc-head .eyebrow::before { background: var(--accent); opacity: .7; }
  .svc-head h1 { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: #fff;
                 font-size: clamp(30px, 4.4vw, 46px); line-height: 1.14; letter-spacing: -.4px;
                 max-width: 19ch; text-wrap: balance; }
  .svc-head .sub { color: #c3cad9; margin: 20px 0 0; max-width: 58ch; }

  /* sticky index — numbered, and it marks where you are */
  .svc-index { position: sticky; top: 69px; z-index: 10; background: rgba(255,255,255,.94);
               backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
  .svc-index .wrap { display: flex; gap: 4px; overflow-x: auto; padding-top: 0; padding-bottom: 0;
                     scrollbar-width: none; }
  .svc-index .wrap::-webkit-scrollbar { display: none; }
  .svc-index a { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 8px;
                 font-size: 13.5px; color: var(--mute); text-decoration: none;
                 padding: 17px 14px; border-bottom: 2px solid transparent; white-space: nowrap;
                 transition: color .18s ease, border-color .18s ease; }
  .svc-index a b { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--line); }
  .svc-index a:hover { color: var(--ink); }
  /* A right-edge fade where the strip is wider than the screen, so it reads as
     something to swipe rather than as text running off the page. */
  @media (max-width: 900px) {
    .svc-index .wrap {
      -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
              mask-image: linear-gradient(to right, #000 88%, transparent 100%); }
  }
  .svc-index a.here { color: var(--ink); border-bottom-color: var(--accent); }
  .svc-index a.here b { color: var(--accent-ink); }

  .svc-entry { padding: 74px 0; border-bottom: 1px solid var(--line);
               scroll-margin-top: 126px; }        /* header + sticky index */
  .svc-entry:nth-child(even) { background: var(--paper); }
  .svc-grid { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
  .svc-aside { position: sticky; top: 138px; }
  .svc-no { display: block; font-family: 'Libre Franklin', Arial, sans-serif; font-size: 11.5px;
            font-weight: 600; letter-spacing: .18em; color: var(--mute); }
  .svc-icon svg { width: 34px; height: 34px; color: var(--accent); display: block; margin: 18px 0 16px; }
  .svc-aside h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; }
  .svc-aside .btn { margin-top: 22px; padding: 11px 20px; font-size: 14px; }

  /* the cross-link each entry's own copy points at */
  .svc-rel { display: block; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line);
             text-decoration: none; color: var(--ink); }
  .svc-rel span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
                  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 6px; }
  .svc-rel { font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; font-weight: 600; }
  .svc-rel em { display: block; margin-top: 5px; font-family: 'Libre Franklin', Arial, sans-serif;
                font-style: normal; font-size: 13px; font-weight: 400; color: var(--grey);
                line-height: 1.5; }
  .svc-rel:hover { color: var(--accent-ink); }

  /* .svc-main .svc-stand, not .svc-stand: .svc-main p (0,1,1) outranks a
     bare class, so the standfirst had been rendering at 17px in body grey
     — the same size and weight as the paragraph under it, which is why it
     read as an inconsistency rather than as a lede. Third instance of this
     trap: see .rotor-lead and .office-map-credit. */
  .svc-main .svc-stand { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(19px, 2.1vw, 23px);
               font-weight: 400; line-height: 1.44; color: var(--ink); max-width: 40ch;
               margin-bottom: 20px; }
  .svc-main p { font-size: 17px; color: var(--grey); line-height: 1.74; max-width: 66ch; }
  .svc-main p + p { margin-top: 14px; }
  .svc-sub { font-family: 'Libre Franklin', Arial, sans-serif; font-size: 12px; font-weight: 600;
             letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
             margin: 34px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); }
  .svc-items { list-style: none; margin: 18px 0 0; }
  .svc-items.two { columns: 2; column-gap: 46px; }
  .svc-items.two li { break-inside: avoid; }
  /* one body size across the column: the list is prose in a list, not a
     smaller register than the paragraph above it */
  .svc-items li { position: relative; padding-left: 22px; margin-bottom: 13px;
                  font-size: 17px; color: var(--grey); line-height: 1.74; max-width: 66ch; }
  .svc-items li::before { content: ""; position: absolute; left: 0; top: 11px;
                          width: 9px; height: 1px; background: var(--accent); }
  .svc-items li b { color: var(--ink); font-weight: 600; }
  .svc-items + p { margin-top: 20px; }

  .svc-cta { padding: 82px 0 92px; text-align: center; }
  .svc-cta h2 { font-size: clamp(26px, 3.2vw, 34px); }
  .svc-cta .sub { margin: 14px auto 26px; }

  @media (max-width: 900px) {
    .svc-grid { grid-template-columns: 1fr; gap: 24px; }
    .svc-aside { position: static; }
    .svc-icon svg { margin: 12px 0 12px; }
    .svc-entry { padding: 48px 0; scroll-margin-top: 118px; }
    .svc-items.two { columns: 1; }
    .svc-head { padding: 66px 0 60px; }
  }
  .svc-all { margin-top: 34px; }
  .svc-all a { font-family: 'Libre Franklin', Arial, sans-serif; font-size: 14.5px; font-weight: 500;
               color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line);
               padding-bottom: 3px; transition: border-color .18s ease; }
  .svc-all a:hover { border-bottom-color: var(--ink); }

  /* Each entry opens on one of Survo's own properties, and the columns
     mirror on alternate entries — six identical rows was the monotony. */
  /* Legal documents. A narrower measure than the rest of the site because
     these are read in long runs rather than scanned, and nobody should have
     to track a 90-character line through a privacy notice. */
  .legal { padding: 74px 0 96px; }
  .legal .wrap { max-width: 760px; }
  .legal h1 { font-size: clamp(30px, 4vw, 42px); margin-bottom: 34px; }
  .legal h2 { font-size: 21px; margin: 44px 0 14px; padding-top: 22px;
              border-top: 1px solid var(--line); }
  .legal h3 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; color: var(--ink); }
  .legal p, .legal li { font-size: 16px; line-height: 1.72; color: var(--grey); }
  .legal p { margin-bottom: 16px; }
  .legal ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
  .legal li { margin-bottom: 10px; }
  .legal address { font-style: normal; margin: 0 0 18px; padding-left: 16px;
                   border-left: 2px solid var(--accent); line-height: 1.7;
                   color: var(--grey); font-size: 16px; }
  .legal a { color: var(--ink); }
  /* The locator is a flat image on purpose — see step 31. It carries its own
     hover affordance because a picture that navigates should say so. */
  .office-map { display: block; position: relative; margin-top: 18px; border-radius: var(--r);
    overflow: hidden; border: 1px solid var(--line); line-height: 0; }
  .office-map img { width: 100%; height: auto; display: block; }
  .office-map-go { position: absolute; left: 12px; bottom: 12px;
    background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 600;
    letter-spacing: .02em; padding: 7px 12px; border-radius: 3px; line-height: 1; }
  .office-map:hover .office-map-go { filter: brightness(.94); }
  .office-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  /* required by the tile licence, and no more prominent than that requires */
  .contact-lines .office-map-credit { display: block; margin-top: 6px; font-size: 9px;
    letter-spacing: .01em; color: var(--mute); opacity: .75; }

  .doclist { list-style: none; margin: 0 0 22px; padding: 0; }
  .doclist li { display: flex; align-items: baseline; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--line); margin: 0; }
  .doclist li:first-child { border-top: 1px solid var(--line); }
  .doclist a { color: var(--ink); font-weight: 500; text-decoration: none;
    border-bottom: 1px solid var(--accent); }
  .doclist a:hover { border-bottom-width: 2px; }
  .doclist span { font-size: 11px; letter-spacing: .08em; color: var(--grey);
    border: 1px solid var(--line); padding: 2px 6px; border-radius: 2px; }
  .legal-date { font-size: 14px; color: var(--grey); margin: -22px 0 34px; }
  .legal-table { overflow-x: auto; margin: 0 0 20px; }
  .legal-table table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 15px; }
  .legal-table th, .legal-table td { text-align: left; padding: 10px 18px 10px 0;
    border-bottom: 1px solid var(--line); vertical-align: top; color: var(--grey); }
  .legal-table th { color: var(--ink); font-weight: 600; font-size: 12px;
    letter-spacing: .07em; text-transform: uppercase; }
  .legal-table td:first-child { color: var(--ink); width: 48%; }
  @media (max-width: 700px) { .legal { padding: 48px 0 64px; } }

  .svc-band { position: relative; height: 190px; margin-bottom: 44px; overflow: hidden;
              border-radius: var(--r); background: var(--ink); isolation: isolate; }
  /* The brand wash holds the six bands together, but it was doing it by taking
     the photographs out — pulled 88% to grey under a heavy navy, they read as
     texture rather than as pictures of anything. Half the grey and a lighter
     wash keeps the set coherent and lets the subject stay a photograph: the
     laser is green and the rain still reads as weather. */
  .svc-band-img { position: absolute; inset: 0;
                  filter: grayscale(.42) saturate(1.08) contrast(1.04) brightness(.97); }
  /* There is no per-band exception any more. Reinstatement carried one
     because fire was the only subject in the set whose meaning WAS its
     colour — desaturated to match the others it read as a dark shed, so it
     kept a third of the grey and the wash's green stop was shifted off it.
     Rain needs none of that, and six bands under one treatment is the point.
     */
  .svc-band::after { content: ""; position: absolute; inset: 0;
                     /* The green sits in the last quarter. It used to start
                        fading in at 52%, which on the reinstatement band was
                        still fire — and green over orange flame goes a sickly
                        yellow. From 72% it reaches the umbrella and leaves the
                        fire alone. */
                     background: linear-gradient(100deg, rgba(15,26,51,.56) 0%,
                                 rgba(15,26,51,.22) 72%, rgba(15,26,51,.14) 100%); }
  .svc-entry:nth-child(even) .svc-grid { grid-template-columns: 1fr 300px; }
  .svc-entry:nth-child(even) .svc-aside { order: 2; }
  .svc-entry:nth-child(even) .svc-main  { order: 1; }
  @media (max-width: 900px) {
    .svc-band { height: 140px; margin-bottom: 26px; }
    .svc-entry:nth-child(even) .svc-grid { grid-template-columns: 1fr; }
    .svc-entry:nth-child(even) .svc-aside { order: 1; }
    .svc-entry:nth-child(even) .svc-main  { order: 2; }
  }

  /* ---------------- What happens after you get in touch ----------------
     Five stages on one rule. The numbered markers are legitimate here: this
     genuinely IS a sequence, which is the only thing that justifies numbering.
     Each stage carries its own commitment; the rail underneath carries the one
     that holds at every stage. */
  .flow { margin-top: 40px; text-align: left; }
  .fsteps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr);
            gap: 0 26px; position: relative; }
  /* the rule the markers sit on */
  .fsteps::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px;
                    height: 1px; background: var(--line); }
  .fstep { position: relative; padding-top: 30px; display: flex; flex-direction: column; }
  .fs-node { position: absolute; top: 0; left: 0; width: 13px; height: 13px;
             border-radius: 50%; background: #ffffff; border: 1px solid var(--line);
             box-shadow: 0 0 0 4px var(--paper); }
  .fstep:first-child .fs-node, .fstep:last-child .fs-node { background: var(--accent);
             border-color: var(--accent); }
  .fs-n { display: block; font-family: 'Libre Franklin', Arial, sans-serif; font-size: 11px;
          font-weight: 600; letter-spacing: .18em; color: var(--mute); margin-bottom: 10px; }
  .fstep h3 { font-size: 18px; line-height: 1.28; margin-bottom: 9px; }
  .fstep p { font-size: 14.5px; color: var(--grey); line-height: 1.62; }
  .fs-vow { display: block; margin-top: auto; padding-top: 14px; font-family: 'Libre Franklin', Arial, sans-serif;
            font-size: 11.5px; font-weight: 600; letter-spacing: .07em; color: var(--accent-ink); }
  .fs-vow::before { content: ""; display: block; width: 100%; height: 1px;
                    background: var(--line); margin-bottom: 10px; }

  /* the promise that is true at every stage, not one of them */
  /* Navy again — it went green for a while and Jacob preferred the ink
     (a full green bar also outweighed every accent near it). The green
     survives as a rule along the bottom edge, and the leading dash and the
     text go back to the values that read on ink. */
  .frail { margin-top: 40px; background: var(--ink); border-radius: var(--r);
           padding: 20px 26px; display: flex; align-items: center; gap: 14px;
           justify-content: flex-end; border-bottom: 3px solid var(--accent); }
  .frail::before { content: ""; flex: 0 0 34px; height: 1px; background: var(--accent); }
  .frail span { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px;
                font-weight: 600; color: #ffffff; }

  @media (max-width: 900px) {
    /* the sequence turns on its side; the rule runs down the left */
    .fsteps { grid-template-columns: 1fr; gap: 0; }
    .fsteps::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
    .fstep { padding: 0 0 26px 34px; display: block; }
    .fs-vow { margin-top: 12px; }
    .fs-node { top: 4px; }
    .fs-n { margin-bottom: 6px; }
    .fstep h3 { font-size: 19px; }
    .fstep p { font-size: 15.5px; }
    .frail { margin-top: 14px; padding: 18px 20px; }
    .frail span { font-size: 16.5px; }
  }

  /* ---------------- Common questions ----------------
     A single narrow column rather than the page's usual full measure: a
     question is read, not scanned, and 9 of them in two columns would jump
     the layout every time one opened. */
  .faq { background: #ffffff; }
  .faq-list { max-width: 820px; margin: 44px auto 0; text-align: left;
              border-top: 1px solid var(--line); }
  .fq { border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
        transition: border-left-color .18s ease, background-color .18s ease; }
  .faq-list .fq:hover { background: var(--paper); }
  .faq-list .fq[open] { background: var(--paper); border-left-color: var(--accent); }
  .fq summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start;
                gap: 20px; padding: 21px 14px 21px 16px; }
  .fq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
  .fq[open] summary span { color: var(--accent-ink); }
  /* The answer arrives rather than appearing. A details element hides its own
     content when closed, so there is nothing to transition on the way out —
     this animates the opening only, which is the half a reader notices. */
  .fq[open] .fq-a { animation: fq-in .26s ease both; }
  @keyframes fq-in { from { opacity: 0; transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) {
    .fq[open] .fq-a { animation: none; }
    .fq summary::after { transition: none; }
  }
  .fq summary::-webkit-details-marker { display: none; }
  .fq summary span { font-family: 'Source Serif 4', Georgia, serif; font-size: 18.5px;
                     font-weight: 600; color: var(--ink); line-height: 1.36; flex: 1; }
  .fq summary::after { content: ""; flex: 0 0 11px; width: 11px; height: 11px; margin-top: 7px;
                       border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
                       transform: rotate(45deg); transition: transform .2s ease; }
  .fq[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
  .fq summary:hover span { color: var(--accent-ink); }
  .fq-a { padding: 0 44px 24px 4px; }
  .fq-a p { font-size: 16.5px; color: var(--grey); line-height: 1.74; }
  .fq-go { display: inline-block; margin-top: 14px; font-family: 'Libre Franklin', Arial, sans-serif;
           font-size: 13.5px; font-weight: 500; color: var(--ink); text-decoration: none;
           border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: border-color .18s ease; }
  .fq-go:hover { border-bottom-color: var(--ink); }
  .faq-ask { max-width: 820px; margin: 30px auto 0; text-align: left; }
  .faq-ask a { font-family: 'Libre Franklin', Arial, sans-serif; font-size: 15px; font-weight: 500;
               color: var(--accent-ink); text-decoration: none;
               border-bottom: 1px solid transparent; padding-bottom: 3px; }
  .faq-ask a:hover { border-bottom-color: var(--accent); }
  @media (max-width: 700px) {
    .fq summary { gap: 14px; padding: 18px 2px; }
    .fq summary span { font-size: 17px; }
    .fq-a { padding: 0 26px 20px 2px; }
  }