/* Ashwood website. Second pass, 11 September 2026.

   This is concepts/homepage2.html, the file the decisions record names as the
   one to develop, re-skinned to the direction chosen on 27 August and given the
   agreed seven-section structure. The motion, the graphics and the traversing
   bearing are that file's. What changed: the scheme is fixed to greyscale with
   ultramarine as the one accent; the alternates panel, Fraunces and the oxblood
   scheme are gone; the duration chart is gone; and three sections are new.

   Grounds. A section is one ground and carries one ink. Three grounds exist:
   the page (white), inverted (ink), and the accent. Ink and accent are never
   adjacent, because the two solids clash where white does not with either. */

:root{
  --bg:#FFFFFF; --ink:#111111; --accent:#1F2FB8;
  --gut:clamp(1.25rem,4vw,4.5rem); --navh:56px;
}
/* A tint ladder off the single ink, recomputed inside inverted and accent
   sections so each ground gets its own. */
:root, .inv, .acc .band{
  --surface: color-mix(in srgb, var(--bg) 93%, #000);
  --sunken:  color-mix(in srgb, var(--bg) 84%, #000);
  --deep:    color-mix(in srgb, var(--bg) 42%, #000);
  --rule:    color-mix(in srgb, var(--ink) 18%, transparent);
  --rule-2:  color-mix(in srgb, var(--ink) 34%, transparent);
  --quiet:   color-mix(in srgb, var(--ink) 64%, transparent);
}
/* literals rather than a swap of variables, because a custom property resolves
   against the element that uses it, and a section that redefined --ink and then
   used var(--ink) for its own ground painted itself the wrong colour once */
.inv{ --bg:#111111; --ink:#FFFFFF }

*,*::before,*::after{box-sizing:border-box}
/* overflow-x on html rather than body, and clip rather than hidden: hidden on
   body makes Safari treat the body as the scroll container, and ScrollTrigger,
   which measures the window, then sits at its end state. Every scrubbed graphic
   froze at "finished" for exactly that reason. */
/* Smooth scrolling is done on the links that want it, in site.js, and not as a
   property of the document. As a property it also applies to the scrolling
   ScrollTrigger does to measure, and it does that before it announces a
   refresh, so the guard that turned it off could never be early enough. The
   measurements then came out short by exactly the scroll position: reload part
   way down the page and every animation fired a screen or more early. */
html{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);
 font-family:Archivo,system-ui,sans-serif;font-variation-settings:'wght' 300,'wdth' 100;
 -webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:var(--ink);color:var(--bg)}
section,footer{background:var(--bg);color:var(--ink);position:relative}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:inherit}

/* ---- The ramp. Archivo's width axis carries the hierarchy. ---- */
.disp{font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 78;
 letter-spacing:-.03em;line-height:1.04;margin:0}
.body{font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 100;
 font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;margin:0}
.lab{font-family:Archivo;font-variation-settings:'wght' 500,'wdth' 122;
 font-size:clamp(.66rem,.85vw,.76rem);letter-spacing:.22em;text-transform:uppercase;margin:0}
.face{font-family:Archivo;font-variation-settings:'wght' 400,'wdth' 104;letter-spacing:-.005em}
.num{font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 66;
 letter-spacing:-.055em;font-variant-numeric:tabular-nums;line-height:.78;margin:0}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

.wm{display:inline-block;white-space:nowrap;line-height:.88;color:currentColor;
 font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 100;letter-spacing:.5em;margin-right:-.5em}
.wm::after{content:'ASHWOOD'}

.wipe{clip-path:inset(0 0 0 0)}
.btn{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;color:inherit;
 border:1px solid var(--rule-2);padding:.75rem 1.3rem;background:none;cursor:pointer;
 font-family:Archivo;font-variation-settings:'wght' 400,'wdth' 104;font-size:.98rem;
 transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.btn:hover{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.btn.quiet{border-color:transparent;padding-inline:0;text-decoration:underline;
 text-underline-offset:5px;text-decoration-thickness:1px}
.btn.quiet:hover{background:none;color:inherit;opacity:.7}

/* One bearing traverses the whole document. Above the grounds, below the
   content, so it crosses the joins instead of stopping at them. */
#bearing{position:fixed;inset:0;z-index:2;pointer-events:none;transition:opacity .5s ease}
#bearing.aside{opacity:0}
#bearing canvas{display:block;width:100%;height:100%}
section > *:not(.fill), footer > *{position:relative;z-index:3}

.above{position:relative;z-index:1}

/* ---- The accent is a block with a measured edge, never a page that has gone
   blue. It holds the head of its section and stops on a rule the rest hangs
   from, which is the same construction as the mapping report cover. It is
   pulled across the page as the section arrives: a layer scaled from the left
   edge by scroll, so the block is painted rather than scrolled in. ---- */
.band{position:relative;padding:clamp(3rem,7vh,5rem) var(--gut) clamp(3rem,7vh,5rem);
 margin:0 calc(-1 * var(--gut));}
.band .fill{position:absolute;inset:0;background:var(--accent);transform-origin:left center;transform:scaleX(1)}
.band > *:not(.fill){position:relative;z-index:1}
.acc .band{ --bg:#1F2FB8; --ink:#FFFFFF; color:#FFFFFF }
.acc .band .sec-head{border-bottom-color:rgba(255,255,255,.34)}
.acc .band .sec-head .n{color:#FFFFFF}

/* ---------------- NAV ---------------- */
#nav{position:fixed;inset:0 0 auto 0;z-index:500;display:grid;
 grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
 padding:.85rem var(--gut);color:var(--ink);min-height:var(--navh);
 border-bottom:1px solid transparent;transition:border-color .4s ease,background-color .4s ease}
#nav.past{border-bottom-color:var(--rule);background:color-mix(in srgb,var(--bg) 88%,transparent);
 backdrop-filter:blur(8px)}
#nav .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;
 opacity:0;pointer-events:none;transition:opacity .5s ease}
#nav.past .brand, #nav.always .brand{opacity:1;pointer-events:auto}
/* Cut to the mark's ink, not to a square and not to its path. The triangle is
   1.155 wider than it is tall and the stroke sits outside the path on all four
   sides, so a 20px square box clipped the two base corners; the footer lockup
   always had a ratioed box and never showed it. The negative margin holds the
   layout footprint at the 20px square it has always been, so the mark keeps
   its size and the wordmark does not move: the box grew around the ink rather
   than the ink growing into the box. */
#nav .brand canvas{width:26px;height:23px;margin:-1.5px -3px;display:block}
#nav .brand .wm{font-size:clamp(.85rem,1.5vw,1.15rem)}
#nav .links{grid-column:3;display:flex;gap:clamp(1.1rem,2.4vw,2.4rem);align-items:center;
 font-size:clamp(.68rem,.82vw,.78rem);font-variation-settings:'wght' 500,'wdth' 104;
 text-transform:uppercase;letter-spacing:.16em}
#nav .links a{color:inherit;text-decoration:none;opacity:.72;padding:.35rem 0;border-bottom:1px solid transparent}
#nav .links a:hover,#nav .links a[aria-current]{opacity:1;border-bottom-color:currentColor}
#nav .links a.cta{opacity:1;border:1px solid var(--rule-2);padding:.55rem 1.05rem;letter-spacing:.16em}
#nav .links a.cta:hover{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
#nav .toggle{display:none;grid-column:3;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
 font-variation-settings:'wght' 500,'wdth' 104;background:none;border:0;color:inherit;cursor:pointer;padding:.4rem}
@media(max-width:52rem){
  #nav .toggle{display:block}
  /* The panel spans the whole grid, not the column the desktop links sit in.
     Once the bar is scrolled it carries a backdrop-filter, which makes it the
     containing block for its own fixed children, and a fixed child with a
     grid placement is then laid out inside that grid area: the menu became an
     83px strip on the right with half of every word off the screen. */
  #nav .links{position:fixed;grid-column:1/-1;inset:var(--navh) 0 auto 0;
   flex-direction:column;align-items:stretch;gap:0;padding:.4rem var(--gut) 1.4rem;
   background:var(--bg);border-bottom:1px solid var(--rule);display:none;
   font-size:.95rem;letter-spacing:.1em}
  #nav .links.open{display:flex}
  #nav .links a{padding:1rem 0;width:100%;opacity:1;border-bottom:1px solid var(--rule)}
  #nav .links a[aria-current]{border-bottom-color:var(--rule)}
  #nav .links a.cta{margin-top:1.1rem;border:1px solid var(--rule-2);text-align:center;padding:1rem}
}
#nav[data-after-landing]{transition:transform .42s cubic-bezier(.2,0,.1,1)}
#nav[data-after-landing].away{transform:translateY(-101%)}

/* ---------------- LANDING ----------------
   The page opens on the lockup and nothing else, and the argument does not
   begin until you scroll. */
#landing{min-height:100svh;display:grid;place-items:center;position:relative;
 padding:calc(var(--navh) + 2rem) var(--gut) clamp(3rem,8vh,6rem);text-align:center}
#landing .lock{display:grid;justify-items:center}
/* the gap below clears the spin, whose lowest point is a fifth of the box
   below it, so the points never pass over the wordmark */
#landing .stack{width:clamp(96px,11vw,190px);aspect-ratio:1/1;margin:0 0 max(clamp(1.6rem,4vh,3rem),calc(clamp(96px,11vw,190px)*.24))}
#landing .stack canvas{width:150%;height:150%;margin:-25%;display:block}
/* margin-bottom only, never the shorthand: .wm carries margin-right:-.5em to
   cancel the trailing letterspace, and letter-spacing puts that space after the
   final D as well as between the letters. Wiping it made the box half a space
   wider than the glyphs, so centring the box left the wordmark 28px to the left
   of the mark above it at full size. */
/* The mark sits on the page centre and the W sits under it, which is what the
   client asked for and is not the same as centring the word. ASHWOOD is seven
   letters with W in the middle, but W is the widest and the letters either
   side are not symmetrical, so the W's own centre falls .12em to the left of
   the word's. Measured off the rendered glyphs rather than guessed: at the
   full clamp size the W centred on 707.8 against a page centre of 720. The
   nudge is in em so it holds across the clamp, and it is a transform so it
   cannot disturb the centring it is correcting. */
#landing .wm{font-size:clamp(2.2rem,8vw,6.4rem);display:block;margin-bottom:1.1rem;
 transform:translateX(.12em)}
#landing .desc{opacity:.62;margin:0}
#landing .cue{position:absolute;bottom:clamp(1.6rem,4vh,2.6rem);left:50%;width:1px;
 height:clamp(34px,6vh,54px);background:linear-gradient(to bottom,currentColor,transparent);
 opacity:.32}

/* ---------------- HERO ----------------
   One line, one figure, two doors. */
#hero{min-height:78svh;display:grid;align-content:center;overflow:hidden;
 padding:clamp(5rem,12vh,9rem) var(--gut)}
#hero .claim{font-size:clamp(2.2rem,6.2vw,5.4rem);max-width:13ch;margin:0 0 1.4rem}
#hero .who{max-width:42ch;color:var(--quiet);margin:0 0 clamp(1.8rem,4vh,2.6rem)}
#hero .acts{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center}

/* ---------------- SECTION FURNITURE ---------------- */
.sec{padding:clamp(6rem,15vh,11rem) var(--gut);scroll-margin-top:var(--navh)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
 padding-bottom:1rem;margin:0 0 clamp(2.4rem,6vh,4rem);border-bottom:1px solid var(--rule-2)}
.sec-head .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;opacity:.6}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2.5rem,6vw,6rem);align-items:start}
@media(max-width:60rem){.two{grid-template-columns:1fr;gap:2.5rem}}

/* ---------------- THE FIRM (model + dial) ---------------- */
.firm-grid{display:grid;align-items:center;
 grid-template-columns:minmax(0,1fr) minmax(0,clamp(220px,24vw,340px));gap:clamp(2.5rem,6vw,6rem)}
#firm .disp{font-size:clamp(1.9rem,5vw,3.8rem);max-width:14ch}
#firm .after{max-width:46ch;color:var(--quiet);margin:2.2rem 0 0}
#firm .beh{margin:2.6rem 0 0;display:grid;gap:.7rem;max-width:46ch}
#firm .beh li{padding-left:1.4rem;position:relative;font-size:.98rem;line-height:1.55;color:var(--quiet)}
/* a dot, not a triangle: the triangle read as a disclosure control */
#firm .beh li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
#firm .dial canvas{display:block;width:100%;aspect-ratio:1/1}
@media(max-width:60rem){.firm-grid{grid-template-columns:1fr;gap:3.5rem}
  #firm .dial{max-width:19rem;margin-inline:auto;width:100%}}

/* ---------------- REACH (the rose, on ink) ---------------- */
#reach{height:250vh;padding:0;position:relative}
#reach .stick{position:sticky;top:0;height:100svh;display:grid;align-content:start}
#reach canvas{position:absolute;inset:0;width:100%;height:100%}
#reach .note{position:absolute;z-index:2;top:calc(var(--navh) + clamp(.6rem,2vh,1.6rem));left:var(--gut);max-width:28ch}
#reach .note .disp{font-size:clamp(1.2rem,2.2vw,1.8rem)}
#reach .note .lab{margin-top:.8rem;opacity:.6}

/* ---------------- RECORD (the supergraphic) ---------------- */
#record{height:280vh;padding:0;background:var(--surface)}
#record .stick{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));
 display:grid;align-content:center;padding:0 var(--gut);overflow:hidden}
.figs{display:grid;align-items:center;
 grid-template-columns:minmax(0,1fr) minmax(0,clamp(220px,26vw,400px));gap:clamp(2rem,5vw,5rem)}
.figset{position:relative;min-height:clamp(9rem,30vw,23rem)}
.figitem{position:absolute;inset:0;display:grid;align-content:center;gap:.6rem;opacity:0}
.figitem:first-child{opacity:1}
.figgrid canvas{opacity:0}
.figgrid canvas:first-child{opacity:1}
.figitem .num{font-size:clamp(7rem,27vw,21rem);color:var(--accent)}
.figitem .lab{color:var(--quiet)}
.figgrid{position:relative;height:clamp(180px,24vw,340px)}
.figgrid canvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:60rem){
  .figs{grid-template-columns:1fr;gap:1.2rem}
  .figset{min-height:clamp(7rem,30vw,12rem)}
  /* the counter has the whole width to itself here, so it is sized to use it:
     a cell is the smaller of the two, and at 110px tall it was the height */
  .figgrid{height:min(80vw,26rem)}
}
@media(prefers-reduced-motion:reduce){
  #record{height:auto}
  #record .stick{position:static;height:auto;padding:clamp(4rem,10vh,7rem) var(--gut)}
  .figs{grid-template-columns:1fr;gap:2rem}
  .figset{min-height:0;display:grid;gap:2.5rem}
  .figitem{position:static;opacity:1}
  .figgrid{height:auto;display:grid;gap:1rem}
  .figgrid canvas{position:static;opacity:1;height:120px}
}

/* ---------------- HOW WE WORK (on the accent, pulled across) ---------------- */
#work{padding-top:0;padding-bottom:clamp(4rem,9vh,6rem)}
#work .disp{font-size:clamp(2rem,5.4vw,4.4rem);max-width:12ch}
#work .principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem);margin:clamp(3rem,7vh,5rem) 0 0;padding-top:clamp(1rem,2vh,1.6rem);border-top:1px solid var(--ink)}
#work .principles h3{font-variation-settings:'wght' 400,'wdth' 86;font-size:clamp(1.15rem,1.8vw,1.5rem);letter-spacing:-.01em;margin:0 0 .7rem}
#work .principles p{color:var(--quiet);font-size:.98rem;line-height:1.6;margin:0}
/* three columns need a screen wide enough for three: below that they stack,
   or each headline sets one word to a line */
@media(max-width:60rem){#work .principles{grid-template-columns:1fr;gap:2.2rem}}
/* ---------------- STAGES ----------------
   Pinned. The traverse is surveyed across the six as the reader scrolls, a
   station resolving at each and the words following slightly behind it, and
   the page moves on once the sixth is in. */
#stages{height:220vh;padding:0;background:var(--surface)}
#stages .stick{position:sticky;top:var(--navh);height:calc(100svh - var(--navh));display:grid;align-content:center;padding:0 var(--gut)}
#stages .traverse{position:relative;height:2.6rem}
#stages .traverse svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#stages .traverse .line{stroke:var(--ink);stroke-width:1;opacity:.5}
#stages .traverse .tick{stroke:var(--ink);stroke-width:1;opacity:.28}
#stages .traverse .st{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-linejoin:miter;transform-box:fill-box;transform-origin:center}
#stages .traverse .st.fix{fill:var(--accent)}
#stages .stg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(1rem,2.5vw,2.5rem);margin:.4rem 0 0}
#stages .stg li{display:grid;gap:.4rem;align-content:start;opacity:0}
#stages .stg .nm{font-variation-settings:'wght' 400,'wdth' 86;font-size:1.05rem}
#stages .stg p{font-size:.86rem;line-height:1.5;color:var(--quiet);margin:0}
#stages .stg .stn{display:none}
@media(max-width:60rem){
  /* Unpinned here. A pin holds the page still so a wide device can be drawn
     across it; a column of six needs the page to move, and held at one screen
     the six were cramped under the bar. */
  #stages{height:auto}
  #stages .stick{position:static;height:auto;padding:clamp(3.5rem,9vh,5.5rem) var(--gut)}
  #stages .traverse{display:none}
  /* The six need room to arrive one at a time. At a 1.6rem gap they were a
     pitch of 109px apart, so all six crossed the trigger line inside 500px of
     scroll and before the section reached the top of the screen: by the time
     you were looking at it, it had already happened. */
  #stages .stg{grid-template-columns:1fr;gap:clamp(3.5rem,11vh,6rem)}
  #stages .stg li{grid-template-columns:1.1rem minmax(0,1fr);column-gap:1rem;align-items:baseline}
  #stages .stg .stn{display:block;width:.82rem;height:.76rem;grid-row:1/4;align-self:start;margin-top:.45rem}
  #stages .stg .stn path{fill:none;stroke:var(--rule-2);stroke-width:1.4;transition:fill .45s ease,stroke .45s ease}
  #stages .stg li.on .stn path{fill:var(--accent);stroke:var(--accent)}
  #stages .stg .lab,#stages .stg .nm,#stages .stg p{grid-column:2}
}
@media(prefers-reduced-motion:reduce){#stages{height:auto}#stages .stick{position:static;height:auto;padding:clamp(4rem,10vh,7rem) var(--gut)}#stages .stg li{opacity:1}#stages .stg li .stn path{fill:var(--accent);stroke:var(--accent)}}

/* ---------------- SECTORS ----------------
   Three stations, each a band of the page: label and one line on the left, the
   content on the right, so each of the three lands on its own as the page
   scrolls. The sector sub-lines are shown one at a time, in a slot that does
   not move, for the name under the cursor or the last one tapped. */
#sectors .disp{font-size:clamp(1.7rem,4.2vw,3.2rem);max-width:26ch;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
/* the bands sit together, a hairline between each; every one is the same grid,
   the label and a line on the left, the content on the right */
#sectors .stn{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,6vw,6rem);align-items:start;
 padding:clamp(3.5rem,10vh,7rem) 0;border-top:1px solid var(--rule-2)}
#sectors .eye{display:flex;align-items:baseline;gap:1rem;margin:0 0 1.2rem}
#sectors .eye .n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;opacity:.6}
#sectors .eye .lab{font-size:.72rem}
#sectors .line{color:var(--quiet);max-width:30ch;margin:0}
/* the sector names: large, in two columns, each a control for its sub-line */
#sectors .names{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
#sectors .names li{border-top:1px solid var(--rule-2);display:grid}
#sectors .names button{all:unset;display:block;width:100%;height:100%;box-sizing:border-box;cursor:pointer;
 font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 84;font-size:clamp(1.15rem,1.9vw,1.55rem);line-height:1.15;
 padding:.9rem .6rem .9rem 0;transition:background .18s ease,color .18s ease,padding .18s ease}
#sectors .names button:hover,#sectors .names button:focus-visible,#sectors .names button[aria-pressed="true"]{
 background:var(--accent);color:#FFFFFF;padding-left:.6rem}
#sectors .sub{position:relative;min-height:4.2rem;margin-top:1.6rem;color:var(--quiet);font-size:.95rem;max-width:60ch}
#sectors .sub p{position:absolute;inset:0 auto auto 0;margin:0;opacity:0;transition:opacity .28s ease}
#sectors .sub p.on{opacity:1}
/* the level: one large line and a quiet run beneath it */
#sectors .big{font-size:clamp(1.9rem,4.4vw,3.6rem);max-width:none;margin:0;clip-path:inset(0 0 0 0)}
#sectors .run{margin:1.4rem 0 0;color:var(--quiet);font-size:1rem;display:flex;flex-wrap:wrap;gap:.3rem 0}
#sectors .run span:not(:last-child)::after{content:"\00B7";margin:0 .7rem}
/* the functions: nine names on a three by three grid, nothing under them */
#sectors .grid9{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2rem}
#sectors .grid9 li{border-top:1px solid var(--rule-2);padding:.9rem 0;font-variation-settings:'wght' 300,'wdth' 84;font-size:1.15rem;line-height:1.2}
@media(max-width:60rem){
 #sectors .stn{grid-template-columns:1fr;gap:1.6rem;padding:2.6rem 0}
 #sectors .names{grid-template-columns:1fr}
 #sectors .sub{min-height:5.6rem}
 #sectors .grid9{grid-template-columns:1fr 1fr;gap:0 1.5rem}
}
@media(max-width:36rem){#sectors .grid9{grid-template-columns:1fr}}

/* ---------------- CLIENTS ---------------- */
#clients{overflow:hidden}
#clients .disp{font-size:clamp(1.4rem,3vw,2.4rem)}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.5rem,1vw,.9rem);
 margin:clamp(2.6rem,6vh,4rem) 0 0}
@media(max-width:70rem){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:40rem){.logos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Tiles held by a hairline, each mark in its own colour on white.

   What makes a wall of client logos jar is not the colour, it is twelve colour
   systems loose on an open page. So the grid contains them: a white tile, the
   white their own guidelines assume, on the warm ground of the page. The system
   does the framing and each client's identity stays its own.

   The accent cannot fill the tile any more, because that would recolour a
   trademark. It moves to the frame instead, which keeps the hover language used
   everywhere else on the site without touching the mark. */
.logos .lg{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:5/3;background:#FFFFFF;
 border:1px solid var(--rule-2);padding:clamp(1.2rem,2.4vw,2.2rem);transition:background .25s ease,border-color .25s ease}
/* The box is a fixed share of the tile and the image fits the mark inside it,
   so a wide mark is held by the width and a square one by the height without
   either being told which it is. It was sized by aspect-ratio before, which
   WebKit resolves the other way round, taking width from height: AkzoNobel
   came out 247px wide in a 171px tile on an iPhone and broke the wall. */
.logos i{display:block;width:58%;height:58%;
 background-position:center;background-repeat:no-repeat;background-size:contain}
.logos .lg:hover,.logos .lg:focus-visible{border-color:var(--accent)}
.logos .lg em{position:absolute;left:.9rem;bottom:.7rem;font-style:normal;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--quiet);opacity:0;transition:opacity .3s ease;pointer-events:none}
.logos .lg:hover em,.logos .lg:focus-visible em{opacity:.75}

.quote{margin:clamp(4rem,9vh,6rem) 0 0;padding:clamp(1.6rem,4vh,2.6rem) 0 0;border-top:1px solid var(--rule-2);
 display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(2rem,5vw,5rem)}
.quote blockquote{margin:0;font-variation-settings:'wght' 300,'wdth' 86;font-size:clamp(1.15rem,2vw,1.6rem);line-height:1.4;letter-spacing:-.01em}
.quote .who{display:grid;gap:.3rem;align-content:end;font-size:.92rem;color:var(--quiet)}
.quote .who b{font-weight:400;color:var(--ink);font-variation-settings:'wght' 400,'wdth' 104}
@media(max-width:60rem){.quote{grid-template-columns:1fr}}

.cases{margin:clamp(4rem,9vh,6rem) 0 0}
.cases li{position:relative;border-top:1px solid var(--rule-2);opacity:0;transform:translateY(10px);
 transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * .16s)}
.cases li:last-child{border-bottom:1px solid var(--rule-2)}
.cases.in li{opacity:1;transform:none}
.case-head{display:grid;grid-template-columns:11rem minmax(0,1fr) 2.6rem;grid-template-rows:auto auto;gap:.6rem 2.5rem;align-items:baseline;
 width:100%;text-align:left;padding:clamp(2rem,4vh,2.8rem) 0;background:none;border:0;color:inherit;font:inherit;cursor:pointer}
.case-head .lab{grid-row:1/3;opacity:.55;padding-top:.2rem}
.case-head .ttl{font-variation-settings:'wght' 300,'wdth' 78;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;line-height:1.15}
.case-head .brief{grid-column:2;color:var(--quiet);font-size:1rem;line-height:1.55;max-width:60ch}
.case-head .more{grid-column:3;grid-row:1/3;align-self:center;justify-self:end;width:2.6rem;height:2.6rem;position:relative;background:var(--accent)}
.case-head .more::before,.case-head .more::after{content:'';position:absolute;left:50%;top:50%;background:#FFFFFF;transition:transform .4s ease}
.case-head .more::before{width:1rem;height:1px;transform:translate(-50%,-50%)}
.case-head .more::after{width:1px;height:1rem;transform:translate(-50%,-50%)}
.case-head[aria-expanded="true"] .more::after{transform:translate(-50%,-50%) rotate(90deg)}
.case-head:hover .ttl{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.case-body{overflow:hidden}
.case-body dl{margin:0 0 clamp(2rem,4vh,2.8rem) 13.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 3rem}
.case-body dt{font-family:Archivo;font-variation-settings:'wght' 500,'wdth' 122;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin:0 0 .3rem}
.case-body dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--quiet)}
@media(max-width:60rem){
  .case-head{grid-template-columns:minmax(0,1fr) 2.5rem;gap:.6rem 1.2rem}
  .case-head .lab{grid-row:auto;grid-column:1}
  .case-head .ttl{grid-column:1}
  .case-head .brief{grid-column:1}
  .case-head .more{grid-column:2;grid-row:1/4;align-self:start}
  .case-body dl{margin-left:0;grid-template-columns:1fr}}

/* ---------------- CONTACT ----------------
   Two doors, each an action item: ruled, arrowed, and taking the accent on
   hover. On the page rather than in the footer, so they read as the close of
   the argument and not as furniture. */
.intent{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem)}
.intent a{color:inherit;text-decoration:none;border:1px solid var(--ink);
 padding:clamp(1.7rem,4vw,2.8rem);display:grid;gap:.7rem;align-content:start;position:relative;
 transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.intent a:hover{background:var(--accent);color:#FFFFFF;border-color:var(--accent)}
.intent a .lab{opacity:.55}
.intent h3{font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 78;font-weight:400;
 font-size:clamp(1.8rem,3.6vw,2.8rem);letter-spacing:-.03em;margin:.2rem 0 .3rem}
.intent p{font-size:.98rem;line-height:1.55;color:var(--quiet);margin:0;max-width:34ch}
.intent a:hover p,.intent a:hover .lab{color:#FFFFFF;opacity:.85}
.intent .arrow{position:absolute;right:clamp(1.7rem,4vw,2.8rem);top:clamp(1.7rem,4vw,2.8rem);font-size:1.4rem;line-height:1;transition:transform .35s ease}
.intent a:hover .arrow{transform:translateX(.35rem)}
@media(max-width:60rem){.intent{grid-template-columns:1fr}}

/* ---------------- FOOTER ----------------
   The sign-off is the horizontal lockup with the descriptor, set to the
   identity's own ratios: the mark two cap heights tall, the descriptor at 0.42
   of the wordmark alongside a hairline, never beneath the name. */
#foot{padding:clamp(4rem,10vh,7rem) var(--gut) clamp(2rem,5vh,3rem);background:var(--sunken)}
.foot-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,5vw,4rem);align-items:end}
.sign{--fs:clamp(1.6rem,3.6vw,3rem);display:flex;align-items:center;gap:calc(var(--fs) * .72);flex-wrap:wrap}
.sign canvas{width:calc(var(--fs) * 1.66);height:calc(var(--fs) * 1.44);display:block}
.sign .wm{font-size:var(--fs);line-height:1}
.sign .hair{width:1px;height:calc(var(--fs) * 1.44);background:var(--ink);opacity:.15;margin-left:calc(var(--fs) * .18)}
.sign .desc{font-variation-settings:'wght' 400,'wdth' 122;font-size:calc(var(--fs) * .42);letter-spacing:.22em;
 text-transform:uppercase;line-height:1.5;margin-left:calc(var(--fs) * -.07)}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:clamp(1.5rem,4vw,3.5rem)}
.foot-cols div{display:grid;gap:.5rem;align-content:start}
.foot-cols .h{margin:0 0 .5rem;opacity:.5}
.foot-cols a,.foot-cols span{color:inherit;text-decoration:none;opacity:.78;font-size:.95rem}
.foot-cols a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.legal{font-size:.82rem;margin:clamp(2.5rem,6vh,4rem) 0 0;padding-top:1.2rem;
 border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;opacity:.55}
/* never the browser's link blue: the accent is not a link colour and neither is
   anything that looks like one */
.legal a{color:inherit;text-decoration:none}
.legal a:hover{text-decoration:underline;text-underline-offset:3px}
a{color:inherit}
@media(max-width:60rem){
  .foot-grid{grid-template-columns:1fr;align-items:start;gap:3rem}
  .sign .hair{display:none}
}

/* ---------------- SUBPAGES (contact, insights) ---------------- */
.page{padding:calc(var(--navh) + clamp(4rem,10vh,7rem)) var(--gut) clamp(5rem,12vh,9rem)}
.page .disp{font-size:clamp(1.9rem,5vw,3.8rem);max-width:16ch}
.form{display:grid;gap:1.25rem;margin:1.8rem 0 0}
.form label{display:block;margin:0 0 .4rem}
.form input,.form textarea{width:100%;padding:.8rem .9rem;border:1px solid var(--rule-2);background:transparent;
 font:inherit;color:inherit;font-variation-settings:'wght' 300,'wdth' 100}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--ink)}
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.5rem,6vw,6rem);margin:clamp(3rem,7vh,5rem) 0 0}
.doors > div{padding-top:1.4rem;border-top:1px solid var(--rule-2)}
.doors h2{font-variation-settings:'wght' 300,'wdth' 78;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.03em;margin:0 0 .8rem}
.doors p{color:var(--quiet);max-width:40ch}
/* each door now carries two or three paragraphs rather than one, and without
   this they butt together and read as a single block */
.doors p + p{margin-top:.95em}
@media(max-width:60rem){.doors{grid-template-columns:1fr}}
/* each piece carries a plate: the same ruled tile as the client wall, holding
   one large figure. By default the piece's number in its series, with the
   series beneath; where the piece has a true figure it takes that instead.
   Structural rather than illustration, and the accent on hover as everywhere. */
.posts li{padding:1.5rem 0;border-top:1px solid var(--rule)}
.posts li:last-child{border-bottom:1px solid var(--rule)}
.posts a{color:inherit;text-decoration:none;display:grid;grid-template-columns:clamp(9rem,14vw,12rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,2.5rem);align-items:center}
.plate{display:grid;align-content:space-between;aspect-ratio:5/3;box-sizing:border-box;border:1px solid var(--rule-2);
 padding:.7rem .85rem .75rem;transition:background .25s ease,border-color .25s ease,color .25s ease}
.plate .num{font-size:clamp(2.6rem,4.4vw,3.8rem);font-weight:300}
.plate .lab{font-size:.58rem;opacity:.7;margin:0}
.posts a:hover .plate,.posts a:focus-visible .plate{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.posts h2{font-variation-settings:'wght' 400,'wdth' 86;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;margin:0}
.posts p{color:var(--quiet);font-size:.95rem;margin:.4rem 0 0}
.posts a:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.article > .plate{width:clamp(9rem,14vw,12rem)}
@media(max-width:60rem){.posts a{grid-template-columns:1fr;gap:.9rem}.plate{width:9rem}}
/* ---------------- A PIECE ----------------
   Editorial rather than a document: the section marker sits in its own column
   and holds while the argument runs past it, the short rhetorical lines these
   pieces are built on are set as display beats rather than buried in the
   paragraph flow, and the passages about what the firm has actually seen take
   a ground of their own, because firm experience is a different kind of
   material from argument. Nothing here is decoration: every element is a
   piece of the text doing its own job at its own size. */
.piece{padding:calc(var(--navh) + clamp(3rem,7vh,5rem)) 0 clamp(4rem,10vh,7rem)}
.phead{padding:0 var(--gut);max-width:74rem;margin:0 auto clamp(3rem,7vh,5rem)}
.phead .plate{width:clamp(8rem,12vw,10.5rem)}
.phead .disp{font-size:clamp(2rem,5.2vw,4.2rem);max-width:20ch;margin:1.4rem 0 0}
.phead .stand{font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 100;
 font-size:clamp(1.1rem,1.9vw,1.5rem);line-height:1.45;color:var(--quiet);max-width:46ch;margin:1.5rem 0 0}
/* where a standfirst turns on a short declarative, the declarative is the
   point of it and is set as one: full ink, and weight against the light text
   it follows */
.phead .stand b{font-variation-settings:'wght' 500,'wdth' 88;color:var(--ink)}
/* the two columns: marker and argument */
.sec2{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:clamp(1.5rem,5vw,4.5rem);
 max-width:74rem;margin:0 auto;padding:clamp(2.5rem,6vh,4rem) var(--gut);align-items:start}
.sec2 + .sec2{border-top:1px solid var(--rule)}
.sec2 .mark{position:sticky;top:calc(var(--navh) + 2rem)}
/* a numbered marker takes the accent as a square with the figure reversed out,
   the same mark as the sector numbers and a scenario's letters. The accent is
   never small text: where a marker is a word rather than a number it stays
   quiet grey. */
.sec2 .mark .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;color:var(--quiet);display:block;margin-bottom:.9rem}
.sec2 .mark .k.sq{color:#FFFFFF;background:var(--accent);width:2.2rem;height:2.2rem;display:grid;place-items:center}
.sec2 .mark h2{font-variation-settings:'wght' 400,'wdth' 78;font-size:clamp(1.3rem,2.6vw,2rem);
 line-height:1.08;letter-spacing:-.015em;margin:0;max-width:14ch}
.sec2.lede .col{font-size:1.12rem;line-height:1.6;max-width:34em}
/* the heading and the first line of its text start level. The eyebrow above
   the heading is an offset, so the body column takes the same one: without it
   a heading sits up to 40px below the text it belongs to and the two columns
   read as unrelated, which is exactly how it looked. */
.sec2:has(.mark .k.sq) .col{padding-top:calc(2.2rem + .9rem)}
.sec2:has(.mark .k:not(.sq)) .col{padding-top:calc(.92rem + .9rem)}
.sec2 .col{font-family:Archivo;font-variation-settings:'wght' 300,'wdth' 100;font-size:1.02rem;line-height:1.65;max-width:38em}
.sec2 .col p{margin:0}
.sec2 .col p + p{margin-top:1.15em}
/* A short line carrying a turn in the argument, set at display size in place
   rather than pulled out and repeated. These are the piece's flat statements,
   so they take weight as well as size: the width axis carries the hierarchy
   everywhere else, but a sentence like "It should." has to land as a
   statement rather than as a slightly larger paragraph. */
.sec2 .col .beat{font-variation-settings:'wght' 500,'wdth' 82;font-size:clamp(1.3rem,2.2vw,1.75rem);
 line-height:1.22;letter-spacing:-.015em;margin-top:1.6em}
.sec2 .col .beat + p{margin-top:1.5em}
/* the line a section turns on: the first in a piece takes the accent as a
   block, the rest take it as ink on the rule. One block per piece. */
.sec2 .col .pull{font-variation-settings:'wght' 300,'wdth' 78;font-size:clamp(1.45rem,2.8vw,2.1rem);
 line-height:1.16;letter-spacing:-.02em;margin:1.6em 0;padding-left:1.1rem;border-left:2px solid var(--accent)}
.sec2 .col .pull.block{background:var(--accent);color:#FFFFFF;border:0;
 padding:clamp(1.4rem,3vw,2.2rem);margin:1.8em 0;max-width:none}
.sec2 .col .beat + .pull.block,.sec2 .col p + .pull.block{margin-top:1.8em}
.sec2 .col > :first-child{margin-top:0}
.sec2 .col .turn{padding-left:1.1rem;border-left:1px solid var(--rule-2);margin-top:.8em}
.sec2 .col .turn + .turn{margin-top:.5em}
.sec2 .col sup{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.62em;vertical-align:super;line-height:0;margin-left:.15em;color:var(--quiet)}
/* the choices in a scenario, as a set rather than a list of sentences */
.opts{list-style:none;margin:1.6em 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.opts li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.9rem;background:var(--bg);padding:1.1rem 1rem;font-size:.95rem;line-height:1.5}
.opts b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.76rem;font-weight:400;color:#FFFFFF;
 background:var(--accent);width:1.7rem;height:1.7rem;display:grid;place-items:center}
.opts i{font-style:normal;font-variation-settings:'wght' 400,'wdth' 86}
/* What the firm has seen, on its own ground. The ground bleeds behind the
   grid rather than being laid out by it: a section with its own width does
   its own column maths and the text column lands a few pixels off the one
   above, which is exactly what happened the first time. */
.sec2.evidence{position:relative;isolation:isolate;
 padding-top:clamp(3rem,8vh,5rem);padding-bottom:clamp(3rem,8vh,5rem);margin-top:clamp(2rem,5vh,3rem);border-top:none}
.sec2.evidence::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;
 transform:translateX(-50%);background:var(--surface);border-top:1px solid var(--rule-2)}
.sec2.evidence + .sec2{border-top-color:var(--rule-2)}
/* the passage runs to as many headings as it needs and reads as one block:
   the ground is drawn once, not once per heading */
.sec2.evidence + .sec2.evidence{margin-top:0;padding-top:clamp(1.8rem,4vh,2.6rem);
 border-top:1px solid var(--rule)}
.sec2.evidence + .sec2.evidence::before{border-top:0}
.sec2.evidence:has(+ .sec2.evidence){padding-bottom:0}
/* the closing line, on ink, full width: the one moment the piece stops */
/* the closing line, on ink, starting where the argument starts */
.standout{background:#111111;color:#FFFFFF;margin:clamp(2rem,6vh,4rem) 0 0;padding:clamp(3rem,9vh,6rem) var(--gut)}
.standout p{font-family:Archivo;font-variation-settings:'wght' 400,'wdth' 76;font-size:clamp(1.6rem,4vw,3rem);
 line-height:1.14;letter-spacing:-.02em;max-width:74rem;margin:0 auto;text-wrap:balance}
.standout p span{display:block;max-width:22ch;margin-left:calc((100% - clamp(1.5rem,5vw,4.5rem)) * .3 + clamp(1.5rem,5vw,4.5rem))}
/* the piece's last word, on a line of its own */
.standout em{display:block;font-style:normal;margin-top:.55em;
 font-variation-settings:'wght' 500,'wdth' 72}
.srcs .notes{margin:0;padding-left:1.2rem;font-size:.88rem;color:var(--quiet)}
.srcs .notes li{margin:.45em 0}
/* the series, walked from the bottom of a piece */
.pnav{max-width:74rem;margin:clamp(3rem,8vh,5rem) auto 0;padding:0 var(--gut);
 display:grid;grid-template-columns:1fr 1fr}
.pnav a + a{border-left:0}
.pnav a{background:var(--bg);color:inherit;text-decoration:none;display:grid;gap:.9rem;align-content:start;
 padding:1.4rem 1.3rem;border:1px solid var(--rule);transition:background .25s ease,color .25s ease,border-color .25s ease}
.pnav .next{text-align:right}
.pnav .k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.pnav .t{font-variation-settings:'wght' 400,'wdth' 84;font-size:clamp(1rem,1.7vw,1.25rem);line-height:1.2;display:block}
.pnav .t b{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:400;font-size:.72rem;
 color:var(--quiet);display:block;margin-bottom:.45rem}
.pnav a:hover,.pnav a:focus-visible{background:var(--accent);border-color:var(--accent);color:#FFFFFF}
.pnav a:hover .k,.pnav a:hover .t b{color:rgba(255,255,255,.75)}
.pnav a:only-child{grid-column:1}
.back{max-width:74rem;margin:clamp(1.5rem,4vh,2.5rem) auto 0;padding:0 var(--gut)}
.back a{color:inherit;text-decoration:underline;text-underline-offset:4px;font-size:.92rem}
@media(max-width:60rem){
  .sec2{grid-template-columns:1fr;gap:1.2rem}
  .sec2 .mark{position:static}
  .sec2 .mark h2{max-width:none}
  .sec2.evidence,.standout{padding-left:var(--gut)}
  .opts,.pnav{grid-template-columns:1fr}
  .pnav .next{text-align:left}
  .pnav a + a{border-left:1px solid var(--rule);border-top:0}
}

.rule{border:0;border-top:1px solid var(--rule-2);margin:2.5rem 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the spam trap is off the page for people and on it for robots */
.form .hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.form-note{margin:.4rem 0 0;font-size:.92rem;color:var(--ink);min-height:1.4em}

/* the privacy page and the 404: the page shell, at reading width */
.legalpage .legal-body{max-width:38em;margin-top:clamp(2.5rem,6vh,4rem)}
.legalpage .legal-body h2{font-variation-settings:'wght' 400,'wdth' 86;font-size:1.3rem;margin:2.2em 0 .5em;letter-spacing:-.01em}
.legalpage .legal-body h2:first-child{margin-top:0}
.legalpage .legal-body h3{font-variation-settings:'wght' 500,'wdth' 92;font-size:1rem;margin:1.6em 0 .4em}
.legalpage .legal-body p + p{margin-top:.9em}
.legalpage .legal-body ul{margin:.8em 0;padding-left:1.1rem}
.legalpage .legal-body li{margin:.4em 0;line-height:1.6}
.legalpage .legal-body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.legalpage .legal-body p{margin:0;line-height:1.65}
.legalpage .await{color:var(--quiet);font-style:italic}
/* a review marker, never shipped: the production build refuses a page that
   still carries one */
.review-flag{margin:0 0 2rem;padding:.8rem 1rem;border:1px dashed var(--rule-2);font-size:.85rem;color:var(--quiet);max-width:46em}

/* the routes and offices under the two doors: a reference, set quieter than
   the doors above it, each entry its term beside its detail on a hairline */
.directory{padding:0 var(--gut) clamp(5rem,12vh,8rem)}
.directory .sec-head{margin-top:clamp(3rem,7vh,5rem)}
.routes,.offices{display:grid;margin:0}
.routes > div,.offices > div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1.5rem,5vw,4.5rem);
 padding:1.3rem 0;border-top:1px solid var(--rule)}
.routes > div:first-child,.offices > div:first-child{border-top:0}
.routes dt,.offices dt{font-variation-settings:'wght' 400,'wdth' 86;font-size:1.15rem;letter-spacing:-.01em}
.routes dd,.offices dd{margin:0;display:grid;gap:.5rem;font-size:.98rem;line-height:1.6}
.routes dd p{margin:0}
.routes dd p:first-child{color:var(--quiet)}
.offices address{font-style:normal;color:var(--quiet)}
.directory a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.directory a:hover{text-decoration-thickness:2px}
@media(max-width:60rem){.routes > div,.offices > div{grid-template-columns:1fr;gap:.5rem}}