{"version":3,"sourceRoot":"","sources":["../../_sass/_tokens.scss","main.scss"],"names":[],"mappings":"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,YD57Da,IC67Db,mBACA,MD56DI,KCg7DN,cACE,SACA,6BAGF,qDAME,8CACA,+CAIF,oCACA,+CACA,mDAKA,cACE,aACA,gCACA,6BACA,mBACA,oBACA,WDz8DM,KC08DN,mCAEA,yBATF,cAUI,qCACA,eDr7DO,MC27DX,YACE,cACA,WACA,aACA,SACA,WDv9DK,QA8CL,yBCo6DF,YAOmB,cAGnB,gBACE,sBD/6DA,yBC86DF,gBAGmB,mBAEjB,mBACE,SACA,eACA,iBACA,YDz/DW,IC0/DX,yBACA,cAOJ,iBACE,gBAEA,yBACE,aACA,eACA,SAGF,kDAEA,8CAKA,6DAEA,uBACE,cACA,kBACA,eACA,gBACA,cAGF,uDAEA,iDAEE,sBACA,WACA,mBACA,kBACA,yBACA,kBACA,WDphEI,KCqhEJ,aACA,eACA,gBACA,cAEA,+IAQF,0BACE,cACA,gBACA,iBACA,mBAGF,4BACE,qBACA,kBACA,SACA,kBACA,mBACA,MD/iEI,KCgjEJ,aACA,eACA,mBACA,gBACA,qBACA,yBACA,eAEA,qDAGF,gCACE,gBACA,eACA,gBACA,cAKF,0CACE,kBACA,aACA,SACA,gBAIJ,gBACE,WDnjES,KCojET,YDrjES,KCsjET,6BAMF,QACE,iBACA,aACA,mBACA,uBACA,aACA,mBACA,cAGF,aACE,WACA,gBACA,kBACA,kBACA,WDpmEM,KCqmEN,yCAEA,gEAEA,gBACE,gBACA,eACA,YDjoEY,ICkoEZ,gBACA,cAGF,eACE,gBACA,UDhpEQ,KCipER,gBACA,cAIJ,+DAEA,aACE,qBACA,gBACA,kBACA,mBACA,MDhoEM,KCioEN,eACA,gBACA,qBACA,yBACA,qBAEA,4CDvoEM,KAgDN,yBC8lEA,6BAEA,cACE,wBACA,uBAGF,mBACE,qCACA,UAGF,8CAEA,+CAEA,cACE,qCACA,WACA,oBAGF,yBAEA,qCAQF,aACE,WD/qEM,KCgrEN,MDprEI,KCqrEJ,UD9sEU,KC+sEV,iBAGF,aACE,aACA,4CACA,8BACA,cACA,MACA,iBD3oEA,yBCqoEF,aAUmB,yBAEjB,yBAZF,aAaI,8BACA,cACA,cDppEF,yBCqoEF,aAqBI,0BACA,UAIJ,+BAEA,cACE,cACA,mBAEA,wDDrqEA,yBCyqEiB,8BAGnB,aACE,SACA,UACA,gBAKF,YACE,aACA,uBACA,kBAEA,+CACA,oBD9uEI,KC8uEa,qBACjB,8CAGF,aACE,UACA,aACA,mBACA,2BACA,WACA,cACA,MD1vEK,QC4vEL,sDAGF,eACE,gBD3sEA,yBC0sEF,eAGmB,iBAEjB,iBACE,oBACA,mBACA,WACA,YACA,WDzwEG,QC0wEH,MDrwEI,KCywER,cACE,gBACA,SACA,UACA,UDzyEW,KC2yEX,mCAIA,2CDvxEI,KCuxEoC,qBACxC,4BDzxEK,QCyxEmB,0BDpuExB,yBCuuEE,6CAOJ,eACE,UD3zEW,KC4zEX,MDpyEI,KAoDJ,yBC8uEF,eAImB,iBAEjB,qFDpvEA,yBCsvEiB,kCAGnB,2BACE,mBD1vEA,yBCyvEF,2BAGmB,mBAGnB,cACE,qBACA,kBACA,yBACA,kBACA,MDzzEK,QC0zEL,UDj1EW,KCk1EX,iBACA,YDv0Ec,ICw0Ed,qBAEA,+BD/zEK,QC+zEwB,MD1zEvB,KC6zER,oBACE,YD70EY,IC80EZ,MDn0EI,KCs0EN,eACE,aACA,qBACA,8BACA,ID9yES,KC+yET,8BACA,oBACA,mBDzxEA,yBCkxEF,eASmB,yBATnB,eAUE,6BACA,UDz2EW,KC02EX,MDl1EI,KCo1EJ,0BACA,uBDr1EI,KCq1Ea,qBACjB,6BDv1EK,QCu1EmB,0BDlyExB,yBCkxEF,eAqBmB,iBAGnB","sourcesContent":["// Design tokens, measured off the live site rather than chosen.\n//\n// Every value here came out of `node scripts/extract_tokens.mjs`, which reads\n// getComputedStyle from the clone's real pages at both viewports. That is the\n// only honest source: the answer to \"what size is an H1\" lives at the end of a\n// cascade of a widget default, a page-scoped `.elementor-32\n// .elementor-element-<hash>` override and a media query, spread across 620KB.\n// What the page renders is a fact; what the stylesheet says is an argument.\n//\n// The v1.0 rebuild guessed instead, and guessed wrong in every particular: a\n// different navy (#12263a), Georgia headings, 17px body text, and a gold accent\n// the firm does not use anywhere. Replacing those is most of this file's point.\n\n// ---------------------------------------------------------------------------\n// Type\n// ---------------------------------------------------------------------------\n// Poppins, and only Poppins — 4,794 of the clone's 4,818 styled elements are\n// set in it. Four weights cover everything the site actually uses: 300 for the\n// large section headings, 400 for body and navigation, 500 for small emphasis,\n// 700 for the home page's H1. The clone ships 48 faces; these eight files are\n// those four weights in the two Latin subsets, ~53KB in total, and nothing that\n// is ever requested and not drawn.\n//\n// `swap` because these are self-hosted and small: a moment of fallback beats a\n// moment of nothing, and the metric difference is not worth a layout shift.\n$font-sans: Poppins, -apple-system, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n\n$latin: \"U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD\";\n$latin-ext: \"U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF\";\n\n@each $weight in (300, 400, 500, 700) {\n  @font-face {\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: $weight;\n    font-display: swap;\n    src: url(\"../fonts/poppins-#{$weight}-latin.woff2\") format(\"woff2\");\n    unicode-range: #{$latin};\n  }\n  @font-face {\n    font-family: Poppins;\n    font-style: normal;\n    font-weight: $weight;\n    font-display: swap;\n    src: url(\"../fonts/poppins-#{$weight}-latin-ext.woff2\") format(\"woff2\");\n    unicode-range: #{$latin-ext};\n  }\n}\n\n// Sizes, desktop then phone, exactly as measured.\n//\n// The H1 is the one real discontinuity — 52px on desktop, 34px on a phone — and\n// it is expressed as a clamp rather than a media query so the sizes in between\n// are not a cliff. Everything else holds its size across both viewports; the\n// clone only steps H2 down on the home page and /notices/, which is a\n// page-level decision rather than a token.\n$text-body: 16px;         // body, paragraphs, list items, navigation\n$text-small: 14px;        // footer text, buttons\n$text-h1: clamp(34px, 4vw, 52px);\n$text-h2: 34px;           // inner pages; the home page overrides to 30px\n$text-h2-home: 30px;\n$text-h3: 21px;\n\n$leading-body: 1.6;       // 16px/25.6px, the clone's ratio everywhere\n$leading-tight: 1.2;      // 52px/62.4px on headings\n$leading-flat: 1;         // 52px/52px — the home hero, set solid\n\n$weight-light: 300;       // section headings\n$weight-normal: 400;      // body, navigation, inner-page H1s\n$weight-medium: 500;\n$weight-bold: 700;        // the home hero H1\n\n// ---------------------------------------------------------------------------\n// Colour\n// ---------------------------------------------------------------------------\n// Ranked by area actually painted, not by how often they are declared.\n//\n// The navy exists three times in the clone — #0e0e31, #0e0e30 and #12123f —\n// which is exactly the drift a token file exists to end. The first is the one\n// that covers the most ground, so it is the navy and the others are dropped.\n$navy: #0e0e31;           // brand: headings, links, buttons, the logo mark\n$ink: #000000;            // body copy; the clone sets true black, not a near-black\n$ink-soft: #3e3e3e;       // secondary copy\n$ink-faint: #b1b4b8;      // the top bar's text\n\n$paper: #ffffff;          // header, footer, cards\n$page: #f7f7f7;           // the body behind everything\n$mist: #eff3f4;           // the alternating section tint\n$line: #e7e7e7;           // hairlines and card borders\n\n// Deliberately absent: an accent. The clone has no third colour — links,\n// buttons and headings are all the navy — so anything gold here would be an\n// invention, which is what the v1.0 stylesheet did.\n\n// ---------------------------------------------------------------------------\n// Layout\n// ---------------------------------------------------------------------------\n$container: 1140px;       // the clone's outer container, measured on /team/\n$container-narrow: 645px; // its inner container for running text\n$gutter: 20px;            // phone side padding\n$gutter-wide: 50px;       // the top bar's, and the desktop side padding\n\n// The clone has no vertical rhythm to copy: its sections are padded 0 and the\n// spacing comes from spacer widgets holding arbitrary pixel heights. So this is\n// a scale rather than a measurement — the one place in this file where a value\n// is chosen — anchored to the two gaps that are real: 75px of footer padding\n// and the 70px minor sections.\n$space-xs: 8px;\n$space-sm: 16px;\n$space-md: 24px;\n$space-lg: 40px;\n$space-xl: 70px;\n$space-2xl: 75px;\n\n$header-height: 107px;    // masthead, measured\n$topbar-height: 32px;\n$logo-width: 270px;\n$logo-height: 36px;\n\n// ---------------------------------------------------------------------------\n// Motion\n// ---------------------------------------------------------------------------\n// Short enough not to read as a delay, and honoured against a user's stated\n// preference rather than applied unconditionally.\n$transition: 160ms ease;\n\n@mixin reduced-motion {\n  @media (prefers-reduced-motion: reduce) {\n    @content;\n  }\n}\n\n@mixin phone {\n  @media (max-width: 767px) {\n    @content;\n  }\n}\n\n@mixin desktop {\n  @media (min-width: 768px) {\n    @content;\n  }\n}\n","// Esshaki Legal — self-contained stylesheet. Every font is served from\n// assets/fonts/, so a page makes no external request and renders identically in\n// CI, on GitHub Pages and offline.\n//\n// Colour, type and spacing all come from _sass/_tokens.scss, which was measured\n// off the live site rather than designed. See the note at the top of that file\n// for why the values are read out of a browser instead of out of the clone's\n// CSS.\n@import \"tokens\";\n\n// The names below are the ones the rest of this file already used. Keeping them\n// as an alias layer, rather than renaming through 600 lines, keeps the diff that\n// changes the site's entire palette readable.\n//\n// The interesting one is gold. The v1.0 stylesheet had a gold accent — eyebrows,\n// link text, the brand mark, card top-borders — and the firm does not have one.\n// The clone paints one brand colour and two inks; its links, buttons and\n// headings are all the same navy. So gold does not map to another accent, it\n// maps to whatever the live site actually uses in that position, which depends\n// on what the accent was sitting on:\n$gold: $navy;             // on light: rules, borders, marks\n$gold-dark: $navy;        // on light: link text\n$gold-light: $ink-faint;  // on navy: the faint grey the clone's top bar uses\n\n// #12123f is the site's other navy. It survives only as the far end of the two\n// gradients, where a second stop is wanted and inventing one would be worse.\n$navy-deep: #12123f;\n$muted: $ink-soft;\n$serif: $font-sans;       // the firm sets headings in Poppins, not a serif\n$sans: $font-sans;\n\n* { box-sizing: border-box; }\n\nhtml { scroll-behavior: smooth; }\n\n@include reduced-motion {\n  html { scroll-behavior: auto; }\n}\n\n// The leading is a length, not a ratio, because that is what the clone\n// inherits: its body computes to 25.6px, so a 12px caption and a 15px button\n// are both set on 25.6 rather than on 19.2 and 24. It reads as a mistake and it\n// is one, but it is the mistake the pixels were measured from — a ratio here\n// makes every element that does not state its own leading disagree with the\n// page it is supposed to reproduce. Everything with a size of its own sets its\n// own line-height and is unaffected.\nbody {\n  margin: 0;\n  font-family: $font-sans;\n  font-size: $text-body;\n  line-height: $text-body * $leading-body;\n  color: $ink;\n  background: $page;\n  -webkit-font-smoothing: antialiased;\n}\n\nimg, svg { max-width: 100%; }\n\n// A <picture> is inline by default, so it sits on a baseline and adds a\n// descender's worth of space under whatever it wraps — the same few pixels the\n// contact form's textarea was costing. Every one of ours wraps a block image.\npicture { display: block; }\n\nh1, h2, h3, h4 {\n  font-family: $font-sans;\n  color: $navy;\n  line-height: $leading-tight;\n  margin: 0 0 0.5em;\n}\n\n// Measured: 52px on desktop and 34px on a phone, the one size on the site that\n// genuinely steps. A clamp rather than a breakpoint so the sizes between the\n// two are a ramp instead of a cliff.\nh1 { font-size: $text-h1; font-weight: $weight-bold; }\n// 34px at both viewports, and light — the clone's section headings are 300.\nh2 { font-size: $text-h2; font-weight: $weight-light; }\nh3 { font-size: $text-h3; font-weight: $weight-normal; }\n\np { margin: 0 0 1em; }\n\na { color: $navy; }\na:hover { color: $ink; }\n\n.container {\n  width: min(#{$container}, calc(100% - #{$gutter * 2}));\n  margin-inline: auto;\n\n  @include desktop {\n    width: min(#{$container}, calc(100% - #{$gutter-wide * 2}));\n  }\n}\n\n.eyebrow {\n  font-family: $font-sans;\n  font-size: $text-small;\n  font-weight: $weight-medium;\n  letter-spacing: 0.18em;\n  text-transform: uppercase;\n  color: $ink-soft;\n  margin-bottom: 0.75rem;\n}\n\n.center { text-align: center; }\n\n// ---------------------------------------------------------------- buttons\n// Written out rather than left to the alias layer above. With one brand colour\n// and no accent, \"primary\" cannot mean \"the accent\" — resolving $gold to navy\n// mechanically would have given .btn-primary navy text on a navy fill. So each\n// variant states the surface it belongs on, and the four between them cover\n// light and dark.\n//\n// Metrics are the clone's: 15px/40px padding, 14px text, square corners.\n.btn {\n  display: inline-block;\n  padding: 15px 40px;\n  font-family: $font-sans;\n  font-weight: $weight-medium;\n  font-size: $text-small;\n  line-height: 18px;\n  letter-spacing: 0.02em;\n  text-decoration: none;\n  border-radius: 0;\n  border: 2px solid transparent;\n  transition: background $transition, color $transition, border-color $transition;\n\n  @include reduced-motion { transition: none; }\n}\n\n// The site's main call to action, on a light surface.\n.btn-primary {\n  background: $navy;\n  color: $paper;\n  border-color: $navy;\n  &:hover { background: $paper; color: $navy; }\n}\n\n// On navy: a solid white button.\n.btn-light {\n  background: $paper;\n  color: $navy;\n  border-color: $paper;\n  &:hover { background: transparent; color: $paper; }\n}\n\n// On navy or over the hero image: outline only.\n.btn-ghost {\n  border-color: rgba(255, 255, 255, 0.5);\n  color: $paper;\n  &:hover { border-color: $paper; background: rgba(255, 255, 255, 0.1); }\n}\n\n// On light: outline only.\n.btn-outline {\n  border-color: $navy;\n  color: $navy;\n  &:hover { background: $navy; color: $paper; }\n}\n\n.text-link {\n  font-weight: $weight-medium;\n  text-decoration: none;\n  color: $navy;\n  &:hover { text-decoration: underline; }\n}\n\n// ---------------------------------------------------------------- header\n// Measured off the clone at 1440px: 107px tall, white, no top bar. The wordmark\n// sits at x=140 and the phone button ends at x=1300, so the header's content\n// spans 1160px with 140px either side.\n.site-header {\n  position: sticky;\n  top: 0;\n  z-index: 50;\n  background: $paper;\n  height: $header-height;\n\n  // The clone's phone masthead is 60px, not 107 — a different bar with a\n  // smaller wordmark, not the desktop one squeezed. Every page below it starts\n  // 47px higher as a result, which is most of what the mobile diff was.\n  @include phone { height: 60px; }\n}\n\n.header-inner {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  height: 100%;\n  // The clone's masthead is 107px with its content centred on y≈69, not on\n  // y≈53 — there is a 32px strip above it, left over from a top bar that is\n  // empty on most pages. Reproducing the offset is what puts the logo, the nav\n  // and the phone button at the heights they actually sit at.\n  padding: $topbar-height 140px 0;\n\n  @media (max-width: 1200px) { padding: $topbar-height $gutter-wide 0; }\n  @include phone { padding: 0 $gutter; }\n}\n\n// Measured: the wordmark ends at x=410 and the nav starts at x=466, so the nav\n// sits just after the logo rather than being pushed to the right with the phone\n// button. The button is what takes the remaining space.\n.brand { margin-right: 56px; }\n\n.brand {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n\n  img { display: block; width: $logo-width; height: auto; }\n\n  @include phone { img { width: 85px; } }\n}\n\n.site-nav { flex: 1; }\n\n.site-nav ul {\n  display: flex;\n  align-items: center;\n  gap: 20px;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n// 16px/32px, uppercase, navy, no tracking — the clone's values, measured. The\n// link is inline-block so its box is the 32px line rather than the 25px content\n// area an inline box would report; that 7px is what put it 5px off vertically.\n.site-nav a {\n  display: inline-block;\n  color: $navy;\n  font-size: 16px;\n  line-height: 32px;\n  font-weight: $weight-normal;\n  text-transform: uppercase;\n  text-decoration: none;\n  // An inset shadow rather than a border: a 2px border on an inline-block adds\n  // 2px to the link's box, and the clone's is exactly 32.\n  box-shadow: inset 0 -2px 0 transparent;\n  transition: box-shadow $transition;\n\n  &:hover,\n  &.active { box-shadow: inset 0 -2px 0 $navy; }\n\n  @include reduced-motion { transition: none; }\n}\n\n// The phone is a bordered button on the right: 190x48, 15px/40px padding,\n// 14px/18px text. It sits inside the nav list, so it has to undo the nav link's\n// own size and line-height rather than inherit them.\n.site-nav .header-phone {\n  display: inline-block;\n  padding: 14px 39px;\n  border: 1px solid $navy;\n  font-size: 14px;\n  line-height: 18px;\n  letter-spacing: normal;\n  text-transform: none;\n  white-space: nowrap;\n\n  &:hover { background: $navy; color: $paper; border-bottom-color: $navy; }\n}\n\n// Flush with the header's right edge at x=1300, which is what pushes it away\n// from the nav rather than any gap of its own.\n.nav-phone { margin-left: auto; }\n\n.nav-toggle {\n  display: none;\n  flex-direction: column;\n  gap: 5px;\n  background: none;\n  border: 0;\n  padding: 8px;\n  cursor: pointer;\n\n  .nav-toggle-bar { width: 24px; height: 2px; background: $navy; }\n}\n\n@media (max-width: 980px) {\n  .nav-toggle { display: flex; }\n  .header-inner { position: relative; }\n\n  .site-nav {\n    display: none;\n    position: absolute;\n    left: 0;\n    right: 0;\n    top: 100%;\n    background: $paper;\n    border-top: 1px solid $line;\n    box-shadow: 0 12px 24px rgba(14, 14, 49, 0.12);\n    padding: 0 $gutter $space-sm;\n  }\n\n  .site-nav.open { display: block; }\n  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }\n\n  .site-nav a {\n    display: block;\n    padding: 0.8rem 0;\n    border-bottom: 1px solid $line;\n\n    &:hover,\n    &.active { border-bottom-color: $line; color: $ink; }\n  }\n\n  .header-phone {\n    margin-top: $space-sm;\n    text-align: center;\n    &:hover { border-bottom-color: $navy; }\n  }\n}\n\n// ------------------------------------------------------------------- home\n// Every number below was measured on the clone with scripts/outline_page.mjs\n// and scripts/text_metrics.mjs at 1440px. They are not round because the thing\n// being copied is not round: it is Elementor spacer widgets and per-widget\n// margins, and rounding them to a scale is how the earlier attempt ended up\n// 32% different from the page it was supposed to reproduce.\n//\n// The page is a 1000px column: mist and full-bleed behind the hero, white\n// behind everything from \"Business Law\" down to the form.\n$home-column: 1000px;\n\n.home-wrap {\n  width: min(#{$home-column}, 100%);\n  margin: 0 auto;\n}\n\n.home-panel { background: $paper; }\n\n// ---------------------------------------------------------------- hero\n// A 970x530 panel inset in a 670px mist band — not the full-bleed section an\n// earlier rebuild had. The 50px above it is part of the same band.\n.home-hero-band {\n  background: $mist;\n  padding-top: 50px;\n\n  @include phone { padding-top: 20px; }\n}\n\n.hero {\n  position: relative;\n  padding: 70px 0 70px 30px;\n  color: $paper;\n\n  @include phone { padding: 20px; }\n}\n\n.hero-viewport {\n  position: relative;\n  isolation: isolate;\n  height: 504px;\n  overflow: hidden;\n  background: $navy;\n\n  @include phone { height: 420px; }\n}\n\n// Poster and video are stacked, so there is never a frame of empty navy while\n// the video loads.\n.hero-media {\n  position: absolute;\n  inset: 0;\n  z-index: -2;\n}\n\n.hero-poster,\n.hero-video {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n.hero-rotator {\n  position: absolute;\n  inset: 0;\n}\n\n// The navy square behind the top-left corner of the heading. In the clone it is\n// a ::before on the slide, 175px square, sitting under the text — decoration\n// rather than content, which is why it is drawn in CSS and not in the markup.\n.hero-slide {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  padding: 50px;\n  // Opacity alone, not `visibility: hidden`. A hidden slide is dropped from\n  // innerText, and the clone's Swiper keeps every slide in the layout — so\n  // hiding them here would have taken the firm's other two headlines out of\n  // the page as far as anything reading rendered text is concerned. The slides\n  // hold no focusable content, and `aria-hidden` keeps them out of the\n  // accessibility tree.\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 500ms ease;\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: -1;\n    width: 175px;\n    height: 175px;\n    background: $navy;\n  }\n\n  &.is-current { opacity: 1; pointer-events: auto; }\n  // Without JavaScript no class is added, so the first slide stands on its own\n  // markup rather than on a script that never ran.\n  &:first-child { opacity: 1; pointer-events: auto; }\n\n  @include phone { padding: 24px; }\n  @include reduced-motion { transition: none; }\n}\n\n.hero-slide-content {\n  width: 60%;\n\n  @include phone { width: 100%; }\n}\n\n.hero-heading {\n  margin: 0;\n  color: $paper;\n  font-size: 64px;\n  line-height: 76.8px;\n  font-weight: $weight-medium;\n\n  @include phone { font-size: 32px; line-height: 40px; }\n}\n\n.hero-lede {\n  margin: 30px 0 0;\n  color: $paper;\n  font-size: 22px;\n  line-height: 30.8px;\n  font-weight: $weight-normal;\n\n  @include phone { font-size: 16px; line-height: 24px; margin-top: 16px; }\n}\n\n// Square bullets, indented to the slide's own 50px padding so they line up\n// under the heading. They stay in the flow — the hero's 530px is 504 of panel\n// plus 26 of bullets — and the 5px lift is `top` on a relatively positioned\n// box, which moves the paint without moving the layout.\n.hero-dots {\n  position: relative;\n  top: -5px;\n  height: 26px;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding-left: 50px;\n\n  @include phone { padding-left: 24px; }\n}\n\n.hero-dot {\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: 0;\n  cursor: pointer;\n  background: $paper;\n  transition: background $transition;\n\n  &[aria-selected=\"true\"] { background: $navy; }\n  &:focus-visible { outline: 2px solid $navy; outline-offset: 3px; }\n\n  @include reduced-motion { transition: none; }\n}\n\n// -------------------------------------------------------- \"Business Law\"\n// 70px above the eyebrow (a 50px spacer plus the 20px every Elementor widget\n// carries below it), then 20px between each of the three text blocks, then 91px\n// down to the testimonial band.\n.home-about {\n  padding: 70px 0 91px 40px;\n\n  // 30px gutter and a 352px measure on a phone — the clone narrows the copy\n  // rather than running it to the edge.\n  @include phone { padding: 70px 30px 149px; }\n\n  .eyebrow {\n    margin: 0 0 20px;\n    font-size: 16px;\n    line-height: 16px;\n    font-weight: $weight-normal;\n    letter-spacing: normal;\n    text-transform: none;\n    color: #adadad;\n  }\n\n  h1 {\n    margin: 0 0 20px;\n    width: 920px;\n    max-width: 100%;\n    font-size: $text-h1;\n    line-height: $leading-flat;\n    font-weight: $weight-bold;\n    color: $navy;\n\n    @include phone { width: 352px; line-height: 34px; }\n  }\n\n  p {\n    margin: 0 0 20px;\n    width: 920px;\n    max-width: 100%;\n    font-size: $text-body;\n    line-height: $leading-body;\n    text-align: justify;\n    color: $ink;\n\n    &:last-child { margin-bottom: 0; }\n\n    @include phone { width: 352px; }\n  }\n}\n\n// ---------------------------------------------------------------- about\n// /about-us/ is the home page's block on mist instead of white, with 70px of\n// mist above it and 70px of page below — the clone's own asymmetry.\n.about-page {\n  background: $mist;\n  padding-top: 70px;\n\n  @include phone { padding-top: 40px; }\n}\n\n.about-tail { height: 70px; }\n\n// ------------------------------------------------------------ testimonials\n// A photographic band with a 50% charcoal wash over it, carrying one quote at a\n// time. The image is the clone's own; the wash is what makes white text legible\n// on a bright sky.\n.home-testimonials {\n  position: relative;\n  padding: 40px 40px 60px;\n  // image-set so a browser that takes WebP does — 195KB against 272 for the\n  // same picture. A background cannot use <picture>, and this is the only way\n  // to offer a second format from CSS.\n  background:\n    linear-gradient(rgba(62, 62, 62, 0.5), rgba(62, 62, 62, 0.5)),\n    image-set(\n      url(\"../img/courthouse-detroit-scaled.webp\") type(\"image/webp\"),\n      url(\"../img/courthouse-detroit-scaled.jpeg\") type(\"image/jpeg\")\n    ) left top / cover no-repeat;\n  color: $paper;\n  text-align: center;\n}\n\n.testimonial-viewport {\n  position: relative;\n  width: min(650px, 100%);\n  margin: 0 auto;\n  padding: 20px 0 61px;\n}\n\n// Stacked rather than laid side by side: the block must not change height as\n// the quotes rotate, and the tallest one sets it.\n.testimonial-track { display: grid; }\n\n.home-testimonials .testimonial {\n  grid-area: 1 / 1;\n  margin: 0;\n  // See the note on .hero-slide: opacity, not visibility, so the quotes stay\n  // in the page's rendered text the way the clone's do.\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 500ms ease;\n\n  &.is-current { opacity: 1; pointer-events: auto; }\n  &:first-child { opacity: 1; pointer-events: auto; }\n\n  @include reduced-motion { transition: none; }\n\n  blockquote {\n    margin: 0 20px;\n    font-size: 20.8px;\n    line-height: 31.2px;\n    font-weight: $weight-normal;\n    color: $paper;\n  }\n\n  figcaption {\n    margin-top: 24px;\n    font-size: $text-small;\n    line-height: 21px;\n    color: $paper;\n  }\n}\n\n.testimonial-name { display: block; font-weight: $weight-bold; }\n.testimonial-title { display: block; font-weight: $weight-normal; }\n\n.testimonial-prev,\n.testimonial-next {\n  position: absolute;\n  top: 145px;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: 0;\n  background: none;\n  color: rgba(238, 238, 238, 0.9);\n  cursor: pointer;\n\n  svg { width: 100%; height: 100%; display: block; }\n  &:hover { color: $paper; }\n  &:focus-visible { outline: 2px solid $paper; outline-offset: 4px; }\n}\n\n.testimonial-prev { left: 40px; }\n.testimonial-next { right: 40px; }\n\n.testimonial-dots {\n  position: absolute;\n  right: 76px;\n  bottom: 73px;\n  display: flex;\n  gap: 12px;\n}\n\n// Black at a fifth opacity over a photograph, which is what the clone draws —\n// nearly invisible, but the diff counts it.\n.testimonial-dot {\n  width: 6px;\n  height: 6px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  cursor: pointer;\n  background: $ink;\n  opacity: 0.2;\n\n  &[aria-selected=\"true\"] { opacity: 1; }\n  &:focus-visible { outline: 2px solid $paper; outline-offset: 3px; opacity: 1; }\n}\n\n// ------------------------------------------------------------- pull quote\n// A grey block inside the white column, with the quote mark hanging over the\n// text rather than sitting above it.\n.home-quote {\n  position: relative;\n  padding: 60px 10px 110px;\n  background: $line;\n}\n\n// The mark takes 22px of the flow and draws 64px, so the quote's first line\n// runs across it rather than under it — the clone does this with a -50px\n// margin on the icon's own container, which is the same trick.\n.quote-mark {\n  display: block;\n  height: 22px;\n  margin-bottom: 20px;\n  color: rgba(2, 1, 1, 0.13);\n\n  svg { width: 64px; height: 64px; display: block; }\n}\n\n.home-quote h2 {\n  margin: 0 0 20px;\n  padding: 0 30px 0 40px;\n  font-size: $text-h2-home;\n  line-height: 39px;\n  font-weight: $weight-normal;\n  text-align: justify;\n  color: $ink;\n}\n\n.quote-by {\n  margin: 0;\n  padding-left: 30px;\n  font-size: $text-body;\n  line-height: 16px;\n  font-weight: $weight-normal;\n  color: $ink;\n}\n\n// ---------------------------------------------------------------- contact\n.home-contact { padding: 50px; }\n\n.home-contact-grid {\n  display: grid;\n  grid-template-columns: 392px 423px;\n  gap: 62px;\n  padding: 10px 0 10px 10px;\n\n  @media (max-width: 900px) {\n    grid-template-columns: minmax(0, 1fr);\n    gap: $space-lg;\n    padding-left: 0;\n  }\n}\n\n.home-contact-details {\n  h2 {\n    margin: 0 0 20px;\n    font-size: 34px;\n    line-height: 44.2px;\n    font-weight: $weight-light;\n    text-transform: uppercase;\n    color: $ink;\n  }\n\n  .contact-lede {\n    margin: 0;\n    font-size: $text-body;\n    line-height: $leading-body;\n    letter-spacing: 0.3px;\n    text-align: justify;\n    color: $ink;\n  }\n}\n\n.contact-cta { margin: 68px 0 0; }\n\n// Solid navy, set flat — 18px type on 18px leading, which is why the button is\n// 52px tall and not 56.\n.btn-phone {\n  display: inline-block;\n  padding: 16px 24px;\n  border: 1px solid $navy;\n  border-radius: 1px;\n  background: $navy;\n  color: $paper;\n  font-size: 18px;\n  line-height: 1;\n  font-weight: $weight-medium;\n  text-decoration: none;\n\n  &:hover { background: #1c1c55; border-color: #1c1c55; color: $paper; }\n}\n\n.contact-rule {\n  width: 87%;\n  margin: 35px 0 36px;\n  border: 0;\n  border-top: 1px solid #9f9f9f;\n}\n\n.contact-rows {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.contact-row {\n  display: flex;\n  align-items: flex-start;\n  gap: 15px;\n  margin-bottom: 20px;\n\n  &:last-child { margin-bottom: 0; }\n}\n\n// A 51px navy square with a 29px glyph centred in it — the clone's icon boxes,\n// drawn from outlines lifted out of its icon font rather than from a lookalike\n// set. See scripts/extract_icons.py.\n.contact-icon {\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 51px;\n  height: 51px;\n  background: $navy;\n  color: $paper;\n\n  svg { width: 29px; height: 29px; display: block; }\n}\n\n.contact-text { min-width: 0; }\n\n.contact-label {\n  display: block;\n  font-size: 15px;\n  line-height: 30px;\n  font-weight: $weight-normal;\n  text-transform: uppercase;\n  color: $navy;\n\n  a { color: inherit; text-decoration: none; }\n  a:hover { text-decoration: underline; }\n}\n\n.contact-value {\n  display: block;\n  font-size: 12px;\n  line-height: $text-body * $leading-body;\n  color: $ink;\n}\n\n// The form column starts lower than the details column — the clone puts a\n// spacer above it so the first field lines up with the lede, not the heading.\n.home-contact-form {\n  padding-top: 76px;\n\n  @media (max-width: 900px) { padding-top: 0; }\n}\n\n// The 145px of empty page the clone leaves between the contact block and the\n// footer. It holds nothing; it is still 145px, and a diff counts padding.\n.home-tail { height: 145px; }\n\n// The home page on a phone. The hero keeps its 504px panel and its 26px of\n// bullets — only the inset changes — and the type steps down. After the base\n// rules so it wins on equal specificity.\n@include phone {\n  .home-hero-band { padding-top: 0; }\n\n  .hero { padding: 70px 0 70px 30px; }\n\n  .hero-viewport { height: 504px; }\n\n  .hero-slide { padding: 30px; }\n\n  .hero-slide-content { width: 322px; max-width: 100%; }\n\n  .hero-heading { font-size: 40px; line-height: 48px; }\n\n  .hero-lede { font-size: 18px; line-height: 25px; margin-top: 20px; }\n\n  .home-testimonials { padding: 15px; }\n\n  .testimonial-viewport { width: 329px; padding: 20px 0 40px; }\n\n  .home-testimonials .testimonial blockquote { margin: 0; }\n\n  .testimonial-prev { left: 15px; }\n  .testimonial-next { right: 15px; }\n  .testimonial-dots { right: 45px; bottom: 25px; }\n\n  .home-quote { padding: 55px 21px 79px; }\n  .home-quote h2 { font-size: 21px; line-height: 27.3px; padding: 0; }\n  .quote-by { padding-left: 0; }\n  .quote-mark svg { width: 44px; height: 44px; }\n\n  .home-contact { padding: 40px 0; }\n  .home-contact-grid { padding-left: 0; width: 332px; margin: 0 auto; }\n  .home-contact-form { padding-top: 0; }\n}\n\n// /about-us/ on a phone. Its testimonial band is narrower than the home page's\n// — 291px against 329 — and inset 25px rather than 15, so the two pages get\n// their own rules rather than sharing one that is wrong on one of them.\n@include phone {\n  .about-page { padding-top: 70px; }\n\n  .about-page .home-testimonials { padding: 25px; }\n\n  .about-page .testimonial-viewport { width: 291px; padding: 20px 0 40px; }\n\n  .about-page .testimonial-prev { left: 25px; }\n  .about-page .testimonial-next { right: 25px; }\n  .about-page .testimonial-dots { right: 55px; bottom: 35px; }\n}\n\n// ---------------------------------------------------------------- sections\n.section { padding: clamp(3rem, 7vw, 5rem) 0; }\n.section-alt { background: $mist; }\n\n.intro-grid {\n  display: grid;\n  grid-template-columns: 5fr 7fr;\n  gap: 2.5rem;\n}\n\n@media (max-width: 780px) {\n  .intro-grid { grid-template-columns: 1fr; }\n}\n\n// ---------------------------------------------------------------- services\n// /services/ is a menu page: a white panel on mist carrying the heading, the\n// lede and the practice list, then a photographic band with the pull-quote.\n// Panel and band are both 1033px wide and inset in the page, not full-bleed.\n$services-panel: 1033px;\n\n.services-page {\n  background: $mist;\n  padding: 70px 0;\n\n  @include phone { padding: 40px 0; }\n}\n\n.services-panel {\n  width: min(#{$services-panel}, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n  padding: 70px 30px 0;\n  background: $paper;\n\n  @include phone { padding: 30px $gutter 0; }\n\n  h1 {\n    margin: 0 0 20px;\n    font-size: $text-h2;\n    line-height: 34px;\n    font-weight: $weight-light;\n    color: $ink;\n  }\n}\n\n.services-lede {\n  margin: 0;\n  max-width: 970px;\n  font-size: $text-body;\n  line-height: $leading-body;\n  text-align: justify;\n  color: $ink;\n}\n\n.services-rule {\n  margin: 38px 0 0;\n  border: 0;\n  border-top: 1px solid $line;\n}\n\n// Two columns of chevroned links. The clone's second column starts 10px lower\n// than the first — two separate lists, not one flowed into columns — which is\n// why this is a grid with an offset rather than `column-count`.\n.services-menu {\n  display: grid;\n  // Column-major: the clone fills the first column top to bottom, five items,\n  // then starts the second. Five explicit rows plus `column` flow is what puts\n  // Real Estate Law beside Employment and Labor Law rather than under\n  // Shareholder Disputes.\n  grid-template-columns: 464px 1fr;\n  grid-template-rows: repeat(5, 40.5px);\n  grid-auto-flow: column;\n  align-content: start;\n  margin: 0;\n  padding: 73px 0 55px;\n  list-style: none;\n\n  @media (max-width: 900px) {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n    grid-auto-flow: row;\n    padding: 40px 0;\n  }\n\n  li {\n    display: flex;\n    align-items: flex-start;\n    gap: 20px;\n  }\n\n  // The second column sits 10px lower than the first.\n  li:nth-child(n + 6) { margin-top: 10px; }\n\n  @media (max-width: 900px) {\n    li:nth-child(n) { margin-top: 0; }\n  }\n\n  a {\n    font-size: 20px;\n    line-height: $text-body * $leading-body;\n    color: $navy;\n    text-decoration: none;\n  }\n\n  a:hover { text-decoration: underline; }\n}\n\n.services-chevron {\n  flex: none;\n  display: flex;\n  align-items: center;\n  width: 20px;\n  height: 25.6px;\n  color: $navy;\n\n  svg { width: 12px; height: 16px; display: block; }\n}\n\n// The same courthouse the home page's testimonials use, under a black wash at\n// half strength — which is what makes 35px white type legible over a building.\n.services-quote {\n  width: min(#{$services-panel}, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n  padding: 158px 55px 105px;\n  background:\n    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),\n    image-set(\n      url(\"../img/courthouse-detroit-scaled.webp\") type(\"image/webp\"),\n      url(\"../img/courthouse-detroit-scaled.jpeg\") type(\"image/jpeg\")\n    ) center / cover no-repeat;\n  color: $paper;\n\n  @include phone { padding: 60px $gutter; }\n\n  h2 {\n    margin: 0 0 20px;\n    font-size: 35px;\n    line-height: 45.5px;\n    font-weight: $weight-light;\n    text-align: justify;\n    color: $paper;\n  }\n}\n\n.services-quote-by {\n  margin: 0;\n  font-size: $text-body;\n  line-height: $leading-body;\n  color: $paper;\n}\n\n.services-cta { margin: 20px 0 0; }\n\n// 180x58, solid navy, no border — a heavier button than the header's.\n.btn-cta {\n  display: inline-block;\n  min-width: 180px;\n  padding: 20px 40px;\n  background: $navy;\n  color: $paper;\n  font-size: 18px;\n  line-height: 18px;\n  font-weight: $weight-normal;\n  text-align: center;\n  text-decoration: none;\n\n  &:hover { background: #1c1c55; color: $paper; }\n}\n\n// The menu page on a phone: a 30px gutter, the practice list in one column,\n// and the pull-quote stepped down to 20px. After the base rules so it wins on\n// equal specificity.\n@include phone {\n  .services-page { padding: 70px 0; }\n\n  .services-panel { padding: 70px 30px 0; }\n\n  .services-lede { max-width: none; }\n\n  .services-menu {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-rows: none;\n    grid-auto-flow: row;\n    padding: 105px 0 60px 40px;\n\n    li { margin-top: 0; height: 40.5px; }\n    li:nth-child(n + 6) { margin-top: 0; }\n  }\n\n  .services-quote {\n    padding: 100px 55px 90px;\n\n    h2 { font-size: 20px; line-height: 26px; }\n  }\n\n  .btn-cta { min-width: 0; padding: 20px 30px; }\n}\n\n// ---------------------------------------------------------------- testimonial\n.testimonial-section {\n  background:\n    linear-gradient(160deg, rgba(11, 26, 42, 0.95), rgba(18, 38, 58, 0.9)),\n    $navy-deep;\n}\n\n.testimonial {\n  margin: 0 auto;\n  max-width: 46rem;\n  text-align: center;\n\n  blockquote {\n    margin: 0;\n\n    p {\n      font-family: $serif;\n      font-size: clamp(1.2rem, 2.5vw, 1.6rem);\n      font-style: italic;\n      color: #eef2f6;\n    }\n  }\n\n  figcaption {\n    margin-top: 1rem;\n    color: $gold-light;\n    font-weight: 700;\n    letter-spacing: 0.08em;\n    text-transform: uppercase;\n    font-size: 0.8rem;\n  }\n}\n\n// ---------------------------------------------------------------- team\n.team-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.25rem;\n  list-style: none;\n  margin: 2rem 0;\n  padding: 0;\n}\n\n.team-grid-full { grid-template-columns: repeat(3, 1fr); }\n\n@media (max-width: 960px) { .team-grid, .team-grid-full { grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 620px) { .team-grid, .team-grid-full { grid-template-columns: 1fr; } }\n\n.team-card {\n  background: $paper;\n  border: 1px solid $line;\n  padding: 1.75rem 1.5rem;\n  text-align: center;\n\n  h2, h3 { margin: 0.35rem 0 0.15rem; font-size: 1.25rem; }\n\n  h2 a, h3 a {\n    color: $navy;\n    text-decoration: none;\n    &:hover { color: $gold-dark; }\n  }\n}\n\n.team-title {\n  color: $gold;\n  font-weight: 700;\n  font-size: 0.8rem;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  margin-bottom: 0.7rem;\n}\n\n.team-summary {\n  font-size: 0.93rem;\n  color: $muted;\n  text-align: left;\n}\n\n.avatar {\n  display: grid;\n  place-items: center;\n  width: 84px;\n  height: 84px;\n  margin: 0 auto;\n  border-radius: 50%;\n  background: $navy;\n  border: 3px solid $gold;\n  color: $gold-light;\n  font-family: $serif;\n  font-size: 1.7rem;\n}\n\n.avatar-lg {\n  width: 148px;\n  height: 148px;\n  font-size: 3rem;\n}\n\n// ---------------------------------------------------------------- CTA band\n.cta-band {\n  background: linear-gradient(120deg, $navy, $navy-deep);\n  color: #e8edf2;\n  padding: 2.75rem 0;\n\n  h2 { color: #fff; margin-bottom: 0.25rem; }\n  p { margin: 0; color: #c8d2dc; }\n}\n\n.cta-inner {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1.5rem;\n  flex-wrap: wrap;\n}\n\n// ---------------------------------------------------------------- inner pages\n// An inner page opens on the pale tint, not on a dark band. Sampled down the\n// clone's /team/ capture: white masthead, then #eff3f4 from y=120 to the\n// content. The v1.0 rebuild put a navy gradient here, which is why every inner\n// page read as a different site from its own header.\n.page-hero {\n  background: $mist;\n  color: $ink;\n  padding: clamp(2.75rem, 7vw, 4.5rem) 0;\n\n  h1 { color: $navy; margin: 0; }\n}\n\n.page-subtitle {\n  margin: 0.6rem 0 0;\n  color: $ink-soft;\n  font-size: $text-h3;\n  font-weight: $weight-light;\n}\n\n.page-body {\n  padding: clamp(2.5rem, 6vw, 4rem) 0;\n\n  &.narrow .container { max-width: 46rem; }\n}\n\n.prose {\n  max-width: 50rem;\n\n  .lead {\n    font-size: 1.2rem;\n    color: $navy;\n    font-family: $serif;\n  }\n\n  h2 { margin-top: 1.6em; }\n  ul { padding-left: 1.2rem; }\n  li { margin-bottom: 0.5rem; }\n}\n\n.disclaimer {\n  font-size: 0.88rem;\n  color: $muted;\n  border-top: 1px solid $line;\n  padding-top: 1rem;\n  margin-top: 2rem;\n}\n\n// ---------------------------------------------------------------- attorney\n.attorney-grid {\n  display: grid;\n  grid-template-columns: 300px 1fr;\n  gap: 3rem;\n}\n\n@media (max-width: 860px) {\n  .attorney-grid { grid-template-columns: 1fr; }\n}\n\n.attorney-side .avatar { margin-bottom: 1.5rem; }\n\n.attorney-meta {\n  background: $mist;\n  border: 1px solid $line;\n  padding: 1.4rem 1.5rem;\n\n  h2 {\n    font-family: $sans;\n    font-size: 0.8rem;\n    font-weight: 700;\n    letter-spacing: 0.14em;\n    text-transform: uppercase;\n    color: $gold;\n    margin: 1.2rem 0 0.5rem;\n  }\n\n  h2:first-child { margin-top: 0; }\n\n  // The clone leaves 68px above the last section rather than 50. Another\n  // spacer widget; there is nothing to derive it from.\n  h2:last-of-type { margin-top: 68px; }\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    font-size: 0.92rem;\n  }\n\n  li {\n    padding: 0.35rem 0;\n    border-bottom: 1px solid $line;\n  }\n\n  li:last-child { border-bottom: 0; }\n}\n\n// ---------------------------------------------------------------- cases\n.cases-list {\n  list-style: none;\n  margin: 2rem 0 0;\n  padding: 0;\n  display: grid;\n  gap: 1.25rem;\n}\n\n.case-card {\n  background: $paper;\n  border: 1px solid $line;\n  border-left: 4px solid $gold;\n  padding: 1.6rem 1.8rem;\n\n  h2 { font-size: 1.25rem; margin-bottom: 0.4rem; }\n  p { margin: 0; color: $muted; }\n}\n\n// ---------------------------------------------------------------- contact\n.contact-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1.25rem;\n}\n\n@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }\n\n.contact-card {\n  background: $mist;\n  border: 1px solid $line;\n  border-top: 3px solid $gold;\n  padding: 1.6rem 1.6rem;\n\n  h2 { font-size: 1.1rem; }\n  address { font-style: normal; }\n  p:last-child { margin-bottom: 0; }\n}\n\n.contact-phone a {\n  font-family: $serif;\n  font-size: 1.5rem;\n  color: $navy;\n  text-decoration: none;\n  &:hover { color: $gold-dark; }\n}\n\n// Visible only when focused. A keyboard visitor should not have to tab through\n// the whole navigation on every page to reach the content.\n.skip-link {\n  position: absolute;\n  left: -9999px;\n  z-index: 100;\n  padding: 12px 20px;\n  background: $navy;\n  color: $paper;\n  text-decoration: none;\n\n  &:focus {\n    left: 0;\n    top: 0;\n  }\n}\n\n// Accessible-only text: the router's live region, which must be announced and\n// never seen.\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n// The router moves focus to the new <h1>. That focus must be visible for anyone\n// navigating by keyboard, and must not draw a box for anyone who clicked.\nmain h1:focus { outline: none; }\nmain h1:focus-visible { outline: 2px solid $navy; outline-offset: 4px; }\n\n// --------------------------------------------------- prose + practice pages\n// Measured off the clone. Both sit on the mist background with a 50px spacer\n// above the content; the practice pages are two 410px columns 80px apart\n// starting at x=270, and the prose pages a single ~920px column at x=260.\n.practice {\n  background: $mist;\n  padding: 110px 0 100px;\n\n  // 70px either side on a phone, and the columns stack full-bleed with their\n  // own padding rather than sharing a gutter.\n  @include phone { padding: 70px 0; }\n}\n\n// /notices/ only: 115px above its first heading and 255 below its last line.\n.prose-page {\n  background: $mist;\n  padding: 115px 0 255px;\n\n  @include phone { padding: 70px 0 140px; }\n}\n\n.practice-grid {\n  display: grid;\n  grid-template-columns: 410px 410px;\n  justify-content: center;\n  gap: 80px;\n\n  @media (max-width: 980px) {\n    grid-template-columns: min(920px, calc(100% - #{$gutter * 2}));\n    gap: $space-md;\n  }\n\n  @include phone {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0;\n  }\n}\n\n// Stacked on a phone: the heading block padded 40 all round, the body 35/25.\n// The heading's 332px is what wraps \"Appellate Litigation\" onto two lines the\n// way the clone does.\n@include phone {\n  .practice-head { padding: 40px; }\n  .practice-body { padding: 35px 25px; }\n}\n\n.practice-head {\n  h1 {\n    margin: 0;\n    font-size: 52px;\n    line-height: 62.4px;\n    font-weight: $weight-bold;\n    color: $navy;\n\n    // 34px on a phone. The clone steps this heading and nothing else.\n    @include phone { font-size: 34px; line-height: 40.8px; }\n  }\n\n  h2 {\n    margin: 0;\n    font-size: 34px;\n    line-height: 34px;\n    font-weight: $weight-light;\n    color: $ink;\n  }\n\n  // The clone's eyebrow: 16px on its own line, grey, 20px above the heading.\n  .eyebrow {\n    margin: 0 0 20px;\n    font-size: $text-body;\n    line-height: 16px;\n    font-weight: $weight-normal;\n    letter-spacing: 0;\n    text-transform: none;\n    color: #adadad;\n\n    a { color: inherit; text-decoration: none; }\n    a:hover { color: $navy; }\n  }\n}\n\n// Justified, as the clone sets it. The column starts 29px below the eyebrow\n// beside it — level with neither the eyebrow nor the heading, which is why it\n// is an offset rather than an alignment.\n.practice-body {\n  padding-top: 29px;\n  text-align: justify;\n  color: $navy;\n\n  @media (max-width: 980px) { padding-top: 0; }\n  @include phone { padding-top: 35px; }\n\n  p { margin: 0 0 1em; }\n  p:last-child { margin-bottom: 0; }\n}\n\n.prose-column {\n  width: min(920px, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n\n  h1 {\n    margin: 0 0 20px;\n    font-size: 52px;\n    line-height: 52px;\n    font-weight: $weight-bold;\n    color: $navy;\n  }\n\n  // 34px light, 20px to its own copy and 50px clear of what came before.\n  h2 {\n    margin: 50px 0 20px;\n    font-size: 34px;\n    line-height: 34px;\n    font-weight: $weight-light;\n    color: $ink;\n  }\n\n  h2:first-child { margin-top: 0; }\n\n  // The clone leaves 68px above the last section rather than 50. Another\n  // spacer widget; there is nothing to derive it from.\n  h2:last-of-type { margin-top: 68px; }\n\n  .eyebrow {\n    margin: 0 0 20px;\n    font-size: $text-body;\n    line-height: 16px;\n    font-weight: $weight-normal;\n    letter-spacing: 0;\n    text-transform: none;\n    color: #adadad;\n  }\n\n  // The clone justifies this page's body copy and leaves no margin under the\n  // last paragraph of a section — the 50px above the next heading is the gap.\n  p { margin: 0; text-align: justify; color: $ink; }\n}\n\n// The client quotes the about page carries.\n.testimonials {\n  list-style: none;\n  margin: 60px 0 0;\n  padding: 0;\n  display: grid;\n  gap: $space-lg;\n\n  @include desktop { grid-template-columns: repeat(3, 1fr); }\n}\n\n.testimonial {\n  blockquote { margin: 0 0 $space-sm; }\n  blockquote p { margin: 0; color: $ink; }\n}\n\n.testimonial-by {\n  margin: 0;\n  font-size: $text-small;\n}\n\n.testimonial-name { font-weight: $weight-medium; color: $navy; }\n.testimonial-title { color: $ink-soft; margin-left: 8px; }\n\n// ------------------------------------------------------------- attorney\n// Measured off the clone: the portrait at x=267 with the name and opening\n// paragraph beside it at x=673, then the rest full width at x=260, then\n// labelled sections, then the matters in two columns.\n// Measured off the clone: 68px of page above a mist band, the band padded\n// 60/70, then 177px of page below it. The band is the only mist on the page —\n// an earlier version had it running the full height, which put the wrong\n// colour behind the 177px the clone leaves empty above the footer.\n.attorney { padding-top: 68px; }\n\n.attorney-band {\n  background: $mist;\n  padding: 60px 0 70px;\n\n  @include phone { padding: $space-lg 0; }\n}\n\n.attorney-tail { height: 177px; }\n\n// 47 + 369 + 37 + 507 = 1000, the clone's container exactly. The portrait\n// column is sized rather than fluid because the clone renders each headshot at\n// its own aspect — Ed's is square, Robert's the tallest — and only the width\n// is shared.\n.attorney-intro {\n  display: grid;\n  grid-template-columns: 369px 507px;\n  gap: 37px;\n  width: min(1000px, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n  padding-left: 47px;\n\n  // The 60px belongs to whatever follows, not to the intro: on a page with no\n  // biography past the lede — Heather's, David's — a bottom margin here is\n  // 60px of empty mist the clone does not have.\n\n  @media (max-width: 980px) {\n    grid-template-columns: min(920px, calc(100% - #{$gutter * 2}));\n    gap: $space-md;\n  }\n\n  @include phone {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0;\n  }\n}\n\n// Stacked on a phone: the heading block padded 40 all round, the body 35/25.\n// The heading's 332px is what wraps \"Appellate Litigation\" onto two lines the\n// way the clone does.\n@include phone {\n  .practice-head { padding: 40px; }\n  .practice-body { padding: 35px 25px; }\n}\n\n.attorney-portrait img {\n  display: block;\n  width: 369px;\n  max-width: 100%;\n  height: auto;\n}\n\n.attorney-heading {\n  // The name sits 28px below the top of the portrait beside it, not level with\n  // it.\n  padding-top: 28px;\n\n  h1 {\n    margin: 0 0 20px;\n    font-size: 34px;\n    line-height: 34px;\n    font-weight: $weight-light;\n    color: $ink;\n  }\n}\n\n// 501px, not the 541 the name above it takes: the clone narrows the bio.\n.attorney-lede {\n  max-width: 501px;\n  margin: 71px 0 0;\n  text-align: justify;\n  color: $ink;\n}\n\n// Everything below the portrait runs the full 920px column.\n.attorney-column,\n.attorney-section {\n  width: min(920px, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n}\n\n.attorney-column {\n  // The margin is set inline per person, from _data/spacers.yml; this is the\n  // fallback for a record the measurement never ran against.\n  margin-top: 100px;\n\n  // 10px between paragraphs, not the 1em a body paragraph gets elsewhere.\n  p { margin: 0 0 10px; text-align: justify; color: $ink; }\n  p:last-child { margin-bottom: 0; }\n}\n\n// The clone's section labels: 20px, semibold, uppercase, with the list indented\n// 20px beneath them.\n// The clone's spacing between these is not a rhythm — the old editor set an\n// arbitrary spacer height between each — so the gaps are transcribed rather\n// than derived: 207px before the first, 20px between, 122px before the matters.\n// x=280 on the clone, with the list indented 20px further to x=300.\n.attorney-section {\n  margin-top: 20px;\n  padding: 0 30px 0 20px;\n\n  // 120px below the biography on every attorney page — the one gap in this\n  // layout that is a rule rather than a per-page spacer.\n  &:first-of-type { margin-top: 120px; }\n\n  // The clone leaves 104px more below the last labelled section than it leaves\n  // below a portrait, so a page with sections ends lower than one without.\n  &:last-of-type { margin-bottom: 104px; }\n\n  h2 {\n    margin: 0 0 45px;\n    font-size: 20px;\n    line-height: 20px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    color: $ink;\n  }\n\n  ul {\n    margin: 0;\n    padding-left: 20px;\n    list-style: none;\n  }\n\n  li { margin-bottom: 0.6rem; }\n}\n\n.attorney-matters {\n  margin-top: 122px;\n\n  ul {\n    columns: 2;\n    column-gap: 67px;\n\n    @include phone { columns: 1; }\n  }\n\n  li {\n    break-inside: avoid;\n    margin-bottom: 1.6rem;\n    line-height: 32px;\n    text-align: justify;\n  }\n}\n\n// Stacked on a phone: the portrait runs the column width, and the name sits\n// below it rather than beside it. Placed after the base rules above so it wins\n// on equal specificity — a media query does not raise it.\n@include phone {\n  .attorney-band { padding: 80px 0 70px; }\n\n  .attorney-intro {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0;\n    width: auto;\n    padding: 0 20px;\n  }\n\n  .attorney-portrait img { width: 100%; }\n\n  // Per person, from _data/spacers.yml: 110px on Heather's page and 41 on the\n  // rest. The gap from the roles to the lede is 142 everywhere, so that one is\n  // written here.\n  .attorney-heading { padding-top: var(--name-gap, 41px); }\n\n  // 362 wide, and the base 71px above it — the 143 between the roles and the\n  // lede is that 71 plus the LinkedIn mark sitting between them.\n  .attorney-lede { max-width: 362px; }\n\n  .attorney-column,\n  .attorney-section { width: calc(100% - 40px); }\n\n  // The labelled headings run to the column edge on a phone; only the list\n  // keeps its 20px indent.\n  .attorney-section { padding: 0 20px 0 0; }\n\n  .attorney-tail { height: 237px; }\n}\n\n// ----------------------------------------------------------------- team\n// Measured off the clone: a 1000px white panel with a soft shadow on the mist\n// background, the headshot inset 47px from the left and 60px from the top, and\n// the text column starting 453px into the panel.\n//\n// The earlier rebuild had a three-column grid of initials in circles. The firm\n// has headshots.\n.team-list {\n  background: $mist;\n  padding: 140px 0 70px;\n}\n\n// The portrait column is sized to the headshot, not to a fixed 453 — the text\n// beside it starts 37px past whatever width the image came out at, which is\n// how the clone puts Eric's name 6px left of everyone else's.\n.person-card {\n  display: grid;\n  // 47 of inset + 375 of headshot, then 37 to the text: the name lands at 679.\n  grid-template-columns: 422px 1fr;\n  gap: 37px;\n  width: min(1000px, calc(100% - #{$gutter * 2}));\n  margin: 0 auto 70px;\n  background: $paper;\n  box-shadow: 0 0 17px rgba(0, 0, 0, 0.19);\n\n  &:last-child { margin-bottom: 0; }\n\n  @media (max-width: 900px) { grid-template-columns: 1fr; }\n}\n\n.person-portrait {\n  padding: 60px 0 60px 47px;\n\n  // No fixed aspect: the clone renders each headshot at its own, and forcing\n  // one shape on all six crops four of them.\n  img {\n    display: block;\n    width: 375px;\n    max-width: 100%;\n    height: auto;\n  }\n\n  @media (max-width: 900px) { padding: $space-md $space-md 0; img { width: 100%; } }\n}\n\n.person-body {\n  // The clone's headings run to the panel edge and only the body copy is inset,\n  // so the padding lives on the elements rather than on the column.\n  padding: 88px 0 60px 0;\n\n  @media (max-width: 900px) { padding: $space-md; }\n\n  h2 {\n    margin: 0 0 20px;\n    font-size: 34px;\n    line-height: 34px;\n    font-weight: $weight-light;\n    color: $ink;\n  }\n}\n\n.person-role {\n  margin: 0 0 20px;\n  font-size: $text-body;\n  line-height: 16px;\n  color: $ink;\n}\n\n.person-social {\n  margin: 0 0 30px;\n\n  a {\n    display: inline-grid;\n    place-items: center;\n    width: 51px;\n    height: 51px;\n    background: $navy;\n    color: $paper;\n    text-decoration: none;\n  }\n}\n\n.person-rule {\n  border: 0;\n  border-top: 1px solid #d8d8d8;\n  margin: 0 40px 40px 0;\n}\n\n// 20px between the biography and the button, and the last card carries no\n// margin of its own — the list's own padding is what sits under it.\n.person-cta { margin: 20px 0 0; }\n\n\n// Justified, as the clone sets it, and inset 40px from the panel edge while the\n// headings above it are not.\n.person-bio {\n  margin: 0 40px 0 0;\n  text-align: justify;\n  color: $ink;\n}\n\n// The clone's Learn More: 181x60, 20px/40px padding, 18px text, solid navy.\n// 183x60 on the clone: 18px type set solid, 21px of padding and 42 either side.\n.btn-solid {\n  padding: 21px 42px;\n  border-width: 0;\n  font-size: 18px;\n  line-height: 18px;\n  font-weight: $weight-normal;\n  letter-spacing: 0;\n  background: $navy;\n  color: $paper;\n  border-color: $navy;\n\n  &:hover { background: $paper; color: $navy; }\n}\n\n// Stacked on a phone: the headshot runs the column width at a 20px gutter and\n// the text sits under it. After the base rules so it wins on equal specificity.\n@include phone {\n  .team-list { padding: 140px 0 114px; }\n\n  .person-card {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 0;\n    width: 100%;\n    margin-bottom: 172px;\n  }\n\n  .person-portrait {\n    padding: 60px 20px 0;\n\n    img { width: 100%; }\n  }\n\n  .person-body { padding: 41px 20px 60px; }\n\n  .person-rule { margin-right: 0; }\n\n  // 332 wide, not the column's 372: the clone narrows the card's summary on a\n  // phone and leaves the rule and the heading full width.\n  .person-bio { margin-right: 0; max-width: 332px; }\n}\n\n// ------------------------------------------------- attorney + practice pages\n.portrait {\n  display: block;\n  width: 100%;\n  height: auto;\n  aspect-ratio: 1;\n  object-fit: cover;\n  object-position: top center;\n  margin-bottom: $space-md;\n  background: $mist;\n}\n\n.matters {\n  padding-left: 1.2rem;\n\n  li { margin-bottom: 0.6rem; }\n}\n\n.related { margin-top: $space-xl; }\n\n// ---------------------------------------------------------------- insights\n// The press band at the foot of /financial-institutions/, measured: full-bleed\n// over a photograph of the Manhattan Municipal Building under a black wash,\n// with three navy cards on a 322px pitch. It is the only band on the site that\n// escapes its page's container, which is why it is positioned out of it.\n.insights {\n  position: relative;\n  left: 50%;\n  width: 100vw;\n  // The negative bottom margin cancels the practice container's own 100px of\n  // padding: on the clone the band runs to the bottom edge of <main>, and a\n  // full-bleed child cannot take its parent's padding with it.\n  margin: 110px 0 -100px -50vw;\n  padding: 70px 0;\n\n  // 20px below the practice block on a phone, not 110.\n  @include phone { margin-top: 20px; }\n  background:\n    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),\n    image-set(\n      url(\"../img/M-Manhattan-Municipal-Building_credit-Mattia-Panciroli-via-flickr-1280x829-1.webp\") type(\"image/webp\"),\n      url(\"../img/M-Manhattan-Municipal-Building_credit-Mattia-Panciroli-via-flickr-1280x829-1.jpeg\") type(\"image/jpeg\")\n    ) center / cover no-repeat;\n  color: $paper;\n}\n\n.insights-heading {\n  margin: 0 0 20px;\n  font-size: 42px;\n  line-height: 42px;\n  font-weight: $weight-bold;\n  text-align: center;\n  color: #c2c2c2;\n}\n\n.insights-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 307px);\n  justify-content: center;\n  gap: 15px;\n  align-items: start;\n  margin: 0;\n  // The clone's grid is not centred on the page: it sits in a container that\n  // starts at x=229, with 30px of padding inside it.\n  padding: 0 0 0 29px;\n  list-style: none;\n\n  @media (max-width: 1000px) {\n    grid-template-columns: minmax(0, 460px);\n    gap: $space-lg;\n  }\n\n  // 19px between stacked cards on a phone, and the grid runs the full width.\n  @include phone {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 19px;\n    padding: 0 15px;\n  }\n}\n\n.insight-card {\n  padding: 35px 30px 30px;\n  background: $navy;\n\n  h3 { margin: 0 0 11px; }\n\n  h3 a {\n    font-size: 24px;\n    line-height: 34px;\n    font-weight: $weight-normal;\n    color: $paper;\n    text-decoration: none;\n  }\n\n  h3 a:hover { text-decoration: underline; }\n}\n\n.insight-meta {\n  margin: 0 0 10px;\n  font-size: 13px;\n  line-height: 18.2px;\n  color: $paper;\n\n  span { margin-right: 12px; }\n  .insight-date { display: block; margin-right: 0; }\n  time { color: inherit; }\n}\n\n.insight-excerpt {\n  margin: 0 0 20px;\n  font-size: 15px;\n  line-height: 22.5px;\n  color: $paper;\n}\n\n.insight-more {\n  margin: 0;\n\n  a {\n    display: inline-block;\n    padding: 8px 14px 7px;\n    background: $navy;\n    color: $paper;\n    font-size: 12px;\n    line-height: 12px;\n    font-weight: 600;\n    text-decoration: none;\n  }\n\n  a:hover { text-decoration: underline; }\n}\n\n.related-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: $space-xs $space-sm;\n\n  a {\n    display: inline-block;\n    padding: 6px 14px;\n    border: 1px solid $line;\n    background: $paper;\n    text-decoration: none;\n    font-size: $text-small;\n    transition: border-color $transition, background $transition;\n\n    &:hover { border-color: $navy; background: $mist; }\n\n    @include reduced-motion { transition: none; }\n  }\n}\n\n// ------------------------------------------------------------------ contact\n// Measured off the clone: a 1000px white panel with the details left and the\n// form right, then one 986px panel per office, each a 493x486 map beside the\n// same labelled rows. The page itself is $page, with 70px of it between panels.\n.contact-page {\n  padding: 70px 0;\n\n  @include phone { padding: 40px 0; }\n}\n\n.contact-main {\n  width: min(1000px, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n  padding: 90px 50px 60px;\n  background: $paper;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n\n  @include phone { padding: 32px $gutter; }\n\n  h1 {\n    margin: 0;\n    font-size: 34px;\n    line-height: 44.2px;\n    font-weight: $weight-light;\n    text-transform: uppercase;\n    color: $ink;\n  }\n}\n\n.contact-main-grid {\n  display: grid;\n  grid-template-columns: 440px 455px;\n  gap: 45px;\n\n  @media (max-width: 900px) { grid-template-columns: minmax(0, 1fr); gap: $space-lg; }\n}\n\n.contact-details .contact-lede {\n  margin: 0;\n  max-width: 410px;\n  font-size: $text-body;\n  line-height: $leading-body;\n  text-align: justify;\n  color: $ink;\n}\n\n// The clone rules the heading off at 194px and each office heading at 88.\n.contact-rule {\n  border: 0;\n  border-top: 1px solid #9f9f9f;\n}\n\n.contact-rule-heading { width: 194px; margin: 22px 0 24px; }\n\n// The clone leaves 58px between the lede and the phone button here and 68 on\n// the home page, and 90px between the button and the first row rather than the\n// home page's rule-and-20.\n.contact-details {\n  .contact-cta { margin: 58px 0 0; }\n  .contact-rows { margin-top: 90px; }\n}\n\n// The form starts 36px below the heading beside it, not level with it.\n.contact-form-side { padding-top: 36px; }\n.contact-rule-foot { width: 194px; margin: 92px 0 0; }\n.contact-rule-office { width: 88px; margin: 22px 0 23px; }\n\n// One office: the map on the left at its natural 493x486, the details beside\n// it. Not a fluid split — the clone's map is a fixed size and the column beside\n// it is what takes the remainder.\n.office-block {\n  display: grid;\n  grid-template-columns: 493px 1fr;\n  width: min(986px, calc(100% - #{$gutter * 2}));\n  margin: 70px auto 0;\n  padding-bottom: 12px;\n  background: $paper;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n\n  @media (max-width: 900px) {\n    grid-template-columns: minmax(0, 1fr);\n    padding-bottom: $space-lg;\n  }\n}\n\n// A fixed box, so the map reserves its space and the page does not jump when a\n// deferred iframe finally arrives.\n.office-map {\n  display: block;\n  width: 100%;\n  height: 486px;\n  border: 0;\n  background: $mist;\n\n  @include phone { height: 300px; }\n}\n\n.office-details {\n  padding: 79px 0 0 30px;\n\n  @include phone { padding: $space-md $gutter; }\n\n  h2 {\n    margin: 0;\n    font-size: 36px;\n    line-height: 36px;\n    font-weight: $weight-light;\n    text-transform: uppercase;\n    color: #020202;\n  }\n}\n\n// The form, matching the one scripts/replace_forms.mjs puts into the clone,\n// down to the 3px radius and the #ccd2dd border. It renders on the home page\n// and on /contact/, so these values are load-bearing in two diffs.\n.el-contact-form {\n  text-align: left;\n\n  .el-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n  }\n\n  .el-row .el-field { flex: 1 1 220px; }\n\n  .el-field { margin-bottom: 16px; }\n\n  // The honeypot's label is out of flow, so its field is an empty box whose\n  // bottom margin would otherwise collapse through the form and push the whole\n  // column down 16px.\n  .el-field[aria-hidden=\"true\"] { margin-bottom: 0; }\n\n  label {\n    display: block;\n    margin-bottom: 6px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #12123f;\n  }\n\n  label span { color: #b00; margin-left: 2px; }\n\n  input,\n  textarea {\n    box-sizing: border-box;\n    width: 100%;\n    margin-bottom: 10px;\n    padding: 12px 14px;\n    border: 1px solid #ccd2dd;\n    border-radius: 3px;\n    background: $paper;\n    font: inherit;\n    font-size: 15px;\n    line-height: 1.5;\n    color: #12123f;\n\n    &:focus-visible { outline: 2px solid #12123f; outline-offset: 1px; border-color: #12123f; }\n  }\n\n  // Six rows on the inherited 25.6px leading, which is where the 180px comes\n  // from; `font: inherit` would otherwise reset it to the input's 1.5.\n  // `display: block` matters: an inline-level textarea sits on a baseline and\n  // its line box adds ~7px of descender space under it, which made the field\n  // 229px against the clone's 221 and pushed everything below it down.\n  textarea {\n    display: block;\n    resize: vertical;\n    min-height: 140px;\n    line-height: $text-body * $leading-body;\n  }\n\n  .el-submit {\n    display: inline-block;\n    padding: 14px 34px;\n    border: 0;\n    border-radius: 3px;\n    background: #12123f;\n    color: $paper;\n    font: inherit;\n    font-size: 15px;\n    line-height: $text-body * $leading-body;\n    font-weight: 600;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    cursor: pointer;\n\n    &:hover { background: #26265e; }\n  }\n\n  .el-disclaimer {\n    margin: 16px 0 0;\n    font-size: 12px;\n    line-height: 1.6;\n    color: #6b7280;\n  }\n\n  // The honeypot: present in the DOM for a bot to fill in, off-screen for\n  // everyone else. `display: none` would let a bot skip it.\n  [aria-hidden=\"true\"] label {\n    position: absolute;\n    left: -9999px;\n    height: 0;\n    overflow: hidden;\n  }\n}\n\n.section-inline {\n  margin-top: $space-xl;\n  padding-top: $space-lg;\n  border-top: 1px solid $line;\n}\n\n// ------------------------------------------------------------- thank you\n// The stub scripts/replace_forms.mjs writes onto the clone, reproduced: a\n// white card centred on mist, no chrome. Values are that file's.\n.thanks {\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  background: #eef1f4;\n  color: #12123f;\n}\n\n.thanks-card {\n  width: 100%;\n  max-width: 560px;\n  padding: 56px 48px;\n  text-align: center;\n  background: $paper;\n  box-shadow: 0 2px 24px rgba(18, 18, 63, 0.08);\n\n  img { max-width: 260px; height: auto; margin-bottom: 32px; }\n\n  h1 {\n    margin: 0 0 16px;\n    font-size: 28px;\n    line-height: $leading-tight;\n    font-weight: 600;\n    color: #12123f;\n  }\n\n  p {\n    margin: 0 0 12px;\n    font-size: $text-body;\n    line-height: 1.7;\n    color: #4b5563;\n  }\n}\n\n.thanks-tel { color: #12123f; font-weight: 600; text-decoration: none; }\n\n.thanks-home {\n  display: inline-block;\n  margin-top: 28px;\n  padding: 14px 34px;\n  background: #12123f;\n  color: $paper;\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  text-decoration: none;\n\n  &:hover { background: #26265e; color: $paper; }\n}\n\n// /contact/ on a phone: both panels stack, and the maps go full-bleed at 453px\n// rather than keeping their desktop box. After the base rules so it wins on\n// equal specificity.\n@include phone {\n  .contact-page { padding: 70px 0; }\n\n  .contact-main {\n    width: calc(100% - 24px);\n    padding: 90px 38px 60px;\n  }\n\n  .contact-main-grid {\n    grid-template-columns: minmax(0, 1fr);\n    gap: 103px;\n  }\n\n  .contact-details .contact-lede { max-width: none; }\n\n  .contact-form-side { padding-top: 0; margin: 0 -5px; }\n\n  .office-block {\n    grid-template-columns: minmax(0, 1fr);\n    width: 100%;\n    padding-bottom: 75px;\n  }\n\n  .office-map { height: 453px; }\n\n  .office-details { padding: 79px 30px 0; }\n}\n\n// ---------------------------------------------------------------- footer\n// Measured off the clone: white, 546px tall, four columns starting at x=160,\n// 466, 730 and 932 on a 1120px content band, and a rule with the copyright\n// line beneath. The height is the same on every page because the clone's\n// columns occupy a fixed band regardless of what is in them.\n.site-footer {\n  background: $paper;\n  color: $ink;\n  font-size: $text-body;\n  padding: 85px 0 0;\n}\n\n.footer-grid {\n  display: grid;\n  grid-template-columns: 306px 264px 202px 1fr;\n  width: min(1120px, calc(100% - #{$gutter * 2}));\n  margin: 0 auto;\n  gap: 0;\n  min-height: 281px;\n\n  // The clone's phone footer runs to a 10px gutter, not 20, and stacks into\n  // one column.\n  @include phone { width: calc(100% - 20px); }\n\n  @media (max-width: 980px) {\n    grid-template-columns: 1fr 1fr;\n    gap: $space-lg $space-md;\n    min-height: 0;\n  }\n  // Stacked, with the clone's own gaps between the four blocks: 45 to the\n  // first list, 20 between the lists, 55 to the notice. They are spacer\n  // widgets, not a rhythm, so they are transcribed one at a time.\n  @include phone {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n}\n\n.footer-col p { margin: 0 0 0.6rem; }\n\n.footer-brand {\n  display: block;\n  margin-bottom: 20px;\n\n  img { display: block; width: 251px; height: auto; }\n\n  // Full width on a phone: the clone runs the wordmark across the column\n  // rather than keeping it at its desktop size.\n  @include phone { img { width: 100%; } }\n}\n\n.footer-rows {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n// Icon at x=160, text at x=178 — an 18px column, which is narrow enough that\n// the glyph is drawn at 16 and centred in it.\n.footer-row {\n  display: flex;\n  align-items: flex-start;\n  margin-bottom: 5px;\n\n  address { font-style: normal; margin: 0; }\n  a { color: $ink; text-decoration: none; }\n  a:hover { text-decoration: underline; }\n}\n\n.footer-icon {\n  flex: none;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 18px;\n  height: 25.6px;\n  color: $navy;\n\n  svg { width: 16px; height: 16px; display: block; }\n}\n\n.footer-social {\n  margin: 21px 0 0;\n\n  @include phone { margin-top: 44px; }\n\n  a {\n    display: inline-grid;\n    place-items: center;\n    width: 36px;\n    height: 36px;\n    background: $navy;\n    color: $paper;\n  }\n}\n\n.footer-links {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  font-size: $text-small;\n\n  li { margin-bottom: 9px; }\n\n  // inline-block so the link's box is the 25.6px line rather than its 14px\n  // content area — the same 6px the header's nav links had.\n  a { display: inline-block; color: $ink; text-decoration: none; }\n  a:hover { color: $navy; text-decoration: underline; }\n\n  @include phone {\n    &:first-of-type { margin-top: 56px; }\n  }\n}\n\n// The notice column is 348px wide and its text is 230px — the clone sets the\n// paragraph width, not the column's, so the phone button above it is free to\n// be wider than the copy.\n.footer-notice {\n  font-size: $text-small;\n  color: $ink;\n\n  @include phone { margin-top: 35px; }\n\n  p { max-width: 230px; margin: 0 0 10px; line-height: 21px; text-align: justify; }\n\n  @include phone { p { max-width: 268px; } }\n}\n\n.footer-notice .footer-cta {\n  margin-bottom: 20px;\n\n  @include phone { margin-bottom: 4px; }\n}\n\n.footer-phone {\n  display: inline-block;\n  padding: 15px 40px;\n  border: 1px solid $navy;\n  border-radius: 1px;\n  color: $navy;\n  font-size: $text-small;\n  line-height: 14px;\n  font-weight: $weight-medium;\n  text-decoration: none;\n\n  &:hover { background: $navy; color: $paper; }\n}\n\n.disclaimer-heading {\n  font-weight: $weight-bold;\n  color: $ink;\n}\n\n.footer-bottom {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: $space-md;\n  width: min(1120px, calc(100% - #{$gutter * 2}));\n  margin: 110px auto 0;\n  padding: 35px 0 9px;\n\n  @include phone { width: calc(100% - 20px); }\n  border-top: 1px solid $line;\n  font-size: $text-small;\n  color: $ink;\n\n  p { margin: 0; }\n  a { color: $ink; text-decoration: none; }\n  a:hover { color: $navy; text-decoration: underline; }\n\n  // Still a row on a phone: the clone keeps the credit at the right edge\n  // rather than dropping it under the copyright, and leaves 96px above the\n  // rule instead of 110.\n  @include phone { margin-top: 96px; }\n}\n\n.footer-copyright { text-transform: uppercase; }\n"],"file":"main.css"}