:root{
  --green:#0B3629; --green-2:#0F4F40; --ink:#06241D; --lime:#E4FF38; --lime-soft:#F3FFA8;
  --bg:#F8F7F3; --card:#FFFFFF; --line:rgba(11,59,48,.12); --muted:#5F6F69;
  --r:20px; --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --logo:url(data:image/png;base64,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);
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#FAFBF5}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:'Instrument Sans',system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;padding-top:var(--safe-t);padding-bottom:var(--safe-b)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.logo{display:block;width:118px;aspect-ratio:484/104;background:var(--green);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(20px,3.4vw,56px)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}
.hero .eyebrow{font-weight:400;letter-spacing:.3em;font-size:clamp(11px,.78vw,13px);color:#3d4c46}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 'Instrument Sans',system-ui,sans-serif;padding:17px 29px;border-radius:999px;border:1.5px solid var(--green);transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(11,59,48,.18)}
.btn-solid{background:var(--green);color:#fff;font-weight:500}
.btn-solid:hover{background:var(--green-2)}
.btn-line{background:transparent;color:var(--green);font-weight:500}
.btn-lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.btn svg{width:16px;height:16px}

/* DASHBOARD (sizes in cqw so it scales with the panel: 1cqw = 6.71px at 1672 wide) */
.dash{overflow:hidden;background:#FAF8F5;border-radius:22px;box-shadow:0 30px 70px rgba(6,36,29,.2);container-type:inline-size}
.dash-in{height:100%;display:grid;grid-template-columns:17.4cqw 1fr;grid-template-rows:7.4cqw 1fr;padding:0 0 0 1.8cqw}
.dash .hd{grid-column:1/-1;display:flex;align-items:center;gap:3.4cqw;padding-right:2.4cqw}
.dash .hd .logo{width:12.5cqw}
.pill-ok{display:inline-flex;align-items:center;gap:.9cqw;font-size:1.4cqw;background:#F0EFEA;border-radius:9cqw;padding:.8cqw 1.5cqw;color:#2a3a34;margin-left:3.2cqw}
.pill-ok i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#1DB36A;display:block}
.me{margin-left:auto;display:flex;align-items:center;gap:1.4cqw;font-size:1.5cqw;line-height:1.25;font-weight:500}
.me b{display:grid;place-items:center;width:3.6cqw;height:3.6cqw;border-radius:50%;background:#0B3629;color:#fff;font-size:1.3cqw}
.me small{display:block;color:#6b756f;font-size:1.25cqw;font-weight:400}
.side{display:flex;flex-direction:column;gap:.35cqw;padding-top:.6cqw;padding-right:1.4cqw}
.side a{display:flex;align-items:center;gap:1.5cqw;font-size:1.45cqw;height:4.4cqw;padding:0 1.5cqw;border-radius:1.1cqw;color:#243630}
.side a.on{background:#E9EDE8;color:#0B3629}
.side svg{width:2.3cqw;height:2.3cqw;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}
.main{background:#fff;border-radius:2cqw 2cqw 2cqw 2cqw;padding:2.2cqw 2cqw 0 2.1cqw;margin:0 1.4cqw 1.1cqw 0;min-width:0}
.main h4{font-size:2.3cqw;font-weight:500;margin:0 0 2cqw;letter-spacing:-.01em;color:#10251f}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1cqw;margin-bottom:2.8cqw}
.kpi{background:#F6F6F4;border-radius:1.4cqw;padding:2.2cqw 1.9cqw 1.9cqw;height:15.2cqw;display:flex;flex-direction:column}
.kpi svg{width:3.3cqw;height:3.3cqw;fill:none;stroke-width:1.6;margin-bottom:1.5cqw;flex:none}
.kpi strong{display:block;font-size:2.5cqw;font-weight:500;line-height:1;margin-bottom:.8cqw;color:#10251f}
.kpi span{font-size:1.6cqw;white-space:nowrap;color:#44514b}
.lower{display:grid;grid-template-columns:1.5fr 1fr;gap:1.4cqw}
.panel h5{font-size:1.9cqw;font-weight:500;display:flex;justify-content:space-between;align-items:center;margin:0 0 1.4cqw;color:#10251f}
.panel h5 small{font-size:1.4cqw;font-weight:500}
.panel.box{border:1px solid #EEEEE9;border-radius:1.8cqw;padding:1.8cqw 1.6cqw;margin-top:-1.6cqw;height:35.4cqw}
.panel.box h5{font-size:1.9cqw;margin-bottom:1.2cqw}
.u{display:grid;grid-template-columns:9.3cqw 1fr auto;align-items:center;gap:2.4cqw;height:7cqw;border-top:1px solid #F1F2EE;font-size:1.45cqw;color:#1b2b26}
.u:first-of-type{border-top:0}
.u i{height:5.4cqw;border-radius:.8cqw;display:block;background-size:cover;background-position:center}
.tag-s{font-size:1.3cqw;font-weight:500;padding:.8cqw 1.4cqw;border-radius:1cqw;white-space:nowrap;min-width:11.5cqw;width:auto;text-align:center;font-style:normal}
.g{background:#E6F4EA;color:#1e7a45}.b{background:#E5EEFA;color:#2563b0}.o{background:#FBE8DD;color:#c0551d}
.donut{display:grid;place-items:center;position:relative;margin:1.4cqw auto 2cqw;width:11.6cqw;height:11.6cqw}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut div{position:absolute;text-align:center;font-size:1.9cqw;font-weight:500;line-height:1.1}
.donut div small{display:block;font-size:1.1cqw;font-weight:400;color:#6b756f;margin-top:.3cqw}
.lg{display:flex;align-items:center;gap:1.1cqw;font-size:1.5cqw;height:3.35cqw}
.lg i{width:1.1cqw;height:1.1cqw;border-radius:50%;flex:none}.lg b{margin-left:auto;font-weight:500}


/* NAV + HERO: fixed 1672px design, scaled to the screen by script on wide screens, stacked on phones */
.navfit{position:sticky;top:0;z-index:50;background:#fff;overflow:visible;border-bottom:1px solid #EAE7E0}
.nav{display:flex;align-items:center;gap:14px;padding:12px 20px;height:68px;transform-origin:0 0;background:#fff}
.nav .logo{width:118px;flex:none;position:relative}
.nav ul{display:none;list-style:none}
.nav .tag,.nav .vr{display:none}
.nav .btn{display:inline-flex;margin-left:auto;height:40px;padding:0 18px;font-size:13px;white-space:nowrap;border-radius:999px;gap:0}
.nav .btn .long{display:none}.nav .btn .short{display:inline}
.menu-btn{display:block;margin-left:0;background:none;border:0;width:44px;height:44px;border-radius:999px}
.menu-btn span{display:block;width:22px;height:2px;background:var(--green);margin:5px auto}
.nav.open ul{display:flex;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:#fff;padding:12px 24px 24px;gap:4px;border-bottom:1px solid var(--line)}
.nav.open ul a{display:block;padding:14px 0;font-size:17px}
.herofit{background:#F8F7F3;overflow:hidden}
.stage{transform-origin:0 0}
.hero{position:relative}
.hero .txt{padding:36px 20px 0}
.hero h1{white-space:nowrap;font-size:clamp(30px,9.5vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:600;color:#0B3629;margin:18px 0 20px}
.hero p.lead{font-size:17px;line-height:1.5;color:#636b77;white-space:normal}
.hero .eyebrow{font-weight:400;letter-spacing:.3em;font-size:11px;color:#122722}
.cta{display:flex;flex-direction:column;gap:12px;margin:28px 0 28px}
.cta .btn{justify-content:center}
.vals{display:grid;gap:16px}
.vals div{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.3;color:#4a5651}
.vals svg{width:32px;height:32px;stroke:#1d3d34;fill:none;stroke-width:1.4;flex:none}
.collage{display:grid;gap:12px;margin:30px 14px 0}
.collage>*{position:relative;overflow:hidden;border-radius:16px}
.collage .t1{aspect-ratio:3.1}.collage .t3{aspect-ratio:1.28}
.collage .t3 img,.collage .t2 img{width:100%;height:100%;object-fit:cover}
.collage .t1>img,.collage .t6>img{width:100%;height:100%;display:block;object-fit:cover}
.collage .t2,.collage .t5,.collage .t6,.scribble{display:none}
.collage .dash{aspect-ratio:1.38;grid-row:1;border-radius:18px;background:#F6F6F3;container-type:inline-size;box-shadow:0 20px 50px rgba(6,36,29,.16)}
.aud{margin:18px 12px 0;background:#FEFDFB;border-radius:20px;padding:22px 16px;box-shadow:0 14px 40px rgba(6,36,29,.07)}
.aud .eyebrow{font-weight:400;letter-spacing:.3em;font-size:11px;color:#3d4c46}
.aud h2{font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.02em;margin:12px 0 18px;color:#10251f}
.aud .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.ac{background:#fff;border:1px solid #EEEBE4;border-radius:10px;overflow:hidden;position:relative;display:block}
.ac .ph{aspect-ratio:1.85;position:relative;overflow:hidden;display:block}
.ac .ph img{width:100%;height:100%;display:block;object-fit:cover}
.ac span.lb{display:flex;align-items:center;gap:7px;padding:11px 12px;font-size:14px;font-weight:500;color:#10251f}
.ac span.lb svg{width:12px;flex:none}
.ac .cl{position:absolute;left:8px;top:8px;background:rgba(255,255,255,.94);color:var(--green);font-style:normal;font-size:11px;font-weight:600;padding:4px 8px;border-radius:99px;line-height:1;z-index:2}

@media (min-width:820px){
  body{overflow-x:hidden}
  .navfit{height:76px;overflow:hidden}
  .nav{width:1672px;height:76px;padding:0;display:block;position:relative}
  .nav .logo{position:absolute;left:57px;top:22px;width:147px}
  .nav ul{display:flex;position:absolute;left:418px;top:0;height:76px;align-items:center;gap:32px;margin:0}
  .nav ul a{font-size:15px;font-weight:400;padding:8px 0;border-bottom:2px solid transparent;color:#10251f}
  .nav ul a:hover{border-color:var(--lime)}
  .nav .tag{display:block;position:absolute;left:1205px;top:21px;font-size:12px;line-height:1.42;color:#33433d;margin:0;max-width:none;padding:0;border:0;width:130px}
  .nav .vr{display:block;position:absolute;left:1343px;top:14px;height:48px;border-left:1px solid #DAD6CD}
  .nav .btn{display:inline-flex;position:absolute;left:1371px;top:13px;width:246px;height:50px;padding:0;justify-content:center;border-radius:999px;font-size:15px;font-weight:500;gap:12px}
  .nav .btn .long{display:inline-flex;align-items:center;gap:12px}.nav .btn .short{display:none}
  .menu-btn{display:none}
  .stage{width:1672px;height:766px;position:relative}
  .hero{height:754px;position:static}
  .hero .txt{position:static;padding:0}
  .hero .eyebrow{position:absolute;left:57px;top:68px;font-size:13px;letter-spacing:.3em;white-space:nowrap}
  .hero h1{position:absolute;left:57px;top:100px;width:720px;margin:0;white-space:nowrap;font-size:70px;line-height:72px;letter-spacing:-2.9px}
  .hero p.lead{position:absolute;left:57px;top:350px;width:620px;margin:0;font-size:21px;line-height:30.5px}
  .cta{position:absolute;left:57px;top:465px;flex-direction:row;gap:17px;margin:0}
  .cta .btn{width:215px;height:51px;padding:0;border-radius:999px;font-size:15px;font-weight:500;justify-content:center}
  .cta .btn-line{width:207px}
  .vals{position:absolute;left:57px;top:549px;display:block;width:700px;height:60px}
  .vals div{position:absolute;top:0;width:220px;font-size:15px;line-height:19px;gap:16px;height:60px}
  .vals div:nth-child(1){left:0}.vals div:nth-child(2){left:219px}.vals div:nth-child(3){left:452px}
  .vals svg{width:36px;height:36px}
  .collage{display:block;position:absolute;left:771px;top:0;width:901px;height:754px;margin:0;background:var(--bg)}
  .collage>*{position:absolute;border-radius:0;aspect-ratio:auto}
  /* The photographs sit exactly where they did around the platform screenshot; the services ring
     now occupies the rectangle the screenshot used, so it has its own space to be read in rather
     than lying over the photography. */
  /* The hero art: two photographs across the top, and a large circle in the page colour laid
     over their lower half carrying the services ring. The circle is wider than the panel and
     runs off the bottom, so it reads as the ground the ring sits on rather than as a disc, and
     its arc is what crops the photographs. The photographs are square-cornered and touch each
     other and the panel edges: rounded tiles read as separate objects, which is what made the
     old collage look like fragments. Sized so the "Onboarding & setup" label clears the
     circle's top edge by ~60px: the label is the first thing read and it needs air above it. */
  .collage .shot{position:absolute;overflow:hidden;z-index:1}
  .collage .shot img{width:100%;height:100%;object-fit:cover;display:block}
  .collage .shot.a{left:0;top:0;width:566px;height:400px;border-radius:0}
  .collage .shot.b{left:566px;top:0;width:334px;height:400px;border-radius:0}
  .collage .plate{position:absolute;left:95px;top:176px;width:710px;height:710px;
    border-radius:50%;background:var(--bg);z-index:2}
  .collage .heroring{position:absolute;left:175px;top:210px;width:560px;height:560px;
    margin:0;z-index:3;display:grid;place-items:center}
  .collage .heroring svg{height:560px;width:auto;max-width:100%}
  .scribble{display:block;position:absolute;z-index:7;left:-82px;top:42px;width:130px;font:400 28px/1.14 'Nothing You Could Do','Segoe Script',cursive;color:#28403a;transform:rotate(-11deg);pointer-events:none}
  .scribble::after{content:"";display:block;width:34px;height:1.5px;background:#28403a;margin:14px 0 0 12px;transform:rotate(-5deg)}
  .aud{position:absolute;left:24px;top:655px;width:1624px;height:198px;margin:0;border-radius:22px;padding:0;z-index:6;display:block}
  .aud .eyebrow{position:absolute;left:33px;top:54px;font-size:11px;letter-spacing:.3em}
  .aud h2{position:absolute;left:33px;top:80px;width:360px;margin:0;font-size:28px;line-height:34px}
  .aud .cards{position:absolute;left:417px;top:27px;width:1179px;height:145px;grid-template-columns:repeat(6,1fr);gap:15px}
  .ac{border-radius:6px}
  .ac .ph{aspect-ratio:auto;height:103px}
  .ac span.lb{padding:0 12px;height:42px;font-size:13.5px;letter-spacing:-.01em;white-space:nowrap;gap:6px}
}
@media (max-width:1180px){.svc{grid-template-columns:repeat(2,1fr)}.life{grid-template-columns:repeat(3,1fr)}.life div:nth-child(3){border-right:0}.life div:nth-child(-n+3){border-bottom:1px solid var(--line)}}
@media (max-width:960px){.split,.cs,.people{grid-template-columns:1fr}}
@media (max-width:640px){.svc{grid-template-columns:1fr}.life{grid-template-columns:1fr}.life div{border-right:0!important;border-bottom:1px solid var(--line)}.life div:last-child{border-bottom:0}.stats{grid-template-columns:1fr}.csbig .nums{grid-template-columns:1fr}.sc.drive{grid-column:auto!important}
  .dash-in{padding:3cqw;grid-template-columns:1fr}.side{display:none}.lower{grid-template-columns:1fr}.lower .panel:last-child{display:none}.dash .hd .pill-ok{display:none}
  .dash .main h4{font-size:3.4cqw}.kpi strong{font-size:4cqw}.kpi span{font-size:2cqw}.u{font-size:2cqw}.panel h5{font-size:2.6cqw}.tag-s{font-size:1.7cqw}}
@media (max-width:819px){.dash-in{grid-template-columns:1fr}.side{display:none}.lower{grid-template-columns:1fr}.lower .panel:last-child{display:none}.dash .hd .pill-ok{display:none}.dash .main h4{font-size:3.4cqw}.kpi strong{font-size:4cqw}.kpi span{font-size:2cqw}.u{font-size:2cqw}.panel h5{font-size:2.6cqw}.tag-s{font-size:1.7cqw}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.trust .track{animation:none;flex-wrap:wrap;width:auto;gap:16px 40px}}

/* BELOW THE HERO */
.spec3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.spec3>div{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:26px 28px}
.spec3 h3{font-size:20px;font-weight:600;letter-spacing:-.02em;color:#10251f;margin:0 0 8px}
.spec3 p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
@media (max-width:960px){.spec3{grid-template-columns:1fr}}
.quote{padding-bottom:0;text-align:center}
.quote blockquote{font-size:clamp(28px,3.2vw,52px);line-height:1.12;letter-spacing:-.03em;font-weight:500;color:#0B3629;max-width:34em;margin:18px auto 24px}
.quote .who{font-size:15px;color:#636b77;margin:0}
.quote .who b{display:block;color:#10251f;font-size:17px;font-weight:600;margin-bottom:2px}
.dgbox{background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:clamp(22px,2.4vw,34px)}
.dgbox .q{font-size:17px;font-weight:600;color:#10251f;margin:0 0 18px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opts a{display:block;border:1px solid #E7E3DA;border-radius:12px;padding:18px 18px 16px;transition:border-color .15s,box-shadow .15s}
.opts a:hover{border-color:#0B3629;box-shadow:0 8px 22px rgba(6,36,29,.08)}
.opts b{display:block;font-size:17px;font-weight:600;color:#0B3629;letter-spacing:-.01em;margin-bottom:4px}
.opts span{font-size:14px;line-height:1.45;color:#636b77}
.fine{font-size:14px;color:#8a918e;margin:16px 0 0}
.dg .btn{margin-top:30px}
footer .tel{display:block;font-size:20px;font-weight:600;color:#0B3629;letter-spacing:-.01em;margin-top:2px}
footer .callus{margin:0;color:#636b77}
@media (max-width:640px){.opts{grid-template-columns:1fr}}

html{scroll-behavior:smooth;scroll-padding-top:90px}
main{overflow-x:clip}.marq{max-width:100%}
.sec{padding:clamp(36px,3.6vw,64px) 3.41vw}
.ey{font-size:12px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#122722}
.sec h2{font-size:clamp(30px,3vw,50px);line-height:1.06;letter-spacing:-.035em;font-weight:600;color:#0B3629;margin:16px 0 0;max-width:none}
/* Headings were breaking with a single word stranded on the last line ("Properties we look /
   after"). Balanced wrapping evens the lines out instead of filling the first one. */
h1,h2,h3,.sec h2,.phero h1,.fcard h2,.final h2,.pcta h3{text-wrap:balance}
.lead,.sub,.bigintro{text-wrap:pretty}
.sec .sub{font-size:clamp(16px,1.15vw,19px);line-height:1.5;color:#636b77;margin-top:16px;max-width:64em}
.lnk{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:#0B3629;font-size:15px;margin-top:28px}
.lnk svg{width:15px}
.band{background:#FEFDFB}
.trust{padding:40px 3.41vw 0}
.trust .row{display:flex;align-items:center;gap:40px;border-top:1px solid #E7E3DA;border-bottom:1px solid #E7E3DA;padding:26px 0}
.trust .lbl{flex:none;width:230px;font-size:14px;line-height:1.4;color:#636b77;margin:0}
.marq{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;gap:56px;width:max-content;font-size:22px;font-weight:600;letter-spacing:-.02em;color:rgba(11,54,41,.6);white-space:nowrap;animation:scroll 80s linear infinite}
.marq:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.stats b{display:block;font-size:clamp(34px,3.3vw,56px);font-weight:600;color:#0B3629;letter-spacing:-.035em;line-height:1.05}
.stats span{font-size:15px;color:#636b77}
/* The services ring is the centre of the hero collage: it sits over the photographs rather than
   beside them, so the labels carry a paper-coloured halo (paint-order) to stay readable where
   they cross one. Below 820px the hero drops to normal flow and the ring leads the stack. */
.heroring svg{display:block;width:100%;height:auto}
.heroring{margin:22px 0 0}
.life{display:grid;grid-template-columns:repeat(6,1fr);margin-top:36px;position:relative}
.life::before{content:"";position:absolute;left:18px;right:0;top:18px;height:1px;background:#CFCBC0}
.step{padding-right:28px;position:relative}
.step i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#0B3629;color:#fff;font-style:normal;font-size:14px;font-weight:600;position:relative;z-index:1}
.step h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:22px 0 8px;color:#10251f}
.step p{font-size:15px;line-height:1.5;color:#636b77}
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.sc{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:12px;min-height:250px;transition:transform .15s,box-shadow .15s}
.sc:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(6,36,29,.09)}
.sc>svg{width:34px;height:34px;stroke:#0B3629;fill:none;stroke-width:1.4}
.sc h3{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#10251f}
.sc p{font-size:15px;line-height:1.5;color:#636b77;flex:1;margin:0}
.sc .more{font-size:14px;font-weight:600;color:#0B3629;display:flex;align-items:center;gap:8px}
.sc .more svg{width:14px}
.sc.dr{background:#0B3629;border-color:#0B3629;grid-column:span 2}
.sc.dr h3,.sc.dr .more{color:#fff}.sc.dr p{color:rgba(255,255,255,.76)}.sc.dr>svg{stroke:#fff}
.split{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(32px,5vw,88px);align-items:center}
.split ul{list-style:none;display:grid;gap:22px;margin:34px 0 0;padding:0}
.split li{display:flex;gap:16px;font-size:16px;line-height:1.5;color:#636b77}
.split li b{display:block;color:#10251f;font-size:17px;font-weight:600;margin-bottom:2px}
.split li i{flex:none;width:28px;height:28px;border-radius:50%;background:#E3EEE8;display:grid;place-items:center;margin-top:2px}
.split li i svg{width:14px;stroke:#0B3629;fill:none;stroke-width:2.2}
.drive-vis .dash{position:relative;width:100%;aspect-ratio:671/459;border-radius:22px;box-shadow:0 30px 70px rgba(6,36,29,.16)}
.drive-vis small{display:block;margin-top:14px;font-size:13px;color:#8a918e}
.people{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.people figure{margin:0;border-radius:18px;overflow:hidden;position:relative;background:#e9e5db}
.people img{width:100%;aspect-ratio:1.45;object-fit:cover;display:block}
.people figcaption{position:absolute;left:16px;bottom:16px;background:rgba(255,255,255,.94);color:#0B3629;font-size:13px;font-weight:600;padding:8px 13px;border-radius:99px}
.cs{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-top:32px}
.csbig{background:#0B3629;color:#fff;border-radius:18px;overflow:hidden;display:grid;grid-template-columns:1.1fr 1fr}
.csbig .tx{padding:clamp(28px,3vw,48px);display:flex;flex-direction:column;gap:18px}
.csbig .ey{color:rgba(255,255,255,.7)}
.csbig h3{font-size:clamp(24px,2.2vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:600;margin:0}
.csbig p{color:rgba(255,255,255,.78);font-size:15.5px;line-height:1.5;margin:0}
.csbig .nums{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.csbig b{display:block;font-size:clamp(26px,2.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.05}
.csbig small{font-size:12.5px;color:rgba(255,255,255,.7)}
.csbig img{width:100%;height:100%;object-fit:cover;display:block;min-height:260px}
.cslist{display:grid;gap:14px;align-content:start}
/* the rows used to stretch to match the big panel, floating each logo in the middle of a very
   tall card; they now size to their own content */
.cslist a{background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:#10251f}
.cslist small{display:block;font-size:14px;font-weight:400;color:#636b77;margin-top:4px;letter-spacing:0}
.cslist a svg{width:18px;flex:none;color:#0B3629}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.how div{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:30px 28px}
.how em{font-style:normal;font-size:14px;font-weight:600;color:#0B3629;letter-spacing:.1em}
.how h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:18px 0 8px;color:#10251f}
.how p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
.price{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;font-size:16px;color:#636b77}
.faq{max-width:none;margin-top:28px}
details{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:0 24px;margin-bottom:10px}
summary{cursor:pointer;list-style:none;padding:22px 0;font-weight:600;font-size:18px;color:#10251f;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:24px;line-height:1;color:#0B3629}
details[open] summary::after{content:"\2212"}
details p{padding:0 0 22px;color:#636b77;max-width:60em;font-size:16px;line-height:1.5;margin:0}
.final{background:#0B3629;color:#fff;border-radius:22px;margin:0 1.4vw;padding:clamp(44px,5.5vw,88px) clamp(24px,4.5vw,80px);display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between}
.final h2{color:#fff;margin:0;max-width:26em;font-size:clamp(30px,3.3vw,54px);line-height:1.06;letter-spacing:-.035em;font-weight:600}
.final .cta2{display:flex;gap:14px;flex-wrap:wrap}
.final .w{background:#fff;color:#0B3629;border-color:#fff}
.final .o{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
footer{padding:64px 3.41vw 40px;font-size:14px;color:#636b77}
footer .in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:36px 40px;align-items:start}
@media (max-width:1100px){footer .in{grid-template-columns:repeat(4,1fr)}footer .in>div:first-child{grid-column:1/-1}}
@media (max-width:640px){footer .in{grid-template-columns:1fr 1fr}footer .in>div:first-child{grid-column:1/-1}}
footer ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
footer b{display:block;color:#10251f;margin-bottom:12px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500}
footer .logo{width:120px;margin-bottom:14px}
@media (max-width:1180px){.svc{grid-template-columns:repeat(2,1fr)}.sc.dr{grid-column:span 2}.life{grid-template-columns:repeat(3,1fr);row-gap:40px}.life::before{display:none}.cs{grid-template-columns:1fr}}
@media (max-width:960px){.split{grid-template-columns:1fr}.csbig{grid-template-columns:1fr}.how{grid-template-columns:1fr}}
@media (max-width:819px){.sec{padding:56px 20px}.trust{padding:36px 20px 0}.final{margin:0 12px}footer{padding:48px 20px 32px}}
@media (max-width:640px){.svc{grid-template-columns:1fr}.sc.dr{grid-column:auto}.life{grid-template-columns:1fr}.people{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.trust .row{flex-direction:column;align-items:stretch;gap:16px}.marq{width:100%}.trust .lbl{width:auto}.csbig .nums{grid-template-columns:1fr}.final .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.track{animation:none;flex-wrap:wrap;width:auto;gap:14px 36px}}


.th1{background:url(/images/redesign/th/std-1.jpg) center/cover}.th2{background:url(/images/redesign/th/std-2.jpg) center/cover}.th3{background:url(/images/redesign/th/std-3.jpg) center/cover}.th4{background:url(/images/redesign/th/std-4.jpg) center/cover}
/* INTERIOR PAGES */
.route{display:none}.route.on{display:block}
.crumb{font-size:13px;color:#636b77;margin:0 0 22px}
.crumb a{color:#0B3629;font-weight:500}
.crumb i{font-style:normal;margin:0 8px;color:#b7b4aa}
.phero{padding:clamp(28px,3vw,52px) 3.41vw clamp(32px,3.4vw,60px);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,4.4vw,80px);align-items:center}
.phero h1{font-size:clamp(34px,3.9vw,66px);line-height:1.04;letter-spacing:-.04em;font-weight:600;color:#0B3629;margin:18px 0 20px}
.phero .lead{font-size:clamp(17px,1.3vw,21px);line-height:1.5;color:#636b77;max-width:30em;margin:0}
.phero .for{margin:18px 0 0;font-size:14px;color:#636b77}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.cta-row .btn{padding:17px 26px}
.keep{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:26px}
.keep span{font-size:13px;color:#0B3629;background:#fff;border:1px solid #E7E3DA;border-radius:99px;padding:7px 13px}
.phero .pimg{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:1.22;background:#e8e4da}
.phero .pimg img{width:100%;height:100%;object-fit:cover;display:block}
.chip{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.95);color:#0B3629;font-size:13px;font-weight:600;padding:9px 14px;border-radius:99px}
/* On the text-only pages (careers, the role pages) the hero has no image to anchor it, so the h1
   and the first section heading stacked up as two titles of nearly equal weight with a dead gap
   between them. The hero now sits on its own ground, and the heading under it steps down a size. */
.phero.noimg{grid-template-columns:1fr;padding-bottom:clamp(30px,3vw,48px);
  background:#FEFDFB;border-bottom:1px solid #EEEBE4}
.phero.noimg h1{max-width:none}.phero.noimg .lead{max-width:60em}
.phero.noimg + .sec{padding-top:clamp(30px,2.8vw,46px)}
.phero.noimg + .sec > h2{font-size:clamp(25px,2.2vw,36px);line-height:1.1}
.chal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:32px}
.chal div{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:28px 26px}
.chal em{font-style:normal;font-size:13px;font-weight:600;color:#0B3629;letter-spacing:.1em}
.chal h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:16px 0 8px;color:#10251f}
.chal p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
.lc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.lc div{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:28px 26px;position:relative}
.lc i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0B3629;color:#fff;font-style:normal;font-size:14px;font-weight:600}
.lc h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:18px 0 8px;color:#10251f}
.lc p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
.midcta{margin:0 3.41vw;background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:clamp(24px,2.6vw,38px) clamp(24px,3vw,48px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.midcta h3{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;font-weight:600;color:#0B3629;margin:0;max-width:40em}
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.res div{background:#0B3629;color:#fff;border-radius:18px;padding:clamp(26px,2.6vw,40px)}
.res h3{font-size:clamp(21px,1.8vw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:600;margin:0 0 12px}
.res p{font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.78);margin:0}
.why{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,5vw,88px);align-items:start}
.why ul{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.why li{display:flex;gap:16px;font-size:16px;line-height:1.5;color:#636b77}
.why li b{display:block;color:#10251f;font-size:18px;font-weight:600;margin-bottom:3px}
.why li i{flex:none;width:28px;height:28px;border-radius:50%;background:#E3EEE8;display:grid;place-items:center;margin-top:2px}
.why li i svg{width:14px;stroke:#0B3629;fill:none;stroke-width:2.2}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.stat3 b{display:block;font-size:clamp(28px,2.6vw,42px);font-weight:600;color:#0B3629;letter-spacing:-.03em;line-height:1.05}
.stat3 span{font-size:13.5px;color:#636b77}
.svc.c3{grid-template-columns:repeat(3,1fr)}
.proofbar{margin:0 3.41vw;border-top:1px solid #E7E3DA;border-bottom:1px solid #E7E3DA;padding:24px 0;font-size:15px;color:#636b77}
.pquote{font-size:clamp(24px,2.6vw,42px);line-height:1.14;letter-spacing:-.03em;font-weight:500;color:#0B3629;max-width:34em;margin:18px 0 22px}
/* The "what best describes you" grid. Ten boxed cards with full-width photographs read as a
   wall of tiles; the thumbnail is half width now and the card chrome is gone, so the names
   carry the section and the photographs support it. Same layout Eunice picked from the
   audience-section mockups. */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 30px;margin-top:0}
.pick a{background:none;border:0;border-radius:0;overflow:hidden;display:flex;flex-direction:column}
.pick a:hover img{transform:scale(1.06)}
.pick img{width:100%;aspect-ratio:2.4;object-fit:cover;display:block;border-radius:0;
  transition:transform .35s ease}
.pick .tx{padding:15px 0 0;display:flex;flex-direction:column;gap:7px;flex:1}
.pick h3{font-size:19px;font-weight:600;letter-spacing:-.02em;color:#10251f;margin:0}
.pick p{font-size:15px;line-height:1.5;color:#636b77;margin:0;flex:1}
.pick .more{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:#0B3629;margin-top:6px}
.pick .more svg{width:14px}
.centerhead{text-align:center}
.centerhead h2{margin-left:auto;margin-right:auto}
.centerhead .sub{margin-left:auto;margin-right:auto}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.inc div{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:22px 22px;font-size:16px;font-weight:500;color:#10251f;line-height:1.35}
.inc i{flex:none;width:26px;height:26px;border-radius:50%;background:#E3EEE8;display:grid;place-items:center;margin-top:-1px}
.inc i svg{width:13px;stroke:#0B3629;fill:none;stroke-width:2.2}
.stagerow{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.stagerow span{padding:12px 20px;border-radius:99px;border:1px solid #E1DDD2;background:#fff;color:#8a918e;font-size:15px;font-weight:500}
.stagerow span.on{background:#0B3629;border-color:#0B3629;color:#fff}
.audchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.audchips a{padding:12px 18px;border-radius:99px;border:1px solid #E1DDD2;background:#fff;color:#0B3629;font-size:15px;font-weight:500}
.audchips a:hover{border-color:#0B3629}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px}
.dgrid div{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:26px}
.dgrid h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 8px;color:#10251f}
.dgrid p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
.svrows{margin-top:40px;display:grid;gap:10px}
.svrows a{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:20px 24px}
.svrows b{font-size:18px;font-weight:600;color:#10251f;display:block}
.svrows span{font-size:14.5px;color:#636b77}
.svrows svg{width:16px;flex:none;color:#0B3629}
.bigdash .dash{position:relative;width:100%;aspect-ratio:671/459;border-radius:22px;box-shadow:0 30px 70px rgba(6,36,29,.16)}
.contact{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;padding:0 3.41vw clamp(56px,6vw,100px)}
.formcard{background:#fff;border:1px solid #EEEBE4;border-radius:20px;padding:clamp(24px,3vw,44px)}
.formcard form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.formcard label{display:grid;gap:7px;font-size:14px;font-weight:600;color:#10251f}
.formcard .full{grid-column:1/-1}
.formcard input,.formcard select,.formcard textarea{font:400 16px 'Instrument Sans',system-ui,sans-serif;padding:14px 14px;border:1px solid #D9D5CA;border-radius:10px;background:#FEFDFB;color:#10251f;width:100%}
.formcard textarea{min-height:110px;resize:vertical}
.formcard input:focus,.formcard select:focus,.formcard textarea:focus{outline:2px solid #0B3629;outline-offset:1px}
.formcard .note{font-size:13px;color:#8a918e;margin:0}

/* The housekeeping application wears the same card as the contact form: Maxime asked for the
   two to match, and they were the only two long forms on the site that looked unrelated.
   The field styling was already shared (.cfl); what was missing was the card around it. */
.rd-jobform{background:#fff;border:1px solid #EEEBE4;border-radius:20px;
  padding:clamp(24px,3vw,44px);max-width:860px}
.rd-jobform .jf{display:block}
.rd-jobform .g-recaptcha{margin-top:18px}
/* .cfl is a grid, so the bare asterisk after a label dropped onto its own row. Block flow keeps
   the label and its asterisk on one line; the control below gets its spacing back by margin. */
.rd-jobform .cfl{display:block}
.rd-jobform .cfl > small{display:block;margin-top:3px}
.rd-jobform .cfl > input,.rd-jobform .cfl > select,.rd-jobform .cfl > textarea{margin-top:8px}
.rd-jobform .cfl > .chips2{margin-top:10px}
/* the two steps, the progress bar and the nav row (housekeeping-steps.js) */
.rd-jobform .jfp{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.rd-jobform .jfstep{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#636b77;white-space:nowrap}
.rd-jobform .jfbar{flex:1;height:6px;border-radius:99px;background:#E9EDE8;overflow:hidden}
.rd-jobform .jfbar i{display:block;height:100%;background:#0B3629;border-radius:99px;transition:width .25s}
.rd-jobform .jfs{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.rd-jobform .jfs[hidden]{display:none}
.rd-jobform .jfs > .cfgrid,
.rd-jobform .jfs > #js-file-sections,
.rd-jobform .jfs > .cfl:has(select),
.rd-jobform .jfs > .cfl:has(textarea){grid-column:1/-1}
.rd-jobform .jfnav{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.rd-jobform .jfnav .btn[hidden]{display:none}
@media (max-width:760px){.rd-jobform .jfs{grid-template-columns:1fr}}
@media (max-width:760px){.rd-jobform .jf{grid-template-columns:1fr}}

.thanks{display:none;padding:24px 0}
.thanks h3{font-size:26px;letter-spacing:-.02em;color:#0B3629;margin:0 0 8px}
.cside{display:grid;gap:16px}
.cside .box{background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:26px 28px}
.cside h3{font-size:18px;font-weight:600;margin:0 0 12px;color:#10251f}
.cside ol{margin:0;padding-left:20px;display:grid;gap:10px;color:#636b77;font-size:15px;line-height:1.45}
.cside .tel{font-size:26px;font-weight:600;color:#0B3629;letter-spacing:-.02em}
footer .legal{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;margin-top:44px;padding-top:24px;border-top:1px solid #E7E3DA;font-size:13.5px}
footer .legal nav{display:flex;gap:24px}
footer a:hover{color:#0B3629}
@media (max-width:1180px){.chal{grid-template-columns:repeat(2,1fr)}.lc{grid-template-columns:repeat(2,1fr)}.pick{grid-template-columns:repeat(2,1fr)}.inc{grid-template-columns:repeat(2,1fr)}.svc.c3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.phero{grid-template-columns:1fr}.why{grid-template-columns:1fr}.res{grid-template-columns:1fr}.contact{grid-template-columns:1fr}.dgrid{grid-template-columns:1fr}}
@media (max-width:819px){.phero{padding:32px 20px 40px}.midcta{margin:0 12px}.proofbar{margin:0 20px}.contact{padding:0 20px 56px}}
@media (max-width:640px){.chal,.lc,.pick,.inc,.svc.c3{grid-template-columns:1fr}.formcard form{grid-template-columns:1fr}.stat3{grid-template-columns:1fr}.cta-row .btn{width:100%;justify-content:center}footer .legal{flex-direction:column;align-items:flex-start}}

.how.c4,.res.c4{grid-template-columns:repeat(4,1fr)}.res.c4 h3{font-size:clamp(19px,1.5vw,24px)}.stat3 b{white-space:nowrap;font-size:clamp(24px,2.2vw,38px)}
@media (max-width:1180px){.how.c4,.res.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.how.c4,.res.c4{grid-template-columns:1fr}}

.subh{font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.02em;color:#10251f;margin:32px 0 0}
.wrong{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.wrong>div{background:#fff;border:1px solid #EEEBE4;border-radius:16px;padding:28px 28px 26px}
.wrong h3{font-size:20px;font-weight:600;letter-spacing:-.02em;color:#10251f;margin:0 0 14px}
.wrong p{font-size:15px;line-height:1.5;margin:0 0 14px;color:#636b77}
.wrong p:last-child{margin-bottom:0}
.wrong b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:5px;color:#8a918e}
.wrong .so{color:#10251f}.wrong .so b{color:#0B3629}
.tl{margin-top:28px;max-width:none}
.tl>div{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:22px 0;border-top:1px solid #E1DDD2}
.tl>div:last-child{border-bottom:1px solid #E1DDD2}
.tl i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#0B3629;color:#fff;font-style:normal;font-size:14px;font-weight:600}
.tl b{display:block;font-size:19px;font-weight:600;letter-spacing:-.01em;color:#10251f;margin-bottom:4px}
.tl span{font-size:16px;line-height:1.5;color:#636b77}
.whyc{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.whyc>div{background:#fff;border:1px solid #EEEBE4;border-radius:16px;padding:28px}
.whyc h3{font-size:20px;font-weight:600;letter-spacing:-.02em;color:#10251f;margin:0 0 10px}
.whyc p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
.chain{display:flex;flex-wrap:wrap;align-items:stretch;gap:9px 19px;margin-top:16px;counter-reset:ch}
.chain span{flex:0 1 auto;background:var(--card);border:1px solid #E1E6E1;color:#2c3a35;padding:8px 12px;border-radius:9px;font-size:13.5px;line-height:1.3;font-weight:600;letter-spacing:-.01em;position:relative;display:inline-flex;align-items:center;gap:8px}
.chain span::before{counter-increment:ch;content:counter(ch);flex:none;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:10.5px;font-weight:700;letter-spacing:0}
.chain span:last-child{border-color:var(--green);background:var(--green);color:#fff}
.chain span:last-child::before{background:var(--lime);color:var(--ink)}
.chain span:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:5px;height:5px;border:solid rgba(11,54,41,.42);border-width:1.4px 1.4px 0 0;transform:translateY(-50%) rotate(45deg)}
.chain+.res{margin-top:28px}
@media (max-width:1180px){.wrong{grid-template-columns:repeat(2,1fr)}.whyc{grid-template-columns:repeat(2,1fr)}}

@media (max-width:640px){.wrong,.whyc{grid-template-columns:1fr}.tl>div{grid-template-columns:36px 1fr;gap:14px}}

.res.c4 div{background:#fff;color:#10251f;border:1px solid #EEEBE4}
.res.c4 h3{color:#0B3629}
.res.c4 p{color:#636b77}
.chain+.res.c4{margin-top:24px}
/* On a phone the outcome chain runs out of room: French labels like "Des réponses plus
   rapides" are wider than the chip, and the text was being cut rather than wrapping. Each
   chip takes the full width and stacks, and the little right-pointing connectors go, since
   the flow is vertical by then. */
@media (max-width:640px){
  .chain{gap:8px}
  .chain span{flex:1 1 100%;min-width:0}
  .chain span:not(:last-child)::after{display:none}
}
.tl{max-width:none}

.wrong.n4{grid-template-columns:repeat(2,1fr)}
.wrong.n5{grid-template-columns:repeat(6,1fr)}
.wrong.n5>div{grid-column:span 2}
.wrong.n5>div:nth-child(n+4){grid-column:span 3}
@media (max-width:1180px){.wrong.n5{grid-template-columns:repeat(2,1fr)}.wrong.n5>div,.wrong.n5>div:nth-child(n+4){grid-column:auto}}
@media (max-width:640px){.wrong.n4,.wrong.n5{grid-template-columns:1fr}}

.cov{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.cov>div{background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:22px 24px}
.cov b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;color:#10251f;margin-bottom:6px}
.cov span{font-size:15px;line-height:1.5;color:#636b77}
/* Ten cards across three columns leaves the tenth alone beside two empty slots. When the last
   card starts a row by itself it spans instead, so the row reads as deliberate. */
.cov > div:last-child:nth-child(3n+1){grid-column:1/-1}
/* Same for the numbered process grid: seven steps across three columns stranded the seventh. */
.tl-grid > *:last-child:nth-child(3n+1){grid-column:1/-1}
/* Same orphan on the other three-column grids: the case study list (10), the diagnostic
   cards (4) and the FAQ accordions (7 or 4). A last item alone on its row spans it. */
.rgrid > *:last-child:nth-child(3n+1),
.dgrid > *:last-child:nth-child(3n+1),
.faq > *:last-child:nth-child(3n+1){grid-column:1/-1}
@media (max-width:1180px){.cov > div:last-child:nth-child(3n+1){grid-column:auto}
  .cov > div:last-child:nth-child(2n+1){grid-column:1/-1}}
@media (max-width:640px){.cov > div:last-child{grid-column:auto}}
.qs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}
.qs figure{margin:0;background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:clamp(24px,2.6vw,38px)}
.qs blockquote{font-size:clamp(18px,1.5vw,23px);line-height:1.4;letter-spacing:-.01em;color:#0B3629;font-weight:500;margin:0 0 20px}
.qs figcaption{font-size:14.5px;color:#636b77}
.qs figcaption b{display:block;color:#10251f;font-size:16px;font-weight:600}
.embed{background:#fff;border:1px solid #EEEBE4;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(6,36,29,.07)}
/* The handyman form is a third-party embed; we cannot reach inside it, so we give it the same
   panel, width and breathing room as our own forms and let it sit in the page properly. */
/* The handyman form is now our own markup (MaintenanceApplicationForm), so it gets the same
   measured column as the housekeeping application rather than a full-width row. */
/* The handyman application: what to have ready on the left, the form itself on the right, so
   the long column of questions is not sitting under a half-empty row of bullets. */
.sec.applysplit{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.3fr);
  gap:clamp(30px,4.6vw,76px);align-items:start}
.applyintro{position:sticky;top:96px}
.applyintro h2{margin-top:14px}
.applyintro .sub{margin-top:14px}
.oplist.one{grid-template-columns:1fr;gap:20px}
/* in the split the email card is the right-hand column, so it reads left to right rather
   than sitting centred in the middle of the row */
.sec.applysplit .pcta{margin:0;max-width:none;text-align:left}
.sec.applysplit .pcta .btn{margin-top:4px}
.applyside h2{margin-top:14px}
.applyside .sub{margin-top:14px}
.applyside .pcta{margin-top:22px}
/* .pcta .oplist is inline-grid for the centred version of this card; inside the split that
   let the button sit on the same line as the bullets instead of under them */
.sec.applysplit .pcta .oplist{display:grid;margin:16px 0 22px}
.sec.applysplit .pcta .btn{display:inline-flex}
.sec.applysplit .pcta .oplist li{font-size:15px}
@media (max-width:980px){.sec.applysplit{grid-template-columns:1fr;gap:24px}.applyintro{position:static}}
[data-maintenance-form]{max-width:none;margin:0}
/* The handyman questions run two-up inside the form column. The four-option question takes the
   full width; the contact box keeps the left column and the submit sits beside it, bottom-aligned,
   rather than running the width of the form underneath it. */
.sec.applysplit .applyform .jf > .cfl:nth-of-type(3){grid-column:1/-1}
.sec.applysplit .applyform .jf > label.cfl{grid-column:1/2}
.sec.applysplit .applyform .jf > button{grid-column:2/3;justify-self:start;align-self:end;margin-bottom:20px}
/* .cfl is a grid, so a bare asterisk after the question text drops onto its own row */
[data-maintenance-form] .cfq{display:block;text-wrap:balance}
[data-maintenance-form] .chips2{margin-top:2px}
[data-maintenance-form] .success-message{background:#F1F6F0;border:1px solid #DCEBE2;border-radius:16px;padding:26px 28px}
[data-maintenance-form] .success-message h3{margin:0 0 6px;font-size:21px;font-weight:600;color:#0B3629;letter-spacing:-.02em}
[data-maintenance-form] .success-message p{margin:0;color:#636b77}
[data-maintenance-form] .error-message{margin-top:14px;color:#B3261E;font-size:14.5px;font-weight:500}
.embed iframe{display:block;width:100%;height:clamp(760px,56vw,900px);border:0;background:#fff}
@media (max-width:1180px){.cov{grid-template-columns:repeat(2,1fr)}}
@media (max-width:960px){.qs{grid-template-columns:1fr}}
@media (max-width:640px){.cov{grid-template-columns:1fr}.embed iframe{height:820px}}

.dgrid.d4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1180px){.dgrid.d4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dgrid.d4{grid-template-columns:1fr}}

.cases{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.case{background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:clamp(26px,2.8vw,42px);display:flex;flex-direction:column;gap:14px}
.case h3{font-size:clamp(22px,2vw,30px);line-height:1.12;letter-spacing:-.03em;font-weight:600;color:#0B3629;margin:0}
.case p{font-size:16px;line-height:1.55;color:#636b77;margin:0}
.case .nums{display:grid;gap:12px;padding:18px 0 4px;border-top:1px solid #E7E3DA}
.case .nums b{display:block;font-size:clamp(26px,2.4vw,38px);font-weight:600;letter-spacing:-.03em;color:#0B3629;line-height:1.05}
.case .nums small{font-size:13px;color:#636b77}
.cq{margin:6px 0 0;padding:20px 22px;background:#F6F4EE;border-radius:12px;font-size:16px;line-height:1.5;color:#10251f}
.cq .by{margin-top:12px;font-size:14px;color:#636b77}.cq .by b{display:block;color:#10251f;font-size:15px}
.case .lnk{margin-top:auto;padding-top:6px}
.story p{font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:#636b77;margin:0 0 18px}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.tm{background:#fff;border:1px solid #EEEBE4;border-radius:16px;padding:26px;display:flex;flex-direction:column;gap:4px}
.tm span{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#0B3629;color:#fff;font-weight:600;font-size:20px;margin-bottom:14px}
.tm b{font-size:18px;color:#10251f}.tm small{font-size:14px;color:#636b77}
.stgs{display:grid;gap:16px}
.stg{display:grid;grid-template-columns:64px 1fr 2fr;gap:clamp(18px,2.4vw,40px);background:#fff;border:1px solid #EEEBE4;border-radius:18px;padding:clamp(24px,2.6vw,40px);align-items:start}
.stg .num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#0B3629;color:#fff;font-size:22px;font-weight:600}
.stg h3{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.03em;font-weight:600;color:#0B3629;margin:4px 0 0}
.stg dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.stg dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#8a918e;margin-bottom:4px}
.stg dd{margin:0;font-size:15.5px;line-height:1.5;color:#10251f}
.pick img{object-position:center 40%}
@media (max-width:1180px){.cases{grid-template-columns:1fr}.team{grid-template-columns:repeat(2,1fr)}.stg{grid-template-columns:56px 1fr}.stg dl{grid-column:1/-1}}
@media (max-width:640px){.stg{grid-template-columns:1fr}.stg dl{grid-template-columns:1fr}.team{grid-template-columns:1fr}}

.dgw{background:#fff;border:1px solid #EEEBE4;border-radius:20px;padding:clamp(22px,2.4vw,34px);box-shadow:0 18px 50px rgba(6,36,29,.07)}
.dgw-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.dgw-step{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#636b77;white-space:nowrap}
.dgw-bar{flex:1;height:6px;border-radius:99px;background:#E9EDE8;overflow:hidden}
.dgw-bar i{display:block;height:100%;background:#0B3629;border-radius:99px;transition:width .25s}
.dgw-body h4{font-size:clamp(20px,1.7vw,26px);letter-spacing:-.02em;font-weight:600;color:#10251f;margin:0 0 6px}
.dgw-h{font-size:15px;color:#636b77;margin:0 0 18px}
.dgw-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dgo{font:inherit;text-align:left;border:1px solid #E1DDD2;background:#FEFDFB;border-radius:12px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}
.dgo:hover{border-color:#0B3629}
.dgo.sel{border-color:#0B3629;background:#F1F6F0;box-shadow:0 0 0 1px #0B3629 inset}
.dgo b{font-size:16.5px;font-weight:600;color:#0B3629;letter-spacing:-.01em}
.dgo span{font-size:14px;line-height:1.4;color:#636b77}
.dgw-nav{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.dgw-back{font:600 15px 'Instrument Sans',system-ui,sans-serif;background:none;border:0;color:#0B3629;cursor:pointer;padding:12px 4px}
.dgw-next:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.dgw-next{padding:15px 24px}
.dgw-note{font-size:12.5px;color:#8a918e;margin:16px 0 0}
.dgw-res{display:flex;gap:24px;align-items:center;margin-bottom:18px}
.dgw-ring{position:relative;width:128px;height:128px;flex:none}
.dgw-ring svg{width:100%;height:100%}
.dgw-ring div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dgw-ring b{font-size:34px;font-weight:600;color:#0B3629;line-height:1}
.dgw-ring small{font-size:12px;color:#636b77}
.dgw-res h4{margin-bottom:6px}.dgw-res p{margin:0;color:#636b77;font-size:15.5px;line-height:1.5}
.dgw-ins{list-style:disc;margin:0 0 26px;padding-left:20px;display:grid;gap:8px;color:#10251f;font-size:15.5px;line-height:1.5}
.dgw-form h5,.dgw-thanks h5{font-size:18px;font-weight:600;margin:0 0 12px;color:#10251f}
.dgw-fg{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.dgw-fg input{font:400 15.5px 'Instrument Sans',system-ui,sans-serif;padding:13px 14px;border:1px solid #D9D5CA;border-radius:10px;background:#FEFDFB;width:100%}
.dgw-thanks p{margin:0;color:#636b77}
.dgw-again{font:600 14px 'Instrument Sans',system-ui,sans-serif;background:none;border:0;color:#0B3629;cursor:pointer;padding:14px 0 0;text-decoration:underline}
.dgbig{max-width:980px}
@media (max-width:640px){.dgw-opts,.dgw-fg{grid-template-columns:1fr}.dgw-res{flex-direction:column;align-items:flex-start}}

.dgw-ins li{display:list-item}.dgw-form{margin-top:4px}.dgw-ring b{font-size:30px}

.cfp{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.cfp span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#636b77;white-space:nowrap}
.cfbar{flex:1;height:6px;border-radius:99px;background:#E9EDE8;overflow:hidden}.cfbar i{display:block;height:100%;background:#0B3629;border-radius:99px;transition:width .25s}
#cf2{display:block}
.cfs{display:none}.cfs.on{display:block}
.cft{font-size:clamp(22px,2vw,30px);letter-spacing:-.03em;font-weight:600;color:#0B3629;margin:0 0 22px}
.cfl{display:grid;gap:8px;font-size:14.5px;font-weight:600;color:#10251f;margin-bottom:20px}
.cfl small{font-weight:400;color:#8a918e;font-size:13px}
.cfl input,.cfl select,.cfl textarea{font:400 16px 'Instrument Sans',system-ui,sans-serif;padding:14px;border:1px solid #D9D5CA;border-radius:10px;background:#FEFDFB;color:#10251f;width:100%}
.cfl textarea{min-height:100px;resize:vertical}
.cfl input:focus,.cfl select:focus,.cfl textarea:focus{outline:2px solid #0B3629;outline-offset:1px}
.cfgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.cfrow{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.chips2{display:flex;flex-wrap:wrap;gap:8px;font-weight:400}
.chip2{position:relative;display:inline-flex}
.chip2 input{position:absolute;opacity:0;inset:0;cursor:pointer;width:100%;height:100%;margin:0}
.chip2 span{display:inline-block;padding:11px 16px;border:1px solid #D9D5CA;border-radius:99px;background:#FEFDFB;font-size:14.5px;font-weight:500;color:#10251f;transition:border-color .15s,background .15s}
.chip2:hover span{border-color:#0B3629}
.chip2 input:checked+span{background:#0B3629;border-color:#0B3629;color:#fff}
.chip2 input:focus-visible+span{outline:2px solid #0B3629;outline-offset:2px}
.cfc{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5;color:#636b77;margin-bottom:16px}
.cfc input{margin-top:3px;width:18px;height:18px;accent-color:#0B3629;flex:none}
.cfc a{color:#0B3629;font-weight:600}
.cferr{display:none;color:#B3391F;font-size:14px;margin:0 0 14px}
.cfact{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.cfback{font:600 15px 'Instrument Sans',system-ui,sans-serif;background:none;border:0;color:#0B3629;cursor:pointer;padding:12px 4px}
.hsalt{margin-top:20px;border:0;padding:0;background:none}.hsalt summary{padding:0;font-size:14px;font-weight:600;color:#0B3629;cursor:pointer}.hsalt summary::after{content:""}
.hsalt iframe{width:100%;height:560px;border:1px solid #EEEBE4;border-radius:12px;margin-top:12px;background:#fff}
@media (max-width:640px){.cfgrid,.cfrow{grid-template-columns:1fr}}

.cfrow{align-items:start}.cfrow .cfl select{height:50px}
/* A one-line dropdown does not need the full width of the card. Only the standalone ones:
   those inside .cfrow already sit in a half-width column. */
.cfpick .cfs > .cfl > select{max-width:420px}
@media (max-width:640px){.cfpick .cfs > .cfl > select{max-width:none}}
.cfs[data-s='1'] .cfl:last-of-type{margin-bottom:12px}

.glance{display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border:1px solid #EEEBE4;border-radius:16px;overflow:hidden}
.glance>div{padding:22px 24px;border-right:1px solid #EEEBE4}.glance>div:last-child{border-right:0}
.glance small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#8a918e;margin-bottom:6px}
.glance b{font-size:15.5px;font-weight:600;color:#10251f;line-height:1.35}
.chal.c3{grid-template-columns:repeat(3,1fr)}
.statc{display:grid;gap:16px;margin-top:28px}
.statc.n4{grid-template-columns:repeat(4,1fr)}.statc.n3{grid-template-columns:repeat(3,1fr)}
.statc>div{background:#0B3629;color:#fff;border-radius:18px;padding:clamp(24px,2.4vw,36px)}
.statc b{display:block;font-size:clamp(36px,3.8vw,60px);font-weight:600;letter-spacing:-.04em;line-height:1}
.statc span{display:block;margin-top:10px;font-size:15px;color:rgba(255,255,255,.78);line-height:1.4}
.csbig .lk{color:#fff;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}.csbig .lk svg{width:14px}
@media (max-width:1180px){.glance{grid-template-columns:repeat(2,1fr)}.glance>div{border-bottom:1px solid #EEEBE4}.chal.c3{grid-template-columns:repeat(2,1fr)}.statc.n4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.glance,.chal.c3,.statc.n4,.statc.n3{grid-template-columns:1fr}}

.whyc.w2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.whyc.w2{grid-template-columns:1fr}}

.rates{display:grid;gap:10px;margin-top:28px}
.rrow{display:grid;grid-template-columns:1.2fr 1fr auto;gap:20px;align-items:center;background:#fff;border:1px solid #EEEBE4;border-radius:14px;padding:20px 26px;font-size:16px;color:#636b77}
.rrow b{color:#10251f;font-size:18px;font-weight:600}
.rrow strong{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em;font-weight:600;color:#0B3629}
.rrow strong small{font-size:14px;font-weight:400;color:#636b77;letter-spacing:0}
@media (max-width:640px){.rrow{grid-template-columns:1fr;gap:4px}}

.tm a{margin-top:10px;font-size:14px;font-weight:600;color:#0B3629}.tm a:hover{text-decoration:underline}

.rf{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.rfb{font:500 14.5px 'Instrument Sans',system-ui,sans-serif;padding:11px 18px;border-radius:99px;border:1px solid #D9D5CA;background:#FEFDFB;color:#10251f;cursor:pointer;transition:border-color .15s}
.rfb:hover{border-color:#0B3629}.rfb.on{background:#0B3629;border-color:#0B3629;color:#fff}
.cat{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#8a918e}
.fcard{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;background:#0B3629;color:#fff;border-radius:20px;padding:clamp(26px,3vw,48px);flex-wrap:wrap}
.fcard .cat{color:rgba(255,255,255,.7)}
.fcard h2{color:#fff;font-size:clamp(26px,2.8vw,44px);margin:14px 0 12px;max-width:22em}
.fcard p{margin:0;color:rgba(255,255,255,.78);font-size:17px;line-height:1.5;max-width:44em}
.fcard .more{font-weight:600;display:inline-flex;gap:8px;align-items:center;white-space:nowrap}.fcard .more svg{width:15px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.rgrid.r2{grid-template-columns:repeat(2,1fr)}
.rcard{background:#fff;border:1px solid #EEEBE4;border-radius:16px;padding:24px 26px;display:flex;flex-direction:column;gap:10px;transition:transform .15s,box-shadow .15s}
.rcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(6,36,29,.09)}
.rcard h3{font-size:19px;line-height:1.25;letter-spacing:-.02em;font-weight:600;color:#10251f;margin:0}
.rcard p{font-size:15px;line-height:1.5;color:#636b77;margin:0}
.rcard .more{margin-top:auto;padding-top:8px;font-size:14.5px;font-weight:600;color:#0B3629;display:inline-flex;gap:8px;align-items:center}.rcard .more svg{width:14px}
.rgrps{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 32px;margin-top:28px}
.rgrp h3{font-size:20px;font-weight:600;letter-spacing:-.02em;color:#0B3629;margin:0 0 12px}
.rrows{display:grid;gap:8px}
.rrow2{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:center;background:#fff;border:1px solid #EEEBE4;border-radius:12px;padding:16px 20px;transition:border-color .15s}
.rrow2:hover{border-color:#0B3629}
.rrow2 .cat{grid-column:1/-1}
.rrow2 b{font-size:16px;font-weight:600;color:#10251f;line-height:1.35;letter-spacing:-.01em}
.rrow2 svg{width:14px;color:#0B3629;grid-row:2;grid-column:2}
.rrow2.hid{display:none}
/* .rrow2 sets display:grid, which out-specifies the UA rule for [hidden]; without this the
   hub's preview cannot hide a row at all (it showed six blogs on the All tab) */
.rrow2[hidden],.rcard[hidden],.fcard[hidden]{display:none}
/* the per-group "Show more" belongs to the full list, not to the three-card preview */
.rsec.preview .rmore{display:none}
.rmore{font:600 14.5px 'Instrument Sans',system-ui,sans-serif;background:none;border:0;color:#0B3629;cursor:pointer;padding:14px 0 0;text-decoration:underline}
.nl{display:grid;grid-template-columns:1fr auto;gap:10px}
.nl input{font:400 16px 'Instrument Sans',system-ui,sans-serif;padding:15px 16px;border:1px solid #D9D5CA;border-radius:10px;background:#fff;width:100%}
.post{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(32px,5vw,80px);padding:20px 3.41vw 56px;align-items:start}
.pbody p{font-size:18px;line-height:1.72;color:#2b3a34;margin:0 0 20px}
.pbody h2{font-size:clamp(24px,2.2vw,34px);letter-spacing:-.03em;line-height:1.15;font-weight:600;color:#0B3629;margin:44px 0 16px}
/* The email-application block: a measured, centred card. Full width left a wide empty gutter
   on the right, because the content inside is only ever a few short lines. */
.pcta{background:#F1F6F0;border:1px solid #DCEBE2;border-radius:18px;padding:32px 34px;
  margin:32px auto 0;max-width:680px;text-align:center}
.pcta .oplist{display:inline-grid;text-align:left;justify-items:start;margin-top:18px}
.sec.ctr{text-align:center}
.sec.ctr .sub{margin-left:auto;margin-right:auto}
.pcta h3{font-size:22px;letter-spacing:-.02em;font-weight:600;color:#0B3629;margin:0 0 8px}
.pcta p{margin:0 0 16px;font-size:16px;color:#636b77}
.pside{position:sticky;top:96px;display:grid;gap:14px}
.toc{background:#fff;border:1px solid #EEEBE4;border-radius:16px;padding:22px 24px;display:grid;gap:10px}
.toc b{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#8a918e}
.toc a{font-size:14.5px;line-height:1.4;color:#10251f}.toc a:hover{color:#0B3629;text-decoration:underline}
.box2{background:#0B3629;color:#fff;border-radius:16px;padding:22px 24px}
.box2 b{font-size:18px}.box2 p{color:rgba(255,255,255,.78);font-size:15px;line-height:1.5;margin:6px 0 4px}.box2 .lnk{color:#fff}
@media (max-width:1180px){.rgrid{grid-template-columns:repeat(2,1fr)}.rgrps{grid-template-columns:1fr}.post{grid-template-columns:1fr}.pside{position:static}}
@media (max-width:819px){.post{padding:20px 20px 40px}}
@media (max-width:640px){.rgrid,.rgrid.r2{grid-template-columns:1fr}.nl{grid-template-columns:1fr}.pbody p{font-size:17px}}

/* These forms lay their own fields out, so they opt out of the two-column .formcard grid.
   Matched on the class rather than on ids: the French contact form is #fr-cf2, which the
   id list missed, so its step panel sat in one 307px column of a 629px form and every
   chip wrapped against the left edge. */
.formcard form.cfpick,.formcard form.jf,.formcard form#wpf{display:block}

/* The housekeeping pitch is the intro, the bullets and the rate table, in that order. The table
   used to sit alone with half the row empty beside it; it now pairs with the line that explains it. */
.bigintro{font-size:clamp(18px,1.45vw,22px);line-height:1.52;color:#10251f;max-width:40em;margin:0;letter-spacing:-.01em}
.ratewrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center;margin-top:44px}
.ratewrap h2{margin:10px 0 10px}
.ratewrap .sub{margin:0;max-width:26em}
@media (max-width:900px){.ratewrap{grid-template-columns:1fr;gap:24px}}
/* A price list does not need the full page width: at 1290px each row was a label on the far
   left and a figure on the far right with a quarter of a metre of nothing between them. */
.ratetbl{margin-top:0;background:#fff;border:1px solid #E1DDD2;border-radius:16px;
  overflow:hidden;max-width:600px}
.ratetbl .rth,.ratetbl .rt{display:grid;grid-template-columns:1fr auto;gap:24px;padding:12px 20px;align-items:center}
.ratetbl .rth{background:#0B3629;color:#fff}.ratetbl .rth span,.ratetbl .rth b{font-size:15px;font-weight:600;letter-spacing:.01em}
.ratetbl .rth b{text-align:right}
.ratetbl .rt{border-top:1px solid #EEEBE4;font-size:15px;color:#10251f}
.ratetbl .rt b{text-align:right;font-weight:600;color:#0B3629}
@media (max-width:640px){.ratetbl .rth,.ratetbl .rt{grid-template-columns:1fr auto;padding:14px 18px}}

.feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,72px);align-items:center;margin-top:36px}
.feat.rev .fimg{order:2}
.fimg{border-radius:18px;overflow:hidden;aspect-ratio:1.7;background:#e8e4da}
.fimg img{width:100%;height:100%;object-fit:cover;display:block}
/* The platform feature images are screenshots of the product, not photographs: cropping them
   to the 1.7 box cut 20-26% off interfaces whose whole point is what they show. Only those
   take the image's own shape; photographs elsewhere still fill their frame. */
#features .fimg{aspect-ratio:auto;background:#F2F0EA;display:flex}
#features .fimg img{height:auto;object-fit:contain}
/* A page hero holding a product screenshot rather than a photograph: the compliance hero was
   cropping 31% off the dashboard, losing the whole right-hand column. It shows in full. */
.pimg.shot{aspect-ratio:auto;background:#F2F0EA;display:flex;align-items:center}
.pimg.shot img{height:auto;object-fit:contain}
.feat h3{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.03em;font-weight:600;color:#0B3629;margin:0 0 14px}
.feat p{font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:#636b77;margin:0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px;align-items:start}
.pcard{background:#fff;border:1px solid #EEEBE4;border-radius:18px;overflow:hidden}
.pcard img{width:100%;aspect-ratio:1.3;object-fit:cover;display:block}
.pcard .tx{padding:24px 26px}
.pcard h3{font-size:21px;font-weight:600;letter-spacing:-.02em;color:#10251f;margin:0 0 8px}
.pcard p{font-size:15px;line-height:1.55;color:#636b77;margin:0}
@media (max-width:960px){.feat{grid-template-columns:1fr}.feat.rev .fimg{order:0}.pgrid{grid-template-columns:1fr}}

.statc.n2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.statc.n2{grid-template-columns:1fr}}


@media (min-width:820px){.aud .ac span.lb{font-size:13px;letter-spacing:-.015em}.aud .cards{grid-template-columns:repeat(5,1fr)!important;gap:14px!important}}@media (min-width:1200px){.pick{grid-template-columns:repeat(5,1fr)!important}
/* Five across suits the ten London audiences. Paris has six, which at five across strands
   one card alone on a second row, so six go three and three. */
.pick:has(> a:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)!important}
/* Paris now carries eight: four and four, rather than five with three stranded. */
.pick:has(> a:nth-child(8):last-child){grid-template-columns:repeat(4,1fr)!important}}


.case .clogo{height:64px;display:flex;align-items:center;margin-bottom:16px}
.case .clogo img{max-height:56px;max-width:190px;width:auto;object-fit:contain;display:block}
.case .clogo .wm{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#10251f}
.pimg.logo-panel{background:#fff;border:1px solid #EEEBE4;display:flex;align-items:center;justify-content:center}
.pimg.logo-panel img{width:auto!important;height:auto!important;object-fit:contain;display:block}
.pimg.logo-panel .wm{font-size:clamp(36px,4vw,56px);font-weight:700;letter-spacing:-.03em;color:#10251f}



.collage>.mobhead{display:none}
[data-r$="solutions/hospitality"] .pimg img{object-position:24% 50%}
.case .cabout{background:#F6F4EF;border-radius:12px;padding:12px 14px;margin:14px 0 6px}
.case .cabout small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7a8079;margin-bottom:4px}
.case .cabout p{font-size:14px;line-height:1.5;color:#3d4743;margin:0}
@media (max-width:819px){.case .cabout{display:none}[data-r="services"] .sc.dr{display:none!important}footer li:has(a[href="#/drive"]),footer li:has(a[href="#/fr/services/opago-drive"]){display:none}}
.sec.quote{padding-bottom:0}
.quote blockquote{margin:18px auto 14px}
.quote+.sec,.quote + section{padding-top:clamp(28px,2.6vw,44px)}
.drive-vis{position:relative}
.pmsbadge{position:absolute;right:26px;top:calc(32.1% - 54px);z-index:3;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E7E3DA;border-radius:12px;padding:6px 13px 6px 6px;box-shadow:0 10px 26px rgba(6,36,29,.12)}
.pmsbadge i{width:26px;height:26px;border-radius:50%;background:#0B3629;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pmsbadge i svg{width:14px;height:14px}
.pmsbadge b{display:block;font-size:13px;font-weight:600;color:#10251f;line-height:1.2}
.pmsbadge small{display:block;font-size:11.5px;color:#636b77;margin-top:1px}
@media (max-width:819px){.pmsbadge{right:10px;top:-18px;padding:6px 10px 6px 6px;gap:7px;border-radius:10px}.pmsbadge i{width:20px;height:20px}.pmsbadge i svg{width:11px;height:11px}.pmsbadge b{font-size:11px}.pmsbadge small{font-size:9.5px}}
@media (min-width:961px){[data-r="home"] #services .svc,[data-r="fr"] #services .svc{grid-template-columns:repeat(3,1fr)!important}}
@media (max-width:819px){
 .hero .vals{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:0!important;margin:28px 0 0!important;padding:16px 0!important;border-top:1px solid #E7E3DA;border-bottom:1px solid #E7E3DA}
 .hero .vals>div{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important;gap:8px!important;font-size:13px!important;line-height:1.3!important;padding:0 6px!important;margin:0!important}
 .hero .vals>div+div{border-left:1px solid #E7E3DA}
 .hero .vals svg{width:26px!important;height:26px!important;flex:none;margin:0!important}
 /* No hero graphic on a phone. The photographs never fitted, and the services ring ended up
    stranded under the quote where it read as a stray diagram rather than part of the hero.
    The headline, the buttons, the three benefits and the client quote carry the first screen
    on their own; the ring still does its job on the desktop canvas. */
 .hero .collage{display:none!important}
 /* the quote is kept on one line on the fixed desktop canvas; on a phone it has to wrap */
 .hero .heroq blockquote{white-space:normal!important}
 .trust{display:flex!important;flex-direction:column}
 .trust .stats{order:-1;grid-template-columns:repeat(3,1fr)!important;gap:12px!important;margin:0 0 22px!important}
 .trust .stats b{font-size:22px!important}
 .trust .stats span{font-size:12.5px!important;line-height:1.3;display:block}
 .trust + .aud,.trust .aud,.route > .aud{margin:28px 3.41vw 8px!important}
}



#features .fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.6vw,40px);margin-top:clamp(28px,3vw,44px)}
#features .frow{display:block;margin-top:0}
#features .frow.rev .fimg{order:0}
#features .frow .fimg{margin-bottom:16px}
#features .fimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;display:block}
#features .ftx h3{font-size:clamp(20px,1.5vw,24px);letter-spacing:-.02em;line-height:1.2;margin:8px 0 9px;color:#0B3629;font-weight:600}
#features .ftx p{font-size:15.5px;line-height:1.55;color:#4a5450;margin:0 0 13px}
#features .ftx ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
#features .ftx li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#10251f}
#features .ftx li i{width:22px;height:22px;border-radius:50%;background:#E6EFEA;color:#0B3629;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
#features .ftx li i svg{width:12px;height:12px}
@media (min-width:820px) and (max-width:1599px){header.nav .tag,header.nav .vr{display:none!important}}
@media (max-width:819px){#features .fgrid{grid-template-columns:1fr}}


.sec.legal .lg-in{max-width:820px}.sec.legal h2{font-size:22px;margin:30px 0 8px;letter-spacing:-.015em}.sec.legal p{font-size:15.5px;line-height:1.7;color:#3d4743}.sec.legal a{text-decoration:underline}

.paris-addr{margin:6px 0 0;font-size:14px;line-height:1.5;color:#636b77}.phones{display:grid;gap:14px}.phones small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7a8079;margin-bottom:2px}


.nav li.loc{position:relative;list-style:none}
.nav details.locdd{border:0!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.nav .locdd summary::after,.nav .locdd summary::before{display:none!important;content:none!important}
.nav .locdd summary{justify-content:flex-start!important;width:auto!important}
.nav .locmenu a{display:flex!important;flex-direction:row!important;align-items:center!important;gap:10px!important;padding:9px 10px!important;font-size:14.5px!important;line-height:1.2!important;border-bottom:0!important}
.locdd summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;border:1.5px solid #D9D5CA;border-radius:99px;padding:6px 11px 6px 9px;font-size:13.5px;font-weight:600;color:#0B3629;white-space:nowrap;user-select:none}
.locdd summary::-webkit-details-marker{display:none}
.locdd summary:hover,.locdd[open] summary{border-color:#0B3629}
.locdd .flag{width:20px;height:14px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.locdd .car{width:12px;height:12px;transition:transform .15s}
.locdd[open] .car{transform:rotate(180deg)}
.locmenu{position:absolute;top:calc(100% + 8px);left:0;z-index:50;min-width:200px;background:#fff;border:1px solid #EEEBE4;border-radius:12px;box-shadow:0 18px 40px rgba(6,36,29,.12);padding:8px;display:grid;gap:2px}
.locmenu .lh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#636b77;padding:6px 10px 4px}
.locmenu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:#10251f;text-decoration:none;font-size:14.5px;font-weight:600}
.locmenu a:hover{background:#F1F6F0}
.locmenu a.on{background:#F1F6F0;box-shadow:inset 0 0 0 1px #0B3629}
.locmenu a span{display:flex;flex-direction:column;line-height:1.2}
.locmenu small{font-size:12px;font-weight:400;color:#636b77}
@media (min-width:820px){.navfit{overflow:visible!important}.navfit .nav ul{gap:24px}}
@media (max-width:819px){.nav li.loc{margin-top:8px}.nav .locdd summary{display:inline-flex!important}.locmenu{position:static;box-shadow:none;margin-top:8px}}
@media (min-width:820px){[data-r="fr"] .t5{letter-spacing:.14em;padding-left:24px}[data-r="fr"] .scribble{font-size:23px;width:150px}[data-r="fr"] .ac span.lb{font-size:12px;letter-spacing:-.02em;white-space:normal;line-height:1.15}}

/* Redesign fix, Oct 2026: the navbar is a fixed 1672px layout with the strapline pinned at
   left:1205px and the divider at 1343px. Renaming the "DRIVE" menu item to "Platform" widened
   the menu from ~1197 to 1211, so it ran into the strapline. The strapline only shows from
   1600px up (see the rule above), so the clearance is restored only there: an 8px tighter menu
   gap pulls the menu back to ~1195 and leaves the rest of the design untouched. */
@media (min-width: 1600px) {
  .navfit .nav ul {
    gap: 20px;
  }
}

/* Commercial cleaning page: the dashboard illustration's row thumbnails. The shared .th1-.th4
   classes carry apartment interiors, which read wrong on an office page, so this page uses
   crops of the office photograph instead. */
.oth1 { background: url(/images/redesign/office-th1.jpg) center/cover; }
.oth2 { background: url(/images/redesign/office-th2.jpg) center/cover; }
.oth3 { background: url(/images/redesign/office-th3.jpg) center/cover; }
.oth4 { background: url(/images/redesign/office-th4.jpg) center/cover; }

/* Dashboard row thumbnails. The design embedded these as 59x32 base64 tiles, which the
   browser then enlarged to roughly 152x88 on a retina screen, so they rendered soft. They
   are now 400px crops of each audience's own photograph: four different parts of one room
   or building, so a page's four rows do not repeat the same picture. */
/* Serviced apartments */
.sth1{background:url(/images/redesign/th/serviced-1.jpg) center/cover}
.sth2{background:url(/images/redesign/th/serviced-2.jpg) center/cover}
.sth3{background:url(/images/redesign/th/serviced-3.jpg) center/cover}
.sth4{background:url(/images/redesign/th/serviced-4.jpg) center/cover}
/* Estate agents and property managers */
.mth1{background:url(/images/redesign/th/managers-1.jpg) center/cover}
.mth2{background:url(/images/redesign/th/managers-2.jpg) center/cover}
.mth3{background:url(/images/redesign/th/managers-3.jpg) center/cover}
.mth4{background:url(/images/redesign/th/managers-4.jpg) center/cover}
/* Long lets */
.lth1{background:url(/images/redesign/th/longlets-1.jpg) center/cover}
.lth2{background:url(/images/redesign/th/longlets-2.jpg) center/cover}
.lth3{background:url(/images/redesign/th/longlets-3.jpg) center/cover}
.lth4{background:url(/images/redesign/th/longlets-4.jpg) center/cover}
/* PBSA */
.pth1{background:url(/images/redesign/th/pbsa-1.jpg) center/cover}
.pth2{background:url(/images/redesign/th/pbsa-2.jpg) center/cover}
.pth3{background:url(/images/redesign/th/pbsa-3.jpg) center/cover}
.pth4{background:url(/images/redesign/th/pbsa-4.jpg) center/cover}
/* Build-to-rent developers */
.dth1{background:url(/images/redesign/th/developers-1.jpg) center/cover}
.dth2{background:url(/images/redesign/th/developers-2.jpg) center/cover}
.dth3{background:url(/images/redesign/th/developers-3.jpg) center/cover}
.dth4{background:url(/images/redesign/th/developers-4.jpg) center/cover}
/* Hotels and hospitality */
.hth1{background:url(/images/redesign/th/hospitality-1.jpg) center/cover}
.hth2{background:url(/images/redesign/th/hospitality-2.jpg) center/cover}
.hth3{background:url(/images/redesign/th/hospitality-3.jpg) center/cover}
.hth4{background:url(/images/redesign/th/hospitality-4.jpg) center/cover}
/* Block managers */
.bth1{background:url(/images/redesign/th/blocks-1.jpg) center/cover}
.bth2{background:url(/images/redesign/th/blocks-2.jpg) center/cover}
.bth3{background:url(/images/redesign/th/blocks-3.jpg) center/cover}
.bth4{background:url(/images/redesign/th/blocks-4.jpg) center/cover}
/* Co-living */
.cth1{background:url(/images/redesign/th/coliving-1.jpg) center/cover}
.cth2{background:url(/images/redesign/th/coliving-2.jpg) center/cover}
.cth3{background:url(/images/redesign/th/coliving-3.jpg) center/cover}
.cth4{background:url(/images/redesign/th/coliving-4.jpg) center/cover}

/* A screenshot standing in for the dashboard illustration, used where we have a real view of
   the product worth showing (the compliance page). Matches the mock's rounded, shadowed frame. */
.dash-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #EAE7E0;
  box-shadow: 0 18px 40px rgba(11, 54, 41, 0.1);
}

/* The housekeeping application. It carries 25 fields, so it was unusable in the two-column
   contact layout, where the form column is sized for the six-field enquiry form and the
   sidebar took the rest: inputs were rendering 144px wide. It now runs full width, and the
   three sidebar boxes sit underneath as a row. */
.applyform {
  background: #fff;
  border: 1px solid #EAE7E0;
  border-radius: 18px;
  padding: 28px;
}
.applyform .hs-form-field,
.applyform .field {
  max-width: none;
}
.applyaside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 20px;
}
@media (max-width: 860px) {
  .applyform { padding: 20px; }
  .applyaside { grid-template-columns: 1fr; }
}

/* The housekeeping application, laid out in two columns. 25 fields in a single column made for
   a very long form; pairing them halves the scroll. Blocks that need the width (the existing
   two-field rows, the uploads, the captcha and the submit) span both columns. */
@media (min-width: 820px) {
  .applyform .jf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    align-items: start;
  }
  .applyform .jf > .cfgrid,
  .applyform .jf > #js-file-sections,
  .applyform .jf > .inline-error,
  .applyform .jf > .g-recaptcha,
  .applyform .jf > #files-submit,
  .applyform .jf > .wu-loading {
    grid-column: 1 / -1;
  }
}

/* "From application to your first job": three steps side by side rather than stacked, so the
   page explains itself above the form instead of below it. */
.tl.tl-across {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tl.tl-across > div {
  border-top: 1px solid #E1DDD2;
  padding: 20px 0 0;
}
@media (max-width: 860px) {
  .tl.tl-across { grid-template-columns: 1fr; gap: 0; }
  .tl.tl-across > div { padding: 22px 0; }
}

/* The housekeeping careers hero carries no photograph, so the text takes the full width
   rather than leaving the second column empty. */

/* The four upload blocks sat in a stack roughly 400px tall. Two across halves that, matching
   the two-column rhythm of the fields above. align-items:start so a block that grows as files
   are added does not stretch the one beside it. */
@media (min-width: 820px) {
  #js-file-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 22px;
    row-gap: 18px;
    align-items: start;
  }
}

/* The housekeeping careers hero carries no photograph. Rather than leave the second column
   empty, "what we are looking for" sits there as a ticked list: the eligibility rules are what
   a candidate needs before anything else, and it keeps the form inside the first screen. */
.herolist {
  background: #fff;
  border: 1px solid #EAE7E0;
  border-radius: 18px;
  padding: 26px 28px;
  align-self: start;
}
.herolist .ey { margin-bottom: 6px; }
.herolist h2 { font-size: 25px; margin: 0 0 20px; }
.herolist-items {
  list-style: none;
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
}
.herolist-items li {
  display: flex;
  gap: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #636b77;
}
/* The bullet is the Opago mark. The logo variable holds the full lockup, so the mask is sized
   to the element's height and pinned left, which shows the circular mark and none of the
   wordmark. No separate asset, and it cannot drift from the logo. */
.herolist-items li i {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: var(--green, #0B3629);
  -webkit-mask: var(--logo) left center / auto 100% no-repeat;
  mask: var(--logo) left center / auto 100% no-repeat;
}
.herolist-items li b {
  display: block;
  color: #10251f;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}
@media (max-width: 860px) {
  .herolist { padding: 20px; margin-top: 24px; }
  .herolist h2 { font-size: 22px; }
}

/* The captcha and the submit button were stretching the full 1,120px of the form, which made
   the button read as a banner rather than something to click. Both sit at the left with the
   rest of the fields; the button is sized to its label, with the label centred inside it. */
@media (min-width: 820px) {
  .applyform .jf > .g-recaptcha { justify-self: start; }
  .applyform .jf > #files-submit {
    justify-self: start;
    width: auto;
    min-width: 240px;
    padding-inline: 32px;
    margin-top: 6px;
    justify-content: center;
  }
}

/* The solutions chooser now carries ten audiences. At four across that fell into rows of
   4, 4 and 2, with a near-empty last row. Five across gives two even rows of five. Type and
   padding come down a little to suit the narrower card. */
@media (min-width: 1200px) {
  .pick { gap: 14px; }
  .pick h3 { font-size: 18px; }
  .pick .tx { padding: 14px 0 0; gap: 6px; }
  .pick .tx p { font-size: 14px; line-height: 1.5; }
  .pick .more { font-size: 13px; }
}
@media (min-width: 1181px) and (max-width: 1199px) {
  .pick { grid-template-columns: repeat(3, 1fr); }
}

/* "Who we work with" carries ten audiences. At seven across that left a single card stranded
   on a second row, and the labels were 13px on a 135px card. Five across gives two even rows
   with room to actually read which kind of operator each one is. */
@media (min-width: 820px) {
  .aud .ac span.lb {
    font-size: 15px !important;
    letter-spacing: -0.01em !important;
    line-height: 1.35;
  }
  .aud .ac .ph img { aspect-ratio: 1.5; object-fit: cover; }
}

/* "Who we work with", lifted out of the hero canvas into its own section. The hero version is
   absolutely positioned inside a scaled 1672px stage, so every one of those rules has to be
   undone here. Centred heading, five cards a row, the same shape as the solutions chooser but
   smaller, on a band so it reads as separate from the hero rather than stuck to it. */
.aud.aud-out {
  position: static;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: clamp(28px, 2.6vw, 44px) 3.41vw clamp(24px, 2.4vw, 38px);
  background: #FEFDFB;
  border-top: 1px solid #EEEBE4;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
.aud.aud-out .eyebrow {
  position: static;
  display: block;
  margin: 0 0 10px;
}
.aud.aud-out h2 {
  position: static;
  width: auto;
  max-width: 56rem;
  margin: 0 auto 26px;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.18;
  text-wrap: balance;
}
.aud.aud-out .cards {
  position: static;
  width: auto;
  height: auto;
  text-align: left;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}

/* "Who we work with" without the photographs (2026-10-21, after review): ten text cards in the
   same five-across, two-row grid. The section was the most crowded part of the home page, and the
   thumbnails were decorating the labels rather than helping anyone find their own kind of
   operator. The <img> stays in the markup, hidden, so putting it back is one rule. */
.aud .ac .ph{display:none}
.aud .ac span.lb{padding:17px 18px;height:auto!important;font-size:16px!important;font-weight:600;
  letter-spacing:-.015em!important;line-height:1.3;align-items:center;white-space:normal!important}
/* Five across is two even rows for London ten. Paris carries eight, which left three stranded
   on the second row, so eight go four and four and the cards get wider for it. */
.aud .cards:has(> .ac:nth-child(8):last-child){grid-template-columns:repeat(4,1fr)!important}
.aud.aud-out .cards{gap:14px!important}
@media (max-width: 1100px) {
  .aud.aud-out .cards { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 700px) {
  .aud.aud-out .cards { grid-template-columns: repeat(2, 1fr) !important; }
}

/* The trust strip sits directly under the hero, with the audiences below it. */
section.trust:has(+ .aud.aud-out) { padding-bottom: 8px; }

/* Common questions on the homepage, three across rather than a single stack. Each question
   still opens in place; align-items:start means an opened one grows on its own instead of
   stretching the two beside it. Scoped to the homepage: the other 39 pages that use .faq
   have longer answers that read better in one column. */
/* FAQs run in columns rather than one long stack. Nine or ten questions in a single column
   is a lot of page for something most readers scan rather than read. align-items:start means
   an opened answer grows on its own without stretching the ones beside it. Applies wherever
   .faq is used; the 36-question /faqs page keeps a single column, where a long list with a
   predictable left edge is easier to work down. */
@media (min-width: 1000px) {
  .faq {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 16px;
    align-items: start;
  }
  .faq details { margin-bottom: 0; padding: 0 20px; }
  .faq summary { font-size: 16px; padding: 18px 0; }
  body[data-page="faqs"] .faq,
  .faq.faq-single { display: block; }
  body[data-page="faqs"] .faq details,
  .faq.faq-single details { margin-bottom: 10px; padding: 0 24px; }
}
@media (min-width: 1000px) and (max-width: 1200px) {
  .faq { grid-template-columns: repeat(2, 1fr); }
}

/* Client logos in the trust marquee, replacing the scrolling list of names. They arrive in
   mixed formats, colours and proportions, so they are set to one optical height and muted to
   a single tone: full colour across 28 logos would fight the page and each other. Multiply
   blending drops the white box on the logos supplied as JPEG. G&T Short Lets has no logo, so
   it stays as text at the weight the names used to have. */
.track .lgo{min-width:96px}
.track .lgo {
  height: 46px;
  width: auto;
  max-width: 250px;
  display: block;
  flex: none;
  object-fit: contain;
}
/* Some carry more padding than the rest, or are square marks rather than wordmarks, so they
   read small at a shared height. Each is nudged so every logo lands at roughly the same
   optical weight. Urban Key and Hospiria keep their own whitespace because trimming them
   clipped the lettering, so they are simply set larger. */
/* Square marks and short wordmarks need more height than a long wordmark to carry the same
   weight, so each is set against how wide it actually renders. */
.track .lgo[src$="glenfield.svg"] { height: 44px; max-width: 250px; }
.track .lgo[src$="egre.png"],
.track .lgo[src$="noia.svg"],
.track .lgo[src$="ayr-concierge.png"] { height: 64px; }
.track .lgo[src$="urban-key.png"],
.track .lgo[src$="hospiria.png"],
.track .lgo[src$="twin-investments.png"] { height: 66px; max-width: 250px; }
.track .lgo[src$="urban-chic.png"],
.track .lgo[src$="house-of-kip.png"],
.track .lgo[src$="oasis.png"] { height: 58px; }
/* The three very long wordmarks would run to 400px+ at the shared height, so they take the
   full width allowance at a lower height rather than being squashed by the cap. */
.track .lgo[src$="air-peace-of-mind.png"],
.track .lgo[src$="your-apartment.png"],
.track .lgo[src$="hurford-salvi.png"] { height: auto; width: 250px; max-width: 250px; }

/* Only two of the supplied logos came without transparency, so only those two need blending
   to hide the white box behind them. Applying it to all of them would tint the rest against
   the cream background. */
.track .lgo[src$="oasis.png"],
.track .lgo[src$="hurford-salvi.png"] {
  mix-blend-mode: multiply;
}
.track .lgt {
  flex: none;
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(11, 54, 41, 0.75);
  white-space: nowrap;
}
/* Tighter than the 56px the names needed: logos carry their own whitespace. */
.track { align-items: center; gap: 30px; }
@media (max-width: 820px) {
  .track { gap: 22px; }
  .track .lgo { height: 30px; }
  .track .lgt { font-size: 17px; }
}

/* A client quote in the hero, filling the space "who we work with" used to occupy. The hero is
   a fixed 1672px canvas, so it is placed at design coordinates like everything else in it:
   below the benefit row, left of the collage. */
.hero .heroq {
  position: absolute;
  left: 57px;
  top: 652px;
  width: 660px;
  margin: 0;
  padding: 0;
}
.hero .heroq blockquote {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.35;
  color: #10251f;
  font-style: italic;
  max-width: none;
  white-space: nowrap;
}
.hero .heroq figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.3;
  color: #636b77;
}
.hero .heroq figcaption img { height: 20px; width: auto; flex: none; }
.hero .heroq figcaption b { display: block; color: #10251f; font-weight: 600; }
@media (max-width: 820px) {
  .hero .heroq { position: static; width: auto; margin: 22px 0 0; }
  .hero .heroq blockquote { font-size: 16px; }
}

/* The operating-model quiz and Common questions each carry a full section's padding, which put
   about 100px of empty page between the end of one and the heading of the other. Scoped to
   this pair so every other section keeps its normal rhythm. */
@media (min-width: 820px) {
  section:has(> .faq-cols) { padding-top: 20px; }
  section:has(+ section > .faq-cols) { padding-bottom: 28px; }
}

/* "Or start with a service" and its button belong on one line: the button is the heading's
   call to action, not a separate step below it. */
.headrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.headrow h2 { margin: 0; }
@media (max-width: 700px) {
  .headrow { justify-content: flex-start; }
}

/* Newsletter signup hidden at marketing's request until the HubSpot form behind it exists.
   Without it the embed renders its "this form is being set up" placeholder, naming an internal
   Webflow form. Hidden rather than deleted: the block lives in the footer component, which is
   developer-owned because it renders HubSpotForm, and this is one line to undo. The footer
   drops from five columns to four. */
footer .nl { display: none; }
@media (min-width: 1101px) {
  footer .in { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* Short-let page: ten business types read as a three-column grid rather than a long pair of
   columns, and the seven turnover steps run across instead of down a 1,200px list. */
.whyc.whyc-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .whyc.whyc-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .whyc.whyc-3 { grid-template-columns: 1fr; } }

.tl.tl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 28px;
}
.tl.tl-grid > div { border-top: 1px solid #E1DDD2; padding: 18px 0 0; }
@media (max-width: 1000px) { .tl.tl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .tl.tl-grid { grid-template-columns: 1fr; gap: 0; }
  .tl.tl-grid > div { padding: 20px 0; } }

/* Private House Group. Marketing supplied a dark version, so the earlier brightness filter is
   gone. It is a stacked lockup, illustration over two lines of type, so it runs taller than
   the wordmarks beside it. */
.track .lgo[src$="private-house-group.png"] { height: 74px; max-width: 250px; }

/* Each lifecycle stage now names the service that does the work, so the services the page
   used to list separately are attached to the stage they belong to. */
.lc .lc-svc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #0B3629;
  text-decoration: none;
}
.lc .lc-svc svg { width: 13px; }
.lc .lc-svc:hover { text-decoration: underline; }
/* The service icon beside each lifecycle stage's link, matching the icons used on the
   services pages so the same service reads the same way wherever it appears. */
.lc .lc-svc .lc-ico {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "What goes wrong / what we do" cards. Both halves were grey paragraphs under tiny grey
   labels, so a reader had to actually read to find out which was the problem and which was
   the answer. Each half now carries a marker and an accent rule, and the answer is set in
   the darker text so the eye lands there rather than on the complaint. */
/* flex, not inline-flex: the label has to hold its own line, or the sentence runs straight
   on after it, which is what inline-flex did. */
.wrong p b {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.wrong p b::before {
  flex: none;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
}
.wrong .pr b::before { content: "●"; font-size: 8px; background: #E6EDE8; color: #4C7A66; }
.wrong .so b::before { content: "✓"; background: #DCEBE2; color: #0B3629; }
.wrong .pr,
.wrong .so {
  padding-left: 14px;
  border-left: 2px solid #E4E8E3;
}
.wrong .so { border-left-color: #B9D5C5; color: #253b33; font-weight: 450; }

/* A short arrow between the problem and the answer, so the pair reads as one leading to the
   other rather than as two separate notes. */
.wrong .pr { position: relative; margin-bottom: 20px; }
.wrong .pr::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -17px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #C9D8CF;
  transform: translateX(-4px);
}

/* The short-let business types as named chips. The search value and the reader's "that's me"
   both live in the names; the descriptions under them were padding on an already long page. */
.typechips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.typechips span {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #E6E2D9;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 500;
  color: #26332e;
}

/* Lifecycle cards: the stage number sat on its own line with the heading beneath it, which
   cost a row of height per card for no gain. Number and heading now share a line. */
.lc > div {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num title" ". body" ". link";
  column-gap: 12px;
  align-items: center;
}
.lc > div > i { grid-area: num; }
.lc > div > h3 { grid-area: title; margin: 0; }
.lc > div > p { grid-area: body; margin-top: 10px; }
.lc > div > .lc-svc { grid-area: link; }
@media (max-width: 600px) {
  .lc > div { grid-template-columns: auto 1fr; }
}

/* The short-let business chips are a short section; it does not need a full section's padding
   underneath it. */
section:has(> .typechips) { padding-bottom: 26px; }

/* Opago-mark bullets, the same device as the eligibility list on the housekeeping page.
   "Why choose Opago" was six bordered cards of prose on most solution pages, another heavy
   block straight after the goals. As a two-column list it says the same thing in roughly a
   third of the height. The mark comes from the logo variable masked to the element, so there
   is no separate asset and it cannot drift from the logo. */
.oplist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:17px 44px;margin:26px 0 0;padding:0}
.oplist li{display:flex;gap:13px;font-size:15px;line-height:1.55;color:#636b77}
.oplist li i{flex:none;width:17px;height:17px;margin-top:3px;background:var(--green,#0B3629);
  -webkit-mask:var(--logo) left center/auto 100% no-repeat;mask:var(--logo) left center/auto 100% no-repeat}
.oplist li b{display:block;color:#10251f;font-size:16px;font-weight:600;margin-bottom:3px}
/* The careers page leads on housekeeping, and what you get is the whole pitch, so those
   bullets carry more weight than a supporting list on a solution page. */
.oplist.big{gap:26px 48px;margin-top:30px}
.oplist.big li{font-size:16.5px;line-height:1.5}
.oplist.big li i{width:22px;height:22px;margin-top:4px}
.oplist.big li b{display:inline;font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
@media (max-width:860px){.oplist{grid-template-columns:1fr;gap:15px}}

/* Resources hub, laid out like the old /blog hub: a sticky row of section tabs over
   three-up cards with a picture on top. Case studies lead with the client's logo on a
   tinted panel rather than a stock interior, so the grid reads as a client list. Where
   we have no logo the card falls back to the case study's own image. */
.rcard-img{padding:0;overflow:hidden}
.rcard-img .cat{padding:18px 22px 0}
.rcard-img h3{padding:0 22px}
.rcard-img .more{padding:0 22px 20px}
.rcard-logo,.rcard-shot{display:block;aspect-ratio:16/9;overflow:hidden;background:#F1EFE8}
.rcard-logo{display:grid;place-items:center;background:#F3F1EA;padding:26px 34px}
.rcard-logo img{max-width:72%;max-height:62%;width:auto;height:auto;object-fit:contain}
.rcard-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* the tab row follows you down the page, as it does on the old hub */
.rf{position:sticky;top:64px;z-index:40;background:var(--bg);
  padding:12px 0;margin-top:22px;border-bottom:1px solid #E7E3D9}

/* each section titled and ruled, so the tabs land somewhere obvious */
.rsec h2{padding-bottom:12px;border-bottom:2px solid #10251f;display:inline-block}
@media (max-width:820px){.rf{position:static}}

.rsee{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:15px;
  font-weight:600;color:var(--green);background:#fff;border:1.5px solid var(--green);
  border-radius:999px;padding:13px 24px;transition:background .15s,color .15s}
.rsee svg{width:14px}
.rsee:hover{background:var(--green);color:#fff}

/* On the "All" tab each section is a shop window, so the blog rows read as three compact cards
   across rather than a single stacked column. On the Blogs tab the full list stays a list. */
/* only one group survives the preview, so it gets the full width rather than half of it */
.rsec.preview .rgrps{grid-template-columns:1fr}
.rsec.preview .rrows{grid-template-columns:repeat(3,1fr);gap:14px}
.rsec.preview .rrow2{align-content:start;padding:18px 20px;min-height:108px}
@media (max-width:1180px){.rsec.preview .rrows{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.rsec.preview .rrows{grid-template-columns:1fr}}

/* Case study detail. The body is a single measured column rather than the .post grid, which
   expects a sidebar. The client logo sits under the hero copy on the light background, so the
   dark logo variant is used as drawn and needs no inverting. */
.csbody{max-width:46em;margin:0 auto}
.csbody h2{margin-top:40px}
.csbody h2:first-child{margin-top:0}
.csbody strong{color:#10251f;font-weight:600}
.csbody blockquote{margin:28px 0;padding:22px 26px;background:#F1F6F0;border:1px solid #DCEBE2;
  border-left:3px solid var(--green);border-radius:14px}
.csbody blockquote p{font-size:17px;line-height:1.6;color:#15362c;margin:0 0 10px}
.csbody blockquote p:last-child{margin:0;font-size:15px;color:#4c5a55}
.cslogo{display:block;margin-top:30px;max-width:190px}
.cslogo img{width:100%;height:auto;max-height:58px;object-fit:contain;object-position:left center}
.csnext{max-width:420px;margin-top:20px}

/* Resource detail: the gated download sits under the hero copy, and the "what you will learn"
   cards carry the icon the Webflow grid used. The form itself is the untouched component. */
.rdl{margin-top:30px;max-width:30em}
.rdl-prompt{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--green);letter-spacing:-.01em}
.opago-resource-download__thanks{margin-top:14px;font-size:15px;font-weight:600;color:var(--green)}
.rlico{width:34px;height:34px;object-fit:contain;display:block;margin-bottom:14px}
.phero .lead p{margin:0 0 12px}
.phero .lead p:last-child{margin:0}
/* the publish date under a blog standfirst */
.phero .postmeta{margin:18px 0 0;font-size:13.5px;color:#8a918e;letter-spacing:.01em}

/* Seven services in a four-wide grid left a hole under the fourth card. The eighth cell is a
   route into the full services page rather than an empty square; tinted so it reads as a
   prompt and not an eighth service. */
.sc.sc-cta{background:#F1F6F0;border-color:#DCEBE2}
.sc.sc-cta h3{color:var(--green)}

/* The two featured case studies on the home page lead with the client's logo instead of the
   client's name. These are the dark logo-strip assets on a white card, so they need no
   inverting; the description stays underneath. */
/* .cslogo carries a 30px top margin for the big panel; inside these cards it pushed the logo
   53px down from the top edge, which is the gap above Cohabs and GuestReady */
.cslist .cslogo{display:block;height:30px;width:auto;max-width:170px;object-fit:contain;object-position:left center;margin-top:0}
.cslist a:has(.cslogo) small{margin-top:10px}

/* The platform card is double-width by default. On the English services page there are eight
   cards, so spanning two left commercial cleaning stranded on a row of its own; at single
   width the eight sit as two rows of four. The French page still has seven cards and keeps
   the wide card. */
.sc.dr.sc-half{grid-column:auto}

/* A resource whose client we have a logo for leads with the logo rather than a stock interior:
   same tinted panel as the cards, contained so the mark keeps its proportions. */
.pimg.pimg-logo{background:#F3F1EA;display:grid;place-items:center;padding:clamp(18px,2.4vw,34px);aspect-ratio:2.44}

/* The resource hero's right-hand column: the client logo at half its old height, with the three
   "what you will learn" cards directly under it. They used to sit in their own band below the
   article, which is the one thing that makes someone want the download and nobody scrolled to it. */
.phero .pcol{display:grid;gap:18px;align-content:start}
.phero .plearn .ey{margin-bottom:10px}
.phero .plearn .whyc{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:0}
.phero .plearn .whyc>div{padding:16px 14px;border-radius:12px}
.phero .plearn .whyc h3{font-size:14px;margin:0 0 6px;letter-spacing:-.01em}
.phero .plearn .whyc p{font-size:12.5px;line-height:1.45}
.phero .plearn .whyc .rlico{width:22px;height:22px;margin-bottom:8px}
@media (max-width:900px){.phero .plearn .whyc{grid-template-columns:1fr}}
.pimg.pimg-logo img{width:58%;height:auto;max-height:52%;object-fit:contain}

/* Tap targets on touch screens. WCAG 2.5.8 asks for 24x24 CSS px; the breadcrumb links were
   16px tall and the inline text CTAs 19-23px. The padding is applied with a matching negative
   margin so the targets grow without moving anything on the page. */
@media (max-width: 820px) {
  .crumb a,
  .pbody a:not(.btn),
  .faq a:not(.btn) {
    padding-block: 5px;
    margin-block: -5px;
    display: inline-block;
  }
  .more, .rsee, a.tel, .team a { min-height: 24px; }
}