@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--navy:#12253a;--teal:#79bac6;--muted:#65758a}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,a{ -webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #51a8c5;outline-offset:4px}.wrap{max-width:1440px;margin:auto;padding-left:clamp(24px,5vw,80px);padding-right:clamp(24px,5vw,80px)}.header{height:78px;display:flex;align-items:center;justify-content:space-between;background:white;position:sticky;top:0;z-index:20;border-bottom:1px solid #edf0f2}.wordmark{font:800 23px Manrope,sans-serif;letter-spacing:-1.2px}.wordmark span{font-weight:400}.wordmark b{color:#4da7c1}.nav{display:flex;gap:38px;align-items:center;font-size:13px;font-weight:700}.nav a:hover{color:#328ca8}.languages{display:flex;gap:13px;border-left:1px solid #dce1e5;padding-left:28px}.languages .active{color:#2a9db8}.languages a:not(.active){color:#8996a4}.hero{background:radial-gradient(ellipse at 85% 25%,#28445b 0%,transparent 48%),linear-gradient(125deg,#0b1729,#122c42);color:white;position:relative;overflow:hidden;padding-top:110px;padding-bottom:82px}.hero:after{content:'RG';position:absolute;right:-70px;bottom:-140px;font:800 430px Manrope,sans-serif;color:rgba(255,255,255,.025);pointer-events:none}.eyebrow{font-weight:800;font-size:11px;letter-spacing:.23em;color:#5ba8bd;text-transform:uppercase}.hero .eyebrow{color:#acd7e0}.hero h1{font:600 clamp(49px,6vw,86px)/1.1 Manrope,sans-serif;letter-spacing:-.065em;margin:32px 0 22px;position:relative;z-index:1}.hero h1 em,.section-heading em{font-style:normal;color:#89c4cd}.hero p{max-width:590px;font-size:17px;line-height:1.8;color:#c9d6e0}.primary{display:inline-flex;gap:54px;align-items:center;justify-content:space-between;background:#a6d4db;color:#123046;font-size:13px;font-weight:800;padding:19px 22px;margin-top:18px;border-radius:3px;transition:transform .2s}.primary:hover{transform:translateY(-3px)}.stats{display:flex;gap:65px;border-top:1px solid #ffffff30;max-width:720px;margin-top:80px;padding-top:28px}.stats div{display:flex;flex-direction:column;gap:6px}.stats strong{font:700 35px Manrope,sans-serif}.stats small{color:#b6c6d4;font-size:12px}.brands{padding-top:95px;padding-bottom:112px;scroll-margin-top:80px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:42px}.section-heading{font:600 clamp(40px,4.3vw,66px)/1.12 Manrope,sans-serif;letter-spacing:-.06em;margin:23px 0 0}.section-head>p{max-width:370px;color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 8px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{--color:#429dbb;--tint:#e8f4fa;position:relative;min-height:320px;border-radius:10px;overflow:hidden;display:flex;box-shadow:0 5px 26px #142b3810;background:linear-gradient(105deg,#fff 0%,#fff 58%,var(--tint) 100%);border:1px solid #e5eaec;transition:transform .2s,box-shadow .2s}.card:hover{transform:translateY(-5px);box-shadow:0 18px 35px #142b3820}.card:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--color);z-index:3}.card.exec{--color:#b18d59;--tint:#f6ecde}.card.life{--color:#5ba69c;--tint:#e7f4ef}.card.match{--color:#9275bd;--tint:#f1ebf8}.card-content{padding:27px 0 28px 33px;display:flex;flex-direction:column;align-items:flex-start;position:relative;z-index:2;width:72%}.category{font-size:11px;letter-spacing:.16em;font-weight:800;color:var(--color);margin-bottom:25px}.brand-logo{width:auto;max-width:300px;max-height:76px;object-fit:contain;object-position:left center;display:block}.exec .brand-logo,.life .brand-logo{max-height:81px}.match .brand-logo{max-height:80px;max-width:275px}.card-content p{font-size:15px;color:#627086;line-height:1.65;max-width:345px;margin:23px 0 20px}.cta{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:#fff;border:1px solid #e7ebef;box-shadow:0 3px 14px #182c3c13;border-radius:30px;padding:13px 19px;min-width:218px;font-size:12px;font-weight:800}.cta span{font-size:20px;line-height:12px}.photo{position:absolute;right:0;top:0;bottom:0;width:41%;background-size:cover;background-position:center;clip-path:ellipse(92% 82% at 100% 50%)}.photo:after{content:'';position:absolute;inset:0;background:var(--color);opacity:.1}.it .photo{background-image:url('it-laptop-v10.jpg')}.exec .photo{background-image:url('exec-photo.jpg')}.life .photo{background-image:url('life-photo.jpg')}.match .photo{background-image:url('match-photo.jpg')}.about{background:#edf4f5;padding-top:95px;padding-bottom:95px;scroll-margin-top:80px}.about-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:70px}.about p{color:#526779;font-size:16px;line-height:1.85;margin:0 0 19px}.contact{background:linear-gradient(120deg,#0b182a,#163349);color:#fff;padding-top:95px;padding-bottom:95px;scroll-margin-top:80px}.contact .section-heading{margin-bottom:22px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px}.contact p{color:#c0d0dc;line-height:1.8;max-width:520px}.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:25px;border-top:1px solid #ffffff30;padding-top:30px}.contact-details div{display:flex;flex-direction:column;gap:10px}.contact-details small{font-size:11px;font-weight:800;letter-spacing:.12em;color:#a2d4db}.contact-details a,.contact-details span{font-size:14px;line-height:1.7;color:#fff}.footer{background:#071321;color:#a8b9c7;padding-top:30px;padding-bottom:25px;font-size:12px}.footer-top{display:flex;justify-content:space-between;gap:20px;align-items:center}.footer .wordmark{color:#fff;font-size:19px}.footer-bottom{border-top:1px solid #ffffff20;margin-top:28px;padding-top:20px;display:flex;justify-content:space-between;gap:20px}.footer a:hover{color:#fff}@media(max-width:900px){.card-content{width:80%}.brand-logo{max-width:230px}.match .brand-logo{max-width:220px}.photo{width:35%;opacity:.85}.section-head{align-items:start;flex-direction:column;gap:20px}.about-inner,.contact-grid{gap:30px}}@media(max-width:690px){.header{height:70px}.nav{gap:12px}.nav>a{display:none}.languages{padding-left:12px}.hero{padding-top:75px;padding-bottom:65px}.hero h1{font-size:clamp(42px,9vw,62px)}.stats{gap:25px;flex-wrap:wrap;margin-top:55px}.stats strong{font-size:27px}.brands,.about,.contact{padding-top:70px;padding-bottom:70px}.grid,.about-inner,.contact-grid{grid-template-columns:1fr}.card{min-height:300px}.card-content{width:79%;padding-left:23px}.photo{width:38%}.brand-logo{max-width:235px;max-height:70px}.contact-details{grid-template-columns:1fr 1fr}.footer-top,.footer-bottom{flex-direction:column;align-items:flex-start}}@media(max-width:380px){.photo{opacity:.35}.card-content{width:95%}.contact-details{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* V8: consistent visible Q diameter (70px), rather than equal image file dimensions */
.it .brand-logo,.exec .brand-logo,.life .brand-logo{width:auto;height:94px;max-height:none;max-width:min(100%,330px);object-fit:contain;object-position:left center;}
.match .brand-logo{height:94px;max-height:94px;width:auto;max-width:min(100%,275px);object-fit:contain;object-position:left center;}
@media(max-width:690px){.it .brand-logo,.exec .brand-logo,.life .brand-logo,.match .brand-logo{height:78px;max-height:78px;max-width:min(100%,275px)}}

/* v11: keep pipette tip in the curved Life Science photo */
.life .photo{background-position:50% 5%;}
/* Compact footer: contact details already appear above */
.footer{padding-top:20px;padding-bottom:20px}
.footer-top{display:none}
.footer-bottom{border-top:0;margin-top:0;padding-top:0}

/* v12: executive image framed wider without changing the other cards */
.exec .photo{background-image:url('exec-photo-v12.jpg');background-position:center center}

/* v13: gentle branded tint across the entire left content area, not just the photo edge */
.card.it{background:linear-gradient(105deg,#f0f8fb 0%,#f5fafc 58%,#e7f3f9 100%)}
.card.exec{background:linear-gradient(105deg,#fbf7f1 0%,#fcfaf7 58%,#f3e8d8 100%)}
.card.life{background:linear-gradient(105deg,#eff8f5 0%,#f6fbf9 58%,#e3f2ed 100%)}
.card.match{background:linear-gradient(105deg,#f7f4fb 0%,#fcfaff 58%,#eee8f7 100%)}
/* v13: droplet sits on right, fully inside curved photo mask */
.life .photo{background-image:url('life-photo-v13.jpg');background-position:55% 37%}
/* Executive: wider context, retaining the v12 zoomed-out photo */
.exec .photo{background-image:url('exec-photo-v12.jpg');background-position:50% 50%}

/* v15: all three Recruit Q symbols normalized to 70px actual diameter */
.it .brand-logo,.exec .brand-logo,.life .brand-logo{height:94px;max-height:94px;width:auto;max-width:100%;object-fit:contain;object-position:left center;}

/* v16: normalize visible Q mark to 70 CSS px and align its upper edge. */
.it .brand-logo,.exec .brand-logo,.life .brand-logo{height:94px!important;max-height:94px!important;width:auto!important;max-width:none!important;object-fit:contain;object-position:left center;}
/* GoMatch is a distinct wordmark; reduce visual size by 20% while keeping same row height. */
.match .brand-logo{height:75px!important;max-height:75px!important;width:auto!important;max-width:230px!important;margin-top:9px;margin-bottom:10px;object-fit:contain;object-position:left center;}
@media(max-width:690px){.it .brand-logo,.exec .brand-logo,.life .brand-logo{height:94px!important;max-height:94px!important;max-width:100%!important;} .match .brand-logo{height:75px!important;max-height:75px!important;max-width:210px!important;}}

/* v17: true vector Recruit IT logo and three-office contact layout */
.it .brand-logo{height:76px!important;max-height:76px!important;max-width:min(100%,340px)!important;width:auto!important;object-fit:contain!important}
.contact-details{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
@media(max-width:380px){.contact-details{grid-template-columns:1fr}}

/* v18: single genuine Illustrator Q shape recolored per brand, with crisp HTML text */
.brand-lockup{display:flex;align-items:center;gap:12px;min-height:82px;max-width:100%;white-space:nowrap}
.brand-ring{width:78px;height:78px;flex:0 0 78px;object-fit:contain}
.brand-name{font-family:'Open Sans','DM Sans',Arial,sans-serif;font-size:clamp(21px,2.05vw,31px);font-weight:700;letter-spacing:-.055em;line-height:1.1;color:#172b3b}
.life .brand-name{font-size:clamp(19px,1.9vw,28px)}
@media(max-width:900px){.brand-ring{width:67px;height:67px;flex-basis:67px}.brand-lockup{gap:9px}.brand-name{font-size:clamp(19px,2.25vw,27px)}.life .brand-name{font-size:clamp(17px,2vw,24px)}}
@media(max-width:690px){.brand-ring{width:72px;height:72px;flex-basis:72px}.brand-name{font-size:clamp(21px,5.4vw,30px)}.life .brand-name{font-size:clamp(19px,4.8vw,27px)}}
@media(max-width:390px){.brand-ring{width:60px;height:60px;flex-basis:60px}.brand-lockup{gap:8px}.brand-name{font-size:20px}.life .brand-name{font-size:18px}}

/* v19: Recruit IT uses green, Life Science blue; Executive remains gold. */
.card.it{--color:#5ba69c;--tint:#e7f4ef;background:linear-gradient(105deg,#eff8f5 0%,#f6fbf9 58%,#e3f2ed 100%)}
.card.life{--color:#429dbb;--tint:#e8f4fa;background:linear-gradient(105deg,#f0f8fb 0%,#f5fafc 58%,#e7f3f9 100%)}
/* Reduce image crop: show more of the full boardroom and pipette compositions. */
.card.exec .photo{background-color:#b4b3b2;background-size:85% auto;background-position:center 49%;background-repeat:no-repeat}
.card.life .photo{background-color:#86b6b2;background-size:85% auto;background-position:center 44%;background-repeat:no-repeat}

/* v20: Recruit IT original deep green from supplied Q artwork */
.card.it{--color:#214352}

/* v21: two-tier logo lockup for Executive and Life Science (IT remains as supplied). */
.exec .brand-lockup,.life .brand-lockup{gap:14px;min-height:92px}
.exec .brand-ring,.life .brand-ring{width:83px;height:83px;flex-basis:83px}
.exec .brand-name-stacked,.life .brand-name-stacked{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;white-space:nowrap;letter-spacing:-.045em;line-height:1.04;font-size:25px;font-weight:650}
.exec .brand-name-stacked strong,.life .brand-name-stacked strong{font-weight:800;font-size:31px;line-height:1.04}
.exec .brand-name-stacked span,.life .brand-name-stacked span{font-weight:650;font-size:23px;line-height:1.12}
.life .brand-name-stacked span{font-size:22px}
@media(max-width:1100px){.exec .brand-ring,.life .brand-ring{width:70px;height:70px;flex-basis:70px}.exec .brand-lockup,.life .brand-lockup{gap:10px}.exec .brand-name-stacked strong,.life .brand-name-stacked strong{font-size:26px}.exec .brand-name-stacked span,.life .brand-name-stacked span{font-size:20px}}
@media(max-width:690px){.exec .brand-ring,.life .brand-ring{width:75px;height:75px;flex-basis:75px}.exec .brand-name-stacked strong,.life .brand-name-stacked strong{font-size:29px}.exec .brand-name-stacked span,.life .brand-name-stacked span{font-size:22px}}
@media(max-width:390px){.exec .brand-ring,.life .brand-ring{width:63px;height:63px;flex-basis:63px}.exec .brand-name-stacked strong,.life .brand-name-stacked strong{font-size:25px}.exec .brand-name-stacked span,.life .brand-name-stacked span{font-size:19px}}

/* v24: fixed full-bleed imagery; baked-in image borders removed at source.
   Single seamless photo asset per brand, no background-size:85% gutters. */
.card.exec .photo,.card.life .photo{background-size:cover;background-repeat:no-repeat;background-position:center center}
.card.exec .photo{background-image:url('exec-photo-v24.jpg')}
.card.life .photo{background-image:url('life-photo-v24.jpg')}
@media(max-width:900px){.card.exec .photo,.card.life .photo{background-size:cover;background-position:center center}}

/* v25: use only the sharp photographic centre, excluding blurred artificial side extensions. Keep the curved mask. */
.card.exec .photo{background-image:url('exec-photo-v25.jpg');background-position:53% 49%;background-size:cover}
.card.life .photo{background-image:url('life-photo-v25.jpg');background-position:57% 47%;background-size:cover}

/* v26: Use genuine unextended source photos. Preserve original elliptical masking.
   Override all earlier experimental background-size and image rules. */
.card.exec .photo { background-image:url('exec-photo-original-v26.jpg');background-size:cover;background-position:50% 48%;background-color:transparent; }
.card.life .photo { background-image:url('life-photo-wide-v26.jpg');background-size:cover;background-position:66% 50%;background-color:transparent; }
.card.exec .photo::after,.card.life .photo::after { opacity:.06; }
@media(max-width:900px){.card.exec .photo{background-position:50% 48%}.card.life .photo{background-position:66% 50%}}

/* v27: Executive photo: remove baked-in blurred padding from source, preserve curved mask. */
.card.exec .photo{background-image:url('exec-photo-clean-v27.jpg');background-size:cover;background-position:50% 48%;}

/* v28: unified Q-ring dimensions across IT, Executive and Life Science */
.card.it .brand-ring,.card.exec .brand-ring,.card.life .brand-ring{width:75px;height:75px;flex:0 0 75px}
@media(max-width:900px){.card.it .brand-ring,.card.exec .brand-ring,.card.life .brand-ring{width:67px;height:67px;flex-basis:67px}}
@media(max-width:690px){.card.it .brand-ring,.card.exec .brand-ring,.card.life .brand-ring{width:72px;height:72px;flex-basis:72px}}
@media(max-width:390px){.card.it .brand-ring,.card.exec .brand-ring,.card.life .brand-ring{width:60px;height:60px;flex-basis:60px}}

/* v29: shared vertical grid for all four brand cards. Keep image masks and logos unchanged. */
.card .category{margin-bottom:25px}
.card .brand-lockup{height:92px;min-height:92px;flex:0 0 92px;align-items:center}
.card .brand-lockup .brand-ring{align-self:center}
.card .card-content>p{margin-top:23px}
/* GoMatch uses a separate artwork; reserve the same 92px logo row. */
.card.match .brand-logo{height:75px!important;max-height:75px!important;margin-top:8px!important;margin-bottom:9px!important;flex:0 0 75px}
@media(max-width:690px){.card .brand-lockup{height:92px;min-height:92px;flex-basis:92px}}
