/* Rathod Law Firm - site theme
Hand-written CSS. The palette, type scale and spacing scale are defined here
and nowhere else, so changing any of them is a change in one file. */
:root{
--dark:#222c30;
--para:#404c4f;
--light-gray:#f6f8f7;
--gray:#becbca;
--white:#fff;
/* Body text on a dark ground. Half opacity white measured 4.77:1, which clears
AA on paper and reads as grey mush at 14px. This is 9.3:1. */
--on-dark:#ffffffc7;
--black-10:#0000001a;
/* Display is a geometric sans, body is a text serif. The names say the role,
not the classification, because this pairing inverts the usual arrangement. */
--display:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
--body:"Source Serif 4",Georgia,"Times New Roman",serif;
/* Floor is 38px, not 40. Measured on a 375px screen: 40px broke the home h1
to five lines and pushed the hero to 764px, putting both buttons on the
fold. 38px is four lines and hands back 53px. */
--h1:clamp(38px, 1.494rem + 3.757vw, 72px);
--h2:clamp(31px, 1.549rem + 1.657vw, 46px);
--h3:clamp(25px, 1.329rem + 0.994vw, 34px);
--h4:26px; --h5:22px; --h6:18px;
--t-xxs:14px; --t-xs:16px; --t-s:18px; --t-m:20px; --t-l:22px; --t-xl:24px;
--r-xs:4px; --r-s:6px; --r-m:8px; --r-l:32px; --r-pill:100px;
/* Photographs, which need more than a control does to read as rounded at all.
Applied to contained media only. A full-bleed section background (the hero,
the closing CTA, a page banner) stays square: it runs edge to edge and a
rounded corner on a full-width band reads as a rendering fault. */
--r-img:12px;
--container:1200px;
--section:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{
-webkit-text-size-adjust:100%;
/* The header is sticky, so an in-page anchor otherwise lands with its
target sitting underneath it. 82px is the header, 46px the preview
ribbon; the mobile header is shorter, so this is generous there. */
scroll-padding-top:100px
}
body{
margin:0;background:var(--white);color:var(--para);
font:400 var(--t-xs)/1.5 var(--body);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6{
font-family:var(--display);color:var(--dark);
font-weight:500;margin:0;line-height:1.1;
}
h1{font-size:var(--h1);letter-spacing:-1px}
h2{font-size:var(--h2);line-height:1.2;letter-spacing:-.5px}
h3{font-size:var(--h3);line-height:1.2}
h4{font-size:var(--h4)}
h5{font-size:var(--h5)}
h6{font-size:var(--h6)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}
.section{padding:var(--section) 0;position:relative}
.section.tight{padding:56px 0}
.dark{background:var(--dark);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3,.dark h4,.dark h5,.dark h6{color:var(--white)}
.tinted{background:var(--light-gray)}
/* The colour of whatever a block is sitting on, so anything that has to blend
into its own background can ask for it rather than assume white. Two things
assumed white and painted onto a tinted section: the covers that hide the
comparison table's scroll shadows, and the ring around each timeline marker.
`--ground-0` is the same colour at zero alpha, for gradient stops. */
:root{--ground:#fff;--ground-0:#ffffff00}
.tinted{--ground:var(--light-gray);--ground-0:#f6f8f700}
/* eyebrow label */
.eyebrow{
font-size:var(--t-xxs);letter-spacing:1.1px;text-transform:uppercase;
font-weight:500;color:var(--para);margin:0 0 20px
}
/* .hero paints var(--dark) directly rather than carrying the .dark class, so
the dark override below never reached it and the eyebrow sat at #404c4f on
#222c30: 1.61:1, effectively invisible. Any section that paints the dark
ground needs the light eyebrow, so both selectors carry it. */
.dark .eyebrow,.hero .eyebrow,.ap-head .eyebrow{color:var(--gray)}
/* One measure for running prose. Some blocks already held a line length and
several held none, so the same page ran at 81 characters in the opening and
172 in a bare paragraph. Anything past about 75 characters costs the reader
the return sweep to the next line. These are ch values, and ch is the width
of a zero rather than of an average letter, so they measure a little wider
than they read. Verified by canvas metrics rather than by eye. */
:root{--measure:60ch}
.lede{font-size:var(--t-m);line-height:1.5;max-width:62ch}
.muted{color:var(--para)}
.dark .muted{color:var(--on-dark)}
/* buttons */
.btn{
display:inline-flex;align-items:center;gap:8px;
padding:16px 24px;border-radius:var(--r-s);
font-size:var(--t-xs);font-weight:500;line-height:1;
border:1px solid transparent;cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--dark);background-image:linear-gradient(128deg,var(--dark),var(--para));color:#fff}
.btn-primary:hover{box-shadow:0 10px 24px #222c3040}
.btn-light{background:#fff;border-color:#fff;color:var(--dark)}
.btn-light:hover{box-shadow:0 10px 24px #0003}
.btn-outline{background:transparent;border-color:var(--black-10);color:var(--dark)}
.btn-outline:hover{border-color:var(--dark)}
/* any dark-background context, not just .dark sections */
.dark .btn-outline,.hero .btn-outline,.cta .btn-outline,.page-head .btn-outline,
.process-list .btn-outline,.site-footer .btn-outline{border-color:#ffffff59;color:#fff}
.dark .btn-outline:hover,.hero .btn-outline:hover,.cta .btn-outline:hover,
.page-head .btn-outline:hover,.process-list .btn-outline:hover{border-color:#fff;background:#ffffff14}
/* ---------- header ---------- */
.site-header{
position:sticky;top:0;z-index:60;background:var(--dark);
border-bottom:1px solid #ffffff14
}
.nav{display:flex;align-items:center;gap:32px;height:82px}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;flex:0 0 auto}
/* The logo file is already a full lockup: the firm name in script, "Barrister &
Solicitor" beneath it, and the mark. Setting "Rathod Law / Professional
Corporation" in type beside it said the same thing twice, and squeezed both
into wrapping at anything under about 1200px. The logo carries it alone, and
the alt text carries the name for anything that cannot see it. */
.brand img{height:46px;width:auto}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:var(--t-xs);color:#fff;opacity:.85;transition:opacity .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{opacity:1}
.nav-links a[aria-current="page"]{font-weight:500}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{color:#fff;font-size:var(--t-xs);white-space:nowrap;opacity:.85}
.nav-toggle{
display:none;place-items:center;background:none;border:0;color:#fff;
font-size:24px;line-height:1;cursor:pointer;padding:0;
min-width:44px;min-height:44px;margin-right:-10px
}
/* ---------- hero ---------- */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,#222c30 0%,#222c30e6 42%,#222c3055 70%,#222c3033 100%)
}
/* 660px was cut for Playfair. Montserrat is a wide geometric face, so the same
column broke the h1 to four lines. The heading gets 800px, the lede keeps a
readable measure of its own. */
.hero-inner{position:relative;padding:110px 0 96px;max-width:800px}
.hero h1{color:#fff;margin-bottom:22px}
.hero .lede{color:#ffffffcc;margin-bottom:32px;max-width:620px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-badges{
position:relative;display:flex;flex-wrap:wrap;gap:12px;
margin-top:52px;padding-top:28px;border-top:1px solid #ffffff26
}
.badge{
display:flex;align-items:center;gap:8px;color:#fff;font-size:var(--t-xxs);
background:#ffffff14;border:1px solid #ffffff1f;border-radius:var(--r-pill);padding:9px 16px
}
/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.stat{padding:28px 0}
.stat .num{font-family:var(--display);font-size:56px;line-height:1;color:var(--dark)}
.dark .stat .num{color:#fff}
.stat .lbl{margin-top:10px;font-size:var(--t-xxs);letter-spacing:.8px;text-transform:uppercase}
/* ---------- section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:44px}
.sec-head h2{max-width:24ch}
.sec-head .lede{margin-top:14px}
/* ---------- service cards ----------
3 columns, not 4: there are 6 practice areas, so 3 gives two full rows
with no empty cells. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--black-10)}
.card{
padding:32px 26px;border-right:1px solid var(--black-10);
border-bottom:1px solid var(--black-10);
display:flex;flex-direction:column;min-height:300px;background:#fff;
transition:background .2s
}
.card:first-child{border-left:1px solid var(--black-10)}
.card:hover{background:var(--light-gray)}
.card .idx{font-family:var(--display);font-size:var(--t-m);color:var(--para);opacity:.55;margin-bottom:auto}
.card h3{font-size:var(--h5);margin:26px 0 12px}
.card p{font-size:var(--t-xxs);line-height:1.55}
.card .more{margin-top:18px;font-size:var(--t-xxs);font-weight:500;color:var(--dark);display:inline-flex;gap:6px}
.card.feature{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
.card.feature:hover{background:#1b2427}
.card.feature h3{color:#fff}
.card.feature .idx{color:#ffffff66}
.card.feature .more{color:#fff}
/* ---------- process ---------- */
.process{display:grid;grid-template-columns:1.05fr .95fr;gap:0;align-items:stretch}
.process-media img{width:100%;height:100%;object-fit:cover;min-height:520px}
.process-list{background:var(--dark);padding:52px 44px;display:flex;flex-direction:column;justify-content:center}
.step{display:grid;grid-template-columns:52px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid #ffffff1a}
.step:last-child{border-bottom:0}
.step .n{font-family:var(--display);font-size:var(--t-m);color:var(--gray)}
.step h3,.step h4{color:#fff;font-size:var(--t-l);margin-bottom:6px}
.step p{color:var(--on-dark);font-size:var(--t-xs);line-height:1.6;max-width:var(--measure)}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split img{border-radius:var(--r-img)}
.checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:var(--t-xs)}
.checks .tick{
width:22px;height:22px;border-radius:var(--r-pill);background:var(--dark);color:#fff;
display:grid;place-items:center;font-size:11px
}
.dark .checks .tick{background:#fff;color:var(--dark)}
/* ---------- note takeaways ----------
Three lines of fact at the head of a rule-change note, above the prose. It is
the first thing a reader in a hurry reads and the first block an answer engine
reaches, which is the whole reason it exists.
Deliberately not the .notice block. That one opens with a heading and a lede
and is arguing something. This states what changed and stops. The dash marker
is drawn rather than a list bullet so it sits on the cap height of the first
line instead of the middle of it. */
.takeaways{
border:1px solid var(--black-10);background:var(--light-gray);
padding:22px 24px;margin:0 0 34px
}
.takeaways .eyebrow{margin:0 0 12px}
.takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.takeaways li{
position:relative;padding-left:20px;font-size:var(--t-xs);
color:var(--dark);line-height:1.55;max-width:var(--measure)
}
.takeaways li::before{
content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--gray)
}
/* ---------- team ---------- */
/* Ten people do not divide by four. The two empty cells left at the end of the
last row read as colleagues whose cards failed to load rather than as the end
of the list, and the count is not something design gets to choose: they are
real people.
Wrapping flex instead of grid, with the short last line centred. Full rows are
identical to the grid they replace, because the basis is the exact track width
rather than a percentage: four tracks and the three 24px gaps between them. A
full row has no free space, so centring cannot move it. Only the short line
moves, and a centred short line reads as an ending. Shrink is left enabled so
a sub-pixel rounding error takes a fraction off each card instead of wrapping
the fourth one onto its own row. */
.team-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center}
.team-grid>.member{flex:0 1 calc((100% - 72px)/4)}
.member{background:var(--light-gray);border-radius:var(--r-img);overflow:hidden;transition:transform .2s,box-shadow .2s}
.member:hover{transform:translateY(-4px);box-shadow:0 16px 40px #222c3021}
/* Team headshots come from different shoots with white, grey and dark
backgrounds. Desaturating evens the grid out; colour returns on hover. */
.member .photo{aspect-ratio:4/5;overflow:hidden;background:var(--dark)}
.member .photo img{
width:100%;height:100%;object-fit:cover;object-position:top center;
filter:grayscale(1) contrast(1.04) brightness(.97);
transition:filter .25s ease,transform .35s ease
}
.member:hover .photo img{filter:none;transform:scale(1.03)}
.member .info{padding:18px 20px 22px}
.member h3,.member h4{font-size:var(--t-l);margin-bottom:4px}
.member .role{font-size:var(--t-xxs);color:var(--para)}
/* ---------- quote ---------- */
.quote{
background:var(--light-gray);border-radius:var(--r-s);padding:44px;
display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center
}
.quote blockquote{margin:0;font-family:var(--display);font-size:var(--h4);line-height:1.35;color:var(--dark)}
.quote .who{margin-top:20px;font-size:var(--t-xxs)}
.quote .who strong{display:block;font-size:var(--t-xs);color:var(--dark);font-weight:500}
/* ---------- faq ---------- */
/* ---------- FAQ accordion ----------
One component, used on the home page, About, the FAQ page and the immigration
spokes. Numbering comes from a CSS counter rather than the markup, so every
instance numbers itself and a reordered list cannot go out of sequence.
The numerals are the same serif treatment as the practice cards and the
approach steps, which is what ties this to the rest of the system. */
.faq{counter-reset:faq}
.faq details{
counter-increment:faq;
border:1px solid var(--black-10);border-radius:var(--r-s);
margin-bottom:12px;background:transparent;
transition:background .25s ease,border-color .25s ease
}
.faq details:hover{border-color:#00000029}
.faq details[open]{background:var(--light-gray);border-color:#00000021}
.faq summary{
list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:flex-start;
gap:18px;font-family:var(--display);font-size:var(--t-l);line-height:1.3;color:var(--dark)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--dark);outline-offset:-3px;border-radius:var(--r-s)}
.faq summary::before{
content:counter(faq,decimal-leading-zero) ".";
flex:0 0 42px;font-family:var(--display);font-size:var(--t-s);
color:var(--para);line-height:1.55
}
/* The control is a real circle rather than a bare glyph, and the plus rotates
into a cross on open instead of swapping character, so the state change reads
as one movement. */
.faq summary::after{
content:"+";margin-left:auto;flex:0 0 auto;
width:34px;height:34px;border-radius:100px;border:1px solid var(--black-10);
display:grid;place-items:center;
font-family:var(--body);font-size:20px;line-height:1;color:var(--para);
transition:transform .25s ease,background .2s ease,color .2s ease,border-color .2s ease
}
.faq details[open] summary::after{
transform:rotate(45deg);background:var(--dark);border-color:var(--dark);color:#fff
}
.faq .ans{padding:0 24px 24px 84px;max-width:var(--measure);font-size:var(--t-xs);color:var(--para)}
/* An open answer held one column of about 70 characters inside a 992px card, so
roughly 450px of the row sat empty and the answer ran twice as tall as it
needed to. On a wide viewport it sets in two columns instead: the same
comfortable measure, half the height, and the width actually used.
Guarded on there being a second paragraph. Several answers are a single
paragraph, and a single paragraph in two columns either splits mid-thought or
leaves the second column empty. Paragraphs never break across the gutter. */
/* The measure keeps a line readable, but on a wide screen it also leaves the
right half of the section empty and stretches the answer downward. Two
columns spend that width and roughly halve the height. build.py decides
which answers are long enough to earn it and stamps .ans-2col.
break-inside applies only where there is more than one paragraph. On a
single paragraph it would push the whole block into column one and undo
the split. */
@media (min-width:992px){
/* The 84px left indent clears the number column. Mirroring it on the right
clears the close button, which is 34px of the summary's own right edge:
without this the second column's lines run underneath it.
No column rule here. A hairline was tried and read as a divider between two
separate answers rather than a column boundary. The gutter carries the
break on its own. */
/* A long single paragraph cannot be columned, so it widens. 760px is measured,
not guessed: the 60ch default resolves to 400px of text here, which carries
48 characters a line, and 45 to 75 is the readable band. 760px leaves 652px
of text at 67 characters, and takes the /practice-areas/ answer from seven
lines to five. Going wider does shorten it further, but 997px is three lines
at 112 characters a line, where the eye loses its place on the return sweep.
A genuinely short block with a good measure needs two paragraphs, not more
width. */
.faq .ans.ans-wide{max-width:760px}
/* The :has() guard is deliberate belt and braces. ans_class() no longer
stamps the class on a single paragraph, and this means the stylesheet
refuses to column one even if something stamps it again: a single block in
two columns is read bottom-left then top-right, mid-sentence. */
.faq .ans.ans-2col:has(p:nth-of-type(2)){
max-width:none;padding-right:84px;columns:2;column-gap:56px
}
.faq .ans.ans-2col:has(p:nth-of-type(2)) p{break-inside:avoid}
}
@media (max-width:600px){
.faq summary{padding:18px 16px;gap:12px;font-size:var(--t-s)}
.faq summary::before{flex-basis:30px;font-size:var(--t-xxs)}
.faq summary::after{width:28px;height:28px;font-size:17px}
/* The 58px indent aligns the answer under the question text, which is right
on a wide card and costs 19 per cent of the width on a 310px one. The
number stays in the summary row; the answer uses the card. */
.faq .ans{padding:0 16px 20px 16px}
}
/* Dark surfaces: same component, inverted. */
.faq.on-dark details{border-color:#ffffff26;background:transparent}
.faq.on-dark details:hover{border-color:#ffffff40}
.faq.on-dark details[open]{background:#ffffff0f;border-color:#ffffff33}
.faq.on-dark summary{color:#fff}
.faq.on-dark summary::before{color:#ffffff8c}
.faq.on-dark summary::after{border-color:#ffffff33;color:#ffffffb3}
.faq.on-dark details[open] summary::after{background:#fff;border-color:#fff;color:var(--dark)}
.faq.on-dark .ans{color:#ffffffa8}
/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.cta-media{position:absolute;inset:0}
.cta-media img{width:100%;height:100%;object-fit:cover}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#222c30f2 0%,#222c30cc 55%,#222c3066 100%)}
.cta-inner{position:relative;padding:84px 0;max-width:620px}
.cta h2{color:#fff;margin-bottom:16px}
.cta p{color:#ffffffcc;margin-bottom:28px}
/* ---------- page header (inner pages) ---------- */
.page-head{background:var(--dark);color:#fff;padding:72px 0 64px}
/* A banner carrying a photograph needs room for it to read as a photograph
rather than a stripe. The reference runs these tall. */
.page-head.has-media{padding:118px 0 104px}
.page-head.has-media h1{font-size:var(--h1);max-width:18ch;line-height:1.08}
@media (max-width:767px){.page-head.has-media{padding:72px 0 64px}}
.page-head h1{color:#fff;font-size:var(--h2);margin-bottom:14px}
.page-head .crumbs{font-size:var(--t-xxs);color:var(--gray)}
.page-head .crumbs a:hover{color:#fff}
/* ---------- prose ---------- */
.prose{max-width:72ch;font-size:var(--t-xs);line-height:1.65}
/* A run of question headings is the page's structure, not a list to be hidden
behind clicks: an answer engine segments a page by its headings, so these stay
in the outline. What was wrong was the setting, not the markup. A hairline and
real breathing room above each question turn a wall of text into sections you
can find your way down. The first heading in a block does not get the rule,
or the section appears to start with a divider. */
.prose h2{
font-size:var(--h3);margin:56px 0 16px;padding-top:30px;
border-top:1px solid var(--black-10);max-width:29ch;line-height:1.2
}
.prose > h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:var(--h5);margin:34px 0 10px}
.prose h2 + p{font-size:var(--t-s);color:var(--dark)}
.prose ul{padding-left:20px;margin:0 0 1em}
.prose li{margin-bottom:8px}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.office{padding:26px 0;border-bottom:1px solid var(--black-10)}
.office h3,.office h4{font-size:var(--t-l);margin-bottom:8px}
.office p{font-size:var(--t-xs);margin-bottom:6px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:var(--t-xxs);font-weight:500;color:var(--dark)}
.field input,.field textarea,.field select{
font:400 var(--t-xs)/1.4 var(--body);color:var(--dark);
padding:13px 14px;border:1px solid var(--black-10);border-radius:var(--r-s);background:#fff
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--dark);outline-offset:1px}
/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:var(--on-dark);padding:72px 0 28px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px;border-bottom:1px solid #ffffff1a}
.site-footer h5{color:#fff;font-family:var(--body);font-size:var(--t-xxs);letter-spacing:1.1px;text-transform:uppercase;font-weight:500;margin-bottom:18px}
.site-footer a:hover{color:#fff}
.foot-links{display:grid;gap:10px;font-size:var(--t-xxs)}
.foot-brand img{height:40px;margin-bottom:16px}
.foot-brand p{font-size:var(--t-xxs);max-width:34ch}
.foot-bottom{display:flex;justify-content:space-between;gap:24px;padding-top:22px;font-size:var(--t-xxs);flex-wrap:wrap}
/* ---------- trust strip ---------- */
.trust{border-bottom:1px solid var(--black-10);background:#fff}
.trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust-item{padding:26px 24px 26px 0;border-right:1px solid var(--black-10)}
.trust-item:last-child{border-right:0;padding-right:0}
.trust-item .trust-h{font-family:var(--body);font-size:var(--t-xs);font-weight:500;color:var(--dark);margin-bottom:6px}
.trust-item p{font-size:var(--t-xxs);line-height:1.5;color:var(--para)}
/* ---------- reviews ---------- */
.rating-block{
display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;
border:1px solid var(--black-10);border-radius:var(--r-s);padding:36px 40px
}
.rating-score{text-align:center;padding-right:48px;border-right:1px solid var(--black-10)}
.rating-num{font-family:var(--display);font-size:64px;line-height:1;color:var(--dark)}
/* Google's star gold is #FBBC04 and it is right on a dark ground. On a white
card it measures 1.7:1, and these stars are the rating rather than an
ornament, so on light grounds they take a deeper gold that still reads as
gold. The dark-ground rule below keeps the original. */
:root{--gold:#FBBC04;--gold-on-light:#8a6100}
.rating-stars{margin:10px 0 8px;font-size:20px;color:var(--gold-on-light);letter-spacing:2px}
.rating-stars .star.half{opacity:.45}
.rating-stars .star.empty{color:var(--gray);opacity:1}
.rating-meta{font-size:var(--t-xxs);color:var(--para);white-space:nowrap}
.rating-body p{font-size:var(--t-xs);max-width:56ch;margin-bottom:20px}
@media (max-width:767px){
.rating-block{grid-template-columns:1fr;gap:24px;padding:26px}
.rating-score{padding:0 0 24px;border-right:0;border-bottom:1px solid var(--black-10)}
}
/* ---------- locations ---------- */
.locations{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.loc{
border:1px solid var(--black-10);border-radius:var(--r-s);padding:30px;
background:#fff;display:flex;flex-direction:column;gap:10px
}
.loc h3{font-size:var(--h5)}
.loc .addr{font-size:var(--t-xs);line-height:1.6}
.loc .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:auto;padding-top:14px;font-size:var(--t-xxs)}
.loc .row a{font-weight:500;color:var(--dark);text-decoration:underline;text-underline-offset:3px}
/* footer headings: real h2s, styled small, so heading order never skips */
.foot-h{
color:#fff;font-family:var(--body);font-size:var(--t-xxs);letter-spacing:1.1px;
text-transform:uppercase;font-weight:500;margin:0 0 18px;line-height:1.4
}
/* visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:2px solid currentColor;outline-offset:3px;border-radius:2px
}
.hero a:focus-visible,.cta a:focus-visible,.site-header a:focus-visible,
.site-footer a:focus-visible{outline-color:#fff}
.skip-link{
position:absolute;left:-9999px;top:0;background:#fff;color:var(--dark);
padding:12px 18px;z-index:100;border-radius:0 0 var(--r-s) 0;font-weight:500
}
.skip-link:focus{left:0}
/* preview ribbon so this is never mistaken for production */
.preview-flag{
background:#3d2f13;color:#f7d774;font-size:12px;letter-spacing:.4px;
text-align:center;padding:7px 16px;font-family:var(--body)
}
.preview-flag strong{color:#ffe9a8}
/* ---------- responsive ---------- */
@media (max-width:991px){
:root{--section:64px}
.cards{grid-template-columns:repeat(2,1fr)}
.card:nth-child(odd){border-left:1px solid var(--black-10)}
.trust-row{grid-template-columns:repeat(2,1fr)}
.trust-item{padding-right:24px}
.trust-item:nth-child(2n){border-right:0;padding-right:0}
.locations{grid-template-columns:1fr}
.process{grid-template-columns:1fr}
.process-media img{min-height:320px}
.split{grid-template-columns:1fr;gap:36px}
.contact-grid{grid-template-columns:1fr;gap:40px}
.foot-top{grid-template-columns:1fr 1fr;gap:32px}
.nav-links,.nav-phone{display:none}
.nav-toggle{display:grid}
.nav.open .nav-links{
display:flex;position:absolute;left:0;right:0;top:100%;background:var(--dark);
flex-direction:column;align-items:flex-start;gap:0;padding:12px 24px 20px;border-bottom:1px solid #ffffff1a
}
.nav.open .nav-links a{padding:12px 0;width:100%;border-bottom:1px solid #ffffff14}
}
@media (max-width:767px){
:root{--section:52px}
.stats{grid-template-columns:1fr;gap:0}
.stat{padding:20px 0;border-bottom:1px solid var(--black-10)}
.cards{grid-template-columns:1fr}
.card{border-left:1px solid var(--black-10)!important;min-height:0}
.trust-row{grid-template-columns:1fr}
.trust-item{border-right:0;border-bottom:1px solid var(--black-10);padding:20px 0}
.trust-item:last-child{border-bottom:0}
.quote{grid-template-columns:1fr;padding:28px}
.sec-head{flex-direction:column;align-items:flex-start;gap:18px}
/* No .foot-top rule here. There was one asking for a single column, and
`.site-footer .foot-top` below outranks it at (0,2,0), so it never applied
and only made the file misleading. The mobile footer is two columns; see
that rule for what happens to an odd last block. */
.hero-inner{padding:72px 0 64px}
}
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.btn:hover,.member:hover{transform:none}
}
/* ---------- card link overlay ----------
The standard bans wrapping a card's title and description in one anchor,
because the anchor text ends up hundreds of characters long and the keyword
drowns. The link goes on the title; this overlay keeps the whole card
clickable without adding a second anchor. */
.card,.member{position:relative}
.card h3 a,.member h3 a{text-decoration:none;color:inherit}
.card h3 a::after,.member h3 a::after{content:"";position:absolute;inset:0}
.card h3 a:focus-visible::after,.member h3 a:focus-visible::after{outline:2px solid currentColor;outline-offset:-3px}
.member .info h3{font-size:var(--t-l);margin-bottom:4px}
.foot-offices p{font-size:var(--t-xxs);margin-bottom:10px}
.foot-offices strong{color:#fff;font-weight:500}
.crumbs{font-size:var(--t-xxs);color:var(--gray)}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:#fff}
.nav-cta .btn{white-space:nowrap}
/* ---------------------------------------------------------------- reviews
Home page only. One horizontal track that scrolls itself, cards at a fixed
380px so six reviews of different lengths read as one row. The quotation is
complete in the markup and clamped only visually. */
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.revs{
--rev-gap:20px;
margin-top:32px;overflow:hidden;
/* Fade the two edges so a card entering the viewport is not sliced off. */
-webkit-mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 60px,#000 calc(100% - 60px),transparent)
}
.revs-track{
list-style:none;margin:0;padding:4px 0;
display:flex;gap:var(--rev-gap);width:max-content;
animation:rev-marquee 70s linear infinite
}
/* WCAG 2.2.2: anything that moves on its own for more than five seconds needs a
way to stop it. Hover covers the mouse, focus-within covers the keyboard. */
.revs:hover .revs-track,
.revs:focus-within .revs-track{animation-play-state:paused}
/* Half the track is the duplicate, so shifting by half the width plus half a gap
lands the copy exactly where the original started. */
@keyframes rev-marquee{
from{transform:translateX(0)}
to{transform:translateX(calc(-50% - var(--rev-gap) / 2))}
}
.rev{
flex:0 0 380px;display:flex;flex-direction:column;gap:14px;
background:var(--light-gray);border:1px solid var(--black-10);
border-radius:var(--r-s);padding:22px
}
.rev-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
/* Source mark. The Google G is the only colour in this component, and on the
home page the only colour on the screen. That is the point: the eye lands on
the thing that says where the words came from. */
.src-mark{
display:inline-flex;align-items:center;gap:7px;align-self:start;
font-size:13px;font-weight:500;letter-spacing:.2px;color:var(--para);
background:#fff;border:1px solid var(--black-10);border-radius:100px;padding:5px 11px 5px 8px
}
.src-mark img{display:block}
/* Tick beside the name. Green is taken from the Google mark's own palette so the
two signals read as one, rather than introducing a third colour. */
.vtick{display:inline-flex;vertical-align:-2px;margin-left:6px;color:#34A853}
.vtick svg{display:block}
/* The global p rule adds 15px below every paragraph, which made the name and date
stack 51px tall against a 36px avatar and dropped the circle out of line. */
.rev-head p{margin:0}
.rev-av{
display:grid;place-items:center;width:36px;height:36px;border-radius:100px;
color:#fff;font-size:15px;font-weight:600;line-height:1;
/* Same 128deg sweep the primary button uses, running from the card's own hue
into the theme dark, so six different colours still read as one family. */
background:linear-gradient(128deg,var(--av,#3a4a50),var(--dark))
}
/* Muted, desaturated hues rather than a bright palette: this sits under a serif
masthead on a law firm site. Every one clears 7:1 against white, so the letter
stays legible even though it is decorative. */
.rev-av.av1{--av:#2f4858} /* slate */
.rev-av.av2{--av:#1f5c50} /* teal */
.rev-av.av3{--av:#6d4c3d} /* clay */
.rev-av.av4{--av:#43385f} /* aubergine */
.rev-av.av5{--av:#6b4f1c} /* bronze */
.rev-av.av6{--av:#6b2f3f} /* wine */
.rev-who{font-weight:600;color:var(--dark);font-size:15px;line-height:1.3}
.rev-meta{font-size:13px;color:var(--para);line-height:1.3}
/* Review stars in Google's own star gold, #FBBC04, which is already one of the
four colours in the mark sitting directly above them. Reviews read as gold
stars everywhere people meet them, and a monochrome star row was the thing
making these look like text rather than a rating. */
.rev-src{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.rev-stars{color:var(--gold-on-light);font-size:15px;letter-spacing:2px;margin:0;line-height:1}
.rev-text{
margin:0;border:0;padding:0;font-size:15px;line-height:1.55;color:var(--para);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;overflow:hidden
}
.revnote{margin-top:22px;font-size:13px;max-width:70ch}
@media (max-width:479px){
.rev{flex-basis:300px}
/* Pre-existing header bug, found while checking the review row: below 480px the
brand wordmark, the CTA and the menu button together are wider than the
container, so the button sat 39px off the right edge and every page scrolled
sideways. Dropping the wordmark to the logo mark gives all three room. */
.nav-cta .btn{padding:12px 16px;font-size:14px}
}
/* The global reduced-motion block above already kills the animation with
!important. All this needs to add is a way to reach the rest of the row once
it stops, otherwise the reader is stranded on the first two cards. */
@media (prefers-reduced-motion:reduce){
.revs{overflow-x:auto}
}
/* Team members whose photograph has not arrived. The tile keeps the photo's
footprint so the grid stays even, but it stops imitating a portrait: a flat
ground rather than a gradient, two initials rather than one, and a rule under
them. That lockup is a monogram, which is a deliberate thing to put on a
card. A single large letter on a tinted gradient is what an application draws
when an image fails, and it reads as a fault however well it is centred.
The letterspacing needs the matching trailing pad or the pair sits left of
centre by half a space. */
.member .photo.mono{display:grid;place-items:center;background:var(--dark)}
.member .photo.mono span{
position:relative;font-family:var(--display);font-size:42px;line-height:1;color:#fff;
letter-spacing:.14em;padding:0 0 18px .14em
}
.member .photo.mono span::after{
content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
width:30px;height:1px;background:#ffffff4d
}
/* Team members with no bio page yet. Dropping the hover lift and the shadow is
what makes the card honestly non-interactive, so a reader does not try to
click through to a page that is not there. R30 in the gate depends on this. */
.member.listed{transition:none}
.member.listed:hover{transform:none;box-shadow:none}
.member.listed:hover .photo img{filter:grayscale(1) contrast(1.04) brightness(.97);transform:none}
/* LinkedIn line on team cards and bios. Small, and marked rel="me" so the link
reads as an identity claim rather than an endorsement. */
.member .li{margin-top:8px;font-size:13px}
.member .li a{color:var(--para);text-decoration:underline;text-underline-offset:2px}
.member .li a:hover{color:var(--dark)}
.split .li{margin-top:14px;font-size:var(--t-xxs)}
/* ---------------------------------------------------------------- hub extras */
.byline{
font-size:13px;color:var(--para);border-left:2px solid var(--gray);
padding-left:14px;margin:0 0 28px
}
.byline a{color:var(--dark);text-decoration:underline;text-underline-offset:2px}
/* Service list on a practice hub. Deliberately not a card: an entry with no page
yet has no link, and a card would invite a click that goes nowhere. */
.svc-list{list-style:none;margin:24px 0 8px;padding:0;
display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.svc-list li{border-top:1px solid var(--black-10);padding-top:14px}
.svc-list h3{font-size:var(--t-s);margin-bottom:6px}
.svc-list h3 a{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
.svc-list h3 span{color:var(--para)}
.svc-list p{font-size:var(--t-xxs);color:var(--para);margin:0}
@media (max-width:767px){.svc-list{grid-template-columns:1fr}}
/* ---------------------------------------------------------------- spoke pages
Two components, both earning their place on pages read by someone who has just
been refused and is looking for one number. */
/* The filing deadline. It was a dark card inside a 736px prose column; it is
now a full width dark band directly under the opening, so the three figures
are the first thing on the page after the heading. The card styling goes with
it: on a band, a border and a radius are a card pretending to still be one. */
.dl-rows{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
margin:36px 0 0;border-top:1px solid #ffffff26
}
.dl-row{padding:28px 32px 26px;border-left:1px solid #ffffff26}
.dl-row:first-child{padding-left:0;border-left:0}
.dl-n{display:block;font-family:var(--display);font-size:56px;line-height:1;color:#fff}
.dl-t{display:block;margin-top:12px;font-size:var(--t-xxs);color:#ffffffb3;line-height:1.45}
/* The rule above the note belongs to the row grid, not to the note. On the note
it inherited the 88ch measure and stopped two thirds of the way across, which
reads as a rule that ran out rather than as a divider. */
.dl-rows{border-bottom:1px solid #ffffff26}
.dl-note{font-size:13px;color:#ffffff99;padding-top:18px;margin:0;max-width:88ch}
@media (max-width:840px){
.dl-rows{grid-template-columns:1fr;gap:0;margin-top:28px}
/* wrap, because the numeral is not always short. "60 days" fits beside its
label on a 320px screen and "10 categories" does not, and without wrapping
the label was pushed off the side of the page. */
.dl-row{padding:20px 0;border-left:0;border-bottom:1px solid #ffffff26;display:flex;
align-items:baseline;gap:6px 18px;flex-wrap:wrap}
.dl-t{min-width:0;flex:1 1 auto}
.dl-row:first-child{padding-left:0}
.dl-row:last-child{border-bottom:0}
.dl-n{font-size:40px;flex:0 0 auto;max-width:100%}
.dl-t{margin-top:0}
}
/* Comparison table. Wrapped so a narrow screen scrolls the table rather than
the page, which is the rule for any wide block in this build.
The two shadows are painted with background-attachment:scroll over two white
covers painted with background-attachment:local, so each shadow only shows
while there is table left to scroll to on that side. No script involved. It
matters on a phone, where nothing else tells you the table continues. */
.table-wrap{
overflow-x:auto;margin:22px 0 30px;
-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
background:
linear-gradient(90deg,var(--ground) 40%,var(--ground-0)) left/34px 100% no-repeat local,
linear-gradient(270deg,var(--ground) 40%,var(--ground-0)) right/34px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%,#00000021,#00000000) left/12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%,#00000021,#00000000) right/12px 100% no-repeat scroll
}
/* Capped, because the widest cell in the two column version is about sixty
characters and the container is 1152px. Left to fill it, each column ran 475px
wide holding 320px of text, so the eye crossed 150px of nothing between one
answer and the next. The four column version needs the room and keeps it. */
.compare{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--t-xxs)}
.compare:not(.wide){max-width:880px}
.compare th,.compare td{
text-align:left;vertical-align:top;padding:14px 16px;
border-bottom:1px solid var(--black-10)
}
/* Filled header row. var(--dark), not var(--light-gray): three of the ten
compare tables sit on a tinted section, and a light-gray fill on a
light-gray ground is an invisible header. Dark reads on both grounds and
needs no per-page exception. The bottom rule goes with it, the fill is the
separation now. */
.compare thead th{
font-size:13px;letter-spacing:.5px;text-transform:uppercase;
background:var(--dark);color:#fff;border-bottom:0
}
/* Where the first column is the row labels its header cell is empty, and
compare_block emits a | rather than an | for it. Without this the fill
stopped at the second column and left a light notch in the top-left corner of
the bar. Four of the ten tables are that shape. */
.compare thead td{background:var(--dark);border-bottom:0}
.compare tbody th{font-weight:600;color:var(--dark);width:24%}
.compare td{color:var(--para)}
/* A hairline between columns, so the eye can find the same column on the next
row down. Without it a wide row reads as one long sentence with gaps in it. */
.compare tbody td + td,.compare thead th + th,
.compare tbody td:first-of-type,.compare thead th:first-of-type{
border-left:1px solid var(--black-10)
}
/* The column hairline has to invert inside the filled header: a 10% black line
on var(--dark) is not a line, it is nothing. And the header's own first cell
takes no left border at all, because there is no column to its left. */
.compare thead th + th{border-left-color:#ffffff2e}
.compare thead th:first-of-type{border-left:0}
/* A linked row label. Without this it inherited var(--dark) at weight 600 with
no underline, which is exactly what the unlinked labels in the other nine
tables look like: an affordance nobody can see is worse than none at all.
Underlined at the 3px offset the rest of the site's in-content links use. */
.compare tbody th a{
color:var(--dark);text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--gray);transition:text-decoration-color .18s
}
.compare tbody th a:hover,.compare tbody th a:focus-visible{
text-decoration-color:var(--dark)
}
/* The cell is 40px of text; the row is taller than that but the target is the
anchor. Padding it out to the same 44px floor the buttons and chips take. */
@media (pointer:coarse){
.compare tbody th a{display:inline-block;min-height:44px;padding-block:6px}
}
.compare tbody tr:hover td,.compare tbody tr:hover th{background:#222c3008}
.compare tbody tr{transition:background-color .18s ease}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
/* ---------------------------------------------------------- theme blocks
Two shapes that recur across the site: a label-and-heading column beside a
grid, and a numbered card set. */
.split-block{
display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;
align-items:start;margin:56px 0
}
.split-label h2{margin:8px 0 0}
/* The four approach steps used to be .num-card, filled with --light-gray. On a
practice page that block sits in a tinted section, which is the same
--light-gray, so the cards were invisible: four headings and four paragraphs
floating in a 2x2 grid with nothing holding them. They are the numbered steps
now, the same ones the home page carries. */
/* Image and text start on the same line. A fixed 4:5 crop rather than stretching
to whatever height the prose happens to be: stretched, a short paragraph left
the picture hanging 177px below the last line of text. Grayscale matches the
team photos, practice cards and case rows, so this is not the one full colour
photograph on a monochrome page. */
.intro-split{
display:grid;grid-template-columns:minmax(240px,1fr) 1.9fr;gap:52px;
align-items:stretch;margin:0 0 8px
}
/* The 4/5 ratio is the picture's floor, not its fixed shape. It sets the row
height when the prose is short, which is the team bio case and reads as a
portrait. Where the prose runs longer, as it does on every spoke, the picture
grows to meet it and crops, instead of stopping short and leaving a ragged
hundred pixels of white under one column while the other keeps going. */
/* The ratio is carried by a spacer whose padding resolves against the column
width, never by aspect-ratio on the box itself. A stretched grid item with an
aspect-ratio derives its width from its stretched height, which pushed this
picture 64px past its column and clipped the first letter of every line in
the column beside it. Padding percentages only ever resolve against width, so
the picture can grow downwards and never sideways. */
.intro-media{position:relative}
.intro-media::before{content:"";display:block;padding-top:125%}
.intro-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-img);
filter:grayscale(1) contrast(1.04);transition:filter .35s ease
}
.intro-split:hover .intro-media img{filter:none}
.intro-body .eyebrow{margin-bottom:10px}
.intro-body h2{margin:0 0 20px;max-width:24ch}
.intro-body p{max-width:var(--measure)}
@media (max-width:991px){
.split-block,.intro-split{grid-template-columns:1fr;gap:26px}
/* A practice page opens with an 1800px wide photograph, so its media box can
take the whole column. A team portrait is 320x450, and at one column that
box became 705px: a 2.2x upscale, visibly soft, and 881px of one face
before any biography. Capped and centred, the upscale is 1.25x. */
.bio-split .intro-media{max-width:400px;margin-inline:auto;width:100%}
}
/* ------------------------------------------------------------------- grounds
A statutory index, set as a ledger instead of run into the prose above it.
Six grounds written as six sentences of the same shape is a list wearing a
paragraph's clothes: a reader looking for their own ground has to read all of
them to find out which one it is. The third column carries who each ground
reaches, because that asymmetry is the whole point and it is invisible in
running text. */
.grounds{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--black-10)}
.grounds li{
display:grid;grid-template-columns:84px 248px 1fr;gap:24px;align-items:baseline;
padding:16px 0;border-bottom:1px solid var(--black-10)
}
.grounds li.grounds-head{padding:12px 0}
.grounds-head span{
font-size:12px;letter-spacing:1.1px;text-transform:uppercase;color:var(--para);font-weight:500
}
.g-s{
font-family:var(--body);font-size:var(--t-xxs);font-weight:500;
color:var(--dark);white-space:nowrap
}
.g-n{font-size:var(--t-xs);color:var(--dark)}
.g-r{font-size:var(--t-xxs);color:var(--para);line-height:1.45}
@media (max-width:820px){
.grounds li{grid-template-columns:92px 1fr;gap:8px 20px}
.grounds .g-r{grid-column:2}
.grounds li.grounds-head{display:none}
}
@media (max-width:520px){
.grounds li{grid-template-columns:1fr;gap:4px}
.grounds .g-r{grid-column:1}
}
/* Banner summary line. No call to action beside it: the sticky header already
carries one on the same screen. */
.page-head .head-lede{
color:#ffffffcc;font-size:var(--t-xs);max-width:62ch;margin:0;line-height:1.5
}
.page-head .head-lede.solo{margin-top:16px;max-width:58ch}
/* FAQ page: accordion carries the page, a quoted card sits beside it. Sticky so
it stays in view down a long list, the way the reference page reads. */
.faq-layout{display:grid;grid-template-columns:1.6fr 1fr;gap:56px;align-items:start;margin-top:34px}
.quote-card{
position:relative;overflow:hidden;background:var(--dark);color:#fff;
border-radius:var(--r-s);padding:30px 30px 26px;position:sticky;top:96px
}
.quote-card .qmark{
position:absolute;right:18px;bottom:-30px;margin:0;
font-family:var(--display);font-size:170px;line-height:1;color:#ffffff14
}
.quote-card blockquote{
margin:0 0 26px;border:0;padding:0;position:relative;z-index:1;
font-size:var(--t-s);line-height:1.5;color:#fff
}
.qc-who{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.qc-who img{width:52px;height:52px;border-radius:100px;object-fit:cover;object-position:top center}
.qc-name{font-weight:600;font-size:var(--t-xxs);margin:0;color:#fff}
.qc-role{font-size:13px;color:#ffffff99;margin:0;line-height:1.35}
@media (max-width:991px){
.faq-layout{grid-template-columns:1fr;gap:32px}
.quote-card{position:static}
}
/* Running prose sits in the same right hand column as the intro body, so a
practice page holds one measure from top to bottom instead of stepping in. */
.doc-grid{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:48px;align-items:start}
.doc-grid .prose{max-width:none}
@media (max-width:991px){
.doc-grid{grid-template-columns:1fr;gap:0}
.doc-aside{display:none}
}
/* ------------------------------------------------- practice grid with photos
The reference theme's services layout: three columns, each cell a number,
name, one line, a Learn more affordance, and a photograph beneath. Hairlines
between cells rather than card borders, which is what gives it the ledger
feel rather than a set of tiles. */
.pgrid{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--black-10);margin-top:34px
}
.pcard{
position:relative;display:flex;flex-direction:column;
border-bottom:1px solid var(--black-10);border-right:1px solid var(--black-10)
}
.pcard:nth-child(3n){border-right:0}
/* The last card in the grid, wherever it lands. With eight cards in three
columns the eighth is not a 3n child, so it kept a right border with no card
beside it: a vertical rule hanging in empty space at the end of the row. Every
practice page's cross-sell grid has eight. */
.pgrid > .pcard:last-child{border-right:0}
/* The card is a flex column so it fills its grid cell, but this inner block was
not, so "Read the guide" sat wherever the blurb happened to end. Across a row
of cards with different summary lengths the affordances landed up to 49px
apart. Making this a column as well lets .more take margin-top:auto and every
affordance in a row shares a baseline. */
.pcard-text{padding:28px 26px 24px;flex:1 1 auto;display:flex;flex-direction:column}
.pcard .more{margin-top:auto}
.pcard .idx{font-family:var(--display);font-size:var(--t-s);color:var(--para);margin-bottom:14px}
/* Both heading levels, because a grouped hub renders the card title as h4 so
the category label can take the h3. Naming only h3 here meant that on every
grouped hub the whole-cell target below did not exist: only the words of the
title were clickable, and "Read the guide" is an aria-hidden span rather than
a link, so the rest of the card was dead. The same mismatch had already
broken the card title size. .step and .member name both levels for exactly
this reason; .pcard was missed. */
.pcard h3,.pcard h4{font-size:var(--t-l);margin-bottom:8px}
.pcard h3 a,.pcard h4 a{color:var(--dark);text-decoration:none}
/* One link target for the whole cell, so the arrow is not a second tab stop. */
.pcard h3 a::after,.pcard h4 a::after{content:"";position:absolute;inset:0}
/* Keyboard focus has to be visible on that invisible target. */
.pcard h3 a:focus-visible::after,.pcard h4 a:focus-visible::after{
outline:2px solid currentColor;outline-offset:-3px}
.pcard-text p{font-size:var(--t-xxs);color:var(--para);margin-bottom:18px}
.pcard .more{
display:inline-flex;align-items:center;gap:8px;
font-size:var(--t-xxs);color:var(--dark)
}
.pcard .more svg{transition:transform .2s ease}
.pcard:hover .more svg{transform:translateX(4px)}
.pcard .pc-photo{
display:block;width:100%;height:210px;object-fit:cover;
border-radius:var(--r-img);
filter:grayscale(1) contrast(1.04);transition:filter .3s ease
}
.pcard:hover .pc-photo{filter:none}
@media (max-width:991px){
.pgrid{grid-template-columns:1fr 1fr}
.pcard:nth-child(3n){border-right:1px solid var(--black-10)}
.pcard:nth-child(2n){border-right:0}
}
@media (max-width:640px){
.pgrid{grid-template-columns:1fr}
.pcard{border-right:0!important}
}
/* Eight cross-sell cards in three tracks left the last row two thirds full: an
empty right hand cell, and because these cards carry a full bleed photograph
at the foot, a dark band and a closing rule that both stopped short of the
edge. Six tracks with each card spanning two still reads as three across, so
nth-child(3n) keeps identifying the right hand column and no border rule
changes. Only the last row moves: two cards take three tracks each and split
the width evenly, one card takes all six. The nine card grids on the home and
practice areas pages divide by three already and match neither selector, so
they are untouched. Bounded to 992 and up because below that the grid drops to
two tracks and the existing 641-991 rule owns the stranding there. */
@media (min-width:992px){
.pgrid:not(.svc-cards){grid-template-columns:repeat(6,1fr)}
.pgrid:not(.svc-cards) > .pcard{grid-column:span 2}
/* last row holds two */
.pgrid:not(.svc-cards) > .pcard:nth-last-child(2):nth-child(3n+1),
.pgrid:not(.svc-cards) > .pcard:last-child:nth-child(3n+2){grid-column:span 3}
/* last row holds one */
.pgrid:not(.svc-cards) > .pcard:last-child:nth-child(3n+1){grid-column:span 6}
}
/* ------------------------------------------------------------- home, hero row
The reference floats a row of cards across the foot of the banner. It carries
the credentials the old badge pills carried, with room to say what they mean. */
.hero-cards{
display:grid;grid-template-columns:180px 1fr 1fr 260px;gap:0;
border:1px solid #ffffff26;border-radius:var(--r-img);overflow:hidden;
background:#ffffff0f;backdrop-filter:blur(6px);margin-top:56px
}
.hc-photo{height:100%;min-height:132px;overflow:hidden}
.hc-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.hc-item{padding:24px 26px;border-left:1px solid #ffffff26}
.hc-item h2{font-size:var(--t-s);color:#fff;margin:0 0 6px}
.hc-item p{font-size:13px;color:#ffffffb3;margin:0;line-height:1.45}
.hc-stat{
padding:22px 26px;background:#fff;color:var(--dark);
display:flex;flex-direction:column;justify-content:center
}
.hc-num{font-family:var(--display);font-size:40px;line-height:1;color:var(--dark)}
.hc-stars{margin:6px 0 8px;font-size:14px;letter-spacing:2px;color:var(--gold-on-light)}
.hc-stars .star.half{opacity:.45}
.hc-stars .star.empty{color:var(--gray);opacity:1}
.hc-stat p{font-size:13px;color:var(--para);margin:0;line-height:1.4}
@media (max-width:991px){
.hero-cards{grid-template-columns:1fr 1fr}
.hc-photo{display:none}
.hc-item{border-left:0;border-top:1px solid #ffffff26}
}
@media (max-width:600px){.hero-cards{grid-template-columns:1fr}}
/* Team row on dark: a quoted card leads, member cards follow. */
.section.dark{background:var(--dark);color:#fff}
.section.dark h2,.section.dark .eyebrow{color:#fff}
.section.dark .lede.muted{color:#ffffffb3}
.team-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch}
.team-row .member{background:#ffffff0f;border:1px solid #ffffff1a}
.team-row .member h3 a{color:#fff}
.team-row .member .role{color:#ffffff99}
.quote-card.on-dark{
/* relative, not static: the watermark is absolutely positioned and static
would let it escape to the section and float loose over the last card.
top:auto matters too, or the base rule's sticky offset of 96px still
applies and drops the card below the members beside it. */
position:relative;top:auto;background:#ffffff0f;border:1px solid #ffffff1a;
display:flex;flex-direction:column;justify-content:flex-end
}
.quote-card.on-dark .qmark{color:#ffffff1a;bottom:-46px;right:10px}
/* The two team blocks sit one directly above the other, so they have to break
at the same widths or the same card is 407px wide in one and 263px in the
other. They used to disagree: the row went 4 to 2 to 1 while the grid went
4 to 3 to 2. Matching the grid to the row also removes every short row below
992px, because ten divides by two and by one, and four does as well. Only the
four-across case leaves a short line, and that one is centred. */
@media (max-width:991px){
.team-row{grid-template-columns:1fr 1fr}
.team-grid>.member{flex-basis:calc((100% - 24px)/2)}
}
@media (max-width:600px){
.team-row{grid-template-columns:1fr}
.team-grid>.member{flex-basis:100%}
}
/* ------------------------------------------------------- home, approach band
Heading and button on dark at the left, a translucent
numbered panel at the right, and a photograph running full bleed beneath, with
the panel overlapping down onto it. */
.approach{position:relative;background:var(--dark);padding-top:var(--section);overflow:hidden}
.ap-grid{
position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;
gap:56px;align-items:start;padding-bottom:64px
}
.ap-head h2{color:#fff;margin:8px 0 26px;max-width:19ch}
.ap-head .btn{margin-bottom:36px}
.ap-head .eyebrow{color:#ffffff99}
.ap-panel{
/* Opaque enough to read over any photograph. A lightly tinted glass panel
looked closer to the reference until the image behind it was light, at
which point white text on it failed contrast outright. */
background:#222c30e6;backdrop-filter:blur(6px);
border:1px solid #ffffff1f;border-radius:var(--r-s);padding:34px 34px 30px
}
/* The numbered steps, as a rail. One component: light by default, with the dark
band's colours scoped to .ap-panel.
The numeral lives inside the node on the connector, so the number, the marker
and the rule are one object. As three separate things the numeral sat 39px
clear of the dot that belonged to it, and the dots read as stray bullets. */
.ap-steps{border-left:1px solid var(--black-10)}
.ap-step{position:relative;padding:0 0 30px 40px}
.ap-step:last-child{padding-bottom:0}
.ap-n{
position:absolute;left:-16px;top:0;width:32px;height:32px;border-radius:100px;
background:var(--dark);color:#fff;font-family:var(--display);font-size:14px;line-height:1;
display:grid;place-items:center;
/* the ring is the ground the rail sits on, so the node reads as sitting on the
line rather than as a disc with a white halo on a tinted section */
border:3px solid var(--ground)
}
.ap-step h3{color:var(--dark);font-size:var(--t-l);margin:3px 0 8px}
.ap-step p{color:var(--para);font-size:var(--t-xxs);line-height:1.55;margin:0;max-width:var(--measure)}
/* Optically centred against the steps rather than pinned to the top.
I first made this sticky, on the theory that it would travel with the reader
instead of sitting above the dead space. It does not: the block is about
400px tall and a viewport is twice that, so sticky never engages and the 113px
sat there exactly as before. Centring splits it above and below, which reads
as a deliberate relationship between the two columns instead of a column that
ran out. */
.split-block .split-label{align-self:center}
.ap-panel{--ground:#222c30}
.dark,.section.dark{--ground:var(--dark)}
.ap-panel .ap-steps{border-left-color:#ffffff2b}
.ap-panel .ap-n{background:#fff;color:var(--dark)}
.ap-panel .ap-step h3{color:#fff}
.ap-panel .ap-step p{color:#ffffffc4}
/* 46%, not 58%: at the larger height the photo edge landed exactly under the
"Why choose us" button and the two collided on the seam. */
.ap-media{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1}
.ap-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:991px){
.ap-grid{grid-template-columns:1fr;gap:30px;padding-bottom:40px}
.ap-media{position:static;height:280px}
.approach{padding-bottom:0}
}
/* -------------------------------------------------------- home, insights row
A tall featured card with the text over the image, and two
shorter cards with the image above the text. */
.sec-head.centred{justify-content:center;text-align:center}
.sec-head.centred h2{max-width:24ch;margin-inline:auto}
.ins-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:24px;margin-top:36px}
.ins{position:relative;display:flex;flex-direction:column;border-radius:var(--r-img);overflow:hidden}
.ins-media{position:relative;overflow:hidden}
.ins-media img{width:100%;height:200px;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .3s,transform .4s}
.ins:hover .ins-media img{filter:none;transform:scale(1.03)}
.ins-body{padding:20px 4px 0}
.ins-kicker{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--para);margin-bottom:8px}
.ins h3{font-size:var(--t-l);margin-bottom:8px}
.ins h3 a{color:var(--dark);text-decoration:none}
.ins h3 a::after{content:"";position:absolute;inset:0}
.ins-teaser{font-size:var(--t-xxs);color:var(--para);margin-bottom:14px}
.ins .more{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xxs);color:var(--dark)}
.ins .more svg{transition:transform .2s}
.ins:hover .more svg{transform:translateX(4px)}
/* Featured: full bleed image with the copy laid over the foot of it. */
.ins.featured .ins-media{position:absolute;inset:0}
.ins.featured .ins-media img{height:100%}
.ins.featured{min-height:420px;background:var(--dark);justify-content:flex-end}
.ins.featured .ins-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg,#222c3033 0%,#222c30cc 58%,#222c30f2 100%)
}
.ins.featured .ins-body{position:relative;z-index:2;padding:0 28px 28px}
.ins.featured .ins-kicker,.ins.featured .ins-teaser{color:#ffffffbf}
.ins.featured h3 a,.ins.featured .more{color:#fff}
.ins-badge{
position:absolute;top:18px;left:18px;z-index:2;
background:#ffffff26;backdrop-filter:blur(6px);border:1px solid #ffffff33;
color:#fff;font-size:13px;padding:6px 12px;border-radius:var(--r-xs,4px)
}
@media (max-width:991px){
.ins-grid{grid-template-columns:1fr 1fr}
.ins.featured{grid-column:1 / -1;min-height:340px}
}
@media (max-width:640px){.ins-grid{grid-template-columns:1fr}}
/* ------------------------------------------------------------------- cases
Client accounts. Equal height cards with the attribution pinned to the foot,
because unclamped quotations of different lengths made every card a different
size and left the Google marks scattered down the row at random heights. */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.case{
display:flex;flex-direction:column;
background:var(--light-gray);border:1px solid var(--black-10);
border-radius:var(--r-s);padding:26px 24px
}
.case-route{
font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--para);margin:0 0 8px
}
.case-matter{
font-family:var(--display);font-size:var(--t-l);color:var(--dark);
margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid var(--black-10);line-height:1.25
}
.case-summary{font-size:var(--t-xxs);color:var(--dark);margin-bottom:16px}
.case-quote{
margin:0 0 18px;border:0;border-left:2px solid var(--gray);padding:0 0 0 16px;
font-size:13px;line-height:1.6;color:var(--para);
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden
}
/* margin-top:auto pins the attribution to the bottom whatever the quote does. */
.case-foot{
/* Stacked rather than a wrapping row. Side by side, a long client name wrapped
on some cards and not others, so the Google marks ended up at different
heights across a row that is otherwise perfectly aligned. */
margin-top:auto;padding-top:14px;border-top:1px solid var(--black-10);
display:flex;flex-direction:column;align-items:flex-start;gap:10px
}
.case-who{font-size:13px;color:var(--para);margin:0}
@media (max-width:991px){.case-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.case-grid{grid-template-columns:1fr}}
/* Home case strip. Matter led rather than quote led, so it does not read as a
second helping of the reviews marquee further down the page. */
.cstrip-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border-top:1px solid var(--black-10);margin-top:32px
}
/* .head-split already draws a closing rule under the section header. A block
that follows it and draws its own top border puts two 1px lines within 32px
of each other, and in the rating case the two touch and read as one 2px rule.
The header's line is the one that belongs to the header, so the follower
drops its own. */
.head-split + .cstrip-grid,.head-split + .rating-block{border-top:0}
@media (max-width:900px){
.head-split + .spoke-layout .spoke-rail{border-top:0;padding-top:0}
}
.cstrip{
position:relative;display:flex;flex-direction:column;
padding:28px 30px 26px;
border-right:1px solid var(--black-10);border-bottom:1px solid var(--black-10);
transition:background .2s ease
}
/* These three read as clickable because they sit in a bordered grid under a
serif heading, exactly like the practice cards, and they were not links at
all. Each now goes to its own entry on /cases/, with the same whole-cell
target and the same hover the practice cards use. */
.cstrip .more{color:var(--dark);text-decoration:none}
.cstrip .more::after{content:"";position:absolute;inset:0}
.cstrip:hover{background:var(--light-gray)}
.cstrip .more{
display:inline-flex;align-items:center;gap:8px;margin-top:auto;
font-size:13px;color:var(--dark)
}
.cstrip .more svg{transition:transform .2s ease}
.cstrip:hover .more svg{transform:translateX(4px)}
/* The summary no longer carries the bottom gap; .more sits on margin-top:auto so
every card's affordance lines up whatever the summary length. */
.cstrip .case-who{margin-bottom:14px}
.cstrip:last-child{border-right:0}
.cstrip .case-route{font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--para);margin-bottom:12px}
.cstrip h3{font-size:var(--t-l);margin-bottom:10px}
.cstrip-sum{font-size:var(--t-xxs);color:var(--para);margin-bottom:16px}
@media (max-width:767px){
.cstrip-grid{grid-template-columns:1fr}
.cstrip{border-right:0}
}
/* Four up stats with a line of explanation under each, the way the reference
About page carries them. The three up variant elsewhere is unaffected. */
.stats.four{grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--black-10)}
.stats.four .stat{
padding:30px 26px 28px 0;border-right:1px solid var(--black-10);border-bottom:0;text-align:left
}
.stats.four .stat:last-child{border-right:0}
.stats.four .stat:not(:first-child){padding-left:26px}
.stats.four .num{font-family:var(--display);font-size:44px;line-height:1;color:var(--dark)}
.stats.four .lbl{font-size:var(--t-xxs);color:var(--dark);margin:10px 0 8px;font-weight:500}
.stats.four .stat p{font-size:13px;color:var(--para);line-height:1.5;margin:0}
@media (max-width:991px){
.stats.four{grid-template-columns:1fr 1fr}
.stats.four .stat:nth-child(2n){border-right:0}
.stats.four .stat{padding-left:0!important;padding-right:26px}
}
/* Two columns means a second row, and the base rule only draws the vertical
divider. Without a rule between the rows the block reads as an open box. The
last row draws none: that is the final stat, plus its left-hand neighbour when
the count is even. Bounded to 601px and up because below that the grid is a
single column and every stat keeps its own rule. */
@media (min-width:601px) and (max-width:991px){
.stats.four:not(.auto) .stat{border-bottom:1px solid var(--black-10)}
.stats.four:not(.auto) .stat:last-child,
.stats.four:not(.auto) .stat:nth-last-child(2):nth-child(odd){border-bottom:0}
}
@media (max-width:600px){
.stats.four{grid-template-columns:1fr}
.stats.four .stat{border-right:0;border-bottom:1px solid var(--black-10);padding-right:0}
}
/* Badge pills under the closing call to action, as the reference carries them. */
.cta-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.cta-badge{
display:inline-flex;align-items:center;gap:8px;
background:#ffffff1f;border:1px solid #ffffff33;border-radius:100px;
padding:8px 16px;font-size:13px;color:#fff
}
.cta-badge svg{opacity:.8;flex:0 0 auto}
/* Footer lead row: mark on the left, the thing we actually want people to do on
the right. The reference puts a newsletter signup here; there is no mailing
list, so the slot carries the telephone number rather than a form that would
collect addresses nobody sends to. */
.foot-lead{
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;
padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid #ffffff1f
}
.foot-lead > div:first-child p{color:#ffffff8c;font-size:var(--t-xxs);margin:16px 0 0;max-width:34ch}
.foot-cta-h{color:#fff;font-size:var(--h3,34px);line-height:1.2;margin:0 0 18px;max-width:22ch}
.foot-tel{
display:inline-block;font-family:var(--display);font-size:34px;color:#fff;
text-decoration:none;border-bottom:1px solid #ffffff4d;padding-bottom:4px
}
.foot-tel:hover{border-bottom-color:#fff}
.foot-action p{color:#ffffff8c;font-size:var(--t-xxs);margin:18px 0 0}
.foot-action p a{color:#ffffffcc}
.site-footer .foot-top{grid-template-columns:repeat(3,1fr)}
@media (max-width:767px){
.foot-lead{grid-template-columns:1fr;gap:30px;padding-bottom:32px;margin-bottom:32px}
.site-footer .foot-top{grid-template-columns:1fr 1fr}
/* Three blocks in two tracks left the third alone in a 148px cell with 179px
of white beside it, on every page of the site, and squeezed the opening
hours onto two lines. Spanning is bounded to an odd last block, so adding a
fourth column changes nothing. Two tracks is right: measured at 375, not one
of the fourteen footer links wraps in a 148px cell. */
.site-footer .foot-top > :last-child:nth-child(2n+1){grid-column:1 / -1}
}
/* Photograph behind an inner page banner. The reference runs a looping video
here; a still carries the same weight without the payload or the autoplay.
The scrim is heavier on the left so the heading holds contrast whatever the
photograph is doing behind it. */
.page-head.has-media{position:relative;overflow:hidden}
.page-head.has-media > .container{position:relative;z-index:2}
.ph-media{position:absolute;inset:0;z-index:1}
.ph-media img{width:100%;height:100%;object-fit:cover;object-position:center}
.ph-media::after{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,#222c30f7 0%,#222c30e0 46%,#222c3099 74%,#222c3066 100%)
}
/* Reference About layout: the image tops out level with the heading rather than
centring against a taller text column, and the stats sit directly under the
split with only the rule between them. */
.split.top{align-items:start}
.split.top img{margin-top:6px}
.split-h{font-size:var(--h2);line-height:1.12;margin-bottom:20px;max-width:20ch}
.split .btn{margin-top:8px}
.section.pad-top-0{padding-top:0}
/* Dark FAQ block: heading, a line of context and the button on the left, the
accordion on the right, as the reference About page arranges it. */
.faq-dark{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.faq-dark-head h2{color:#fff;margin-bottom:16px;max-width:18ch}
.faq-dark-head p{color:#ffffff99;font-size:var(--t-xxs);margin-bottom:26px;max-width:38ch}
.faq.on-dark{border-top-color:#ffffff26}
.faq.on-dark details{border-bottom-color:#ffffff26}
.faq.on-dark summary{color:#fff}
.faq.on-dark summary::after{color:#ffffff99}
.faq.on-dark .ans{color:#ffffffa8}
/* Stands where the reference puts client logos. Institutions, not customers. */
.forum-strip{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px 34px;
margin-top:56px;padding-top:34px;border-top:1px solid #ffffff1f
}
.forum{
font-family:var(--display);font-size:var(--t-s);color:#ffffff8c;
letter-spacing:.2px;white-space:nowrap
}
@media (max-width:991px){
.faq-dark{grid-template-columns:1fr;gap:32px}
.forum-strip{justify-content:flex-start}
}
.faq-more{margin-top:26px;font-size:var(--t-xxs);color:#ffffff99}
.faq-more a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* The footer's prominent slot carries the address, not a repeat of the call to
action immediately above it. Two "speak to someone" asks in a row read as one
ask that did not work the first time. */
.foot-addr{font-family:var(--display);font-size:26px;line-height:1.35;color:#fff;margin:0 0 18px}
.foot-links.inline{display:flex;flex-wrap:wrap;gap:10px 24px}
.foot-links.inline a{color:#ffffffcc;text-decoration:underline;text-underline-offset:3px}
.foot-links.inline a:hover{color:#fff}
/* defaults to italic; the footer block is a postal address in the
semantic sense but should not look like a citation. */
.foot-addr{font-style:normal}
.rating-body .src-mark{margin-bottom:16px}
.case-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.case-foot .case-who,.case-foot .cs-who{margin:0}
/* ------------------------------------------------- reported court decisions
A ledger rather than cards: these are public records and the citation is the
point, so it gets its own column instead of being buried in body text. */
.dec-list{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--black-10)}
.dec{
display:grid;grid-template-columns:1fr 220px;gap:40px;
padding:28px 0;border-bottom:1px solid var(--black-10)
}
.dec-matter{
font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--para);margin-bottom:8px
}
.dec h3{font-size:var(--t-l);margin-bottom:10px;font-style:italic}
.dec h3 a{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
.dec-sum{font-size:var(--t-xxs);color:var(--para);margin-bottom:10px;max-width:70ch}
.dec-held{font-size:var(--t-xxs);color:var(--dark);margin:0;max-width:70ch}
.dec-held strong{font-weight:600}
.dec-meta{text-align:right}
.dec-meta p{font-size:13px;color:var(--para);margin:0 0 4px;line-height:1.4}
.dec-cite{font-family:var(--display);font-size:var(--t-s);color:var(--dark)!important;margin-bottom:8px!important}
.dec-out{
display:inline-block;margin-top:8px!important;padding:4px 10px;border-radius:100px;
background:#34A85314;color:#1e7e37!important;font-size:13px;font-weight:500
}
@media (max-width:767px){
.dec{grid-template-columns:1fr;gap:14px}
.dec-meta{text-align:left;display:flex;flex-wrap:wrap;gap:4px 16px}
.dec-meta p{margin:0}
}
/* Compact section head, shared. Heading left, a figure and the caveat right, so
the content starts near the top of the section instead of below four lines of
prose. Used by the decisions list and the client accounts. */
.head-split{
display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
padding-bottom:26px;border-bottom:1px solid var(--black-10)
}
.head-split h2{margin:6px 0 0;max-width:20ch}
.head-split-body{padding-bottom:2px}
.head-figure{font-size:var(--t-s);color:var(--dark);margin:0 0 10px}
.head-figure strong{font-family:var(--display);font-size:var(--t-xl);font-weight:400}
.head-split-body p:last-child{font-size:13px;color:var(--para);margin:0;line-height:1.55}
.head-split-body a{color:var(--dark);text-decoration:underline;text-underline-offset:2px}
@media (max-width:991px){.head-split{grid-template-columns:1fr;gap:20px;align-items:start}}
/* --------------------------------------------------------------- case rows
Date and case name at the left, photograph in the middle, Challenge and
Outcome at the right. The citation sits with the outcome, because on this page
the citation is the thing that makes the outcome checkable. */
.cs-list{list-style:none;margin:0;padding:0}
.cs-row{
display:grid;grid-template-columns:1fr 300px 1.1fr;gap:40px;align-items:start;
padding:30px 0;border-bottom:1px solid var(--black-10)
}
.cs-date{
display:inline-block;background:var(--light-gray);border:1px solid var(--black-10);
border-radius:var(--r-xs,4px);padding:6px 12px;font-size:13px;color:var(--para);margin-bottom:16px
}
.cs-head h3{font-size:var(--t-l);font-style:italic;margin-bottom:8px;line-height:1.25}
.cs-head h3 a{color:var(--dark);text-decoration:none}
.cs-head h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.cs-matter{font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--para);margin:0}
.cs-media img{width:100%;height:190px;object-fit:cover;border-radius:var(--r-img);filter:grayscale(1) contrast(1.04)}
.cs-row:hover .cs-media img{filter:none}
.cs-label{
font-size:var(--t-xxs);font-weight:600;color:var(--dark);margin:0 0 6px;
display:flex;align-items:center;gap:8px
}
.cs-label::before{content:"";width:6px;height:6px;border-radius:100px;background:var(--gray)}
.cs-body{font-size:var(--t-xxs);color:var(--para);margin:0 0 20px}
.cs-cite{font-size:13px;color:var(--para);margin:0;padding-top:14px;border-top:1px solid var(--black-10)}
.cs-won{
display:inline-block;margin-left:10px;padding:3px 10px;border-radius:100px;
/* 4.45:1 against the pale green ground, which misses the 4.5 floor for
12px text on 25 pages. Two steps darker clears it and reads the same. */
background:#34A85314;color:#1a6e30;font-weight:500
}
@media (max-width:991px){
.cs-row{grid-template-columns:1fr 240px;gap:26px}
.cs-detail{grid-column:1 / -1}
}
@media (max-width:640px){
.cs-row{grid-template-columns:1fr}
.cs-media img{height:200px}
}
/* ------------------------------------------------------------ statement band
Dark section carrying the page's own caveat, with the figures set on the same
ground. Gives a long light page a break in the middle and puts the honest
numbers somewhere they read as a statement rather than a footnote. */
.statement{padding-top:64px;padding-bottom:56px}
.stmt-head{
display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start;
padding-bottom:40px
}
.stmt-head h2{color:#fff;margin:8px 0 0;max-width:19ch}
.stmt-head .eyebrow{color:#ffffff8c}
.stmt-body p{color:#ffffffb8;font-size:var(--t-xs);line-height:1.6;margin:0 0 14px}
.stmt-body p:last-child{margin:0;color:#fff}
.stats.four.on-dark{border-top-color:#ffffff26}
.stats.four.on-dark .stat{border-right-color:#ffffff26}
.stats.four.on-dark .num{color:#fff}
.stats.four.on-dark .lbl{color:#fff}
.stats.four.on-dark .stat p{color:#ffffff8c}
@media (max-width:991px){
.stmt-head{grid-template-columns:1fr;gap:22px;padding-bottom:30px}
.stats.four.on-dark .stat{border-bottom-color:#ffffff26}
}
/* A caveat that runs the width of what it qualifies, with a rule above it. As a
small left aligned paragraph under a three column grid it read as an orphan,
which is the wrong tone for the one sentence on the page that limits what the
rest of it claims. */
.note-bar{
margin:30px 0 0;padding-top:20px;border-top:1px solid var(--black-10);
font-size:var(--t-xxs);color:var(--para);max-width:88ch
}
/* ------------------------------------------------------------ grid children
A grid or flex item defaults to min-width:auto, which means it refuses to
shrink below the widest thing inside it. On the judicial review page the
comparison table sets min-width:560px so it can scroll inside its own
wrapper; instead the column it sat in grew to 560px, took the whole grid with
it, and every phone scrolled the page sideways by 209px. The wrapper never
got the chance to do its job. min-width:0 gives it back, and does the same
for any long citation, URL or table that lands in one of these columns
later. */
.doc-grid>*,.split>*,.split-block>*,.intro-split>*,.faq-layout>*,.stmt-head>*,
.head-split>*,.cs-row>*,.dec>*,.contact-grid>*,.process>*,.ap-grid>*,.ap-step>*,
.foot-lead>*,.foot-top>*,.stats>*,.hero-cards>*,.team-row>*,.case-grid>*,
.pgrid>*,.ins-grid>*,.cstrip-grid>*,.dl-rows>*,.svc-list>*,
.faq-dark>*,.cards>*,.team-grid>*,.locations>*,.step>*,.checks li>*,
.rev-head>*,.trust-row>*,.cf-row>*,.qc-who>*{min-width:0}
/* Header at laptop widths. Above 991px the mobile menu is gone and every item
shows at once: brand, six links, telephone and the button. Between roughly
992 and 1150 that is wider than the container, and the page scrolled sideways
by about 27px on every page. The number is in the footer and in every closing
call to action, so it is the first thing to drop. */
@media (max-width:1080px){
.nav{gap:20px}
.nav-links{gap:18px}
.nav-phone{display:none}
}
@media (max-width:1010px){
.nav-links{gap:14px}
.nav-links a{font-size:var(--t-xxs)}
}
/* Dark surfaces use the same section head. */
.head-split.on-dark{border-bottom-color:#ffffff26}
.head-split.on-dark h2{color:#fff}
.head-split.on-dark .eyebrow{color:#ffffff8c}
.head-split.on-dark .head-figure{color:#fff}
.head-split.on-dark .head-split-body p:last-child{color:#ffffff99}
.head-split.on-dark .head-split-body a{color:#fff}
.head-act{margin-top:14px!important}
.head-act a{font-size:13px}
/* Question sections rendered as an accordion. The heading is a real h2 inside
the summary, so the page keeps its outline; these rules stop the .prose h2
treatment (rule above, big top margin, narrow measure) applying inside it. */
/* The accordion is a full width component, not body copy, so it escapes the
72ch reading measure its parent sets. Without this the same component is
narrower on a page where it sits inside .prose than on one where it does not,
which is exactly the inconsistency it was meant to remove. The prose around
it keeps its measure. */
.prose-faq{margin:34px 0 0;counter-reset:faq}
.prose-faq summary h2{
margin:0;padding:0;border:0;max-width:none;
font-family:var(--display);font-size:var(--t-l);line-height:1.3;color:inherit;display:inline
}
.prose-faq .ans p{margin:0 0 12px;font-size:var(--t-xs)}
.prose-faq .ans p:last-child{margin:0}
.prose-faq summary::before{line-height:1.5}
/* ------------------------------------------------------------ contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.55fr;gap:56px;align-items:start;margin-top:8px}
.contact-side{display:grid;gap:0}
.ct-block{padding:20px 0;border-bottom:1px solid var(--black-10)}
.ct-block:first-child{padding-top:0}
.ct-block:last-child{border-bottom:0}
.ct-block h3{
font-family:var(--body);font-size:12px;letter-spacing:.9px;text-transform:uppercase;
color:var(--para);margin-bottom:10px;font-weight:600
}
.ct-block address{font-style:normal;font-size:var(--t-s);color:var(--dark);line-height:1.5;margin-bottom:10px}
.ct-block p{font-size:var(--t-s);color:var(--dark);margin:0 0 4px}
.ct-block .muted{font-size:var(--t-xxs);color:var(--para)}
.ct-block a{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
.ct-link{font-size:var(--t-xxs)}
/* The form sits on a tinted card so it reads as the thing to act on rather than
another column of text. */
.contact-form-wrap{background:var(--light-gray);border:1px solid var(--black-10);border-radius:var(--r-s);padding:34px}
/* The form card's own padding offsets its eyebrow from the grid top; the left
column's first block starts flush. Both labels carry the same 22px offset so
they sit on one line, rather than the card's text hanging 34px lower. */
@media (min-width:992px){
.contact-side .ct-block:first-child{padding-top:22px}
.contact-form-wrap{padding-top:22px}
}
.cf-h{font-size:var(--t-xl);margin:6px 0 8px}
.cf-note{font-size:var(--t-xxs);color:var(--para);margin-bottom:22px;max-width:var(--measure)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cform .field{margin-bottom:18px}
/* Real labels above the inputs, not placeholder text. A placeholder disappears
the moment somebody types, so a form labelled that way cannot be checked over
before it is sent. */
.cform label{display:block;font-size:13px;color:var(--dark);margin-bottom:6px;font-weight:500}
.cform label span{color:#b3261e}
.cform input,.cform select,.cform textarea{
width:100%;padding:12px 14px;border:1px solid var(--black-10);border-radius:var(--r-xs,4px);
background:#fff;font:inherit;font-size:var(--t-xxs);color:var(--dark)
}
.cform input:focus,.cform select:focus,.cform textarea:focus{
outline:2px solid var(--dark);outline-offset:-1px;border-color:var(--dark)
}
.cform textarea{resize:vertical;min-height:120px}
.cf-privacy{font-size:13px;color:var(--para);margin:18px 0 0;line-height:1.5;max-width:var(--measure)}
.formnote{margin-top:14px;font-size:14px}
/* Map. Lazy loaded, because it is a third party frame and should not be part of
what the page costs to open. */
.map-wrap{border:1px solid var(--black-10);border-radius:var(--r-s);overflow:hidden;line-height:0}
.map-wrap iframe{width:100%;height:420px;border:0;display:block;filter:grayscale(1) contrast(1.05)}
.map-wrap:hover iframe{filter:none}
@media (max-width:991px){
.contact-grid{grid-template-columns:1fr;gap:34px}
.map-wrap iframe{height:320px}
}
@media (max-width:600px){.cf-row{grid-template-columns:1fr;gap:0}}
/* Submission status. role=status and aria-live mean a screen reader hears the
result without the focus moving. */
.form-status{margin:14px 0 0;font-size:var(--t-xxs);padding:12px 14px;border-radius:var(--r-xs,4px)}
.form-status.wait{background:#222c300f;color:var(--para)}
.form-status.ok{background:#34a8531f;color:#1e7e37}
.form-status.err{background:#b3261e14;color:#b3261e}
.form-status.note{background:#fbbc0424;color:#7a5423}
/* ------------------------------------------------- hub services grid and fees
The twelve immigration matters, and the two consultation rates. Both used to
be prose inside a narrow column at the foot of the page. They are the two
things a reader came to the page for, so both are now sections in their own
right, built from components the rest of the site already uses. */
/* Four across, because twelve entries in three columns is four deep and reads
as a wall. Four gives three rows and the same hairline ledger as the practice
cards, which is the point: one component, two densities. */
/* Spoke grids with fewer than four cards. The rule between cells is drawn by
the card's own right border, so the last card in each row clears it. */
.pgrid-1{grid-template-columns:1fr}
.pgrid-1 .pcard{border-right:0}
.pgrid-2{grid-template-columns:repeat(2,1fr)}
.pgrid-2 .pcard:nth-child(2n){border-right:0}
.pgrid-3{grid-template-columns:repeat(3,1fr)}
.pgrid-3 .pcard:nth-child(3n){border-right:0}
@media (max-width:991px){
.pgrid-3{grid-template-columns:1fr 1fr}
.pgrid-3 .pcard:nth-child(3n){border-right:1px solid var(--black-10)}
.pgrid-3 .pcard:nth-child(2n){border-right:0}
/* Three cards in two columns strands the third in a half width cell with an
empty cell beside it. Grouping the immigration hub made that visible six
times on one page, because five of the six groups hold three or fewer. The
stranded card takes the whole row instead. */
.pgrid-3 .pcard:nth-child(3):last-child{grid-column:1 / -1;border-right:0}
}
@media (max-width:767px){
.pgrid-2,.pgrid-3{grid-template-columns:1fr}
.pgrid-2 .pcard,.pgrid-3 .pcard{border-right:0}
}
.pgrid-4{grid-template-columns:repeat(4,1fr)}
.pgrid-4 .pcard:nth-child(3n){border-right:1px solid var(--black-10)}
.pgrid-4 .pcard:nth-child(4n){border-right:0}
/* Grouped spoke grids, laid out as a category rail beside the groups.
Seventeen cards in one run gave a reader no way to see the shape of the
practice. The rail states the six categories in six lines, sticks while the
cards scroll, and jumps to any of them.
The category heading was a 12px uppercase label that read as a caption rather
than as the thing dividing the section. It is now the serif heading it needed
to be, and it draws the only rule: it had a border-bottom while the grid under
it had a border-top, so every category was underlined twice. */
.spoke-layout{
/* 202px is where the longest category name, "Coming to Canada temporarily",
stops wrapping at 13px. The narrower gap gives the difference back to the
cards, so this costs them about three pixels each. */
display:grid;grid-template-columns:202px minmax(0,1fr);gap:38px;
align-items:start;margin-top:34px
}
.spoke-rail{position:sticky;top:96px;border-left:1px solid var(--black-10)}
.spoke-rail a{
display:flex;justify-content:space-between;align-items:baseline;gap:10px;
padding:9px 0 9px 16px;margin-left:-1px;
border-left:2px solid transparent;
color:var(--para);text-decoration:none;font-size:13px;line-height:1.35;
transition:color .18s,border-color .18s
}
.spoke-rail a:hover,.spoke-rail a:focus-visible{color:var(--dark);border-left-color:var(--dark)}
.spoke-rail em{font-style:normal;font-family:var(--display);opacity:.55}
.spoke-group{scroll-margin-top:104px}
.spoke-group + .spoke-group{margin-top:46px}
.sg-label{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
font-family:var(--display);font-size:21px;font-weight:400;line-height:1.2;
color:var(--dark);margin:0 0 0;padding-bottom:11px;
border-bottom:1px solid var(--black-10)
}
.sg-n{font-family:var(--display);font-size:13px;color:var(--para);opacity:.7}
/* The heading draws the rule, so the grid must not draw a second one. */
.spoke-group .pgrid{margin-top:0;border-top:0}
/* A card that stands in front of its own cluster. It lists what is behind it,
so it is taller than a leaf; the group it sits in is its own grid, so that
height does not stretch the fourteen cards beside it. */
.pcard-hub .pc-kids{
/* var(--para) rather than var(--dark) at 85 per cent. Opacity below 1 creates
a stacking context, and it lifted this paragraph above the invisible
whole-cell link target, so the middle of the business immigration card was
not clickable. An explicit colour has no such side effect, and it is the
tone the rest of the body copy already uses. */
font-size:13px;line-height:1.5;color:var(--para);
margin:-6px 0 14px
}
@media (max-width:900px){
/* The rail becomes a row of chips above the groups. minmax(0,1fr) because an
auto minimum resolves to content width and pushes the page sideways. */
.spoke-layout{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:26px}
.spoke-rail{
position:static;display:flex;flex-wrap:wrap;
border-left:0;border-top:1px solid var(--black-10);padding-top:8px
}
.spoke-rail a{
border-left:0;padding:7px 0;margin:0 20px 0 0;
justify-content:flex-start;gap:7px;flex:0 0 auto
}
.spoke-group + .spoke-group{margin-top:34px}
.sg-label{font-size:19px}
}
@media (max-width:640px){
.spoke-group + .spoke-group{margin-top:32px}
}
.svc-cards .pcard-text{padding:26px 24px 24px}
/* Both, because a grouped hub renders the card title as h4 so the group label
can take the h3. Naming only h3 here left the grouped hubs falling through
to the global h4 at 26px: card titles larger than the category heading meant
to contain them, and eleven of seventeen wrapping to two or three lines. */
.svc-cards h3,.svc-cards h4{font-size:var(--t-s);line-height:1.3;margin-bottom:8px}
/* 0.8, not the 0.6 this started at. At 0.6 the ordinal measured 3.0:1
against both grounds; it is 13px text, so it needs 4.5:1. 0.8 clears it
at 4.9 and still sits behind the heading. */
.svc-cards .idx{font-size:13px;margin-bottom:12px;opacity:.8}
.svc-cards p{margin-bottom:14px}
.svc-cards .more{font-size:13px}
/* An entry with no page yet. No hover lift, no arrow, no full cell target, and
the heading is plain text rather than a link, so nothing about it offers a
click that would go nowhere. Same treatment as a team member with no bio. */
.pcard.listed h3,.pcard.listed h4{color:var(--para)}
.pcard.listed:hover{background:transparent}
.pcard.listed .pcard-text{opacity:.82}
@media (max-width:1100px){
.pgrid-4{grid-template-columns:repeat(3,1fr)}
.pgrid-4 .pcard:nth-child(4n){border-right:1px solid var(--black-10)}
.pgrid-4 .pcard:nth-child(3n){border-right:0}
}
/* Same stranding as the three card case: four cards in three columns leave the
fourth alone with two empty cells beside it, which is live on the business
immigration hub. Bounded at both ends on purpose. Below 840px the grid is two
columns, where four cards already fill two clean rows, and letting this rule
reach that far pushed the fourth card onto a third row and stranded the third
instead. A span rule has to know which breakpoint it is fixing. */
@media (min-width:841px) and (max-width:1100px){
.pgrid-4 .pcard:nth-child(4):last-child{grid-column:1 / -1;border-right:0}
}
@media (max-width:840px){
.pgrid-4{grid-template-columns:1fr 1fr}
.pgrid-4 .pcard:nth-child(3n),.pgrid-4 .pcard:nth-child(4n){border-right:1px solid var(--black-10)}
.pgrid-4 .pcard:nth-child(2n){border-right:0}
}
@media (max-width:560px){
.pgrid-4{grid-template-columns:1fr}
.pgrid-4 .pcard{border-right:0!important}
}
/* The rule between spoke cells is the card's own right border, so whichever card
ends a short final row draws one into empty space. Fifteen cards in four tracks
is 4+4+4+3. This has to sit after every .pgrid-N rule above: those match at the
same specificity, and card fifteen is also an nth-child(3n). */
.svc-cards .pcard:last-child{border-right:0}
/* Fees. The figure is the heading, set at the size a figure deserves, because a
price written into a paragraph is a price nobody finds. */
.fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.fee-card{
background:var(--light-gray);border:1px solid var(--black-10);
border-radius:var(--r-s);padding:30px 28px
}
.fee-card h3{font-size:var(--t-s);margin-bottom:8px}
.fee-card p{font-size:var(--t-xxs);color:var(--para);margin:0}
/* Scoped to beat `.fee-card p`, which is the rule directly above it and which
otherwise sets the price to 14px along with the description. Same weight, and
it comes second, so it wins on order rather than on an !important. */
.fee-card .fee-num{
font-family:var(--display);font-size:52px;line-height:1;color:var(--dark);margin:0 0 16px
}
@media (max-width:767px){
.fee-grid{grid-template-columns:1fr;gap:16px;margin-top:26px}
.fee-card{padding:24px 20px}
.fee-card .fee-num{font-size:44px;margin-bottom:12px}
}
/* The closing block keeps the two column shape, but the left column now carries
its label instead of being empty. An empty grid column is not white space,
it is a column somebody forgot to fill. */
.doc-aside .eyebrow{margin:0}
/* -------------------------------------------- approach block, light version
The left column carries the label, the heading, one line of context and the
button; the right carries the four steps. Before this the left column held a
label and a heading and then stopped, which left a 305px column of nothing
running the height of the block. */
.split-note{font-size:var(--t-xxs);color:var(--para);margin:18px 0 22px;max-width:34ch}
.split-label .btn{margin-top:0}
.ap-steps{padding-top:4px}
/* ------------------------------------------------------------ closing block
The page's last words, then the ways out.
This was two columns with the statement in the narrower half, ending on 66px
of nothing. The statement is the honest caveat on every one of these pages and
the last thing anyone reads before the call to action, so it leads at display
size on its own measure, and the links follow as a ledger row. Nothing runs
short because nothing sits beside anything. */
.close-lead{max-width:none}
.close-state{
font-family:var(--display);font-size:30px;line-height:1.34;letter-spacing:-.2px;
color:var(--dark);margin:0;max-width:36ch
}
.close-rest{font-size:var(--t-xs);line-height:1.6;color:var(--para);margin:18px 0 0;max-width:var(--measure)}
.next-row{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--black-10);margin-top:36px
}
.next-card{
display:flex;align-items:baseline;justify-content:space-between;gap:14px;
padding:22px 24px 22px 0;border-right:1px solid var(--black-10);
border-bottom:1px solid var(--black-10);
font-size:var(--t-s);color:var(--dark);
transition:background-color .2s ease,padding-left .2s ease
}
.next-card:last-child{border-right:0;padding-right:0}
.next-card:not(:first-child){padding-left:24px}
.next-card svg{flex:0 0 auto;color:var(--para);transition:transform .2s ease,color .2s ease}
.next-card:hover{background:#222c300d}
.next-card:hover svg{transform:translateX(4px);color:var(--dark)}
.next-card:focus-visible{outline:2px solid var(--dark);outline-offset:-2px}
/* Two related links plus the booking card fill the three tracks exactly. A page
that also carries a cross-cluster link renders four, and the fourth would sit
alone in a new row with the rule stopping a third of the way across. Two by
two instead. Bounded to 841 and up because below that the row is already a
single column, and this selector would otherwise outrank that rule: it is
(0,2,0) against (0,1,0) and the mobile block sits later in the file. */
@media (min-width:841px){
.next-row:has(> :nth-child(4)){grid-template-columns:repeat(2,1fr)}
/* Five cards repeats the same problem one row further down: the fifth sits
alone with the rule stopping halfway across. Span it over both tracks. An
even count never triggers this, so 4 stays a clean two by two. */
.next-row:has(> :nth-child(4)) > :last-child:nth-child(odd){grid-column:span 2}
}
@media (max-width:840px){
.close-state{font-size:25px;max-width:none}
.next-row{grid-template-columns:1fr;margin-top:28px}
.next-card{border-right:0!important;padding:18px 0!important}
}
/* ==========================================================================
MOBILE
Everything below is what a phone needs and a desktop does not. It sits at the
end so the desktop rules above stay readable on their own terms.
========================================================================== */
/* --------------------------------------------------------------- the header
Three things share one row on a phone: the mark, the booking button and the
menu. At 375px they came to 348px against 327px of container, so the menu
button sat flush against the screen edge with no padding on its right while
every other element had 24px. Below 360px the row was wider than the screen
outright and every page on the site scrolled sideways.
The mark comes down, the button comes in, and below 360px the button's label
shortens to one word. The full wording stays on the anchor as its accessible
name, so a screen reader still hears "Book a consultation". */
.lbl-s{display:none}
@media (max-width:600px){
.nav{gap:14px;height:70px}
.brand img{height:40px}
.nav-cta{gap:0}
.nav-cta .btn{padding:12px 14px;font-size:13px;min-height:44px;justify-content:center}
.nav-toggle{font-size:22px}
}
@media (max-width:359px){
.container{padding:0 18px}
.nav{gap:12px}
.lbl-l{display:none}
.lbl-s{display:inline}
}
/* The menu is a disclosure. aria-expanded is set by the button's own handler;
this is the visual half of the same state. */
.nav.open .nav-toggle{opacity:.7}
/* ------------------------------------------------------------ vertical rhythm
A phone reads one column, so the generous section padding that gives a
1200px layout its air is just distance between the reader and the next thing
they came for. The home page ran 17,218px tall before this. */
@media (max-width:600px){
:root{--section:48px}
.section.tight{padding:40px 0}
.hero-inner{padding:56px 0 52px}
.cta-inner{padding:60px 0}
.page-head{padding:52px 0 44px}
.page-head.has-media{padding:56px 0 48px}
}
/* --------------------------------------------------------- panel padding
Any panel with a border or a fill spends its padding twice, once on each
side. At 34px inside a 327px screen the contact form was giving 68px of a
375px phone to empty margin and leaving 202px for the fields. */
@media (max-width:600px){
.process-list{padding:32px 22px}
.ap-panel{padding:26px 22px 22px}
.deadline{padding:26px 22px}
.contact-form-wrap{padding:24px 20px}
.quote-card{padding:26px 24px 24px}
.case,.cstrip{padding:22px 20px}
.pcard-text{padding:24px 20px 22px}
.rating-block{padding:22px 20px}
}
/* ------------------------------------------------------------- banner scrims
All three scrims run left to right, which is right for a 1200px banner where
the words occupy the left half and the photograph shows through on the right.
On a phone the words run the full width, so the end of every line sat over
whatever the photograph happened to be doing. Vertical, and heavier, is the
only version that holds contrast at this width. */
/* Weights checked against the composited pixel rather than chosen by eye: the
photograph is drawn to a canvas, the scrim is composited over it at each
text position and the ratio measured. At these values the worst point on the
page is 5.6:1 white on scrim, against the 4.5:1 minimum, with the picture
still visible underneath. */
@media (max-width:767px){
.hero-media::after{background:linear-gradient(180deg,#222c30c8 0%,#222c30da 50%,#222c30ee 100%)}
.cta-media::after{background:linear-gradient(180deg,#222c30cc 0%,#222c30ee 100%)}
.ph-media::after{background:linear-gradient(180deg,#222c30cc 0%,#222c30e6 100%)}
}
/* ------------------------------------------------------------------- forms
Safari on iOS zooms the whole page in when a field with type below 16px takes
focus, and does not zoom back out afterwards. The reader is then left on a
form wider than the screen. 16px is the threshold, not a preference. */
@media (max-width:767px){
.cform input,.cform select,.cform textarea{font-size:16px;padding:13px 14px}
.cform textarea{min-height:132px}
}
/* --------------------------------------------------------------- tap targets
A 21px link is a fine thing to click and a poor thing to hit with a thumb.
These are lists of links stacked close together, which is the case where a
miss lands on the neighbour rather than on nothing. Padding rather than
height, so the text stays where it is and only the target grows. */
@media (max-width:767px){
.foot-links a,.foot-links.inline a,.ct-link,.foot-bottom a{display:inline-block;padding:10px 0}
.foot-links{gap:2px}
.foot-links.inline{gap:0 22px}
.member .li a{display:inline-block;padding:5px 0}
/* The practice cards and team cards put an ::after overlay on the title, so
the whole card is the target and the 30px heading is not the real one. The
service list deliberately has no overlay, because an entry with no page yet
has no link at all, so here the heading is the target and has to grow. */
.svc-list h3 a{display:inline-block;padding:5px 0}
.svc-list li{padding-top:12px}
}
/* -------------------------------------------------------------- hero actions
Two buttons side by side at 375px leave each one about 160px, which is enough
for the label and nothing else. Stacked and full width they are the width of
the thumb that has to find them. */
@media (max-width:400px){
.dl-n{font-size:32px}
}
@media (max-width:479px){
.hero-actions{gap:10px}
.hero-actions .btn{width:100%;justify-content:center}
/* The mask that fades the review row's two edges was cutting 120px of a
375px screen, most of a card. */
.revs{
-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent)
}
}
/* The institution names are held on one line so the strip reads as a row of
stands rather than a paragraph. "Immigration and Refugee Board of Canada" is
264px set at 18px, which is wider than a folded phone. Below 480px it wraps;
the strip is a stack by then anyway, so there is no row left to keep. */
@media (max-width:479px){
.forum{white-space:normal;font-size:var(--t-xs)}
.forum-strip{gap:14px 24px;margin-top:38px;padding-top:26px}
}
/* The booking link on a fee card. It covers the whole cell, so the price, the
description and the link are one target rather than three. */
.fee-card{position:relative}
.fee-book{
display:inline-flex;align-items:center;gap:8px;margin-top:18px;
font-size:var(--t-xxs);font-weight:500;color:var(--dark)
}
.fee-book::after{content:"";position:absolute;inset:0}
.fee-book svg{transition:transform .2s ease}
.fee-card:hover{border-color:#00000029}
.fee-card:hover .fee-book svg{transform:translateX(4px)}
.fee-book:focus-visible::after{outline:2px solid currentColor;outline-offset:-3px;border-radius:var(--r-s)}
/* A head-split already closes itself with a hairline. A pgrid opens with one of
its own. Put them together and you get two parallel rules 34px apart, which
reads as a mistake rather than as a divider. The head's rule is the grid's
top edge; the grid drops its own. Applies on the practice hub and on the
immigration services grid, which are the two places the pair occurs. */
.head-split + .pgrid,.head-split + .dl-rows,.head-split + .checks-wide,
.head-split + .rv-list,.head-split + .dec-list{border-top:0;margin-top:0}
/* ------------------------------------------------------------- pcard hover
These cells had no hover state at all except the arrow nudging 4px, which is
not enough to tell you a cell is a link before you click it.
The wash is a translucent dark rather than a flat colour because the same
grid runs on two grounds: white under "Other practice areas", tinted under
the immigration services. A solid #fff hover would be invisible on the white
one. 5% of the theme dark shifts both by about 10 points of luminance, which
is enough to read as a state without reading as a different card. 3% was the
first try and measured at 6, which is where a change stops being noticeable.
The rule that wipes in along the top edge is the ledger's own hairline,
thickened and darkened. It sits at -1px so it covers that hairline instead of
doubling it, and it grows from the left, which is the direction the eye is
already travelling across the row. */
.pcard{transition:background-color .22s ease}
.pcard::before{
content:"";position:absolute;left:0;right:0;top:-1px;height:2px;z-index:2;
background:var(--dark);transform:scaleX(0);transform-origin:left center;
transition:transform .3s cubic-bezier(.2,.7,.3,1)
}
.pcard:hover,.pcard:focus-within{background-color:#222c300d}
/* focus-within as well as hover: the whole cell is one link, so a keyboard
tabbing through the grid should see the same cell light up that a pointer
does. */
.pcard:hover::before,.pcard:focus-within::before{transform:scaleX(1)}
.pcard:hover .idx,.pcard:focus-within .idx{color:var(--dark);opacity:1}
.pcard:hover .more,.pcard:focus-within .more{color:var(--dark)}
.pcard .idx,.pcard .more{transition:color .22s ease,opacity .22s ease}
/* An entry with no page yet gets none of it. A hover state on a cell that does
not go anywhere is worse than no hover state at all: it is an invitation to
click something that is not there. R30 in the gate depends on this staying
true, and the reader can tell the two apart before hovering because only the
built ones carry the arrow. */
.pcard.listed::before{display:none}
.pcard.listed:hover,.pcard.listed:focus-within{background-color:transparent}
.pcard.listed:hover .idx{color:var(--para)}
/* The document checklist, run as a section rather than as a list at the foot of
a prose column. Two columns so five or six items do not become a long thin
ribbon down the left of a 1152px page. */
.checks-wide{
grid-template-columns:1fr 1fr;gap:0 48px;margin-top:34px;
border-top:1px solid var(--black-10)
}
.checks-wide li{
padding:18px 0;border-bottom:1px solid var(--black-10);
align-items:start;font-size:var(--t-xs)
}
.checks-wide{border-bottom:1px solid var(--black-10)}
.checks-wide li:last-child{border-bottom:0}
.checks-wide[data-even] li:nth-last-child(2){border-bottom:0}
.checks-wide .tick{margin-top:2px}
@media (max-width:767px){
.checks-wide{grid-template-columns:1fr;gap:0;margin-top:26px}
/* One column: the last row is one item, so only its own border needs clearing
and the even-count rule above would wrongly clear the one above it too. */
.checks-wide[data-even] li:nth-last-child(2){border-bottom:1px solid var(--black-10)}
}
/* The process list on a spoke page. It used to sit inside a prose column at
736px; on its own it runs the container, so the numbered column and the text
stop competing for the same 300px. */
.process-list{border-radius:var(--r-s);margin-top:34px}
/* The clock on a process stage. Set beside the stage name rather than inside the
sentence: on a page about deadlines, the deadline is what the eye is hunting
for, and the rule beside it is what makes it checkable rather than a claim the
firm is making about itself. */
.step-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.step-head h3{margin-bottom:0}
/* ------------------------------------------------- reversed serif at text size
Playfair is a didone: its hairlines are a fraction of its stems. Rendered
white on the dark ground at 22px those hairlines fall below a whole pixel and
antialias away, so a quarter of each letter arrives as a grey smear and the
heading reads as out of focus rather than as thin.
Measured on the string these headings actually carry, at 22px:
dark on white, weight 400 2,355 solid px 0.0% of the ink faint
white on dark, weight 400 1,742 solid px 27.8% faint
white on dark, weight 500 1,920 solid px 25.1% faint
white on dark, weight 600 2,138 solid px 23.0% faint
white on dark, weight 700 2,278 solid px 23.6% faint
600 restores the solid ink to near the dark-on-white reference and is where
the faint share bottoms out. 700 adds weight without adding clarity, so this
stops at 600. It is optical compensation for the ground, not a style change:
the same heading on a light ground stays at 400, and the two never meet. */
.step h3,.step h4,
.ap-panel .ap-step h3,
.ins.featured .ins-body h3{font-weight:600}
.step-when{
font-size:13px;letter-spacing:.3px;color:#ffffffb3;
border:1px solid #ffffff2e;border-radius:100px;padding:4px 12px;white-space:nowrap
}
@media (max-width:600px){
.step-head{gap:8px}
.step-when{white-space:normal}
}
/* A four column comparison needs more room than a two column one before the
cells wrap every other word. The base 560px is right for two. */
.compare.wide{min-width:760px}
/* -------------------------------------------------- reported decisions ledger
One judgment per row: matter and case name, then the citation, then the
outcome. As a four across grid the seventh item left an empty cell and the
closing rule stopped three quarters of the way across, and a case is read as
a line anyway, not as a tile. */
.dec-list{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--black-10)}
.dec-row{
display:grid;grid-template-columns:1fr 260px 150px;gap:32px;align-items:center;
padding:20px 0;border-bottom:1px solid var(--black-10)
}
.dec-row > *{min-width:0}
.dec-matter{
font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--para);margin:0 0 6px
}
.dec-row h3{font-size:var(--t-s);font-style:italic;line-height:1.3;margin:0}
.dec-row h3 a{color:var(--dark);text-decoration:underline;text-underline-offset:3px}
.dec-row h3 a:hover{text-decoration-thickness:2px}
.dec-cite{
font-family:var(--display);font-size:var(--t-s);color:var(--dark);margin:0;line-height:1.3
}
.dec-docket{display:block;font-family:var(--body);font-size:13px;color:var(--para);margin-top:4px}
.dec-row .cs-won{justify-self:end;font-size:13px;white-space:nowrap}
@media (max-width:900px){
.dec-row{grid-template-columns:1fr auto;gap:8px 24px;align-items:start}
.dec-cite{grid-column:1;order:2}
.dec-row .cs-won{grid-row:1;grid-column:2;justify-self:end}
}
@media (max-width:520px){
/* One column, so the row reads in its natural order again: matter, case name,
citation, outcome. The `order:2` above is what moves the citation under the
name at tablet width, and left in place here it pushed the outcome badge
between the case name and the citation that proves it. */
.dec-row{grid-template-columns:1fr;gap:8px}
.dec-cite{order:0}
.dec-row .cs-won{order:1;grid-row:auto;grid-column:1;justify-self:start}
}
/* ------------------------------------------------ procedural fairness notice
The one block on a page about refusals that is addressed to somebody who has
not been refused. It carries a left accent rather than a fill, so it reads as
an aside the page is flagging rather than as another section, and so it does
not compete with the dark deadline band directly above it. */
.notice{
display:grid;grid-template-columns:minmax(260px,1.25fr) 1.6fr;gap:48px;
border-left:3px solid var(--dark);padding:6px 0 6px 34px
}
.notice > *{min-width:0}
.notice-head h2{margin:8px 0 16px;font-size:var(--h3);max-width:18ch}
.notice-lede{font-size:var(--t-s);line-height:1.55;color:var(--dark);margin:0}
.notice-list{list-style:none;margin:0;padding:0;counter-reset:notice}
.notice-list li{
counter-increment:notice;padding:0 0 22px 46px;position:relative;margin-bottom:22px;
border-bottom:1px solid var(--black-10)
}
.notice-list li:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.notice-list li::before{
content:counter(notice,decimal-leading-zero) ".";position:absolute;left:0;top:1px;
font-family:var(--display);font-size:var(--t-s);color:var(--para)
}
.notice-list h3{font-size:var(--t-s);margin-bottom:8px}
.notice-list p{font-size:var(--t-xxs);color:var(--para);margin:0;line-height:1.6;max-width:var(--measure)}
@media (max-width:991px){
.notice{grid-template-columns:1fr;gap:26px;padding-left:24px}
.notice-head h2{max-width:none}
}
@media (max-width:600px){
.notice{padding-left:18px}
.notice-list li{padding-left:38px}
}
/* The two ways to ask for your own file. A fee on the same line as the name,
because which of the two you need is decided by who you are and what it
costs, not by the wording of the Act. */
.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.route-card{
background:var(--light-gray);border:1px solid var(--black-10);
border-radius:var(--r-s);padding:28px 26px
}
.tinted .route-card{background:#fff}
.route-top{
display:flex;align-items:baseline;justify-content:space-between;gap:16px;
padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--black-10)
}
.route-top h3{font-size:var(--t-s);margin:0}
.route-fee{
font-family:var(--display);font-size:var(--t-l);color:var(--dark);white-space:nowrap
}
.route-card p{font-size:var(--t-xxs);color:var(--para);margin:0;line-height:1.6}
@media (max-width:767px){
.route-grid{grid-template-columns:1fr;gap:16px;margin-top:26px}
.route-card{padding:22px 20px}
}
/* ------------------------------------------- which decisions, grouped by answer
Two panels, not one list of ten. The reader is looking for their own decision
and then for which of two buckets it falls in; putting the buckets in the
structure means they only have to do the first half of that. */
.rv-groups{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px;align-items:start}
.rv-group{
border:1px solid var(--black-10);border-radius:var(--r-s);
background:#fff;padding:26px 26px 8px
}
.tinted .rv-group{background:#fff}
/* The panel for decisions that do carry an appeal leads on the dark ground, the
same ink the "Appeal first" chip used, so the distinction survives losing the
chips themselves. */
.rv-group.has{background:var(--dark);border-color:var(--dark)}
.rv-head{position:relative;padding:0 52px 18px 0;border-bottom:1px solid var(--black-10)}
.rv-head h3{font-size:var(--t-l);margin-bottom:6px}
.rv-head p{font-size:var(--t-xxs);color:var(--para);margin:0;line-height:1.5}
.rv-count{
position:absolute;right:0;top:-2px;
/* var(--gray) is a hairline colour and gave 1.67:1 for a number people are
meant to read. This is the count of decisions, not an ornament. */
font-family:var(--display);font-size:34px;line-height:1;color:#7c8b8a
}
.rv-group.has .rv-head{border-bottom-color:#ffffff2e}
.rv-group.has .rv-head h3{color:#fff}
.rv-group.has .rv-head p{color:#ffffffb3}
/* 30 per cent white on the dark ground is 2.6:1 for a 34px number people are
meant to read. The light-ground variant above was fixed for the same reason. */
.rv-group.has .rv-count{color:#ffffff8c}
.rv-list{list-style:none;margin:0;padding:0}
.rv-row{padding:16px 0;border-bottom:1px solid var(--black-10)}
.rv-row:last-child{border-bottom:0}
.rv-name{font-size:var(--t-xs);color:var(--dark);margin:0 0 4px}
.rv-name a{text-decoration:underline;text-underline-offset:3px}
.rv-name a:hover{text-decoration-thickness:2px}
.rv-dest{font-size:13px;color:var(--para);margin:0;line-height:1.5}
.rv-group.has .rv-row{border-bottom-color:#ffffff26}
.rv-group.has .rv-name{color:#fff}
.rv-group.has .rv-name a{color:#fff}
.rv-group.has .rv-dest{color:#ffffff99}
@media (max-width:840px){
.rv-groups{grid-template-columns:1fr;gap:20px}
.rv-group{padding:22px 20px 6px}
}
/* ------------------------------------------------ two things compared, as cards
Replaces the two column table. Five short answers per option in a grid of
mostly empty cells is what a table is worst at, and on a phone that table
scrolled sideways inside its wrapper. Two cards carry the same five points,
read down instead of across, and stack. */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;align-items:start}
.vs-card{
border:1px solid var(--black-10);border-radius:var(--r-s);
background:#fff;padding:0 0 8px
}
/* Both headers reserve two lines whether they need them or not. One option is
named "Judicial review" and the other "Appeal to the Immigration Appeal
Division", so left to themselves the headers are different heights and every
row below sits 21px out of step with its opposite number. Lining up the two
answers to the same question is the entire job of a comparison. */
.vs-card > h3{
font-size:var(--t-l);line-height:1.2;margin:0;padding:24px 26px 20px;
border-bottom:1px solid var(--black-10)
}
/* Two lines reserved, applied to both cards only when one of the two option
names actually needs two. It keeps the rows opposite each other level; on a
pair of short names it would only pad empty space under both. */
.vs-card.vs-2line > h3{min-height:calc(2.4em + 44px)}
/* The first option is the page's own subject, so it gets the ink. */
.vs-card.lead{background:var(--dark);border-color:var(--dark)}
.vs-card.lead > h3{color:#fff;border-bottom-color:#ffffff2e}
.vs-list{margin:0;padding:0}
.vs-item{padding:16px 26px;border-bottom:1px solid var(--black-10)}
.vs-item:last-child{border-bottom:0}
.vs-item dt{
font-size:12px;letter-spacing:.7px;text-transform:uppercase;
color:var(--para);margin-bottom:6px
}
.vs-item dd{margin:0;font-size:var(--t-xxs);color:var(--dark);line-height:1.55}
.vs-card.lead .vs-item{border-bottom-color:#ffffff26}
.vs-card.lead .vs-item dt{color:#ffffff8c}
.vs-card.lead .vs-item dd{color:#fff}
@media (max-width:767px){
.vs-grid{grid-template-columns:1fr;gap:18px;margin-top:26px}
.vs-card > h3{padding:20px 20px 16px}
.vs-item{padding:14px 20px}
}
/* An area the firm names but has not written a page for yet. A plain label
rather than a link or a badge with colour: it is a statement of scope, not an
invitation to click and not an apology. */
.pc-soon{
display:inline-block;font-size:13px;letter-spacing:.4px;color:var(--para);
border-top:1px solid var(--black-10);padding-top:12px;margin-top:2px
}
/* A byline with no review date yet. Same line, lighter rule, so it reads as a
statement of where the page stands rather than as a warning. It disappears on
its own the moment a date is recorded for that page. */
.byline-pending{border-left-color:var(--black-10)}
/* A credentials row sized to how many facts there are. The four up variant is
right for four; Kapil has four and nobody else has any, but a future licensed
hire may have two or three and a fixed four column grid would leave the row
ragged. */
.stats.four.auto{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.bio-actions{margin-top:26px}
/* The closing block's label is a real h2 styled as an eyebrow, so the block
stays in the heading outline after the statement took the display size. Same
device the footer headings use. */
.close-label{font-family:var(--body);font-weight:500;margin:0 0 20px}
/* ------------------------------------------------------------- fit / not fit
Two lists of equal length, side by side, on the same ground. The marks carry
no colour and are drawn identically: a green tick against a red cross would
turn two honest statements into a sales device, and a filled disc against a
hairline ring does the same job more quietly. Neither list is good news.
The head-split above already rules off, so this block draws no rule of its
own, and the columns carry no bottom padding, so the centre rule stops at the
last line of the taller column instead of hanging below both. */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:38px}
.fit-grid > *{min-width:0}
.fit-col{padding:0 48px 0 0;border-right:1px solid var(--black-10)}
.fit-col.out{border-right:0;padding:0 0 0 48px}
/* The statements are the content here, so the two column labels step back to
the caps device the closing block uses and the statements take the larger
size. Read down a column and the sentences lead, not their headings. */
.fit-col h3{
font-family:var(--body);font-size:var(--t-xxs);font-weight:500;letter-spacing:1.1px;
text-transform:uppercase;color:var(--para);margin:0 0 24px
}
.fit-col ul{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.fit-col li{display:grid;grid-template-columns:22px 1fr;gap:16px;font-size:var(--t-s);line-height:1.55}
.fit-mark{
width:22px;height:22px;border-radius:100px;display:grid;place-items:center;
margin-top:3px;border:1px solid var(--black-10)
}
.fit-mark.yes{color:var(--dark)}
.fit-mark.no{color:var(--para)}
.fit-col.out li{color:var(--para)}
@media (max-width:840px){
.fit-grid{grid-template-columns:1fr;gap:30px;margin-top:28px}
.fit-col{padding:0 0 30px;border-right:0;border-bottom:1px solid var(--black-10)}
.fit-col.out{padding:0;border-bottom:0}
}
/* At 375px an 18px statement wraps at about 32 characters, which reads tight.
One step down puts it back near 36 without changing the desktop hierarchy. */
@media (max-width:520px){
.fit-col li{font-size:var(--t-xs);grid-template-columns:20px 1fr;gap:14px}
.fit-mark{width:20px;height:20px;margin-top:1px}
}
/* A paragraph placed directly in a .container inherits the full 1152px and ran
at 172 characters. Scoped so the grids, tables and card decks that are meant
to use the full width are untouched.
The decision ledger is deliberately not in here. It measures wide because it
is a four column data row, matter, case, citation and outcome, and the text
is distributed across those cells rather than set as a line. Constraining it
would narrow the citation column for no reading benefit. */
.section > .container > p{max-width:var(--measure)}
/* The opening split and the head-split body carried their own measures, one at
64ch and one at none, which is how a single page ran three different line
lengths. Both now sit on the shared token. */
.head-split-body p{max-width:var(--measure)}
/* ------------------------------------------------------------ small screens
Two things a phone changes that a desktop does not show.
Reading floor. The body face is Source Serif 4. A serif needs more size than
a sans to stay legible, so 12px and 13px running text that was fine in Roboto
now sits at the edge on a handset. Anything the reader has to actually read
goes to 14px here. Uppercase labels, kickers, badges and counters are left
alone: they are scanned, not read, and 12px is the convention for them.
Touch. Standalone controls get a 44px box. Links inside a sentence are
deliberately excluded, because padding them out breaks the line box and the
surrounding prose already gives them room. */
/* Two small sizes on this site, and they are different registers, not a range.
13px is sentence-case meta a reader reads: a role, a citation, a docket, a
privacy line. 12px is an uppercase letter-spaced label a reader scans, which
at the same measured size reads larger than lowercase does. Nothing lowercase
is 12px any more; if a new rule wants to be, it wants 13.
991, not 767. The floor exists because a serif needs more size than a sans at
arm's length, and an iPad in portrait is 768: one pixel over the old boundary
and every one of these lines snapped back to 12px. Found by sweeping all 78
pages at both widths rather than by looking at a phone. */
@media (max-width:991px){
.hc-item p,.hc-stat p,.stats.four .stat p,.dec-meta p,.dec-sum,.dec-held,
.head-split-body p:last-child,.revnote,.dl-note,.member .li,.rev-meta,
.cf-privacy,.rv-dest,.case-who,.qc-role,.cs-cite,.pcard-hub .pc-kids,.split-note,
.notice-list p,.foot-brand p,.foot-lead > div:first-child p{
font-size:14px;line-height:1.55
}
.head-act a,.ct-link{display:inline-block;padding:11px 0}
.btn{min-height:44px;justify-content:center}
/* Breadcrumbs sit on one line, so the box grows downward only far enough
to be tappable without pushing the h1 off the first screen. */
.crumbs a{display:inline-block;padding:12px 0;margin:-12px 0}
.brand{min-height:44px}
}
/* A coarse pointer has no hover state to fall back on, so the affordance has to
be the box itself. This is pointer-based rather than width-based: a touch
laptop gets it, a narrow desktop window does not. */
@media (pointer:coarse){
/* 10px left these at 38px tall. 13px reaches 44, which is the figure the rest
of the touch pass works to. */
.spoke-rail a{padding-block:13px}
.faq summary{min-height:44px}
}
/* ------------------------------------------------------------------ reel strip
A drifting row of Instagram reels. The track carries the six tiles twice so the
loop closes without a seam: translating by half the track plus half a gap lands
the clone exactly where the original began. translateX resolves against the
border box, so the horizontal inset belongs on .rl-rail and never on .rl-track,
or the loop develops a visible jump.
It pauses on hover and on keyboard focus, which is the only thing that makes a
moving tile clickable. On a coarse pointer, and for anyone who asked the system
to reduce motion, the animation stops, the duplicate tiles come out and the row
becomes an ordinary swipeable scroller. A finger expects to push a strip rather
than wait for it. */
.reels{--rl-tile:274px;--rl-gap:22px}
.rl-rail{
overflow:hidden;padding:34px 24px 30px;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,#0000,#000 56px,#000 calc(100% - 56px),#0000);
mask-image:linear-gradient(90deg,#0000,#000 56px,#000 calc(100% - 56px),#0000)
}
.rl-rail::-webkit-scrollbar{display:none}
.rl-track{
display:flex;gap:var(--rl-gap);width:max-content;
animation:rl-drift 52s linear infinite;will-change:transform
}
.rl-dup{display:contents}
.rl-rail:hover .rl-track,.rl-rail:focus-within .rl-track{animation-play-state:paused}
@keyframes rl-drift{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-50% - (var(--rl-gap) / 2)),0,0)}
}
.rl-tile{
flex:0 0 auto;width:var(--rl-tile);aspect-ratio:9/16;position:relative;display:block;
border-radius:16px;overflow:hidden;background:#000;text-decoration:none;
border:1px solid #ffffff14;
transition:transform .35s cubic-bezier(.2,.7,.3,1),border-color .35s ease
}
.rl-tile:hover{transform:translateY(-4px);border-color:#ffffff2e}
.rl-tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.rl-v{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
transition:transform .5s cubic-bezier(.2,.7,.3,1)
}
.rl-tile:hover .rl-v{transform:scale(1.05)}
/* Without this the copy is unreadable over whichever frame the clip is on. */
.rl-scrim{
position:absolute;inset:0;
background:linear-gradient(0deg,#000000f2 0%,#000000d9 22%,#0000006b 42%,#0000 62%)
}
.rl-body{position:absolute;left:20px;right:20px;bottom:18px;display:block}
.rl-n{
display:block;font-family:var(--display);font-weight:700;font-size:25px;line-height:1;
color:var(--gold);letter-spacing:-.5px;font-variant-numeric:tabular-nums
}
.rl-d{display:block;font-family:var(--display);font-size:13px;color:#ffffff8c;margin-top:7px}
.rl-c{
display:-webkit-box;font-family:var(--display);font-size:14.5px;line-height:1.4;
color:#fff;margin-top:11px;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
@media (pointer:coarse),(prefers-reduced-motion:reduce){
.rl-rail{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rl-track{animation:none;width:auto}
.rl-dup{display:none}
.rl-tile{scroll-snap-align:start}
/* On the drifting version a wide fade is the point: a tile is meant to dissolve
as it leaves. Once this is a swipe strip the first tile is a thing somebody is
trying to look at, and 56px of it was 26 per cent of a 214px card. The reviews
marquee already narrows its own fade below 479px for the same reason.
scroll-padding matches the rail's inset, so a snap lands the tile beside the
padding rather than flush against the edge of the screen. */
.rl-rail{
scroll-padding-left:18px;
-webkit-mask-image:linear-gradient(90deg,#0000,#000 18px,#000 calc(100% - 18px),#0000);
mask-image:linear-gradient(90deg,#0000,#000 18px,#000 calc(100% - 18px),#0000)
}
}
@media (max-width:767px){
.reels{--rl-tile:214px;--rl-gap:16px}
.rl-rail{padding:26px 18px 24px}
.rl-tile{border-radius:14px}
.rl-n{font-size:21px}
.rl-c{font-size:13.5px}
}
/* The shared note measure is 70ch, cut for the two-sentence note under the
reviews. This one runs to four sentences and stranded six lines in the left
third of the band. 88ch is the width the site already uses for a note on a
dark ground, and it is still a readable measure at 13px.
Three classes, not two. The note is a direct child of a section container, so
`.section > .container > p` applies at 0,2,1 and its 60ch beats a two class
selector. This has to outrank that, not merely follow it. */
.reels .container .revnote{max-width:88ch}
/* ------------------------------------------------------------------ blog
Image led and three across, following the reference template's blog listing
rather than the ledger grid the service hubs use. A service card is one of a
fixed set and reads as a ledger; a note is an article and reads as a card with
a cover. No borders and no numbering here for that reason.
The heading carries the only anchor and its ::after covers the cell, so the
image and the affordance need no link of their own and the card still has one
anchor with one destination. */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.bl-card{position:relative;display:flex;flex-direction:column}
.bl-media{overflow:hidden;isolation:isolate;border-radius:var(--r-img);
background:var(--light-gray);aspect-ratio:3/2}
.bl-media img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.bl-card:hover .bl-media img{transform:scale(1.04)}
.bl-body{padding-top:22px;display:flex;flex-direction:column;flex:1 1 auto}
.bl-card h2,.bl-card h3{font-size:var(--t-l);line-height:1.28;margin:0 0 8px}
.bl-card h2 a,.bl-card h3 a{color:var(--dark);text-decoration:none}
.bl-card h2 a::after,.bl-card h3 a::after{content:"";position:absolute;inset:0}
.bl-card h2 a:focus-visible::after,.bl-card h3 a:focus-visible::after{
outline:2px solid currentColor;outline-offset:4px}
.bl-card:hover h2 a,.bl-card:hover h3 a{color:var(--gold-on-light)}
.bl-date{
font-family:var(--display);font-size:13px;color:var(--para);margin:0 0 10px
}
/* :not(.bl-date) because a bare descendant p here is (0,2,1) and would beat
.bl-date at (0,1,0), silently resetting the date to body size. */
.bl-card > .bl-body > p:not(.bl-date){margin:0 0 18px;color:var(--para);font-size:var(--t-xs)}
.bl-card .more{
margin-top:auto;display:inline-flex;align-items:center;gap:8px;
font-family:var(--display);font-size:13px;font-weight:500;color:var(--dark)
}
.bl-card .more svg{transition:transform .2s ease}
.bl-card:hover .more svg{transform:translateX(4px)}
/* Post page. The reference opens with a cover and a line of detail above the
text, and closes with the other posts. The reading measure stays at .prose
rather than the reference's 900px: at 16px that wrap runs about 95 characters
a line, which is well past comfortable, and this site sets its own measure. */
/* One column, so the cover, the detail line and the text share an edge. Before
this they were 1092, 517 and 609 wide inside a 1140 container, three different
measures stacked, and the meta was being squeezed to 60ch by
`.section > .container > p` at (0,2,1). Nesting takes it out of that rule. */
.bl-post{max-width:720px;margin-inline:auto}
.bl-post .prose{max-width:none}
.bl-cover{overflow:hidden;border-radius:var(--r-img);aspect-ratio:16/7;
margin-bottom:26px;background:var(--light-gray)}
.bl-cover img{width:100%;height:100%;object-fit:cover;display:block}
/* Detail line above the heading, where the reference sets it. Separators are
drawn rather than typed so the text stays readable to a screen reader. */
.ph-meta{
display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
/* Sits closer to the heading than to the crumbs above it, because it belongs
to the heading. 6px was not close, it was collided. */
margin:20px 0 12px;font-family:var(--display);font-size:13px;color:var(--gray)
}
.ph-meta span + span{display:flex;align-items:center;gap:18px}
.ph-meta span + span::before{
content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.7
}
@media (max-width:640px){.bl-cover{aspect-ratio:3/2;margin-bottom:20px}}
@media (max-width:991px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media (max-width:600px){.bl-grid{grid-template-columns:1fr;gap:34px}}
.bl-back{
margin-top:30px;padding-top:22px;border-top:1px solid var(--black-10);
font-size:var(--t-xs)
}
/* ------------------------------------------------------------- note sidebar
The article ran 720px centred inside a 1152px container, so 216px of white
stood down each side carrying nothing. The right side now holds the two
things a reader of a dated note reaches for: where they are in this note, and
what the other notes are. Both are indexes, so both are set as rails rather
than as cards, and the contents rail borrows the vocabulary .spoke-rail
already established on the practice hubs.
Below the breakpoint the aside stacks under the article and the contents rail
is dropped rather than stacked, because a list of sections printed after the
sections it indexes is furniture. The notes list stays. */
.bl-aside{display:grid;gap:38px}
/* 992, the same boundary the FAQ two-column rule and .bl-grid already use. The
first version said 1080, on the reasoning that a fixed 720 + 72 + 264 comes to
1056 and will not fit a 1080px container. The track is minmax(0,720px), so it
shrinks instead, and the real question was how narrow the article may get: at
992 it is 670, which is a fine measure. 1080 meant a 1062px window, which is
an ordinary laptop with the browser not maximised, saw no rail at all.
The rail and the gap are fluid so the article keeps the 720 cap on a wide
screen and gives up as little as possible on a narrow one. */
@media (min-width:992px){
.bl-layout{
display:grid;
grid-template-columns:minmax(0,720px) clamp(224px, 21vw, 264px);
gap:clamp(40px, 5vw, 72px);
justify-content:center;align-items:start
}
.bl-post{max-width:none;margin-inline:0}
.bl-aside{position:sticky;top:96px}
}
@media (max-width:991px){
/* The rail holds only the contents, and a list of sections printed after the
sections it indexes is furniture, so below the breakpoint there is nothing
left in it to stack. The other notes run full width under the article at
every width, which is where they read better anyway. */
.bl-aside{display:none}
}
.bl-side-h{
font-family:var(--display);font-size:13px;font-weight:500;
letter-spacing:1.1px;text-transform:uppercase;color:var(--para);
margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--black-10)
}
/* Contents */
.bl-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--black-10)}
.bl-toc a{
display:block;padding:8px 0 8px 15px;margin-left:-1px;
border-left:2px solid transparent;
font-family:var(--display);font-size:13px;line-height:1.4;
color:var(--para);text-decoration:none;
transition:color .18s,border-color .18s
}
.bl-toc a:hover,.bl-toc a:focus-visible{color:var(--dark);border-left-color:var(--para)}
.bl-toc a[aria-current]{color:var(--dark);border-left-color:var(--dark);font-weight:500}
/* Every h2 is a jump target now, so it has to clear the sticky header when the
page lands on one. */
.bl-post .prose h2{scroll-margin-top:104px}
/* The newest note leads the index. Four notes across three tracks stranded the
fourth with 795px of white beside it, and nothing on the page said which note
was the most recent. The lead spans the row and turns horizontal: cover left,
text right, at a heading size that says it is the entry point.
992, not 840. The grid is three tracks only above 991; between 840 and 991 it
is two, and a lead spanning both of those pushed the remaining three into
2 + 1 and stranded the fourth card all over again, which is the bug this was
meant to fix. A span rule has to know which grid it is spanning. */
@media (min-width:992px){
.bl-lead,
/* .is-wide is set by blog-filter.js, which works the widening out from what is
visible. The nth-child rules below cannot: :nth-child counts the DOM, and
hiding a card does not change it. */
.bl-card.is-wide,
/* A card left alone on the final row of the index, where a lead spans and the
rest start at child 2, so the lone one is always 3n+2. Excluded while a
filter is on, and on a service page strip, which has no lead. */
.bl-grid:not(.bl-flat):not([data-filtered]) > .bl-card:last-child:nth-child(3n+2),
/* The same on a service page strip, where nothing spans and the rest start at
child 1. At one note that is the note itself, which is the shape a single
note wants anyway. */
.bl-grid.bl-flat:not(.bl-cols-2) > .bl-card:last-child:nth-child(3n+1){
grid-column:1 / -1;flex-direction:row;gap:44px;align-items:stretch
}
.bl-lead .bl-media,
.bl-card.is-wide .bl-media,
.bl-grid:not(.bl-flat):not([data-filtered]) > .bl-card:last-child:nth-child(3n+2) .bl-media,
.bl-grid.bl-flat:not(.bl-cols-2) > .bl-card:last-child:nth-child(3n+1) .bl-media{
flex:0 0 46%;aspect-ratio:16/11
}
.bl-lead .bl-body,
.bl-card.is-wide .bl-body,
.bl-grid:not(.bl-flat):not([data-filtered]) > .bl-card:last-child:nth-child(3n+2) .bl-body,
.bl-grid.bl-flat:not(.bl-cols-2) > .bl-card:last-child:nth-child(3n+1) .bl-body{
padding-top:0;justify-content:center
}
/* Two notes sit in two tracks, not three with a hole. */
.bl-grid.bl-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* .bl-card .more takes margin-top:auto so affordances share a baseline across
a row of cards of different heights. A card that is its own row has no row
to line up with, and the auto margin ate 139px between the summary and the
affordance while holding the text against the top of a 364px cover.
Dropping it lets justify-content actually centre the block. */
.bl-lead .more,
.bl-card.is-wide .more,
.bl-grid:not(.bl-flat):not([data-filtered]) > .bl-card:last-child:nth-child(3n+2) .more,
.bl-grid.bl-flat:not(.bl-cols-2) > .bl-card:last-child:nth-child(3n+1) .more{margin-top:10px}
/* Only the lead takes the larger heading. A stranded card two rows down at
that size would out-shout the entry it sits under. */
.bl-lead h2{font-size:var(--h3)}
/* Matches the (0,3,1) of the base card rule rather than merely following it. */
.bl-lead > .bl-body > p:not(.bl-date){font-size:var(--t-s);max-width:52ch}
}
/* Same stranding in the two-track band, where no card spans and the lone one is
an odd child. It still has to span below 700, it just stops turning sideways:
a 46 per cent cover there leaves the text about 280px, narrower than the cards
it sits with, so it keeps the ordinary cover-on-top form at full width. The
band starts at 601 because at exactly 600 the grid is already one track. */
@media (min-width:601px) and (max-width:991px){
.bl-grid > .bl-card:last-child:nth-child(2n+1){grid-column:1 / -1}
}
@media (min-width:700px) and (max-width:991px){
.bl-grid > .bl-card:last-child:nth-child(2n+1){
grid-column:1 / -1;flex-direction:row;gap:36px;align-items:stretch
}
.bl-grid > .bl-card:last-child:nth-child(2n+1) .bl-media{flex:0 0 46%;aspect-ratio:16/11}
.bl-grid > .bl-card:last-child:nth-child(2n+1) .bl-body{padding-top:0;justify-content:center}
.bl-grid > .bl-card:last-child:nth-child(2n+1) .more{margin-top:10px}
}
/* ------------------------------------------------- deadline band, wide only
Wrapped in min-width:841 because the single-column rules for this band sit
further up the file and clear border-left there; anything below that restores
a border would win on source order and put a rule down the side of a phone.
Found by sweeping all 78 pages at 1062, which is what an ordinary laptop with
the browser not maximised actually reports. */
@media (min-width:841px){
/* The left border is a divider between cells, so the first cell of any row
must not draw one: there is nothing to its left. Only :first-child was
exempt, so every band with more than three figures hung a hairline at the
container edge and indented that cell's text 32px while the cell above it
sat flush. Six pages. */
.dl-rows > :nth-child(3n+1){border-left:0;padding-left:0}
/* Four figures go two by two. Three tracks left the fourth alone with 676px
of white beside it, live on /family-law/relocation/. Row starts become odd
children, so the 3n+1 rule above has to be undone before the 2n+1 one. */
.dl-rows:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
.dl-rows:has(> :nth-child(4):last-child) > :nth-child(3n+1){
border-left:1px solid #ffffff26;padding-left:32px
}
.dl-rows:has(> :nth-child(4):last-child) > :nth-child(2n+1){
border-left:0;padding-left:0
}
/* Five go three then two, both rows filling the width, rather than three and
a hole where a sixth cell would be. Six tracks because that is the smallest
count a row of three and a row of two both divide into. These figures are a
chronology, so they cannot be reordered into a tidier number. Row starts are
still children 1 and 4, which 3n+1 already covers. */
.dl-rows:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,1fr)}
.dl-rows:has(> :nth-child(5):last-child) > *{grid-column:span 2}
.dl-rows:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3}
}
/* `.section > .container > p` applies at (0,2,1) and its 60ch beats .dl-note at
(0,1,0), so the note under a deadline band rendered at 413px: a 497-character
citation line in a column a third the width of the band it explains. The
fourth element this rule has caught. Naming the class on the p element takes
it to (0,3,1), which outranks it rather than merely following it. */
.section > .container > p.dl-note{max-width:88ch}
/* Latest notes in the rail. The item is the grid, not the anchor: cover down the
left across both text rows, title and date stacked beside it.
Restored after being removed, deliberately: the same notes also run full width
under the article, and a sticky rail item is read while somebody is still in
the article where the strip at the foot is not. It is desktop-only (.bl-aside
is display:none below 992) so the two never appear within one screen of each
other, which is the version of the overlap that would actually read badly.
None of the responsive variants this block used to carry came back with it. */
.bl-more ul{list-style:none;margin:0;padding:0}
.bl-more li{
position:relative;display:grid;
grid-template-columns:64px minmax(0,1fr);column-gap:14px;row-gap:5px;
align-items:start;
padding:16px 0;border-bottom:1px solid var(--black-10)
}
.bl-more li:first-child{padding-top:0}
.bl-more li:last-child{border-bottom:0;padding-bottom:0}
.bl-thumb{
grid-row:1 / span 2;display:block;overflow:hidden;isolation:isolate;
border-radius:var(--r-s);aspect-ratio:1;
background:var(--light-gray)
}
.bl-thumb img{
width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease
}
.bl-more li:hover .bl-thumb img{transform:scale(1.05)}
.bl-mlink{
grid-column:2;font-family:var(--display);font-size:14px;font-weight:500;
line-height:1.35;color:var(--dark);text-decoration:none;transition:color .18s
}
/* Covers the item, so the date below is part of the same target without being
pulled inside the anchor text, where the longest title and its date together
come to exactly the 70 characters R22 allows. */
.bl-mlink::after{content:"";position:absolute;inset:0}
.bl-more li:hover .bl-mlink,.bl-mlink:focus-visible{color:var(--para)}
.bl-mtd{
grid-column:2;font-family:var(--display);font-size:13px;
color:var(--para);opacity:.75
}
/* ------------------------------------------------------- notes filter chips
Ships hidden; blog-filter.js reveals it, so the controls never exist without
the script that makes them do something. */
.bl-cats{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.bl-cat{
display:inline-flex;align-items:baseline;gap:8px;
padding:9px 17px;border:1px solid var(--black-10);border-radius:var(--r-pill);
background:transparent;color:var(--para);cursor:pointer;
font-family:var(--display);font-size:13px;font-weight:500;line-height:1;
transition:color .15s,border-color .15s,background .15s
}
.bl-cat span{font-size:13px;opacity:.65;font-variant-numeric:tabular-nums}
.bl-cat:hover{color:var(--dark);border-color:var(--para)}
.bl-cat[aria-pressed="true"]{background:var(--dark);border-color:var(--dark);color:#fff}
.bl-cat[aria-pressed="true"] span{opacity:.7}
.bl-cat:focus-visible{outline:2px solid var(--dark);outline-offset:3px}
/* .bl-card sets display:flex, which beats the user-agent rule for [hidden]. */
.bl-card[hidden]{display:none}
/* 44, the same floor .btn takes. Padding alone gave 39: a 13px line in a
pill is shorter than a button with body text in it. */
@media (pointer:coarse){.bl-cat{padding:12px 18px;min-height:44px}}
/* ------------------------------------------- two more stranded cells, at 768
Both pre-date the 13px change; the earlier tablet passes ran before the sweep
had a stranding check, so neither had been looked for. */
@media (min-width:641px) and (max-width:991px){
/* A bare .pgrid is two tracks here. Nine practice cards on the home page left
the ninth alone in a half width cell with its right border hanging into the
empty one beside it. The .pgrid-N variants all carry .svc-cards and have
their own stranding rules keyed to their own track counts, so this must not
reach them: a five card .pgrid-4 in this band is three across, where card
five is not stranded and spanning it would be the bug. */
.pgrid:not(.svc-cards) > .pcard:last-child:nth-child(2n+1){
grid-column:1 / -1;border-right:0
}
}
@media (min-width:601px) and (max-width:991px){
/* .hc-photo is display:none here, so three cells sit in two tracks and the
rating block is alone with half a row of empty translucent panel beside it,
inside a bordered card where the gap is obvious. Named rather than matched
by position: :nth-child still counts the hidden photograph, so .hc-stat is
the fourth child and no odd-child selector reaches it. */
.hero-cards .hc-stat{grid-column:1 / -1}
}
/* The contact page's closing button sends the reader to the form rather than
reloading the page, so the form has to clear the sticky header when it lands. */
#enquiry{scroll-margin-top:104px}
/* Privacy and terms sit in the bottom footer bar, which is already a wrapping
flex row, so this only needs to keep the pair together and give the two links
a gap. `order` puts them before the licence note rather than after it: a
licence note is the last thing on the page, not a thing to read past. */
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 20px;order:-1}
.foot-legal a{color:inherit}
/* inline-flex with a min-height, not more padding. The shared .foot-bottom rule
pads 10px onto a 21px line and lands at 41, and padding on an inline-block is
not a reliable way to reach a touch target. */
@media (pointer:coarse){.foot-legal a{display:inline-flex;align-items:center;min-height:44px}}
.foot-legal a:hover{color:#fff}
/* A closing line under a question block. Left as a bare .prose paragraph it was
609px of text hanging under a 1152px accordion with nothing joining the two,
which reads as a sentence somebody forgot to delete rather than a note on the
block above it. The rule ties it to the accordion and the measure stays on the
text, where it belongs. The wrapper is a div on purpose: a bare p here would
be a direct child of .container and `.section > .container > p` at (0,2,1)
would clamp it to 60ch. */
/* A left rule, not a top one. `.bl-back` uses a top rule and is right to: the
prose above it has no edge of its own. An accordion is a stack of bordered
boxes, so a hairline drawn 30px beneath them belongs to nothing and reads as
clutter. This is the vocabulary `.byline` already uses for a line attached to
the thing above it. */
.faq-note{
margin:30px 0 0;padding-left:16px;border-left:2px solid var(--gray)
}
.faq-note p{margin:0;max-width:70ch;font-size:var(--t-xs);line-height:1.6}
@media (max-width:991px){.faq-note p{font-size:14px;line-height:1.55}}
/* ---------------------------------------------------- embedded enquiry form
The form is GoHighLevel's, in an iframe, so nothing inside it can be styled
from here: the typeface, the inputs, the green submit and the red error text
are set in the GHL form builder and have to be changed there. All this does is
give the frame a sane box and stop it inheriting the iframe default border.
The height attribute is on the element so the space is reserved before the
frame loads; GHL's form_embed.js then resizes it. Without the attribute the
whole page below the form jumps when it arrives. */
.ghl-form{margin:0 0 20px}
.ghl-form iframe{
display:block;width:100%;border:0;border-radius:var(--r-s);background:var(--light-gray)
}
/* Social icon row. Sits in the footer's "Where to find us" block. Icons are
inline SVG using currentColor, so they inherit the footer's colour and need
no separate dark-mode rule. 44px hit area on the anchor keeps the touch
target at the accessible minimum while the glyph itself stays 20px. */
.foot-social{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.foot-social .soc{display:inline-flex;align-items:center;justify-content:center;
width:44px;height:44px;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-s);
color:inherit;text-decoration:none;transition:background .18s ease,border-color .18s ease}
.foot-social .soc:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.45)}
.foot-social .soc:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.foot-social .soc svg{display:block}
@media (prefers-reduced-motion:reduce){.foot-social .soc{transition:none}}
/* Registration number under a regulated title. Reads as secondary to the role
itself but must stay legible: it is there to be checked against the College
register, not as decoration. */
.member .role.reg{font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.75;margin-top:2px}
|