/* SW Partners In Property · sw-pip.co.uk
   Brand: navy #000047 base, off-white #F5F5F5, Poppins 500 headings,
   Montserrat 600 strapline. Palette from Notion → Visual Identity.
   Mobile first. 16px gutters. No horizontal scroll. */

/* Self-hosted brand fonts (SIL Open Font License, licences alongside the files) */
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Poppins;font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Montserrat;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-weight:600;font-style:normal;font-display:swap;src:url(fonts/montserrat-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}


:root{
  --navy:#000047; --off:#F5F5F5; --white:#FFFFFF;
  /* The page surface. Separate from --off, which is the light ink used on
     navy: one token cannot be both without a change to one breaking the
     other. Deepened from #F5F5F5 on 13 Oct 2026, Sara's call, because the
     old value sat at 1.09:1 against --white and the band alternation was
     invisible, leaving section gaps reading as holes. Now 1.21:1. */
  --page:#E9E9F1;
  --cyan:#6FC5E3; --sky:#6CBFF3; --indigo:#7965F1; --deep:#434395;
  --lav:#D38BFB; --gold:#ECB43C; --red:#D53835;
  --ink:#000047; --muted:#3D3D6B; --line:rgba(0,0,71,.1);
  --radius:12px; --gutter:16px; --max:1100px; --read:720px;
  --shadow:0 18px 46px rgba(0,0,71,.12);
  --ease:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:128px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16px;font-weight:400;line-height:1.72;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:.08em}
a:hover{text-decoration-color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:active,.button:active{transform:scale(.97)}
h1,h2,h3{font-family:Poppins,system-ui,sans-serif;font-weight:500;line-height:1.08;letter-spacing:-.035em;margin:0 0 .7em}
/* 4.6rem at the top end, not 5.4rem. At 5.4 the longest headlines on the site
   ran four lines deep and filled the screen on their own, pushing the
   standfirst below the fold on selling and on the leverage articles. Nothing
   now runs past three. It is also the size selling, lending and about were
   already using, so this brings the rest of the site to them rather than the
   other way round. 13 October 2026. */
h1{font-size:clamp(2.25rem,6vw,4.6rem);max-width:900px}
h2{font-size:clamp(2rem,5vw,4rem);max-width:860px}
h3{font-size:clamp(1.25rem,2.6vw,1.7rem);letter-spacing:-.02em;margin-top:0}
p{margin:0 0 1.25em}
.container{width:min(100%,calc(var(--max) + (var(--gutter) * 2)));margin-inline:auto;padding-inline:var(--gutter)}
.read{max-width:var(--read)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy);padding:12px 18px;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0;top:0}

/* header */
.site-header{position:sticky;top:0;z-index:60;background:var(--navy);color:var(--white);border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 8px 26px #00001e1f}
.header-inner{min-height:104px;display:flex;align-items:center;gap:24px;padding-block:18px}
.wordmark{text-decoration:none;display:inline-flex;line-height:1;flex:0 0 auto}
.wordmark img{width:clamp(220px,26vw,340px);height:auto}
.site-nav{margin-left:auto}
.site-nav ul,.footer-links{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.site-nav a{text-decoration:none;font-size:.78rem;color:var(--off);padding-block:8px;border-bottom:2px solid transparent;white-space:nowrap}
.site-nav a:hover,.site-nav a[aria-current=page]{border-color:var(--cyan)}

/* buttons */
.button,.contact-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border:0;border-radius:999px;background:var(--gold);color:var(--navy);font-weight:500;text-decoration:none;padding:11px 20px;transition:transform .16s var(--ease),box-shadow .18s var(--ease)}
.button:hover,.contact-button:hover{box-shadow:0 8px 28px #ecb43c38;text-decoration:none}
/* Secondary action. Same size and shape as .button so a pair reads as two
   options rather than one action and an afterthought; outlined rather than
   filled so the primary one still leads. Used on /private-lending. */
.button.quiet{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.button.quiet:hover{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 2px var(--navy)}
.button-pair{display:flex;flex-wrap:wrap;gap:12px;margin:1.2em 0}

/* bands */
main{display:block}
.section{padding-block:clamp(64px,8vw,112px)}
.section-tight{padding-block:clamp(42px,6vw,76px)}
/* Where two sections share a background there is no edge between them, so the
   two paddings stack into a 205px void that reads as a gap rather than as a
   break. Half the top padding on the follower: still a clear separation, no
   hole. Nine joins across the site, found by comparing computed background
   colours on consecutive sections rather than by eye. */
.section:not(.white-band):not(.navy-band) + .section:not(.white-band):not(.navy-band),
.white-band + .white-band,
.navy-band + .navy-band{padding-top:clamp(32px,4vw,56px)}
.navy-band{background:var(--navy);color:var(--off);position:relative;isolation:isolate}
.navy-band:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.16;background:radial-gradient(circle at 12% 18%,var(--cyan) 0,transparent 28%),radial-gradient(circle at 86% 74%,var(--indigo) 0,transparent 34%)}
.white-band{background:var(--white)}
.strapline,.eyebrow,.jump-label{font-family:Montserrat,system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.16em}
.strapline{font-size:.57rem;color:var(--cyan);margin-top:7px}
.eyebrow{display:block;color:var(--cyan);font-size:.72rem;margin-bottom:18px}
.lead{font-size:clamp(1.08rem,2vw,1.32rem);line-height:1.58;max-width:790px}
/* The hinge line on /selling. It turns the page from "probably not us" to
   "this is who we are for", so it stands on its own rather than opening a
   paragraph. Wendy's note, 9 October 2026. */
.pivot{font-size:clamp(1.3rem,3vw,1.95rem);line-height:1.22;letter-spacing:-.025em;font-weight:500;color:var(--navy);max-width:none;margin:1.5em 0 .85em;padding-top:.62em;border-top:3px solid var(--gold);display:inline-block}
.list-note{font-size:.92rem;color:var(--muted);margin-top:-.2em}
.page-lead{padding-block:clamp(58px,8vw,104px);background:var(--white);position:relative}
.page-lead:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,var(--gold) 0 25%,var(--cyan) 25% 52%,var(--indigo) 52% 78%,var(--lav) 78%)}
.long-copy{max-width:var(--read)}

/* Wendy's layout note, 8 Oct 2026: a long list inside a paragraph reads as a
   wall. Same words, same length, broken out so it looks manageable. */
.case-list{max-width:var(--read);margin:1.1em 0;padding:0;list-style:none;display:grid;gap:.62em}
.case-list li{position:relative;padding-left:1.45em}
.case-list li:before{content:"";position:absolute;left:0;top:.62em;width:.46em;height:.46em;border-radius:50%;background:var(--cyan)}
.navy-band .case-list li:before{background:var(--gold)}
/* "On this page" jump nav. Added in v4 so the long pages can be skimmed
   rather than scrolled, which is half of what Wendy's feedback asked for. */
.jump{max-width:var(--read);margin:2.1em 0 0;padding-top:1.4em;border-top:1px solid var(--line)}
.jump-label{font-size:.72rem;color:var(--deep);margin:0 0 .9em}
.jump ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:block;padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:var(--white);font-size:.88rem;line-height:1.4;text-decoration:none;transition:background .18s var(--ease),border-color .18s var(--ease)}
.jump a:hover{background:color-mix(in srgb,var(--cyan) 16%,var(--white));border-color:var(--cyan)}
.testimonial-label{margin-bottom:0}

/* placeholders. Deliberately loud. Do not tidy these away. */
.placeholder{color:var(--red)!important;font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.82rem;line-height:1.45;border:1px solid color-mix(in srgb,var(--red) 45%,transparent);background:color-mix(in srgb,var(--red) 6%,var(--white));border-radius:8px;padding:9px 11px;display:block;margin:1em 0}
.navy-band .placeholder,.site-header .placeholder{background:#d5383524}
/* Wendy's comments on the website, from "Comments on website - WE", where they
   have not been actioned. Same mechanism as .placeholder so the copy lint still
   strips them, different colour so it is obvious which notes are hers. */
.placeholder.feedback{color:var(--indigo)!important;border-color:color-mix(in srgb,var(--indigo) 45%,transparent);background:color-mix(in srgb,var(--indigo) 7%,var(--white))}
.placeholder code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}

/* home */
.home-hero{padding-block:clamp(26px,5vw,72px) clamp(38px,6vw,78px)}
.home-hero h1{font-size:clamp(2.02rem,7vw,5.2rem);margin-bottom:.38em}
/* One measure for the hero. The h1 capped at 900 and .lead at 790 while the
   plain paragraph ran the full 1100, so the block had three right edges and a
   line length no one should have to read. All three now end together. */
.home-hero .container>p{max-width:900px}
.home-intro{display:grid;gap:5px;max-width:880px}
.home-intro p{margin-bottom:.55em}
.fork-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.fork-card{min-width:0;background:var(--white);color:var(--navy);border-radius:var(--radius);padding:clamp(14px,3vw,28px);box-shadow:0 20px 50px #00001e2e;display:flex;flex-direction:column;border-top:5px solid var(--cyan);text-decoration:none}
.fork-card:first-child{border-top-color:var(--gold)}
.fork-card h2{font-size:clamp(1.03rem,3.5vw,1.55rem);letter-spacing:-.02em;margin-bottom:.45em}
.fork-card p{font-size:clamp(.74rem,2.6vw,.97rem);line-height:1.48;margin-bottom:1em}
.fork-card .go{font-weight:500;margin-top:auto;text-decoration:underline;text-decoration-color:var(--cyan)}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(30px,7vw,90px);align-items:center}
.photo-frame{border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:0 22px 60px #00004724;position:relative}
.photo-frame:after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.28);border-radius:inherit;pointer-events:none}
.photo-frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.newsletter-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:40px;align-items:center}

/* the bridge. Two readers on the outside, PiP in the middle, which is the
   whole idea of the business said as a picture rather than a paragraph.
   The outer two are the doors; the middle one is not a link. */
.bridge{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(12px,2.4vw,28px);align-items:stretch;margin-top:26px}
.bridge-end{min-width:0;background:var(--white);color:var(--navy);border-radius:var(--radius);padding:clamp(16px,3vw,30px);box-shadow:0 20px 50px #00001e2e;display:flex;flex-direction:column;align-items:center;text-align:center;text-decoration:none;border-top:5px solid var(--gold);transition:box-shadow .18s var(--ease)}
.bridge-end:last-child{border-top-color:var(--lav)}
.bridge-end h2{font-size:clamp(1rem,3.2vw,1.5rem);letter-spacing:-.02em;margin-bottom:.45em}
.bridge-end p{font-size:clamp(.74rem,2.5vw,.97rem);line-height:1.48;margin-bottom:1em}
.bridge-end .go{font-weight:500;margin-top:auto;text-decoration:underline;text-decoration-color:var(--cyan)}
.bridge-end:hover{box-shadow:0 26px 60px #00001e45}
.bridge-figure{display:block;margin-bottom:clamp(12px,2vw,18px)}
.bridge-figure img{width:clamp(34px,5vw,54px);height:auto;display:block;margin-inline:auto}
.bridge-middle{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;align-self:start;padding:calc(clamp(16px,3vw,30px) + 5px) clamp(6px,1.6vw,18px) 0}
.bridge-join{position:relative}
.bridge-join:before,.bridge-join:after{content:"";position:absolute;top:50%;width:clamp(10px,2.4vw,30px);height:2px}
.bridge-join:before{right:100%;background:linear-gradient(90deg,transparent,var(--cyan))}
.bridge-join:after{left:100%;background:linear-gradient(90deg,var(--cyan),transparent)}
.bridge-name{font-family:Poppins,system-ui,sans-serif;font-weight:500;font-size:clamp(.78rem,1.9vw,1.02rem);line-height:1.15;letter-spacing:-.02em}
.bridge-role{font-family:Montserrat,system-ui,sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.5rem,1.1vw,.62rem);color:var(--cyan);margin-top:10px;max-width:14ch;line-height:1.35}
/* The figure sits inside the title, which is the agreed treatment: it is not
   to hang on its own above the heading. It is floated and sized to exactly two
   lines of it, so a two-line heading (about) sits squarely beside it and the
   longer ones (selling, lending) wrap round and come back to the column edge
   underneath. 2.12em rather than 2.16: two lines measure 2.16em, but at that
   height the float rounds up and pushes a third line across. Sara's call,
   13 October 2026. */
.page-head{display:flow-root;font-size:clamp(2.1rem,6vw,4.6rem);margin-bottom:.55em}
/* The title block runs 12px past the reading column on a wide screen. That is
   not a flourish: beside the figure the first line has 564px, and "Some
   properties" needs 574, so without it the selling headline breaks after
   "Some" and leaves one word on a line of its own. Sara's call, she wants
   "Some properties / don't sell the / conventional way". Measured band: from
   +8px the break flips, and at +20px the about heading starts breaking badly
   instead, so 12 sits in the middle of it with room either side. */
@media (min-width:900px){.page-head{margin-right:-12px}}
.page-head h1{font-size:1em;margin:0;max-width:none}
/* 1.86em, not 2.12. Two lines of heading measure 2.16em of LINE BOX, but a
   line box is not ink: Poppins fills 57px of a 79px line at this size, and the
   leading above the first line and below the second is empty. Measured, the
   visible letters run 137px from the top of the capitals on line one to the
   baseline of line two, which is 1.86em, and the figure needs the 0.11em
   offset to start on that cap line. At 2.12em it was 19px taller than the
   words beside it, which is what Sara could see. */
.page-figure{float:left;width:auto;height:1.86em;margin:.11em clamp(14px,2vw,30px) 0 0}
@media (max-width:640px){.page-figure{margin-right:13px}}

/* forms */
.draft-form{display:grid;gap:14px;max-width:620px}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
label{display:grid;gap:7px;color:inherit;font-size:.86rem;font-weight:500}
input,textarea{width:100%;border:1px solid var(--line);background:var(--white);color:var(--navy);border-radius:10px;padding:13px 14px;min-height:50px}
textarea{min-height:180px;resize:vertical}
.navy-band input,.navy-band textarea{border-color:#ffffff40}
.field{display:grid;gap:7px}
.field label{gap:0}
.form-note{margin:4px 0 0;font-size:.86rem;color:var(--muted)}
.navy-band .form-note{color:#f5f5f5d1}

/* the UK / Portugal fork. Pure CSS on :target and :has(), so it needs no
   JavaScript and degrades to showing both halves where :has() is missing. */
.location-toggle{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--page) 94%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-block:16px;border-bottom:1px solid var(--line)}
.toggle-grid{display:grid;grid-template-columns:1fr 1fr;width:100%;background:var(--white);padding:5px;border:1px solid var(--line);border-radius:999px;box-shadow:0 10px 34px #00004714}
.toggle-button{position:relative;border:0;border-radius:999px;padding:13px 16px;background:transparent;color:var(--navy);font-weight:500;text-align:center;text-decoration:none;box-shadow:inset 0 0 0 2px transparent;transition:background .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease),transform .16s var(--ease)}
.toggle-button:hover{background:color-mix(in srgb,var(--cyan) 20%,var(--white));box-shadow:inset 0 0 0 2px var(--cyan)}
.toggle-panel{padding-block:58px}
.toggle-panel+.toggle-panel{border-top:1px solid var(--line)}
.fork-note{font-size:.85rem;color:var(--muted);margin:14px 0 0}
@supports selector(:has(*)){
  .fork-pt{display:none}
  .fork:has(#portugal:target) .fork-uk{display:none}
  .fork:has(#portugal:target) .fork-pt{display:block}
  .fork:not(:has(#portugal:target)) .toggle-button-uk,
  .fork:has(#portugal:target) .toggle-button-pt{background:var(--navy);color:var(--white);box-shadow:0 7px 20px #00004738}
  .fork:not(:has(#portugal:target)) .toggle-button-uk:after,
  .fork:has(#portugal:target) .toggle-button-pt:after{content:"";position:absolute;left:24%;right:24%;bottom:5px;height:3px;border-radius:999px;background:var(--gold)}
  .fork:not(:has(#portugal:target)) .toggle-button-uk:hover,
  .fork:has(#portugal:target) .toggle-button-pt:hover{background:var(--deep)}
  .fork-note{display:none}
}
[id]{scroll-margin-top:128px}

/* questions and accordions. <details>/<summary>, so they open with no script. */
.question-list{display:grid;gap:18px}
.question{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,4vw,42px);box-shadow:0 14px 42px #0000470e}
.question h3{color:var(--deep)}
.question p:last-child{margin-bottom:0}
.question.accordion-item{padding:0;overflow:hidden}
.accordion-item h3{margin:0;font:inherit;color:inherit;letter-spacing:-.02em}
.accordion-item>summary{list-style:none;width:100%;color:var(--deep);display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:18px;align-items:center;text-align:left;padding:clamp(22px,4vw,34px) clamp(22px,4vw,42px);font:500 clamp(1.08rem,2vw,1.28rem)/1.28 Poppins,system-ui,sans-serif;transition:background .18s var(--ease),color .18s var(--ease)}
.accordion-item>summary::-webkit-details-marker{display:none}
.accordion-item>summary:hover{background:color-mix(in srgb,var(--cyan) 13%,var(--white))}
.accordion-item>summary:focus-visible{outline:3px solid var(--cyan);outline-offset:-5px}
.accordion-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;justify-self:end;background:var(--navy);color:var(--white);font:500 1.6rem/1 Poppins,system-ui,sans-serif;box-shadow:0 6px 18px #0000472b}
.accordion-icon:before{content:"+";transform:translateY(-1px)}
.accordion-item[open]>summary{background:color-mix(in srgb,var(--cyan) 10%,var(--white))}
.accordion-item[open] .accordion-icon{background:var(--gold);color:var(--navy)}
.accordion-item[open] .accordion-icon:before{content:"\2212"}
.accordion-panel{padding:0 clamp(22px,4vw,42px) clamp(22px,4vw,38px);border-top:1px solid color-mix(in srgb,var(--cyan) 42%,var(--line))}
.accordion-panel>:first-child{margin-top:22px}
.accordion-panel>:last-child{margin-bottom:0}
.question:nth-child(4n+2){border-top:4px solid var(--cyan)}
.question:nth-child(4n+3){border-top:4px solid var(--lav)}
.question:nth-child(4n+4){border-top:4px solid var(--gold)}

/* lists, cards, people */
.checks{list-style:none;padding:0;margin:1.75em 0;display:grid;gap:18px}
.checks li{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,30px)}
.navy-band .checks li{background:#ffffff0f;border-color:#ffffff2e}
.checks strong{display:block;font-weight:500;font-size:1.1rem;margin-bottom:.3em;letter-spacing:-.02em}
.checks p{margin:0}
.portrait-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-block:28px 54px}
/* Sits inside the grid and spans it, so it reads as belonging to both columns
   rather than hanging under the left one. Rule full width, text at reading width. */
.pair-note{grid-column:1/-1;border-top:1px solid var(--line);margin-top:clamp(12px,2vw,22px);padding-top:clamp(22px,3vw,32px)}
/* Left aligned to the grid, not centred in it. Centred, this one paragraph
   started 16px left of the reading column and lined up with neither portrait
   above it, which is the sort of small drift that makes a page look loose. */
.pair-note p{max-width:var(--read);margin:0}
.portrait-card{display:grid;gap:14px;align-content:start}
.portrait-card img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius);box-shadow:0 18px 46px #0000471f}
.portrait-card h3{margin:0}
.portrait-card .role{font-family:Montserrat,system-ui,sans-serif;font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--deep);margin:0}
.bio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.bio-card{background:var(--white);border-radius:var(--radius);padding:clamp(22px,4vw,42px);border:1px solid var(--line)}
.bio-card p:last-child{margin-bottom:0}
.about-hero-photo{margin-top:38px;max-width:920px}
.about-hero-photo img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%}

/* testimonial */
/* The portrait slot came down from 190px to 128px on 13 October 2026, and
   both photographs were cropped square. Andrew's source file is 212px wide,
   all there is of it, so at 190px it rendered at 1.12x and looked soft on any
   modern screen. Square, it is 181px of face rather than 212px of mostly
   background, and at 128px it renders at 1.41x. Moni's goes to 2.16x. Neither
   is a substitute for a better original from Andrew. */
.testimonial{display:grid;grid-template-columns:minmax(112px,128px) minmax(0,1fr);gap:clamp(22px,4vw,44px);margin-top:34px;padding-top:34px;border-top:1px solid var(--line)}
.testimonial-portrait{width:100%;max-width:128px;margin:0;display:grid;gap:12px;align-content:start;text-align:left;align-self:start}
.testimonial-portrait img,.portrait-slot{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:var(--radius)}
.testimonial-portrait img{object-fit:cover;box-shadow:var(--shadow)}
.portrait-slot{border:1px dashed var(--red);background:color-mix(in srgb,var(--red) 4%,var(--white))}
.testimonial-portrait .placeholder{font-size:.74rem;line-height:1.45;margin:0}
.testimonial-copy{max-width:760px}
.testimonial blockquote{margin:0 0 22px;font-size:1.04rem;line-height:1.72}
.testimonial blockquote p{margin:0}
.testimonial-attribution{font-weight:500;display:grid;gap:10px;justify-items:start}

/* close, widgets, writing, contact */
.close-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:clamp(34px,7vw,84px);align-items:start}
/* Article pages under /writing/. */
.article-kicker{font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:1em}
.article-byline{font-size:.92rem;color:var(--muted);margin-top:1.2em;margin-bottom:0}
.article-hero{margin:0 0 clamp(26px,4vw,42px)}
.article figure{margin:clamp(26px,4vw,40px) 0}
.article figure img{width:100%;height:auto;display:block;border-radius:var(--radius);box-shadow:0 16px 44px #00004714}
.article figcaption{font-size:.88rem;color:var(--muted);margin-top:.7em;line-height:1.5}
.article h2{font-size:clamp(1.24rem,2.6vw,1.72rem);letter-spacing:-.02em;margin-top:1.6em;margin-bottom:.5em}
.article h3{font-size:clamp(1.04rem,2vw,1.22rem);margin-top:1.3em;margin-bottom:.4em}
.article ul,.article ol{margin:0 0 1.1em 1.1em}
.article li{margin-bottom:.5em;line-height:1.62}
.article-foot{margin-top:clamp(34px,5vw,52px);padding-top:clamp(20px,3vw,28px);border-top:1px solid var(--line);font-size:.94rem;color:var(--muted)}

/* Writing index. A plain list, newest first. No cards, no categories, no
   featured post, per the build brief. */
.writing-list{list-style:none;margin:0;padding:0}
.writing-list>li{padding-block:clamp(22px,3.4vw,32px);border-top:1px solid var(--line);display:grid;grid-template-columns:clamp(84px,16vw,160px) minmax(0,1fr);gap:clamp(14px,2.6vw,26px);align-items:start}
.writing-list>li:first-child{border-top:0;padding-top:0}
.writing-thumb{display:block;margin:0;border-radius:8px;overflow:hidden;box-shadow:0 8px 22px #0000471a}
.writing-thumb img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.writing-thumb:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.writing-item-date{display:block;font-size:.84rem;color:var(--muted);margin-bottom:.5em}
.writing-list h2{font-size:clamp(1.1rem,2.4vw,1.46rem);letter-spacing:-.02em;margin-bottom:.4em}
.writing-list h2 a{text-decoration-color:var(--gold)}
.writing-list p{margin-bottom:0}
.writing-held{font-size:.9rem;color:var(--muted);margin-top:.7em;padding-left:14px;border-left:3px solid var(--line)}

.trade-block{background:var(--white);border-left:4px solid var(--gold);border-radius:var(--radius);padding:clamp(18px,3vw,28px);margin-top:clamp(22px,4vw,34px);box-shadow:0 14px 42px #0000470e}
.trade-block h2,.trade-block h3{font-size:clamp(1.25rem,2.6vw,1.7rem);letter-spacing:-.02em;margin:0 0 .6em;max-width:none}
.trade-block p:last-child{margin-bottom:0}
/* The card is white, so on a white band it had no shape left: a gold line
   floating in open space with five paragraphs beside it. On a white band it
   takes the page colour instead and reads as a card again. 13 Oct 2026. */
.white-band .trade-block{background:var(--page)}
.booking{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:8px;margin-top:24px;box-shadow:0 14px 42px #0000470e}
.booking iframe{width:100%;border:none;min-height:700px;display:block;border-radius:8px}
.writing-feed{display:grid;gap:22px}
.writing-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,42px);box-shadow:0 14px 42px #0000470e}
.article-placeholder{min-height:230px;width:100%;display:grid;place-items:center;text-align:center;border:1px dashed var(--red);border-radius:var(--radius);background:var(--white);padding:24px}
/* Contact page. The form is the reason people are here, so it sits near the
   top. The routing notes move alongside it on desktop and below it on a phone,
   with the one diversion that has to be seen first kept above the form. */
.page-lead-tight{padding-block:clamp(28px,3.4vw,44px)}
.page-lead-tight h1{font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:.32em}
.page-lead-tight .container>*:last-child{margin-bottom:0}
/* A tight lead can carry an h2, which the site's default h2 size breaks: at
   1280 the h1 clamps to 51px and a default h2 renders 64px, so the subheading
   outranks the title. Only /confirm-status does this, where "Where do you
   live?" sits above the country list, and the list has to be reachable without
   scrolling. Added 13 October 2026. */
.page-lead-tight h2{font-size:clamp(1.5rem,3vw,2.3rem);margin-top:1.1em}
.after-form{margin-top:clamp(26px,4vw,38px);padding-top:clamp(20px,3vw,28px);border-top:1px solid var(--line)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(26px,4vw,58px);align-items:start}
.contact-divert{background:var(--off);border-left:4px solid var(--gold);border-radius:0 8px 8px 0;padding:14px 18px;margin-bottom:clamp(18px,2.6vw,26px);font-size:.95rem;line-height:1.55}
.contact-divert a{font-weight:500}
.contact-aside>h2{font-size:clamp(1rem,1.8vw,1.14rem);letter-spacing:-.01em;margin-bottom:.5em}
.contact-aside>h2+p{margin-bottom:1.1em}
.contact-aside>*+h2{margin-top:clamp(22px,3vw,30px);padding-top:clamp(18px,2.4vw,24px);border-top:1px solid var(--line)}
.contact-aside p{font-size:.95rem;line-height:1.6}
@media (max-width:860px){
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .contact-aside{margin-top:clamp(26px,5vw,36px);padding-top:clamp(22px,4vw,30px);border-top:1px solid var(--line)}
}
.contact-details{margin-top:42px;padding-top:36px;border-top:1px solid var(--line)}
.contact-details a{font-weight:500}
.statement-box{min-height:190px;border:3px solid var(--red);border-radius:var(--radius);padding:28px;display:grid;place-items:center;text-align:center;background:var(--white);margin-block:18px 32px}
.status-banner{background:var(--red);color:var(--white);font-family:Montserrat,system-ui,sans-serif;font-weight:600;text-align:center;padding:12px 16px}

/* the standing risk line */
.risk-banner{position:fixed;right:16px;bottom:16px;z-index:50;width:min(470px,calc(100% - 32px));background:var(--gold);color:var(--navy);border:2px solid var(--navy);border-radius:var(--radius);padding:12px 16px;font-size:.78rem;font-weight:500;line-height:1.45;box-shadow:0 16px 42px #00004738}
body.has-risk-banner{padding-bottom:108px}
.risk{font-size:.9rem;line-height:1.55;margin:1.75em 0 0;padding:14px 16px;border-left:4px solid var(--gold);background:color-mix(in srgb,var(--gold) 14%,transparent)}

/* footer */
.site-footer{background:var(--navy);color:var(--off);padding-block:52px 34px;border-top:1px solid rgba(255,255,255,.12)}
.footer-grid{display:grid;gap:24px}
.footer-links{gap:10px 22px}
.footer-links a,.footer-links span{font-size:.86rem}
.footer-links a{text-decoration-color:#6fc5e373}
.footer-legal{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:grid;gap:10px;font-size:.78rem;line-height:1.6;color:#f5f5f5d1}
.footer-legal p{margin:0}
.footer-legal .footrisk{font-weight:500;color:var(--off)}

@media (max-width:960px){
  .header-inner{flex-wrap:wrap;gap:12px 16px}
  .site-nav{order:3;margin-left:0;width:100%}
  .site-nav ul{justify-content:space-between;gap:8px 12px}
  .split,.newsletter-card,.close-grid{grid-template-columns:1fr}
  .newsletter-card{gap:24px}
}
@media (max-width:640px){
  html{scroll-padding-top:118px}
  body{line-height:1.62}
  .header-inner{min-height:auto;padding-block:13px;display:grid;grid-template-columns:minmax(0,1fr) auto}
  .wordmark img{width:168px}
  .contact-button{min-height:38px;padding:8px 13px;font-size:.76rem}
  .site-nav{grid-column:1/-1}
  /* Six columns for six items. At five, the Contact pill had nowhere to go
     and dropped onto a second row under "Home", left aligned, which made the
     header look broken and cost 31px of height on every page. 13 Oct 2026. */
  .site-nav ul{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;align-items:center}
  .site-nav a{font-size:.59rem;line-height:1.2;white-space:normal;text-align:center;display:block;padding:5px 1px}
  .site-nav .contact-button{min-height:0;padding:6px 4px;font-size:.59rem}
  .section{padding-block:58px}
  .home-hero{padding-block:18px 30px}
  .home-hero h1{font-size:2rem;line-height:1.02}
  .home-intro p{font-size:.78rem;line-height:1.42;margin-bottom:.5em}
  .fork-grid{margin-top:14px;gap:8px}
  .fork-card{padding:11px 10px 12px;border-top-width:4px}
  .fork-card h2{font-size:1rem;line-height:1.08}
  .fork-card p{font-size:.67rem;line-height:1.38}
  .fork-card .go{font-size:.72rem}
  .form-row{grid-template-columns:1fr}
  .form-row .button{width:100%}
  .portrait-pair,.bio-grid,.testimonial{grid-template-columns:1fr}
  .bridge{grid-template-columns:1fr;gap:10px}
  .bridge-middle{order:-1;flex-direction:row;align-items:center;gap:12px;align-self:stretch;justify-content:flex-start;text-align:left;padding:12px 14px;background:#ffffff14;border:1px solid #ffffff2e;border-radius:var(--radius)}
  .bridge-join:before,.bridge-join:after{display:none}
  .bridge-middle .bridge-figure{margin:0}
  .bridge-middle .bridge-figure img{margin:0;width:34px}
  .bridge-role{margin:0 0 0 auto;max-width:none;text-align:right}
  /* 128px, not 230. On a phone the grid goes to one column and this used to
     let the portrait grow to 230px, which rendered Andrew's 181px file at
     0.79x, softer than the desktop it was meant to be better than. It matches
     the desktop slot now: there is no reason for it to be bigger on a phone. */
  .testimonial-portrait{max-width:128px}
  .location-toggle{position:static}
  .toggle-grid{border-radius:var(--radius)}
  .toggle-button{font-size:.82rem;padding-inline:9px}
  [id]{scroll-margin-top:118px}
  .question{padding:21px 18px}
  .question.accordion-item{padding:0}
  .accordion-item>summary{grid-template-columns:minmax(0,1fr) 36px;gap:12px;padding:20px 18px;font-size:1rem}
  .accordion-icon{width:32px;height:32px;font-size:1.4rem}
  .accordion-panel{padding:0 18px 22px}
  .risk-banner{bottom:8px;right:8px;width:calc(100% - 16px);font-size:.7rem;padding:10px 12px}
  body.has-risk-banner{padding-bottom:104px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.ghl-form{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:8px;margin:1.5em 0;box-shadow:0 14px 42px #0000470e}
.navy-band .ghl-form{background:#ffffff14;border-color:#ffffff2e}
.ghl-form iframe{width:100%;border:none;display:block;border-radius:8px;background:var(--white)}

/* Country chooser on /confirm-status. The select is the quick route; the list
   below it is the same five links and works without JavaScript, which matters
   on the one page whose job is routing somebody to the right legal regime. */
.country-chooser{margin:26px 0 18px;display:grid;gap:9px;max-width:420px}
.country-chooser label{font-weight:500;font-size:.92rem}
.country-chooser select{font:inherit;font-size:1rem;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--navy);width:100%}
.country-chooser select:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.country-list{margin-top:18px}

/* The two certification tests, side by side. Used on /confirm-status/uk.
   Deliberately not .fork-card: that is a white card for a navy band, and
   this sits on a plain one. Hairlines instead, no shadow, no box. */
.gate-tests{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,4vw,48px);margin:1.5em 0 1.3em;max-width:var(--max)}
.gate-test{min-width:0;border-top:3px solid var(--cyan);padding-top:14px}
.gate-test:first-child{border-top-color:var(--gold)}
.gate-test h3{font-size:clamp(1rem,2.6vw,1.2rem);margin-bottom:.2em}
.gate-test .gate-kind{color:var(--muted);font-size:.84rem;margin-bottom:.9em}
.gate-test ul{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.gate-test li{font-size:.95rem;line-height:1.5;padding-left:1.05em;position:relative}
.gate-test li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--cyan)}
.gate-test:first-child li:before{background:var(--gold)}
.gate-test .gate-any{margin-top:.9em;font-size:.84rem;color:var(--muted)}
@media (max-width:720px){
  .gate-tests{grid-template-columns:1fr;gap:26px}
}

/* Third-party form embed, used on /confirm-status/uk. The iframe is
   GoHighLevel's and we do not control its markup, so the wrapper has to be
   the thing that stops it forcing a sideways scroll on a phone. */
.form-embed{width:100%;max-width:100%;overflow-x:hidden;margin:1.4em 0}
.form-embed iframe{display:block;width:100%!important;max-width:100%!important;min-width:0!important;border:0;min-height:900px}