/* =====================================================================
   FINOPTIS 3. The sounding board. Waywest Design.
   Every section is something said plus something coming back. The visitor's
   line first, set light. Gerald's answer under it, set heavy. Between them a
   rule that draws itself left to right from his mark. That drawn rule is the
   only motion idea on the site.
   ===================================================================== */
/* 3.3.2: Archivo from the theme, not Google. One variable file per script covers every
   weight. Archivo is under the SIL Open Font License (assets/fonts/README.txt) */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:150px}
body{margin:0}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
:where(h1,h2,h3,h4,p,figure,blockquote,ul,ol){margin:0}
:where(ul,ol){padding:0;list-style:none}
a{color:inherit}

:root{
  /* ground and ink. One dark blue for every dark band, every heading on light
     and the ink on every orange fill */
  --ink:#0F2340;
  --ink2:#182E4F;       /* cards and panels on the dark ground */
  --paper:#FFFFFF;
  --paper2:#F2F5F8;     /* cards, the form card and the corporate panel on white */
  --body:#455060;
  --muted:#5B6676;
  --onDark:#EEF2F7;
  --onDarkMute:#A9B5C5;
  --lineL:rgba(15,35,64,.12);
  --field:rgba(15,35,64,.55);    /* form field edges on white and the pale card, 3:1 or better */
  --fieldD:rgba(255,255,255,.4); /* form field edges on the dark footer card */
  --lineD:rgba(255,255,255,.14);
  --err:#B8173D;
  --errLt:#FF97A6;      /* error text on the dark footer card */

  /* orange and dark blue, Jack 26th September 2026. Orange is always opaque:
     tints of it turn peach on white and brown on navy.
     3.2.0: every button fills with the deeper --orangeD and carries a white
     label, bold at 19px or more, so white passes as large text (3.66:1).
     Round 1: the primary hover inverts to the ground's opposite, navy with a
     white label on white (15.7:1), white with a navy label on navy. On white every orange word is --orangeD and is large text at every
     width: 24px or more (19px or more when bold). Smaller words on white are
     navy. On navy, orange words stay --orange (5.53:1). The logo keeps --orange. */
  --orange:#FF6B1F;     /* orange on navy, the icon chips with navy icons, the logo */
  --orangeD:#E85512;    /* every button fill, plus orange words, lines and icons on white */

  /* the three audiences, one panel each, all from the palette */
  --aud1:var(--ink);    --aud1Ink:var(--paper);  /* family businesses */
  --aud2:var(--orange); --aud2Ink:var(--ink);    /* SMEs, the main reader */
  --aud3:var(--paper2); --aud3Ink:var(--ink);    /* corporate, takes the --lineL border */

  /* type, one family, weights 400, 600, 700 and 800 (900 on the Gerald page stats), six sizes */
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r1:clamp(42px,min(7.4vw,12.4vh),136px);
  --r2:clamp(29px,4vw,70px);  /* 31 on phones so every answer breaks at a phrase end from 360px up */
  --r3:clamp(24px,1.7vw,28px);  /* the said lines: orange on white, so never under 24 */
  --r4:clamp(19px,1.3vw,22px);
  --r5:17px;
  /* 3.3.0: buttons and the nav links share one step. White on the button orange only
     passes as large text, so this never drops under 19px and stays at weight 700 */
  --rB:clamp(19px,1.15vw,20px);
  /* 3.2.0: nothing on the page under 16px. The meta step joins body at 17, so
     counters, captions and small labels read at body size. Five sizes in use. */
  --r6:var(--r5);

  /* four widths */
  --wText:720px;
  --wMain:1440px;
  --wWide:1680px;
  --gut:clamp(16px,3vw,40px);

  /* rhythm */
  --sec:clamp(96px,9vw,168px);
  --gap:clamp(44px,4.4vw,72px);

  /* shape */
  --radC:24px;
  --radP:32px;
  --radI:20px;
  --pill:999px;

  /* three curves */
  --draw:cubic-bezier(.65,0,.2,1);
  --settle:cubic-bezier(.22,.68,.28,1);
  --press:cubic-bezier(.4,0,.2,1);

  /* two arrows, drawn once and masked wherever they are needed */
  --icoDiag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
  --icoRight:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

body{
  font-family:var(--f);font-size:var(--r5);line-height:1.6;font-weight:400;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{color:inherit;font-weight:800}
p{text-wrap:pretty}

/* the ?font=noto toggle, kept so that face can still be judged live */
html[data-font="noto"] :is(.t1,.t2,.stmt blockquote p){font-family:"Noto Sans Saurashtra",var(--f)}

/* ---------- grounds. Headings inherit their section's ink. ---------- */
.g-dark{background:var(--ink);color:var(--onDark);--acc:var(--orange);--said:var(--orange);--line:var(--lineD);--surf:var(--ink2);--soft:var(--onDarkMute)}
.g-light{background:var(--paper);color:var(--ink);--acc:var(--orangeD);--said:var(--orangeD);--line:var(--lineL);--surf:var(--paper2);--soft:var(--muted)}
.acc{color:var(--acc);font-weight:inherit}

/* ---------- widths ---------- */
.w-main{width:min(var(--wMain),100% - var(--gut)*2);margin-inline:auto}
.w-wide{width:min(var(--wWide),100% - var(--gut)*2);margin-inline:auto}
.w-text{max-width:var(--wText)}

.sec{padding-block:var(--sec);position:relative}
.sr,.screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--paper);color:var(--ink);padding:12px 20px;border-radius:var(--pill);font-weight:600}
.skip:focus{top:12px}
.skip:focus-visible{border-radius:var(--pill)}

/* ---------- type steps ---------- */
.t1{font-size:var(--r1);line-height:.93;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.t2{font-size:var(--r2);line-height:1;letter-spacing:-.032em;font-weight:800;text-wrap:balance}
.t3{font-size:var(--r3);line-height:1.34;letter-spacing:-.012em}
.t4{font-size:var(--r4);line-height:1.3;letter-spacing:-.01em;font-weight:600}
.t6{font-size:var(--r6);line-height:1.45;letter-spacing:.01em}
/* a two-sentence answer breaks at its full stop, never mid-phrase */
.t2 .s,.said .s{display:inline-block}
/* the said line's hanging mark must not pass down into its phrase spans */
.said .s{text-indent:0}

/* =====================================================================
   THE SOUNDING BOARD
   ===================================================================== */
.said{font-size:var(--r3);line-height:1.34;letter-spacing:-.012em;font-weight:400;color:var(--said);max-width:34ch;text-wrap:balance;border-left:3px solid var(--said);padding-left:clamp(14px,1.2vw,20px)}
.board{display:flex;align-items:center;gap:16px;margin:clamp(20px,1.8vw,28px) 0 clamp(22px,2.2vw,36px);color:inherit}
.board .mk{height:20px;width:auto;aspect-ratio:409.3/180;flex:none;color:var(--acc)}
.board i{display:block;height:2px;flex:1;max-width:200px;background:currentColor;opacity:.22;transform-origin:0 50%}
.js .board i{transform:scaleX(0);transition:transform 1.3s var(--draw) .1s}
.js .in .board i,.js .in.board i{transform:scaleX(1)}

/* =====================================================================
   BUTTONS AND LINKS
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:52px;
  padding:0 28px;border-radius:var(--pill);border:1.5px solid var(--orangeD);
  font-size:var(--rB);font-weight:700;line-height:1;letter-spacing:-.01em;text-decoration:none;cursor:pointer;
  background:var(--orangeD);color:#fff;
  transition:background .3s var(--press),color .3s var(--press),border-color .3s var(--press),transform .3s var(--press);
}
.btn svg{width:1.05em;height:1.05em;flex:none;transition:transform .35s var(--settle)}
/* the ghost: navy on white, white with an orange border on navy */
.btn-g{background:transparent;color:var(--ink);border-color:var(--ink)}
.g-dark .btn-g{color:#fff;border-color:var(--orangeD)}
/* one hover language for every button: a 2px lift, a small scale and a fill you
   can see. The primary turns navy with a white label on white and white with a
   navy label on navy. The ghost fills navy on white and orange on navy */
@media (hover:hover){
  .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px) scale(1.02)}
  .g-dark .btn:not(.btn-g):hover{background:#fff;border-color:#fff;color:var(--ink)}
  .btn.btn-g:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .g-dark .btn.btn-g:hover{background:var(--orangeD);border-color:var(--orangeD);color:#fff}
  .btn:hover svg{transform:translateX(3px)}
}
.btn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px) scale(1.02)}
.g-dark .btn:not(.btn-g):focus-visible{background:#fff;border-color:#fff;color:var(--ink)}
.btn.btn-g:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.g-dark .btn.btn-g:focus-visible{background:var(--orangeD);border-color:var(--orangeD);color:#fff}
/* a text link with an arrow. The words take the ground's ink, the arrow the accent */
.arrow{display:inline-flex;align-items:center;gap:.5em;font-weight:600;text-decoration:none;color:inherit;min-height:44px}
.arrow::after{content:"";width:1em;height:1em;background:var(--acc,currentColor);-webkit-mask:var(--icoDiag) center/contain no-repeat;mask:var(--icoDiag) center/contain no-repeat;transition:transform .35s var(--settle)}
@media (hover:hover){.arrow:hover::after{transform:translate(3px,-3px)}}
.arrow:focus-visible::after{transform:translate(3px,-3px)}
:focus-visible{outline:2px solid var(--acc,var(--orangeD));outline-offset:3px;border-radius:6px}
.hero:focus,.sec:focus,.stmt:focus{outline:0}
.btn:focus-visible{border-radius:var(--pill)}

/* =====================================================================
   NAV
   ===================================================================== */
.nav{
  position:fixed;z-index:100;top:16px;left:0;right:0;margin-inline:auto;
  width:min(var(--wMain),100% - var(--gut)*2);
  display:flex;align-items:center;gap:20px;padding:12px 24px 12px 24px;
  border-radius:var(--pill);background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:saturate(1.5) blur(16px);backdrop-filter:saturate(1.5) blur(16px);
  border:1px solid rgba(15,35,64,.08);color:var(--ink);--acc:var(--orangeD);--line:var(--lineL);
  transition:background .4s var(--press),border-color .4s var(--press);
}
.nav.stuck{background:rgba(255,255,255,.97);border-color:rgba(15,35,64,.14)}
.brand{display:flex;align-items:center;flex:none;margin-right:auto;min-height:44px}
.brand img,.brand .logo{height:58px;width:auto;aspect-ratio:972.69/372.01;transition:transform .35s var(--settle)}
@media (hover:hover){.brand:hover .logo{transform:scale(1.03)}}
.brand:focus-visible .logo{transform:scale(1.03)}
.nlinks{display:flex;align-items:center;gap:clamp(18px,2vw,34px)}
.nlinks a{font-size:var(--rB);font-weight:600;text-decoration:none;white-space:nowrap;padding-block:10px;
  background:linear-gradient(var(--orangeD),var(--orangeD)) 0 calc(100% - 4px)/0 2px no-repeat;transition:background-size .4s var(--settle)}
.nlinks a[aria-current="page"]{background-size:100% 2px}
@media (hover:hover){.nlinks a:hover{background-size:100% 2px}}
.nlinks a:focus-visible{background-size:100% 2px}
.nav .btn{min-height:44px;padding:0 22px}
.burg{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--lineL);background:transparent;cursor:pointer;align-items:center;justify-content:center;transition:border-color .3s var(--press)}
@media (hover:hover){.burg:hover{border-color:var(--orangeD)}}
.burg:focus-visible{border-color:var(--orangeD)}
/* without JavaScript the burger cannot open, so it stays out of the way */
html:not(.js) .burg{display:none!important}
html:not(.js) .mnav{position:static;opacity:1;visibility:visible;transform:none;margin:calc(16px + var(--navh,82px) + 16px) auto 0;max-height:none}
.burg span,.burg span::before,.burg span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .35s var(--settle),background .2s}
.burg span::before,.burg span::after{content:"";position:absolute;left:0}
.burg span::before{top:-6px}.burg span::after{top:6px}
.burg[aria-expanded="true"] span{background:transparent}
.burg[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burg[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{
  position:fixed;z-index:99;left:0;right:0;margin-inline:auto;top:calc(16px + var(--navh,110px) + 8px);width:min(var(--wMain),100% - var(--gut)*2);
  background:var(--paper);color:var(--ink);border-radius:var(--radP);border:1px solid var(--lineL);padding:12px;
  max-height:calc(100svh - 110px);overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--press),transform .35s var(--settle),visibility .35s;
  --acc:var(--orangeD);
}
.mnav.open{opacity:1;visibility:visible;transform:none}
.mnav a:not(.btn){display:flex;justify-content:space-between;align-items:center;padding:14px 16px;min-height:52px;border-radius:16px;font-size:var(--r4);font-weight:600;
  text-decoration:underline 2px transparent;text-underline-offset:.28em;transition:background .3s var(--press),text-decoration-color .3s var(--press)}
.mnav a:not(.btn)::after{content:"";width:18px;height:18px;background:var(--orangeD);-webkit-mask:var(--icoDiag) center/contain no-repeat;mask:var(--icoDiag) center/contain no-repeat;transition:transform .35s var(--settle)}
@media (hover:hover){.mnav a:not(.btn):hover{text-decoration-color:var(--orangeD)}.mnav a:not(.btn):hover::after{transform:translate(3px,-3px)}}
.mnav a:not(.btn):focus-visible{text-decoration-color:var(--orangeD)}
.mnav a:not(.btn):focus-visible::after{transform:translate(3px,-3px)}
.mnav a[aria-current="page"]{background:var(--paper2)}
.mnav .btn{width:100%;margin-top:8px}
/* the call stays in the header at every width: the button down to 641px, then a
   round phone button beside the burger */
.nav .nav-tel{display:none;width:44px;height:44px;flex:none;background:var(--orangeD);color:#fff;transition:background .3s var(--press),transform .3s var(--press)}
.nav .nav-tel svg{width:20px;height:20px}
@media (hover:hover){.nav .nav-tel:hover{background:var(--ink);transform:translateY(-2px) scale(1.04)}}
.nav .nav-tel:focus-visible{background:var(--ink);transform:translateY(-2px) scale(1.04)}
.nav-tel:focus-visible{border-radius:50%}
/* 3.3.0: the links went up to 19px, so the burger takes over a little earlier */
@media (max-width:1140px){.nlinks{display:none}.burg{display:flex}}
/* a tablet turned on its side passes 1140px with the menu open: close it with the burger gone */
@media (min-width:1141px){.mnav{display:none}}

/* logged-in views carry the admin bar, so the floating nav drops below it */
body.admin-bar .nav{top:48px}
body.admin-bar .mnav{top:calc(48px + var(--navh,110px) + 8px)}
@media (max-width:782px) and (min-width:601px){body.admin-bar .nav{top:56px}body.admin-bar .mnav{top:calc(56px + var(--navh,82px) + 8px)}}
/* under 601px WordPress lets the admin bar scroll away, so the nav follows it up (--abar is set on scroll) */
@media (max-width:600px){body.admin-bar .nav{top:calc(10px + var(--abar,46px))}body.admin-bar .mnav{top:calc(18px + var(--abar,46px) + var(--navh,82px))}}

/* =====================================================================
   HOMEPAGE HERO, full bleed, the biggest thing on the site
   ===================================================================== */
.hero{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}

.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:72% 45%;transform:scaleX(-1)} /* 3.4.4: back to the 3.3.3 treatment (mirrored, heavy wash), the photo is mood and the headline the only bright thing */
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 38% at 30% 54%,rgba(15,35,64,.6) 0%,rgba(15,35,64,.6) 60%,rgba(15,35,64,0) 100%),
  linear-gradient(90deg,rgba(15,35,64,.86) 0%,rgba(15,35,64,.76) 44%,rgba(15,35,64,.5) 64%,rgba(15,35,64,.24) 82%,rgba(15,35,64,.08) 100%),
  linear-gradient(0deg,rgba(15,35,64,.9) 0%,rgba(15,35,64,.4) 24%,rgba(15,35,64,0) 46%)}
.hero-in{align-self:center;padding-top:clamp(112px,13vh,150px);padding-bottom:clamp(32px,4vh,56px)}
.hero .said{color:var(--orange)}
.hero h1{max-width:12.2em}
/* the hero rule runs the same length as the band and quote rules. Since the 3.2.1 mirror the
   owner sits on the left, so at 1600 the rule crosses the photo under her face (Jack approved the look) */
.hero .board{max-width:min(560px,100%)}
.hero-sub{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,2.4vw,36px);margin-top:clamp(28px,3vw,44px)}
.hero-lead{max-width:var(--introW,min(48em,100%));font-size:var(--r4);line-height:1.45;color:var(--onDark);text-wrap:balance}
/* 3.4.3: one line of Gerald's own words over two lines at desktop, then the credentials as a
   quiet row under the buttons. His other two lines live in the credentials row, the Experience
   panel and the How I help intro. */
.hero-copy{display:grid;gap:12px}

.creds{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;padding:0;list-style:none;font-size:var(--r5);font-weight:400;line-height:1.4;color:var(--onDarkMute)}
.creds li{display:inline-flex;align-items:center;white-space:nowrap}
.creds li+li::before{content:"";width:4px;height:4px;margin-right:18px;border-radius:50%;background:var(--onDarkMute);flex:none}
.acts{display:flex;flex-wrap:wrap;gap:12px}
/* the ghost button sits on the photograph, so it carries its own navy ground.
   Its hover and focus fills come from the button rules, which outrank this one */
.hero .btn-g{background:rgba(15,35,64,.6)}

/* the track record runs along the foot of a dark hero */
.tick{border-top:1px solid var(--lineD);padding-block:clamp(26px,2.6vw,40px)}
.lane{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.rail{display:flex;width:max-content;align-items:center;gap:clamp(64px,6vw,112px);animation:roll 52s linear infinite}
.rail img{flex:none;height:clamp(59px,4.6vw,76px);width:auto;filter:brightness(0) invert(1);opacity:.8;transition:opacity .4s var(--press)}
@media (hover:hover){.lane:hover .rail{animation-play-state:paused}.rail img:hover{opacity:1}}
@keyframes roll{to{transform:translateX(-50%)}}

/* =====================================================================
   INNER PAGE HERO, dark, typographic, the answer set at display size
   ===================================================================== */
.phero{position:relative;padding-block:clamp(150px,18vh,220px) clamp(80px,8vw,136px)}
.phero .t1{max-width:13em}
.phero-lead{margin-top:clamp(28px,3vw,44px);max-width:48ch;font-size:var(--r4);line-height:1.45;color:var(--onDark)}
.phero .acts{margin-top:clamp(28px,3vw,40px)}
.phero .meta{margin-top:clamp(20px,2vw,28px);font-size:var(--r6);letter-spacing:.01em;color:var(--onDarkMute)}
.phero.has-tick{padding-bottom:0}
.phero.has-tick .tick{margin-top:clamp(64px,7vw,112px)}

/* =====================================================================
   THE ANSWER'S DETAIL. The title runs full width, the paragraph steps right.
   ===================================================================== */
/* the said line, the rule, the answer and its detail read as one block, the
   paragraph sitting on the answer's baseline instead of alone in a column */
.lede{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,4vw,80px);align-items:end}
.lede .said{max-width:28ch}
.lede>p{font-size:var(--r4);line-height:1.5;letter-spacing:-.012em;color:var(--body);max-width:44ch;padding-bottom:.45em}
.g-dark .lede>p{color:var(--onDark)}
.lede+.svc{margin-top:var(--gap)}
.prac{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;margin-top:clamp(28px,3vw,48px)}
.prac>*{grid-column:1/-1}
.prac p{font-size:var(--r4);line-height:1.5;letter-spacing:-.012em;color:var(--ink);max-width:var(--introW,var(--wText));border-left:3px solid var(--acc);padding-left:clamp(16px,1.4vw,24px)}
/* 3.4.3: app.js sets --introW to the widest line of the heading above, so every intro runs the width of its heading */
.prac p+p{margin-top:.75em}
.g-dark .prac p{color:var(--onDark)}

/* a wide image band, the one picture in a section of type */
.band{margin-top:var(--gap);border-radius:var(--radI);overflow:hidden;aspect-ratio:21/8;background:var(--surf)}
.band img{width:100%;height:100%;object-fit:cover;object-position:58% 72%;transition:transform 1.1s var(--press)}
@media (hover:hover){.band:hover img{transform:scale(1.03)}}
@media (max-width:640px){.band{aspect-ratio:16/10}}

/* =====================================================================
   CARDS
   ===================================================================== */
.svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:var(--gap)}
.svc.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  display:flex;flex-direction:column;gap:14px;padding:clamp(24px,1.9vw,32px);border-radius:var(--radC);
  background:var(--surf);text-decoration:none;color:inherit;min-height:100%;border:1px solid transparent;
  transition:transform .45s var(--settle),background .45s var(--press),border-color .35s var(--press);
}
.g-dark .card{border-color:var(--lineD)}
.card .chip{width:40px;height:40px}
.card .chip svg{width:20px;height:20px}
/* 3.3.0: an icon beside a card title, centred on the title's first line */
.ico-h{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start}
.ico-h h3{padding-top:max(0px,(40px - 1lh) / 2)}
.card h3{font-size:var(--r4);line-height:1.3;letter-spacing:-.01em;font-weight:600}
.card p{color:var(--body)}
.g-dark .card p{color:var(--onDarkMute)}
.card .arrow{margin-top:auto;padding-top:6px}
/* one hover for every card and panel: a lift, a small scale and an orange edge.
   An icon chip inside tips toward the reader */
.chip{transition:transform .45s var(--settle)}
@media (hover:hover){
  .card:hover{transform:translateY(-5px) scale(1.008);border-color:var(--acc)}
  .card:hover .arrow::after{transform:translate(3px,-3px)}
  .card:hover .chip{transform:scale(1.08) rotate(-8deg)}
}
.card:focus-within{border-color:var(--acc)}

/* the nine problems, three across like the three conversations. The owner's words
   sit in a white speech bubble whose tail points at the answer below. Each card is a
   subgrid of three rows, so bubbles, titles and bodies line up across a row */
.card .board{margin:0}
.probs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--gap)}
.prob{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:22px;align-content:start}
.prob-said{position:relative;justify-self:start;align-self:start;max-width:30ch;padding:14px 20px 15px;border-radius:var(--radI);
  background:var(--paper);border:1px solid var(--lineL);font-size:var(--r5);line-height:1.45;color:var(--ink);text-wrap:balance;
  transition:border-color .35s var(--press)}
.prob-said::after{content:"";position:absolute;left:14px;bottom:-7px;width:12px;height:12px;background:var(--paper);
  border-right:1px solid var(--lineL);border-bottom:1px solid var(--lineL);border-bottom-right-radius:3px;transform:rotate(45deg);
  transition:border-color .35s var(--press)}
.prob-said .s{display:inline-block}
.prob p:last-child{max-width:41ch}
@media (hover:hover){.prob:hover .prob-said,.prob:hover .prob-said::after{border-color:var(--acc)}}

/* case notes, small cards on the dark ground */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--gap)}
.case p{max-width:none}
.case{gap:12px}

/* sectors, a photograph over each card */
.sects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:var(--gap)}
.sect{padding:0;gap:0;overflow:hidden;isolation:isolate}
.sect-img{aspect-ratio:4/3;overflow:hidden;background:var(--ink)}
.sect-img img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
.sect-t{display:grid;gap:8px;align-content:start;padding:clamp(20px,1.7vw,28px) clamp(22px,1.8vw,30px) clamp(24px,2vw,32px)}
/* the drawn sector icon sits left of the title, centred on its first line */
.sect-h{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start}
.sect-h h3{padding-top:max(0px,(40px - 1lh) / 2)}
.sect p{max-width:31ch}
.sect .board{margin:4px 0}
.sect .board i{opacity:.22}
@media (hover:hover){.sect:hover .sect-img img{transform:scale(1.04)}}
/* 3.3.0: the eighth tile, for every trade not pictured. Orange like the middle
   conversation panel, words at the foot, the arrow turns on hover */
.sect.sect-more{display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:clamp(24px,2vw,32px) clamp(22px,1.8vw,30px) clamp(24px,2vw,32px);
  background:var(--orange);color:var(--ink);border-color:var(--orange)!important;text-decoration:none}
.more-mk{margin-bottom:auto;padding-bottom:28px}
.more-mk .mk{display:block;height:40px;width:auto;aspect-ratio:409.3/180;color:var(--ink)}
.more-n{font-size:var(--r3);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.sect-more p{margin-top:12px;max-width:30ch;color:var(--ink)!important}
.sect-more .board{margin:22px 0 14px;color:var(--ink);gap:12px}
.sect-more .board i{opacity:1;height:1.5px}
.sect-more .aud-go{background:var(--ink);color:var(--orange)}
.more-t{font-size:var(--r4);line-height:1.3;font-weight:600}
@media (hover:hover){.sect-more:hover{border-color:#fff!important}.sect-more:hover .aud-go{transform:rotate(-45deg)}}
.sect-more:focus-visible{border-radius:var(--radC);border-color:#fff!important;transform:translateY(-5px) scale(1.008)}
.sect-more:focus-visible .aud-go{transform:rotate(-45deg)}
@media (min-width:940px) and (max-width:1399px){.sect-more .more-mk,.sect-more .board{display:none}.sect-more .more-t{margin-top:14px}.sect.sect-more{justify-content:center}}
.sect-img img{transition:transform 1.1s var(--press)}

/* three short answers side by side, no boxes */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,72px);margin-top:var(--gap)}
.point .chip{margin-bottom:22px}
.point h3{font-size:var(--r4);line-height:1.3;font-weight:600;letter-spacing:-.01em;margin-bottom:8px}
.point p{color:var(--body)}
.g-dark .point p{color:var(--onDarkMute)}

/* =====================================================================
   THE THREE CONVERSATIONS, one deep panel each
   ===================================================================== */
.auds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);margin-top:var(--gap)}
.aud{
  position:relative;display:flex;flex-direction:column;min-height:clamp(340px,25vw,400px);padding:clamp(24px,2.2vw,36px);
  border-radius:var(--radP);background:var(--c);color:var(--cInk);border:1px solid var(--lineL);text-decoration:none;overflow:hidden;
  transition:transform .5s var(--settle),border-color .35s var(--press);
}
.aud-n{font-size:var(--r3);line-height:1.15;letter-spacing:-.02em;font-weight:800}
.aud-said{margin-top:clamp(16px,1.4vw,22px);max-width:25ch;font-size:var(--r4);line-height:1.32;letter-spacing:-.01em;font-weight:400;color:var(--cInk);text-wrap:balance}
.aud .board{margin:auto 0 18px;padding-top:28px;color:var(--cInk);gap:12px}
.aud .board i{opacity:1;height:1.5px}
.aud-t{max-width:25ch;font-size:var(--r4);line-height:1.3;letter-spacing:-.01em;font-weight:600;text-wrap:balance}
.aud-go{flex:none;width:40px;height:40px;border-radius:50%;background:var(--cInk);color:var(--c);display:grid;place-items:center;transition:transform .35s var(--settle)}
.aud-go::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--icoRight) center/contain no-repeat;mask:var(--icoRight) center/contain no-repeat}
@media (hover:hover){.aud:hover{transform:translateY(-5px) scale(1.008);border-color:var(--orangeD)}.aud:hover .aud-go{transform:rotate(-45deg)}}
.aud:focus-visible{border-radius:var(--radP);border-color:var(--orangeD);transform:translateY(-5px) scale(1.008)}
.aud:focus-visible .aud-go{transform:rotate(-45deg)}
@media (hover:hover){.auds .aud:nth-child(2):hover{border-color:var(--ink)}}
.auds .aud:nth-child(2):focus-visible{border-color:var(--ink)}

/* =====================================================================
   GERALD, portrait and copy
   ===================================================================== */
.ger{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,112px);margin-top:var(--gap);align-items:start}
.shot{position:relative;border-radius:var(--radI);overflow:hidden;aspect-ratio:4/4.4;background:var(--paper2)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;scale:1.14;transform-origin:50% 16%;transition:transform 1.1s var(--press)}
@media (hover:hover){.shot:hover img{transform:scale(1.04)}}
.ger-copy{max-width:var(--wText)}
.ger-copy p{color:var(--body);max-width:62ch}
.ger-copy p+p,.ger-copy .path+p{margin-top:18px}
.ger-copy .lead{font-size:var(--r4);line-height:1.5;letter-spacing:-.012em;color:var(--ink)}
.ger-text{display:grid;gap:16px}
.ger-text p+p{margin-top:0}
.ger-h{font-size:var(--r3);line-height:1.2;letter-spacing:-.02em;font-weight:800;color:var(--onDark);text-wrap:balance;max-width:32ch}
.g-dark .ger-copy p{color:var(--onDarkMute)}
.g-dark .ger-copy .lead{color:var(--onDark)}
.ger-copy .btn{margin-top:36px}
@media (min-width:981px){
  .ger{align-items:stretch}
  /* the portrait takes the row's height, so its top and foot meet the copy's at every width */
  .shot{align-self:stretch}
  /* 3.3.0: the stats are gone, so the copy centres against the portrait */
  .ger-copy{display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,3.6vw,60px)}
  .ger-copy .path{margin:0}
}
/* the career path, drawn as a line with a stop for each chair */
.path{position:relative;display:flex;justify-content:space-between;gap:12px;margin:clamp(40px,3.6vw,60px) 0}
.path::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)}
.path li{position:relative;padding-top:30px;font-size:var(--r5);font-weight:600;line-height:1.3;white-space:nowrap}
.path li::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2px solid currentColor}
.g-dark .path li::before{background:var(--ink)}
/* the stop that is now, filled orange so it stands out */
.path li:last-child::before{background:var(--acc);border-color:var(--acc)}

/* Gerald's own line beside the market, then the small strip of the finance
   businesses he worked for, captioned underneath */
.york{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(40px,6vw,112px);margin-top:calc(var(--gap) * 1.5);align-items:center}
.york-img{order:2;border-radius:var(--radI);overflow:hidden;aspect-ratio:4/5;background:var(--surf)}
.york-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transition:transform 1.1s var(--press)}
@media (hover:hover){.york-img:hover img{transform:scale(1.04)}}
.york-q p{font-size:var(--r2);line-height:1.02;letter-spacing:-.03em;font-weight:800;max-width:13em;text-indent:-.4em;text-wrap:balance}
.york-q .board{margin:clamp(32px,3.4vw,52px) 0 0;max-width:min(560px,100%)}
.york-q cite{display:block;margin-top:16px;font-style:normal;font-size:var(--r4);font-weight:600;color:var(--onDarkMute)}
.strip{margin-top:calc(var(--gap) * 1.5);padding-top:clamp(32px,3vw,48px);border-top:1px solid var(--lineD)}
/* the partner logos roll past as a rail again, larger than the 3.1.0 strip:
   46 to 52px at desktop, 40px on phones. Hover holds it, reduced motion stops it */
.strip .rail{gap:clamp(48px,5vw,96px);animation-duration:60s}
.strip .rail img{height:calc(clamp(40px,1.2vw + 34px,52px) * var(--lh,1));max-width:none;object-fit:contain}
/* the thin and stacked marks read small at one shared height, so each is set by eye against Barclays */
.rail img[data-l="ge-capital"]{--lh:1.3}
.rail img[data-l="castle-trust"]{--lh:1.35}
.rail img[data-l="hitachi-capital"]{--lh:1.15}
.rail img[data-l="macquarie"]{--lh:1.3}
.rail img[data-l="pcf"]{--lh:1.2}
.rail img[data-l="uss"]{--lh:1.25}
.strip figcaption{margin-top:clamp(24px,2.2vw,34px);font-size:var(--r5);line-height:1.45;color:var(--onDarkMute);text-wrap:balance}
/* round 3: the rail carries a pause button (WCAG 2.2.2), a ghost like the
   references' own, leading the caption line and away from the mark texture. It shows only once app.js
   runs and never under reduced motion, where the rail is already still */
.strip{position:relative}
.strip:has(.rbtn:not([hidden])) figcaption{padding-left:62px;min-height:44px;display:flex;align-items:center}
.rbtn{width:44px;height:44px}
.strip .rbtn{position:absolute;left:0;bottom:0}
.tick-in{display:flex;align-items:center;gap:clamp(16px,2vw,28px)}
.tick-in .lane{flex:1 1 auto;min-width:0}
.tick-in .rbtn{flex:none}
.rail.paused{animation-play-state:paused}

/* =====================================================================
   THE STATEMENT, nearly empty
   ===================================================================== */
.stmt{padding-block:var(--sec);min-height:min(88svh,880px);display:grid;align-content:center}
.stmt.has-bg,.sec.has-bg{position:relative;isolation:isolate;overflow:clip}
.stmt-bg{position:absolute;inset:0;z-index:-1}
.stmt-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.stmt-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,35,64,.88) 0%,rgba(15,35,64,.8) 46%,rgba(15,35,64,.58) 70%,rgba(15,35,64,.35) 100%)}
.stmt blockquote p{font-size:var(--r1);line-height:.98;letter-spacing:-.035em;font-weight:800;max-width:13em;text-indent:-.42em;text-wrap:balance}
.stmt .board{margin:clamp(40px,4vw,64px) 0 0;max-width:min(560px,100%)}
.stmt cite{display:block;margin-top:16px;font-style:normal;font-size:var(--r4);font-weight:600;color:var(--onDarkMute)}
/* the closing band: one line and one button over a heavy wash */
/* the owner working late, the two people kept to the right of the line */
.lone .stmt-bg img{object-position:78% 40%}
.lone .stmt-bg::after{background:linear-gradient(90deg,rgba(15,35,64,.9) 0%,rgba(15,35,64,.84) 55%,rgba(15,35,64,.74) 100%)}
.lone-line{font-size:var(--r1);line-height:.98;letter-spacing:-.035em;font-weight:800;max-width:11.5em;text-wrap:balance}
.lone .board{margin:clamp(36px,4vw,60px) 0 clamp(30px,3vw,44px);max-width:min(560px,100%)}

/* =====================================================================
   ROWS AND STATS
   ===================================================================== */
.why{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(40px,6vw,112px);margin-top:var(--gap);align-items:stretch}
.rows{display:grid;gap:clamp(28px,2.6vw,40px)}
.row{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;align-items:start}
.chip{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:transparent;border:1.5px solid currentColor;color:var(--ink)}
.g-dark .chip{color:var(--onDark)}
.chip svg{width:24px;height:24px}
.row h3{font-size:var(--r4);line-height:1.3;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.row p{color:var(--body)}
.g-dark .row p{color:var(--onDarkMute)}
/* two rows of equal height. Each label sits centred on its number's cap
   height, the same way in both rows, with even space above and below */
/* 3.3.0: the homepage panel is gone. These rules stay for the Gerald Grimes page */
.stats{display:grid;grid-auto-rows:1fr;align-content:start;border-radius:var(--radP);background:var(--surf);border:1px solid transparent;padding:clamp(8px,1vw,16px) clamp(28px,3vw,44px);transition:transform .5s var(--settle)}
.g-dark .stats{border-color:var(--lineD)}
@media (hover:hover){.stats:hover{transform:translateY(-5px) scale(1.008);border-color:var(--acc);transition:transform .5s var(--settle),border-color .35s var(--press)}}
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(20px,2vw,32px);align-items:center;padding-block:clamp(24px,2.2vw,34px)}
.stat+.stat{border-top:1px solid var(--line)}
.stat .n{font-size:var(--r2);line-height:1;letter-spacing:-.04em;font-weight:900;color:var(--acc);font-variant-numeric:tabular-nums;min-width:2.2ch;text-box:trim-both cap alphabetic}
.stat .k{font-size:var(--r5);line-height:1.5;color:var(--body);max-width:30ch}
.g-dark .stat .k{color:var(--onDarkMute)}

/* =====================================================================
   PAIR, prose on one side and a client's own words on the other
   ===================================================================== */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,112px);margin-top:var(--gap);align-items:start}
.pair-copy p{font-size:var(--r4);line-height:1.5;letter-spacing:-.012em;color:var(--body);max-width:30em}
.pair-copy p+p{margin-top:18px}
.g-dark .pair-copy p{color:var(--onDark)}
.pair-copy .btn{margin-top:32px}
.pull{padding:clamp(28px,3vw,48px);border-radius:var(--radP);background:var(--surf);border:1px solid transparent;transition:transform .5s var(--settle)}
.g-dark .pull{border-color:var(--lineD)}
.pull-hero{margin-top:clamp(36px,4vw,56px);max-width:44em}
.pull blockquote p{font-size:var(--r3);line-height:1.3;letter-spacing:-.015em;font-weight:600;text-indent:-.4em}
.pull figcaption{margin-top:20px;color:var(--said)}
.g-light .pull figcaption{color:var(--body)}
.pull figcaption b{color:var(--ink);font-weight:600}
.g-dark .pull figcaption b{color:var(--onDark)}
@media (hover:hover){.pull:hover{transform:translateY(-5px) scale(1.008);border-color:var(--acc);transition:transform .5s var(--settle),border-color .35s var(--press)}}

/* =====================================================================
   REFERENCES
   ===================================================================== */
.qhead{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.qside{flex:1 1 560px}
.qside .board{margin-bottom:0}
.qnav{display:flex;align-items:center;gap:12px}
/* the round controls are ghost buttons: navy on white, white with an orange edge on navy */
.qbtn{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--orangeD);background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s var(--press),border-color .3s var(--press),color .3s var(--press)}
.qbtn svg{width:18px;height:18px;transition:transform .35s var(--settle)}
.g-light .qbtn{border-color:var(--ink);color:var(--ink)}
@media (hover:hover){
  .qbtn:hover{background:var(--orangeD);border-color:var(--orangeD);color:#fff}
  .g-light .qbtn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
  .qbtn[data-q="next"]:hover svg{transform:translateX(2px)}
  .qbtn[data-q="prev"]:hover svg{transform:translateX(-2px)}
}
.qbtn:focus-visible{border-radius:50%;background:var(--orangeD);border-color:var(--orangeD);color:#fff}
.g-light .qbtn:focus-visible{background:var(--ink);border-color:var(--ink);color:#fff}
.qbtn[hidden]{display:none}
.qplay .i-play,.qplay[data-state="stopped"] .i-pause{display:none}
.qplay[data-state="stopped"] .i-play{display:block}
.qcount{font-size:var(--r5);font-weight:600;color:var(--soft);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.qtrack{position:relative;margin-top:clamp(36px,3.4vw,56px);cursor:grab;touch-action:pan-y;outline-offset:8px}
/* 3.4.3: the box takes the height of the quote showing, so the gap below never changes */

.qtrack.drag{cursor:grabbing}
.qslide+.qslide{margin-top:clamp(40px,4vw,64px)}
/* the outgoing quote fades out first, then the next fades in, so two never print over each other */
.js .qslide{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;visibility:hidden;transition:opacity .3s var(--press),visibility 0s linear .3s}
.js .qslide.on{position:relative;opacity:1;visibility:visible;transition:opacity .45s var(--press) .3s,visibility 0s linear 0s}
html:not(.js) .qnav{display:none}
/* the quote takes the full width, so a short one never leaves the right half empty */
.qslide blockquote p{font-size:var(--r2);line-height:1.06;letter-spacing:-.028em;font-weight:600;text-indent:-.4em;max-width:none;text-wrap:pretty}
.q-long .qslide blockquote p{font-size:var(--r3);line-height:1.38;letter-spacing:-.014em;max-width:36em;text-wrap:pretty}
.qslide figcaption{margin-top:clamp(24px,2.4vw,36px);font-size:var(--r4);line-height:1.4;color:var(--soft)}
.qslide figcaption b{color:inherit;font-weight:600}
.g-dark .qslide figcaption b{color:var(--onDark)}
.g-light .qslide figcaption b{color:var(--ink)}
.js .qside .board i.run{transition:transform var(--dur,7s) linear 0s}

/* =====================================================================
   ARTICLE CARDS, on the insights archive
   ===================================================================== */
.post{
  position:relative;aspect-ratio:4/4.8;border-radius:var(--radC);overflow:hidden;isolation:isolate;
  color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,2.4vw,40px);
  background:var(--ink2);transition:transform .5s var(--settle);
}
.post img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--press)}
.post::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(15,35,64,.92) 0%,rgba(15,35,64,.55) 42%,rgba(15,35,64,.05) 72%)}
.tag{position:absolute;top:clamp(20px,2vw,32px);left:clamp(20px,2vw,32px);padding:8px 14px;border-radius:var(--pill);background:rgba(255,255,255,.94);color:var(--ink);font-size:var(--r6);font-weight:600;line-height:1}
.post-t{font-size:var(--r3);line-height:1.2;letter-spacing:-.02em;font-weight:800;max-width:18em;text-wrap:balance}
.post .arrow{color:var(--orange);margin-top:10px}
@media (hover:hover){.post:hover{transform:translateY(-5px) scale(1.008)}.post:hover img{transform:scale(1.04)}.post:hover .arrow::after{transform:translate(3px,-3px)}}

/* the insights archive, the same cards in a grid */
.arch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,22px);margin-top:var(--gap)}
.arch .post{flex:none;aspect-ratio:4/4.6}
.pagination .nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:var(--gap)}
.page-numbers{display:inline-grid;place-items:center;min-width:48px;min-height:48px;padding:0 18px;border-radius:var(--pill);border:1px solid var(--line);font-weight:600;text-decoration:none}
.page-numbers.current{background:var(--ink);border-color:var(--ink);color:var(--paper)}
@media (hover:hover){a.page-numbers:hover{border-color:var(--acc)}}
a.page-numbers:focus-visible{border-color:var(--acc)}
.empty{margin-top:var(--gap);padding:clamp(32px,4vw,64px);border-radius:var(--radP);background:var(--surf);max-width:var(--wText);border:1px solid transparent;transition:transform .5s var(--settle)}
.empty p{font-size:var(--r4);line-height:1.5;color:var(--body)}
.empty .btn{margin-top:28px}
@media (hover:hover){.empty:hover{transform:translateY(-5px) scale(1.008);border-color:var(--acc);transition:transform .5s var(--settle),border-color .35s var(--press)}}

/* =====================================================================
   ARTICLE AND PAGE BODY
   ===================================================================== */
.feat{border-radius:var(--radI);overflow:hidden;aspect-ratio:16/7;background:var(--paper2)}
.feat img{width:100%;height:100%;object-fit:cover}
.feat+.entry{margin-top:var(--gap)}
.entry{max-width:var(--wText)}
.entry>*+*{margin-top:1.1em}
.entry h2{font-size:var(--r3);line-height:1.2;letter-spacing:-.02em;font-weight:800;margin-top:1.8em}
.entry h3{font-size:var(--r4);line-height:1.3;letter-spacing:-.01em;font-weight:600;margin-top:1.6em}
.entry p,.entry li{color:var(--body);line-height:1.7}
.entry strong,.entry b{color:var(--ink);font-weight:600}
.entry em,.entry i{font-style:normal}
.entry a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orangeD);text-underline-offset:.22em;text-decoration-thickness:1.5px;transition:text-decoration-thickness .2s var(--press)}
@media (hover:hover){.entry a:hover{text-decoration-thickness:3px}}
.entry a:focus-visible{text-decoration-thickness:3px}
.entry ul li{position:relative;padding-left:26px}
.entry ul li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--orangeD)}
.entry ol{counter-reset:e}
.entry ol li{position:relative;padding-left:32px;counter-increment:e}
.entry ol li::before{content:counter(e);position:absolute;left:0;top:0;font-weight:600;color:var(--ink)}
.entry li+li{margin-top:.55em}
.entry blockquote{padding-left:24px;border-left:2px solid var(--orangeD)}
.entry blockquote p{font-size:var(--r4);line-height:1.45;font-weight:600;color:var(--ink)}
.entry img{border-radius:var(--radI)}
.entry figure figcaption{margin-top:10px;font-size:var(--r6);color:var(--muted)}

/* =====================================================================
   FAQ
   ===================================================================== */
.fwrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(40px,6vw,112px);margin-top:var(--gap);align-items:start}
.faqs{display:grid;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line);transition:background .35s var(--press)}
.faq h3{font-size:inherit;font-weight:inherit}
.faq button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;background:none;border:0;cursor:pointer;color:inherit;
  padding:clamp(22px,2vw,30px) 0;font-size:var(--r4);line-height:1.3;letter-spacing:-.01em;font-weight:600;min-height:44px;text-wrap:balance}
.faq .q{text-wrap:balance;text-decoration:underline 2px transparent;text-underline-offset:.28em;transition:text-decoration-color .3s var(--press)}
.faq .ic{position:relative;width:18px;height:18px;flex:none}
.faq .ic::before,.faq .ic::after{content:"";position:absolute;left:0;top:8px;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .45s var(--settle)}
.faq .ic::after{transform:rotate(90deg)}
.faq[data-open="1"] .ic::after{transform:rotate(0)}
.faq .a{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s var(--settle)}
.js .faq[data-open="0"] .a{grid-template-rows:0fr}
html:not(.js) .faq .ic{display:none}
.faq .a>div{overflow:hidden}
/* a closed answer leaves the accessibility tree once it has folded away */
.js .faq[data-open="0"] .a>div{visibility:hidden;transition:visibility 0s .5s}
.faq[data-open="1"] .a>div{visibility:visible;transition:visibility 0s}
.faq .a p{padding:0 0 clamp(24px,2.2vw,30px);color:var(--soft);max-width:var(--wText)}
.g-light .faq .a p{color:var(--body)}
/* the question takes an orange underline and the icon grows */
@media (hover:hover){.faq button:hover .q{text-decoration-color:var(--acc)}.faq button:hover .ic{transform:scale(1.2)}}
.faq button:focus-visible .q{text-decoration-color:var(--acc)}
.faq button:focus-visible .ic{transform:scale(1.2)}
.faq .ic{transition:transform .35s var(--settle)}

/* =====================================================================
   CONTACT
   ===================================================================== */
.con{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,112px);align-items:start}
.con-lead{margin-top:clamp(24px,2.4vw,36px);font-size:var(--r4);line-height:1.5;letter-spacing:-.012em;color:var(--body);max-width:24em}
.con-talk .faqs{margin-top:clamp(36px,3.4vw,56px)}
.con{margin-top:var(--gap)}
.con-tel{font-size:var(--r4);line-height:1.4;color:var(--body)}
.tel-l{display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);margin-top:6px;font-size:var(--r2);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:var(--ink);white-space:nowrap}
/* the number is the call to action: orange, underlined, navy on hover */
.tel-l a{display:inline-block;padding-block:4px;color:var(--orangeD);text-decoration:none;transition:color .3s var(--press)}
@media (hover:hover){.tel-l a:hover{color:var(--ink)}}
.tel-l a:focus-visible{color:var(--ink)}
.tel-l a:focus-visible{border-radius:8px}
.frm-card{position:sticky;top:calc(16px + var(--navh,110px) + 24px);background:var(--paper2);border-radius:var(--radP);border:1px solid transparent;padding:clamp(24px,3vw,48px);transition:transform .5s var(--settle),border-color .35s var(--press)}
@media (hover:hover){.frm-card:hover{transform:translateY(-5px) scale(1.008);border-color:var(--orangeD)}}
.frm-card:focus-within{border-color:var(--orangeD)}
.frm-sent{display:grid;gap:14px;justify-items:start;padding:clamp(8px,1vw,16px) 0}
.frm-sent[hidden]{display:none}
.frm-sent .chip{margin-bottom:6px}
.frm-sent p:not(.t4){color:var(--body)}
.frm-sent:focus{outline:0}
.frm{display:grid;gap:14px}
.frm[hidden]{display:none}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld{display:grid;gap:6px}
.frm input,.frm select,.frm textarea{
  width:100%;min-height:56px;padding:0 22px;border-radius:var(--pill);border:1px solid var(--field);background:var(--paper);
  font-size:var(--r5);color:var(--ink);transition:border-color .3s var(--press),box-shadow .3s var(--press);-webkit-appearance:none;appearance:none;
}
.frm select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2340' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center;background-size:18px;padding-right:52px}
.frm textarea{padding:18px 22px;min-height:150px;border-radius:var(--radC);resize:vertical;line-height:1.5}
.frm ::placeholder{color:var(--muted);opacity:1}
.frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--orangeD);outline:1px solid var(--orangeD);outline-offset:0}
@media (hover:hover){.frm input:hover:not(:focus),.frm select:hover:not(:focus),.frm textarea:hover:not(:focus){border-color:var(--ink)}}
.frm .bad input,.frm .bad textarea{border-color:var(--err);border-width:2px;padding-inline:21px}
.frm .bad textarea{padding-block:17px}
.frm .msg{display:none;font-size:var(--r6);font-weight:600;color:var(--err);padding-left:22px}
.frm .bad .msg{display:block}
.frm .btn{width:100%;min-height:58px;margin-top:4px}

/* =====================================================================
   FLUENT FORMS, wearing the house form. The plugin's own public stylesheet
   is switched off in functions.php. The body prefix outranks whatever
   base layer it still prints.
   ===================================================================== */
body .fluentform form{margin:0}
body .fluentform fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:14px}
body .fluentform legend{display:none}
body .fluentform .ff-el-group{position:relative;margin:0;grid-column:1/-1}
@media (min-width:560px){
  body .fluentform fieldset{grid-template-columns:1fr 1fr}
  body .fluentform .ff-el-group.fin-half{grid-column:auto}
}
body .fluentform .ff-t-container{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:559px){body .fluentform .ff-t-container{grid-template-columns:1fr}}
body .fluentform .ff-el-input--label{margin:0 0 8px}
body .fluentform .ff-el-input--label label{display:block;margin:0;font-size:var(--r6);font-weight:600;color:var(--ink)}
/* a field that carries a placeholder shows the placeholder, not a label above it */
body .fluentform .ff-el-group:has(.ff-el-form-control[placeholder]:not([placeholder=""])) .ff-el-input--label,
body .fluentform .ff-el-group:has(select.ff-el-form-control) .ff-el-input--label,
body .fluentform .ff-el-form-hide_label .ff-el-input--label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
body .fluentform .ff-el-form-control{
  display:block;width:100%;min-height:56px;padding:0 22px;border-radius:var(--pill);border:1px solid var(--field);background:var(--paper);
  font-family:var(--f);font-size:var(--r5);line-height:1.4;color:var(--ink);box-shadow:none;
  transition:border-color .3s var(--press),box-shadow .3s var(--press);
}
body .fluentform textarea.ff-el-form-control{padding:18px 22px;min-height:150px;border-radius:var(--radC);resize:vertical;line-height:1.5}
body .fluentform select.ff-el-form-control{-webkit-appearance:none;appearance:none;padding-right:52px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2340' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center;background-size:18px}
body .fluentform .ff-el-form-control::placeholder{color:var(--muted);opacity:1}
body .fluentform .ff-el-form-control:focus{border-color:var(--orangeD);outline:1px solid var(--orangeD);outline-offset:0;box-shadow:none}
@media (hover:hover){body .fluentform .ff-el-group:not(.ff-el-is-error) .ff-el-form-control:hover:not(:focus){border-color:var(--ink)}}
body .fluentform .ff-el-is-error .ff-el-form-control{border-color:var(--err);border-width:2px;padding-inline:21px}
body .fluentform .ff-el-is-error textarea.ff-el-form-control{padding-block:17px}
body .fluentform .ff-el-is-error select.ff-el-form-control{padding-right:51px}
body .fluentform .error.text-danger,body .fluentform .ff-el-is-error .error{display:block;margin:6px 0 0 22px;font-size:var(--r6);font-weight:600;color:var(--err)}
body .fluentform .ff-el-form-hint{margin:6px 0 0 22px;font-size:var(--r6);color:var(--muted)}
body .ff-message-success{padding:clamp(28px,3vw,44px);border-radius:var(--radP);background:var(--paper);border:1px solid var(--lineL);color:var(--ink);font-size:var(--r4);line-height:1.4;font-weight:600;box-shadow:none}
body .fluentform .ff_submit_btn_wrapper,body .fluentform .ff-el-group.ff-text-left{text-align:center}
body .fluentform .ff-btn-submit{
  display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:58px;padding:0 28px;border:0;border-radius:var(--pill);cursor:pointer;
  font-family:var(--f);font-size:var(--rB);font-weight:700;line-height:1;background:var(--orangeD)!important;color:#fff!important;box-shadow:none;
  transition:background .3s var(--press),transform .3s var(--press);
}
body .fluentform .ff-btn-submit:focus-visible{outline:2px solid var(--orangeD);outline-offset:3px;background:var(--ink)!important}
@media (hover:hover){body .fluentform .ff-btn-submit:hover{background:var(--ink)!important;transform:translateY(-2px) scale(1.02)}}

/* the footer signup is an email field with a round arrow beside it */
body .fsign .fluentform fieldset{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
body .fsign .fluentform .ff-el-group,body .fsign .fluentform .ff_submit_btn_wrapper{grid-column:auto;width:auto}
body .fsign .fluentform .ff-el-input--label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
body .fsign .fluentform .ff-el-form-control{min-height:52px;padding:0 20px;background:rgba(255,255,255,.05);border-color:var(--fieldD);color:var(--paper)}
body .fsign .fluentform .ff-el-form-control::placeholder{color:var(--onDarkMute)}
body .fsign .fluentform .ff-el-form-control:focus{border-color:var(--orange);outline:1px solid var(--orange);outline-offset:0;box-shadow:none}
@media (hover:hover){body .fsign .fluentform .ff-el-group:not(.ff-el-is-error) .ff-el-form-control:hover:not(:focus){border-color:rgba(255,255,255,.7)}}
body .fsign .fluentform .ff-btn-submit{position:relative;width:52px;min-height:52px;height:52px;padding:0;border-radius:50%;font-size:0;background:var(--orangeD)!important;color:#fff!important}
body .fsign .fluentform .ff-btn-submit::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:var(--icoRight) center/18px no-repeat;mask:var(--icoRight) center/18px no-repeat;transition:background .3s var(--press)}
@media (hover:hover){body .fsign .fluentform .ff-btn-submit:hover{background:#fff!important;transform:translateX(2px) scale(1.04)}
  body .fsign .fluentform .ff-btn-submit:hover::after{background:var(--ink)}}
body .fsign .fluentform .ff-btn-submit:focus-visible{outline-color:var(--orange);background:#fff!important}
body .fsign .fluentform .ff-btn-submit:focus-visible::after{background:var(--ink)}
body .fsign .fluentform .error.text-danger{color:var(--errLt);margin-left:20px}
body .fsign .ff-message-success{background:rgba(255,255,255,.05);border-color:var(--lineD);color:var(--onDark);font-size:var(--r5)}

/* =====================================================================
   CLOSING BLOCK ON INNER PAGES
   ===================================================================== */
.cta-lead{font-size:var(--r4);line-height:1.5;letter-spacing:-.012em;color:var(--body);max-width:30em}
.cta .btn{margin-top:32px}

/* =====================================================================
   FOOTER
   ===================================================================== */
.ft{padding-block:clamp(80px,7vw,120px) 36px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(32px,3.4vw,56px)}
@media (min-width:1141px){.fgrid{grid-template-columns:minmax(0,26rem) auto auto minmax(0,28rem);justify-content:space-between}}
.flogo{margin-bottom:clamp(22px,2vw,30px)}
.flogo .logo{display:block;height:clamp(48px,3.4vw,56px);width:auto;aspect-ratio:972.69/372.01}
.fsay{font-size:var(--r4);line-height:1.3;letter-spacing:-.015em;font-weight:600;color:var(--paper);max-width:17em}
.ft .btn-g{margin-top:26px}
.fcol .fh{font-size:var(--r5);font-weight:600;letter-spacing:-.005em;color:var(--paper);margin-bottom:10px}
.fcol a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;color:var(--onDark);
  background:linear-gradient(var(--orange),var(--orange)) 0 calc(100% - 7px)/0 2px no-repeat;transition:color .3s var(--press),background-size .4s var(--settle)}
@media (hover:hover){.fcol a:hover{color:var(--orange);background-size:100% 2px}}
.fcol a:focus-visible{color:var(--orange);background-size:100% 2px}
.fsign{background:var(--ink2);border:1px solid var(--lineD);border-radius:var(--radC);padding:clamp(24px,2.4vw,34px);transition:transform .5s var(--settle),border-color .35s var(--press)}
@media (hover:hover){.fsign:hover{transform:translateY(-5px) scale(1.008);border-color:var(--orange)}}
.fsign:focus-within{border-color:var(--orange)}
.fsign>p{font-size:var(--r4);line-height:1.3;font-weight:600;color:var(--paper);margin-bottom:18px}
.fsub{display:flex;gap:10px}
.fsub input{flex:1;min-width:0;min-height:52px;padding:0 20px;border-radius:var(--pill);border:1px solid var(--fieldD);background:rgba(255,255,255,.05);color:var(--paper);font-size:var(--r5)}
.fsub input::placeholder{color:var(--onDarkMute);opacity:1}
.fsub input:focus{border-color:var(--orange);outline:1px solid var(--orange);outline-offset:0}
@media (hover:hover){.fsub input:hover:not(:focus){border-color:rgba(255,255,255,.7)}}
.fsub button{width:52px;height:52px;flex:none;border-radius:50%;border:0;background:var(--orangeD);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .3s var(--press),color .3s var(--press),transform .3s var(--press)}
.fsub button svg{width:18px;height:18px}
@media (hover:hover){.fsub button:hover{background:#fff;color:var(--ink);transform:translateX(2px) scale(1.04)}}
.fsub button:focus-visible{background:#fff;color:var(--ink);border-radius:50%}
.fsocial{display:flex;gap:10px;margin-top:20px}
.fsocial a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);color:var(--paper);transition:background .3s var(--press),border-color .3s var(--press),transform .3s var(--press)}
.fsocial svg{width:18px;height:18px}
@media (hover:hover){.fsocial a:hover{background:var(--orangeD);border-color:var(--orangeD);color:#fff;transform:translateY(-2px)}}
.fsocial a:focus-visible{background:var(--orangeD);border-color:var(--orangeD);border-radius:50%}
.fbase{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:clamp(56px,5vw,88px);padding-top:26px;border-top:1px solid var(--lineD);font-size:var(--r6);color:var(--onDarkMute)}
.fbase a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:40px;transition:color .3s var(--press)}
@media (hover:hover){.fbase a:hover{color:var(--orange)}}
.fbase a:focus-visible{color:var(--orange)}
/* 3.3.1: the privacy link sits beside the company line, the credit keeps the right */
.fbase .fpriv{margin-right:auto;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:.25em}
@media (hover:hover){.fbase .fpriv:hover{text-decoration-color:var(--orange)}}
.fbase .fpriv:focus-visible{text-decoration-color:var(--orange)}
/* 3.3.2: the privacy link under each form, only once the notice is published */
.frm-note{margin:4px 0 0;text-align:center;font-size:var(--r5)}
.frm-note a{display:inline-flex;align-items:center;min-height:44px;color:var(--body);text-decoration:underline;text-decoration-color:var(--lineL);text-underline-offset:.25em}
.frm-note.on-dark{text-align:left;margin-top:2px}
.frm-note.on-dark a{color:var(--onDarkMute);text-decoration-color:rgba(255,255,255,.3)}
@media (hover:hover){.frm-note a:hover{color:var(--ink);text-decoration-color:var(--orangeD);transition:color .3s var(--press),text-decoration-color .3s var(--press)}.frm-note.on-dark a:hover{color:#fff;text-decoration-color:var(--orange)}}
.frm-note a:focus-visible{text-decoration-color:var(--orangeD)}
/* the Waywest credit, the logo's own vector path used as a mask (3.3.0, the old PNG
   kept a fade on one stroke), so the mark is flat white at rest and turns orange
   with its words on hover and focus */
.wwc{display:block;flex:none;width:72px;height:24px;background:#fff;transition:background .3s var(--press);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2540 849.1'%3E%3Cpath d='M992.51,106.31v318.03c0,130.57-106.22,236.79-236.79,236.79-69.19,0-131.54-29.84-174.87-77.31l36.88-113.82c19.19,57.85,73.78,99.71,137.99,99.71,80.16,0,145.37-65.21,145.37-145.37s-65.21-145.37-145.37-145.37c-66.61,0-122.85,45.04-139.98,106.25h-.02s-84.14,261.5-84.14,261.5h-95.29l-90.43-274.52-90.43,274.52h-95.29L20,214.1h101.25l88.98,290.87,96.34-292.1h81l96.34,292.1,39-127.99c37.12-135.34,130.27-189.43,232.8-189.43,54.77,0,105.22,18.74,145.37,50.08V106.31h91.42ZM1328.09,230.78h-37.93l53.55,162.91h25.04l31.98-103.42,32.72,103.42h24.79l52.8-162.91h-37.93l-29.5,100.58-31.98-100.58h-21.81l-30.99,101.29-30.74-101.29ZM1563.55,230.78l-67.43,162.91h37.68l9.42-25.03h68.67l9.17,25.03h38.67l-66.93-162.91h-29.25ZM1552.39,343.87l25.53-68.23,25.04,68.23h-50.57ZM1675.31,230.78h-39.67l65.2,115.46v47.45h34.95v-48.4l64.46-114.51h-39.17l-42.39,82.4-43.38-82.4ZM1842.88,230.78h-37.93l53.55,162.91h25.04l31.98-103.42,32.72,103.42h24.79l52.8-162.91h-37.93l-29.5,100.58-31.98-100.58h-21.81l-30.99,101.29-30.74-101.29ZM2168.27,393.69v-28.57h-85.53v-39.2h84.04v-28.33h-84.04v-38.25h85.28v-28.57h-120.23v162.91h120.48ZM2265.6,396.76c13.88,0,25.45-1.15,34.71-3.43,9.25-2.28,16.69-5.55,22.31-9.8,5.62-4.25,9.59-9.4,11.9-15.46,2.31-6.07,3.47-12.87,3.47-20.42,0-6.93-.95-12.83-2.85-17.72-1.9-4.88-4.67-9.04-8.31-12.51-3.64-3.47-8.14-6.34-13.51-8.62-5.37-2.28-11.61-4.29-18.72-6.02l-41.89-10.15c-7.44-1.89-12.65-4.34-15.62-7.32-2.97-3-4.46-6.85-4.46-11.57,0-2.52.42-4.88,1.24-7.08.83-2.2,2.48-4.13,4.96-5.78,2.48-1.65,5.91-2.95,10.29-3.89,4.38-.95,10.12-1.42,17.23-1.42,5.45,0,10.29.35,14.5,1.06,4.22.7,7.81,2.09,10.78,4.13s5.29,4.92,6.94,8.61c1.65,3.7,2.56,8.54,2.72,14.53h35.2c-.33-10.71-2.02-19.63-5.08-26.8-3.05-7.16-7.47-12.94-13.26-17.35-5.78-4.4-13.06-7.52-21.81-9.32-8.76-1.81-19.01-2.72-30.74-2.72-12.89,0-23.67,1.18-32.35,3.54-8.68,2.37-15.66,5.59-20.95,9.68-5.29,4.1-9.05,8.98-11.28,14.64-2.23,5.66-3.35,11.73-3.35,18.17,0,12.12,3.14,21.76,9.42,28.92s16.03,12.4,29.25,15.7l44.13,11.34c3.14.63,6.03,1.37,8.68,2.24s4.96,1.97,6.94,3.31c1.99,1.33,3.51,3.03,4.59,5.07s1.61,4.72,1.61,8.03-.54,6.22-1.61,8.74c-1.07,2.51-2.97,4.64-5.7,6.37-2.73,1.73-6.49,3.03-11.28,3.89s-10.91,1.3-18.34,1.3c-5.62,0-10.62-.43-15-1.3-4.38-.87-8.06-2.44-11.03-4.72s-5.29-5.35-6.94-9.21c-1.65-3.85-2.56-8.85-2.73-14.99h-36.19c0,10.71,1.4,19.75,4.21,27.15,2.81,7.4,7.19,13.42,13.14,18.06,5.95,4.65,13.47,7.99,22.56,10.04,9.09,2.04,19.83,3.07,32.23,3.07ZM2495,260.29v-29.51h-146.02v29.51h55.53v133.4h34.96v-133.4h55.53ZM1303.54,450.15v162.91h63.96c13.22,0,24.79-1.22,34.71-3.66,9.91-2.44,18.18-6.73,24.79-12.87,6.61-6.14,11.57-14.44,14.88-24.91s4.95-23.73,4.95-39.78c0-17.32-1.77-31.28-5.33-41.9-3.56-10.63-8.72-18.89-15.49-24.79-6.78-5.91-15.08-9.88-24.91-11.93-9.83-2.04-21.03-3.06-33.59-3.06h-63.96ZM1367.5,592.52h-41.4v-121.83h41.4c9.09,0,17.15.51,24.17,1.54,7.03,1.02,12.89,3.61,17.6,7.79,4.71,4.17,8.31,10.31,10.78,18.41,2.48,8.11,3.72,19.24,3.72,33.41,0,13.23-1.24,23.81-3.72,31.76-2.48,7.95-6.07,14.08-10.78,18.42-4.71,4.33-10.58,7.16-17.6,8.49-7.03,1.34-15.08,2.01-24.17,2.01ZM1606.19,613.06v-20.54h-95.45v-51.48h92.96v-20.3h-92.96v-50.05h95.2v-20.54h-117.75v162.91h118ZM1709.28,616.37c13.22,0,24.38-1.15,33.47-3.43s16.49-5.47,22.19-9.56c5.7-4.09,9.83-9.09,12.4-14.99,2.56-5.91,3.84-12.47,3.84-19.72s-.95-13.07-2.85-17.94-4.71-9.01-8.43-12.4c-3.72-3.38-8.39-6.13-14.01-8.26-5.62-2.12-12.06-3.89-19.34-5.31l-45.86-8.73c-8.26-1.58-14.17-4.37-17.72-8.38s-5.33-9.17-5.33-15.47c0-3.31.53-6.46,1.61-9.44,1.08-3,3.14-5.63,6.2-7.91,3.06-2.28,7.44-4.1,13.14-5.43,5.7-1.34,13.18-2.01,22.43-2.01,6.45,0,12.4.43,17.85,1.3,5.45.87,10.2,2.52,14.25,4.95,4.05,2.44,7.36,5.95,9.91,10.51,2.56,4.56,4.09,10.62,4.59,18.18h23.55c-.5-10.71-2.48-19.64-5.95-26.8-3.47-7.16-8.26-12.87-14.38-17.11-6.11-4.25-13.35-7.25-21.69-8.98-8.35-1.73-17.72-2.6-28.14-2.6-12.56,0-23.09,1.22-31.61,3.66-8.51,2.44-15.33,5.71-20.45,9.8-5.12,4.1-8.8,8.89-11.03,14.41-2.23,5.51-3.35,11.33-3.35,17.47,0,10.86,3.18,20.15,9.55,27.86s16.24,12.83,29.62,15.35l45.12,8.49c3.97.79,7.73,1.7,11.28,2.72,3.55,1.03,6.65,2.4,9.29,4.13s4.71,4.01,6.2,6.85,2.23,6.53,2.23,11.1c0,4.25-.7,8.03-2.11,11.34s-3.92,6.14-7.56,8.5-8.59,4.17-14.87,5.43c-6.28,1.26-14.3,1.89-24.05,1.89-6.44,0-12.4-.48-17.85-1.42-5.46-.95-10.25-2.72-14.38-5.32-4.13-2.6-7.44-6.25-9.91-10.98-2.48-4.72-3.89-10.86-4.22-18.41h-24.05c.33,10.86,2.23,19.91,5.7,27.15s8.26,13.07,14.38,17.47c6.12,4.41,13.43,7.52,21.94,9.33,8.51,1.81,17.97,2.72,28.38,2.72ZM1844.1,613.06v-162.91h-22.56v162.91h22.56ZM1962.33,527.59v19.84h54.54v5.19c0,8.82-1.49,16.02-4.46,21.6-2.98,5.59-6.98,9.99-12.03,13.23-5.04,3.22-10.82,5.43-17.35,6.61-6.53,1.18-13.27,1.77-20.21,1.77-8.93,0-16.77-.76-23.55-2.25-6.78-1.49-12.44-4.52-16.98-9.09-4.55-4.56-8.02-11.06-10.41-19.48-2.4-8.43-3.59-19.48-3.59-33.17s1.2-25.73,3.59-34.23c2.4-8.5,5.87-14.99,10.41-19.48,4.54-4.49,10.2-7.4,16.98-8.73,6.77-1.34,14.62-2.01,23.55-2.01,7.27,0,13.8.43,19.59,1.3,5.78.87,10.86,2.56,15.25,5.07,4.38,2.52,7.93,6.07,10.66,10.63,2.73,4.56,4.67,10.55,5.83,17.94h23.8c-.99-10.86-3.43-19.88-7.31-27.04-3.89-7.16-9.01-12.86-15.37-17.11-6.36-4.25-13.97-7.2-22.81-8.86-8.84-1.65-18.72-2.48-29.62-2.48-12.23,0-23.18,1.18-32.85,3.54-9.67,2.37-17.81,6.65-24.42,12.87-6.61,6.22-11.65,14.84-15.12,25.85-3.47,11.02-5.21,25.27-5.21,42.74s1.61,30.5,4.84,41.44c3.22,10.94,8.1,19.6,14.63,25.97,6.52,6.37,14.62,10.83,24.29,13.34,9.67,2.52,20.95,3.78,33.84,3.78,10.74,0,20.78-1.03,30.12-3.07,9.34-2.04,17.48-5.55,24.42-10.51,6.94-4.95,12.35-11.52,16.24-19.71,3.89-8.19,5.82-18.33,5.82-30.46v-25.03h-77.1ZM2094.42,450.15h-13.88v162.91h21.81v-122.3l106.85,122.3h14.87v-162.91h-22.06v123.48l-107.59-123.48ZM1134.82,829.1h22.48V20h-22.48v809.1Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2540 849.1'%3E%3Cpath d='M992.51,106.31v318.03c0,130.57-106.22,236.79-236.79,236.79-69.19,0-131.54-29.84-174.87-77.31l36.88-113.82c19.19,57.85,73.78,99.71,137.99,99.71,80.16,0,145.37-65.21,145.37-145.37s-65.21-145.37-145.37-145.37c-66.61,0-122.85,45.04-139.98,106.25h-.02s-84.14,261.5-84.14,261.5h-95.29l-90.43-274.52-90.43,274.52h-95.29L20,214.1h101.25l88.98,290.87,96.34-292.1h81l96.34,292.1,39-127.99c37.12-135.34,130.27-189.43,232.8-189.43,54.77,0,105.22,18.74,145.37,50.08V106.31h91.42ZM1328.09,230.78h-37.93l53.55,162.91h25.04l31.98-103.42,32.72,103.42h24.79l52.8-162.91h-37.93l-29.5,100.58-31.98-100.58h-21.81l-30.99,101.29-30.74-101.29ZM1563.55,230.78l-67.43,162.91h37.68l9.42-25.03h68.67l9.17,25.03h38.67l-66.93-162.91h-29.25ZM1552.39,343.87l25.53-68.23,25.04,68.23h-50.57ZM1675.31,230.78h-39.67l65.2,115.46v47.45h34.95v-48.4l64.46-114.51h-39.17l-42.39,82.4-43.38-82.4ZM1842.88,230.78h-37.93l53.55,162.91h25.04l31.98-103.42,32.72,103.42h24.79l52.8-162.91h-37.93l-29.5,100.58-31.98-100.58h-21.81l-30.99,101.29-30.74-101.29ZM2168.27,393.69v-28.57h-85.53v-39.2h84.04v-28.33h-84.04v-38.25h85.28v-28.57h-120.23v162.91h120.48ZM2265.6,396.76c13.88,0,25.45-1.15,34.71-3.43,9.25-2.28,16.69-5.55,22.31-9.8,5.62-4.25,9.59-9.4,11.9-15.46,2.31-6.07,3.47-12.87,3.47-20.42,0-6.93-.95-12.83-2.85-17.72-1.9-4.88-4.67-9.04-8.31-12.51-3.64-3.47-8.14-6.34-13.51-8.62-5.37-2.28-11.61-4.29-18.72-6.02l-41.89-10.15c-7.44-1.89-12.65-4.34-15.62-7.32-2.97-3-4.46-6.85-4.46-11.57,0-2.52.42-4.88,1.24-7.08.83-2.2,2.48-4.13,4.96-5.78,2.48-1.65,5.91-2.95,10.29-3.89,4.38-.95,10.12-1.42,17.23-1.42,5.45,0,10.29.35,14.5,1.06,4.22.7,7.81,2.09,10.78,4.13s5.29,4.92,6.94,8.61c1.65,3.7,2.56,8.54,2.72,14.53h35.2c-.33-10.71-2.02-19.63-5.08-26.8-3.05-7.16-7.47-12.94-13.26-17.35-5.78-4.4-13.06-7.52-21.81-9.32-8.76-1.81-19.01-2.72-30.74-2.72-12.89,0-23.67,1.18-32.35,3.54-8.68,2.37-15.66,5.59-20.95,9.68-5.29,4.1-9.05,8.98-11.28,14.64-2.23,5.66-3.35,11.73-3.35,18.17,0,12.12,3.14,21.76,9.42,28.92s16.03,12.4,29.25,15.7l44.13,11.34c3.14.63,6.03,1.37,8.68,2.24s4.96,1.97,6.94,3.31c1.99,1.33,3.51,3.03,4.59,5.07s1.61,4.72,1.61,8.03-.54,6.22-1.61,8.74c-1.07,2.51-2.97,4.64-5.7,6.37-2.73,1.73-6.49,3.03-11.28,3.89s-10.91,1.3-18.34,1.3c-5.62,0-10.62-.43-15-1.3-4.38-.87-8.06-2.44-11.03-4.72s-5.29-5.35-6.94-9.21c-1.65-3.85-2.56-8.85-2.73-14.99h-36.19c0,10.71,1.4,19.75,4.21,27.15,2.81,7.4,7.19,13.42,13.14,18.06,5.95,4.65,13.47,7.99,22.56,10.04,9.09,2.04,19.83,3.07,32.23,3.07ZM2495,260.29v-29.51h-146.02v29.51h55.53v133.4h34.96v-133.4h55.53ZM1303.54,450.15v162.91h63.96c13.22,0,24.79-1.22,34.71-3.66,9.91-2.44,18.18-6.73,24.79-12.87,6.61-6.14,11.57-14.44,14.88-24.91s4.95-23.73,4.95-39.78c0-17.32-1.77-31.28-5.33-41.9-3.56-10.63-8.72-18.89-15.49-24.79-6.78-5.91-15.08-9.88-24.91-11.93-9.83-2.04-21.03-3.06-33.59-3.06h-63.96ZM1367.5,592.52h-41.4v-121.83h41.4c9.09,0,17.15.51,24.17,1.54,7.03,1.02,12.89,3.61,17.6,7.79,4.71,4.17,8.31,10.31,10.78,18.41,2.48,8.11,3.72,19.24,3.72,33.41,0,13.23-1.24,23.81-3.72,31.76-2.48,7.95-6.07,14.08-10.78,18.42-4.71,4.33-10.58,7.16-17.6,8.49-7.03,1.34-15.08,2.01-24.17,2.01ZM1606.19,613.06v-20.54h-95.45v-51.48h92.96v-20.3h-92.96v-50.05h95.2v-20.54h-117.75v162.91h118ZM1709.28,616.37c13.22,0,24.38-1.15,33.47-3.43s16.49-5.47,22.19-9.56c5.7-4.09,9.83-9.09,12.4-14.99,2.56-5.91,3.84-12.47,3.84-19.72s-.95-13.07-2.85-17.94-4.71-9.01-8.43-12.4c-3.72-3.38-8.39-6.13-14.01-8.26-5.62-2.12-12.06-3.89-19.34-5.31l-45.86-8.73c-8.26-1.58-14.17-4.37-17.72-8.38s-5.33-9.17-5.33-15.47c0-3.31.53-6.46,1.61-9.44,1.08-3,3.14-5.63,6.2-7.91,3.06-2.28,7.44-4.1,13.14-5.43,5.7-1.34,13.18-2.01,22.43-2.01,6.45,0,12.4.43,17.85,1.3,5.45.87,10.2,2.52,14.25,4.95,4.05,2.44,7.36,5.95,9.91,10.51,2.56,4.56,4.09,10.62,4.59,18.18h23.55c-.5-10.71-2.48-19.64-5.95-26.8-3.47-7.16-8.26-12.87-14.38-17.11-6.11-4.25-13.35-7.25-21.69-8.98-8.35-1.73-17.72-2.6-28.14-2.6-12.56,0-23.09,1.22-31.61,3.66-8.51,2.44-15.33,5.71-20.45,9.8-5.12,4.1-8.8,8.89-11.03,14.41-2.23,5.51-3.35,11.33-3.35,17.47,0,10.86,3.18,20.15,9.55,27.86s16.24,12.83,29.62,15.35l45.12,8.49c3.97.79,7.73,1.7,11.28,2.72,3.55,1.03,6.65,2.4,9.29,4.13s4.71,4.01,6.2,6.85,2.23,6.53,2.23,11.1c0,4.25-.7,8.03-2.11,11.34s-3.92,6.14-7.56,8.5-8.59,4.17-14.87,5.43c-6.28,1.26-14.3,1.89-24.05,1.89-6.44,0-12.4-.48-17.85-1.42-5.46-.95-10.25-2.72-14.38-5.32-4.13-2.6-7.44-6.25-9.91-10.98-2.48-4.72-3.89-10.86-4.22-18.41h-24.05c.33,10.86,2.23,19.91,5.7,27.15s8.26,13.07,14.38,17.47c6.12,4.41,13.43,7.52,21.94,9.33,8.51,1.81,17.97,2.72,28.38,2.72ZM1844.1,613.06v-162.91h-22.56v162.91h22.56ZM1962.33,527.59v19.84h54.54v5.19c0,8.82-1.49,16.02-4.46,21.6-2.98,5.59-6.98,9.99-12.03,13.23-5.04,3.22-10.82,5.43-17.35,6.61-6.53,1.18-13.27,1.77-20.21,1.77-8.93,0-16.77-.76-23.55-2.25-6.78-1.49-12.44-4.52-16.98-9.09-4.55-4.56-8.02-11.06-10.41-19.48-2.4-8.43-3.59-19.48-3.59-33.17s1.2-25.73,3.59-34.23c2.4-8.5,5.87-14.99,10.41-19.48,4.54-4.49,10.2-7.4,16.98-8.73,6.77-1.34,14.62-2.01,23.55-2.01,7.27,0,13.8.43,19.59,1.3,5.78.87,10.86,2.56,15.25,5.07,4.38,2.52,7.93,6.07,10.66,10.63,2.73,4.56,4.67,10.55,5.83,17.94h23.8c-.99-10.86-3.43-19.88-7.31-27.04-3.89-7.16-9.01-12.86-15.37-17.11-6.36-4.25-13.97-7.2-22.81-8.86-8.84-1.65-18.72-2.48-29.62-2.48-12.23,0-23.18,1.18-32.85,3.54-9.67,2.37-17.81,6.65-24.42,12.87-6.61,6.22-11.65,14.84-15.12,25.85-3.47,11.02-5.21,25.27-5.21,42.74s1.61,30.5,4.84,41.44c3.22,10.94,8.1,19.6,14.63,25.97,6.52,6.37,14.62,10.83,24.29,13.34,9.67,2.52,20.95,3.78,33.84,3.78,10.74,0,20.78-1.03,30.12-3.07,9.34-2.04,17.48-5.55,24.42-10.51,6.94-4.95,12.35-11.52,16.24-19.71,3.89-8.19,5.82-18.33,5.82-30.46v-25.03h-77.1ZM2094.42,450.15h-13.88v162.91h21.81v-122.3l106.85,122.3h14.87v-162.91h-22.06v123.48l-107.59-123.48ZM1134.82,829.1h22.48V20h-22.48v809.1Z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (hover:hover){.fbase a:hover .wwc{background:var(--orange)}}
.fbase a:focus-visible .wwc{background:var(--orange)}

/* the logo mark used large and cropped as a still texture, a second navy on the
   first. Each dark band shows a different crop, always in open ground away from
   every line of text, never moving. Where a width leaves no open ground it goes. */
.has-tex{position:relative;isolation:isolate;overflow:clip}
.tex{position:absolute;z-index:-1;height:auto;fill:var(--ink2);pointer-events:none}
/* each crop is sized off the section's own padding, so it stays in open ground:
   a, the top of the mark rising from the foot of the past work band. b, the foot
   of the mark hanging into the top of the sectors band. c, the middle of the
   mark's top row, its rounded ends hanging into the top of the footer. The mark
   is .8128 as tall as it is wide, crop c .4064 */
.tex-a{--w:min(820px,130vw);width:var(--w);right:-6vw;bottom:calc(var(--sec) - 24px - var(--w) * .8128)}
.tex-b{--w:min(760px,120vw);width:var(--w);right:-4vw;top:calc(var(--sec) - 24px - var(--w) * .8128)}
.tex-c{--w:min(700px,150vw);width:var(--w);right:-2vw;top:calc(clamp(80px,7vw,120px) - 18px - var(--w) * .4064)}
/* wide screens leave open ground beside the caption and the said line, so the crops grow into it */
@media (min-width:1100px){
  .tex-a{bottom:calc(var(--sec) + 40px - var(--w) * .8128)}
  .tex-b{top:calc(var(--sec) + 60px - var(--w) * .8128)}
}

/* images arrive with a fade, never a slide */
.js .fade img{opacity:0;transition:opacity 1s var(--press),transform 1.1s var(--press)}
.js .fade.in img{opacity:1}

/* =====================================================================
   RESPONSIVE. Mobile is its own composition.
   ===================================================================== */
/* four cards share a row only when each has room, so their copy wraps alike */
@media (max-width:1499px){
  .svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1399px){
  .sects{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* two across, the phone's card: the photograph beside the words, not over them,
     so the eight sectors take half the height they did */
  .sect{display:grid;grid-template-columns:clamp(140px,15vw,240px) minmax(0,1fr)}
  .sect-img{aspect-ratio:auto;height:100%;min-height:190px;position:relative}
  /* the photo fills its column whatever its own shape, so a portrait never sets the row height */
  .sect-img img{position:absolute;inset:0}
}
/* one card a row once two would squeeze the words beside their photos
   (3.3.0: 939px, with bakeries gone the rows pair differently and wrapped unevenly below 940) */
@media (max-width:939px){
  .sects{grid-template-columns:1fr}
  .sect{grid-template-columns:200px minmax(0,1fr)}
  .sect-img{min-height:170px}
}
/* three across only while each panel has the room to wrap its lines alike */
/* 3.4.0: Gerald's four examples sit two by two, one a row on phones */
@media (max-width:1023px){.cases{grid-template-columns:1fr}}
@media (max-width:1100px){
  .auds{grid-template-columns:1fr}
  .aud{min-height:0}
  /* one problem a row, the owner's words beside the answer */
  .probs{grid-template-columns:1fr}
  .prob{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(24px,4vw,56px);row-gap:12px}
  .prob .prob-said{grid-column:1;grid-row:1/3}
  .prob .ico-h,.prob p:last-child{grid-column:2}
  .prob-said::after{left:auto;right:-7px;bottom:auto;top:18px;border-bottom:0;border-top:1px solid var(--lineL);border-bottom-right-radius:0;border-top-right-radius:3px}
}
@media (max-width:899px){
  .svc{grid-template-columns:1fr}
}
@media (max-width:1180px){
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  /* the hero stacks, so the wash runs top to bottom instead of owning the left half */
  .hero-bg::after{background:linear-gradient(180deg,rgba(15,35,64,.7) 0%,rgba(15,35,64,.78) 40%,rgba(15,35,64,.9) 100%)}
  .ger,.why,.fwrap,.con,.pair,.lede,.york{grid-template-columns:1fr}
  .york-img{order:0;max-width:560px;aspect-ratio:4/4.4}
  .frm-card{position:static}
  .lede{gap:clamp(20px,3vw,32px)}
  .shot{max-width:560px}
  .points{grid-template-columns:1fr;gap:36px}
  .point{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:20px}
  .point .chip{grid-row:span 2;margin-bottom:0}
  .svc.c3{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .arch{grid-template-columns:1fr}
  .arch .post{aspect-ratio:16/9}
}
@media (max-width:640px){
  .arch .post{aspect-ratio:4/4}
}
@media (max-width:640px){
  html{scroll-padding-top:112px}
  .nav{top:10px;padding:10px 10px 10px 18px}
  .brand img,.brand .logo{height:47px}
  .mnav{top:calc(10px + var(--navh,82px) + 8px)}
  .hero-in{padding-top:118px}
  .phero{padding-top:128px}
  .svc{grid-template-columns:1fr}
  .path{flex-direction:column;gap:18px}
  .path::before{left:6px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .path li{padding:0 0 0 34px}
  .path li::before{top:4px}
  .qnav{order:2}
  .sects{grid-template-columns:1fr}
  /* a phone stacks the bubble over the answer again, the tail pointing down */
  .prob{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .prob .prob-said,.prob .ico-h,.prob p:last-child{grid-column:1;grid-row:auto}
  .prob-said::after{right:auto;left:14px;top:auto;bottom:-7px;border-top:0;border-bottom:1px solid var(--lineL);border-top-right-radius:0;border-bottom-right-radius:3px}
  .hero .acts{display:grid;grid-template-columns:minmax(0,1fr)}
  .sects{gap:12px}
  .sect{display:grid;grid-template-columns:120px minmax(0,1fr)}
  .sect-img{aspect-ratio:auto;height:100%;min-height:132px}
  .sect-t{padding:18px 18px 20px}
  .qslide blockquote p,.york-q p{text-indent:0}
  .hero-in{align-self:end;padding-bottom:40px}
  .hero-bg img{object-position:80% 45%}
  .nav{gap:10px}
  .nav>.btn{display:none}
  .nav .nav-tel{display:grid}
  .lone-line{font-size:var(--r2);line-height:1}
  .frm .two{grid-template-columns:1fr}
  .stat{grid-template-columns:1fr;gap:8px}
  /* the numbers keep their weight on a phone: the display step, 42px at 390 */
  .stat .n{font-size:var(--r1)}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .stmt blockquote p{text-indent:-.38em}
  .feat{aspect-ratio:4/3}
}

/* with no JavaScript there is no pause button, so the rail stands still */
html:not(.js) .rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:24px}
html:not(.js) .rail [data-dup]{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rail{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:24px}
  .rail [data-dup]{display:none}
  .js .board i{transform:scaleX(1)}
  .js .fade img{opacity:1}
}

/* touch screens keep 44px targets on the footer links */
@media (pointer:coarse){.fcol a,.fbase a{min-height:44px}}

/* 3.4.4: Experience runs dark, light, dark. The panels that open their own section lose the gap they had inside one */
.sec-ger .ger,.sec-york .york{margin-top:0}

/* 3.4.4: the Gerald panel is its own section, so it opens with his name and role */
.ger-name{margin:0}
.ger-role{margin-top:16px;font-size:var(--r4);font-weight:600;line-height:1.35;color:var(--acc);max-width:30ch}
.ger-intro .lead{margin-top:28px}

/* 3.4.5: the credentials sit in a foot strip under the hero, out of the button cluster */
.hero-foot{grid-row:2;border-top:1px solid var(--lineD);padding-block:clamp(20px,2vw,30px)}
@media (max-width:640px){.hero-foot .creds{gap:6px 14px}.hero-foot .creds li+li::before{margin-right:14px}}
/* How I help closes on Gerald's line */
.prac-end{margin-top:var(--gap)}


/* 3.4.6 quieter pass (Jack: "messy and busy"): light cards lose their border. Orange stays on actions and the said lines. */
.g-light .card{border-color:transparent}

/* 3.5.1 (Jack, live round): the phone number carries an orange icon */
.tel-chip{width:.8em;height:.8em;flex:none;background:var(--orangeD);border-color:var(--orangeD);color:#fff}
.tel-chip svg{width:46%;height:46%}
/* the nine problem cards take the three grounds of the conversation panels, each colour once per row and column */
.prob{background:var(--c);color:var(--cInk);border-color:transparent}
.prob h3,.prob p:last-child{color:var(--cInk)}
.prob .chip{color:var(--cInk)}
.prob-g1 .prob-said,.prob-g1 .prob-said::after{border-color:transparent}
.prob-g2 .prob-said,.prob-g2 .prob-said::after{border-color:transparent}
/* "Gerald." turns orange and underlines itself as the panel comes in */
.ger-hi{position:relative;display:inline-block;color:var(--acc)}
.ger-hi::after{content:"";position:absolute;left:.04em;right:.3em;bottom:-.02em;height:.08em;border-radius:99px;background:var(--acc);transform-origin:0 50%}
.js .ger-intro .ger-hi{color:var(--ink);transition:color .7s var(--press) .25s}
.js .ger-intro .ger-hi::after{transform:scaleX(0);transition:transform 1s var(--draw) .45s}
.js .ger-intro.in .ger-hi{color:var(--acc)}
.js .ger-intro.in .ger-hi::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.js .ger-intro .ger-hi{color:var(--acc)}.js .ger-intro .ger-hi::after{transform:none}}
/* the brand slashes sit faintly on two of the white sections too */
.g-light .tex{fill:var(--paper2)}