:root { --blue: #075e8b; --blue-dark: #063c5a; --blue-deep: #082c43; --cyan: #1babc1; --green: #57bf8a; --sky: #eaf7fb; --mint: #eef9f4; --ink: #173246; --muted: #617786; --line: #d7e6eb; --white: #fff; --soft: #f7fafb; --sans: Inter, Arial, sans-serif; --heading: "Plus Jakarta Sans", Inter, Arial, sans-serif; --shadow: 0 16px 38px rgba(12, 73, 99, .11) }
* { box-sizing: border-box } html { scroll-behavior: smooth; scroll-padding-top: 84px } body { margin: 0; color: var(--ink); background: var(--white); font: 16px/1.65 var(--sans) } h1,h2,h3,p { margin-top: 0 } h1,h2,h3 { font-family: var(--heading); line-height: 1.14; letter-spacing: -.04em } a { color: inherit; text-decoration: none }.container { width: min(1140px, calc(100% - 48px)); margin: auto }.skip-link { position: fixed; top: -100px; left: 16px; z-index: 50; padding: 10px 15px; color: var(--white); background: var(--blue); font-weight: 700 }.skip-link:focus { top: 16px }
.utility-bar { background: var(--blue-deep); color: #c6e7f1; font-size: 11px }.utility-inner { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 20px }.utility-inner b { margin-right: 6px; color: var(--green) }.utility-inner div { display: flex; gap: 20px }.utility-inner a:hover { color: #fff }
.site-header { height: 78px; position: sticky; top: 0; z-index: 20; display: flex; align-items: center; background: rgba(255,255,255,.95); border-bottom: 1px solid transparent; transition: .2s }.site-header.scrolled { border-color: var(--line); box-shadow: 0 3px 17px rgba(12,73,99,.06) }.nav { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 25px }.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-dark); font: 800 18px/.92 var(--heading); letter-spacing: .05em }.brand small { display: block; margin-top: 4px; color: var(--cyan); font: 700 9px/1 var(--sans); letter-spacing: .25em }.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue)); font-size: 21px; box-shadow: 0 5px 11px rgba(7,94,139,.22) }nav { display: flex; align-items: center; gap: clamp(15px, 2.4vw, 29px); color: #4b6572; font-size: 13px; font-weight: 600 }nav>a { transition: color .2s }nav>a:hover,nav>a.active { color: var(--blue) }.nav-cta { padding: 10px 15px; border-radius: 7px; color: #fff; background: var(--blue); box-shadow: 0 5px 12px rgba(7,94,139,.18) }.nav-cta:hover { color: #fff; background: var(--cyan) }.nav-cta span { margin-right: 5px; color: #baf2f8 }.nav-toggle { display: none; padding: 8px; border: 0; background: transparent }.nav-toggle span { display: block; width: 23px; height: 2px; margin: 5px; background: var(--blue-dark) }
.hero { min-height: 550px; position: relative; overflow: hidden; background: var(--sky) }.hero-photo { position: absolute; inset: 0; z-index: 0 }.hero-photo::after { position: absolute; content: ""; inset: 0; background: linear-gradient(90deg,#effaff 0%,rgba(239,250,255,.98) 36%,rgba(239,250,255,.82) 49%,rgba(239,250,255,.18) 69%,rgba(239,250,255,.02) 100%) }.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center }.hero-content { position: relative; z-index: 1; min-height: 550px; display: flex; flex-direction: column; justify-content: center }.hero-copy { max-width: 650px; padding: 68px 0 28px }.eyebrow { margin-bottom: 14px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase }.eyebrow i { width: 21px; height: 21px; margin-right: 7px; display: inline-grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 11px; font-style: normal }h1 { margin-bottom: 21px; color: var(--blue-deep); font-size: clamp(43px, 5.1vw, 70px) }h1 em,h2 em { color: var(--blue); font-style: normal }.lead { max-width: 555px; margin-bottom: 30px; color: #4d6978; font-size: 17px; line-height: 1.7 }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }.button { min-height: 47px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 19px; border: 1px solid transparent; border-radius: 7px; font: 700 13px var(--heading); cursor: pointer; transition: transform .2s, background .2s }.button:hover { transform: translateY(-2px) }.button-primary { color: #fff; background: var(--blue); box-shadow: 0 7px 14px rgba(7,94,139,.2) }.button-primary:hover { background: var(--cyan) }.button-primary span { font-size: 17px }.button-light { border-color: #a8cbd8; color: var(--blue); background: #fff }.button-light:hover { border-color: var(--blue); background: var(--sky) }.button-outline { border-color: #b6d3dc; color: var(--blue); background: #fff }.hero-card { max-width: 270px; margin: 15px 0 0 360px; display: flex; gap: 12px; padding: 14px; border-left: 4px solid var(--green); border-radius: 6px; background: rgba(255,255,255,.93); box-shadow: var(--shadow) }.hero-card-icon { width: 33px; height: 33px; flex: 0 0 33px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-weight: 800 }.hero-card strong { color: var(--blue-dark); font-size: 12px }.hero-card p { margin: 3px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45 }
.quick-services { position: relative; z-index: 2; color: #e9f8fb; background: var(--blue-dark) }.quick-grid { min-height: 95px; display: grid; grid-template-columns: repeat(3, 1fr) 180px; align-items: stretch }.quick-grid>div { display: flex; align-items: center; gap: 11px; padding: 19px 22px; border-right: 1px solid rgba(203,236,245,.18) }.quick-grid span { color: var(--green); font-size: 11px; font-weight: 700 }.quick-grid p { margin: 0; font-size: 12px; line-height: 1.45 }.quick-grid b { display: block; color: #fff; font-size: 13px }.quick-grid a { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--cyan); font-size: 13px; font-weight: 700 }.quick-grid a b { color: #fff; font-size: 18px }
.section { padding: 104px 0 }.about-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: 90px; align-items: center }.about-visual { min-height: 391px; position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg,#daeff5,#bde6e3) }.about-pattern { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(#6ebec7 1px,transparent 1px); background-size: 18px 18px }.about-visual::before { position: absolute; content: ""; width: 330px; height: 330px; left: -117px; bottom: -147px; border: 33px solid rgba(255,255,255,.7); border-radius: 50% }.about-cross { position: absolute; top: 57px; left: 58px; color: #fff; font: 800 140px/1 var(--heading); text-shadow: 0 15px 18px rgba(6,95,130,.16) }.about-mini-card { position: absolute; right: 25px; bottom: 25px; display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-radius: 10px; color: var(--blue-dark); background: #fff; box-shadow: var(--shadow); font-size: 13px; line-height: 1.3 }.about-mini-card span { color: var(--green); font-size: 20px }.about-copy h2,.section-heading h2,.contact h2 { margin-bottom: 21px; font-size: clamp(31px,3.7vw,49px) }.about-copy>p:not(.eyebrow) { max-width: 565px; color: var(--muted); font-size: 16px }.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 23px; margin: 27px 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700 }.check-list li::before { content: "✓"; margin-right: 8px; color: var(--green); font-size: 16px }.text-link { display: inline-flex; gap: 8px; padding-bottom: 4px; border-bottom: 2px solid var(--blue); color: var(--blue); font-size: 13px; font-weight: 800 }.text-link span { font-size: 16px }
.services { background: var(--soft) }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 50px; margin-bottom: 42px }.section-heading h2 { margin: 0 }.section-heading>p { max-width: 390px; margin: 0 0 5px; color: var(--muted); font-size: 14px }.service-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 17px }.service-card { min-height: 280px; padding: 26px 22px; position: relative; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 5px 14px rgba(12,73,99,.03); cursor: pointer; transition: transform .2s,box-shadow .2s }.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow) }.service-card:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px }.service-icon { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--sky); font: 700 22px var(--heading) }.service-card:nth-child(2) .service-icon { color: #1a9c77; background: var(--mint) }.service-card:nth-child(3) .service-icon { color: #527dc1; background: #eff4ff }.service-card:nth-child(4) .service-icon { color: #2794a6; background: #e6f6f8 }.service-card h3 { margin: 24px 0 10px; color: var(--blue-dark); font-size: 18px }.service-card p { min-height: 63px; margin-bottom: 15px; color: var(--muted); font-size: 13px; line-height: 1.6 }.service-link { color: var(--blue); font-size: 12px; font-weight: 800 }.service-link span { margin-left: 4px; color: var(--cyan); font-size: 16px }
.care-points { padding-bottom: 110px }.section-heading.center { display: block; max-width: 690px; margin: auto auto 44px; text-align: center }.section-heading.center>p { margin: 14px auto 0 }.care-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px }.care-grid article { min-height: 241px; padding: 28px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff }.care-grid article:nth-child(2) { background: var(--sky) }.care-grid article:nth-child(3) { background: var(--mint) }.care-number { position: absolute; right: 18px; top: 17px; color: #b8cbd3; font-size: 11px; font-weight: 800 }.care-icon { width: 47px; height: 47px; margin-bottom: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--blue); font-size: 21px }.care-grid article:nth-child(2) .care-icon { background: var(--cyan) }.care-grid article:nth-child(3) .care-icon { background: var(--green) }.care-grid h3 { margin-bottom: 9px; color: var(--blue-dark); font-size: 19px }.care-grid p { max-width: 266px; margin-bottom: 0; color: var(--muted); font-size: 13px }
.team { padding: 100px 0; color: #fff; background: linear-gradient(120deg,var(--blue-deep),var(--blue-dark)) }.team-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center }.eyebrow.light { color: #9de7ed }.eyebrow.light i { color: var(--blue-dark); background: #a8ebbe }.team h2 { margin-bottom: 20px; font-size: clamp(32px,3.8vw,50px) }.team h2 em { color: #84d8e2 }.team-copy>p:not(.eyebrow) { max-width: 420px; margin-bottom: 28px; color: #c0dbe5; font-size: 15px }.team-copy .button-light { border-color: #7db3c7; color: #fff; background: transparent }.team-copy .button-light:hover { background: #ffffff18 }.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }.team-card { min-height: 200px; padding: 20px; border: 1px solid #ffffff2b; border-radius: 12px; background: #ffffff0c }.portrait { width: 69px; height: 69px; margin-bottom: 21px; display: grid; place-items: center; border: 3px solid #ffffff60; border-radius: 50%; color: #fff; font: 800 18px var(--heading) }.portrait-one { background: #2487a3 }.portrait-two { background: #48977b }.portrait-three { background: #6b77aa }.portrait-four { background: #b6707d }.team-card h3 { margin-bottom: 5px; font-size: 15px }.team-card small { color: #9de7ed; font-size: 11px; font-weight: 600 }
.contact { padding: 100px 0; background: var(--sky) }.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 100px; align-items: center }.contact-copy>p:not(.eyebrow) { max-width: 530px; color: var(--muted) }.contact-links { display: grid; gap: 14px; margin-top: 31px }.contact-links>a { display: flex; align-items: center; gap: 12px; font-size: 13px }.contact-links>a>span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--blue); background: #d9eef4; font-size: 17px }.contact-links small,.contact-links b { display: block }.contact-links small { color: var(--cyan); font-size: 10px; font-weight: 800; text-transform: uppercase }.contact-links b { color: var(--blue-dark); line-height: 1.45 }.enquiry-card { padding: 31px; border-radius: 13px; background: #fff; box-shadow: var(--shadow) }.enquiry-card>p { margin-bottom: 5px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase }.enquiry-card h3 { margin-bottom: 22px; color: var(--blue-dark); font-size: 26px }.enquiry-card label { display: block; margin-bottom: 14px; color: var(--blue-dark); font-size: 12px; font-weight: 700 }.enquiry-card input,.enquiry-card textarea { width: 100%; margin-top: 5px; padding: 11px; border: 1px solid #d6e5e9; border-radius: 7px; outline-color: var(--cyan); font: 13px var(--sans); resize: vertical }.enquiry-card textarea { height: 78px }.form-note { display: block; margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.5 }
footer { padding: 29px 0 18px; color: #b8d2dc; background: var(--blue-deep); font-size: 12px }.footer-main,.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px }.brand-footer { color: #fff }.footer-main p { margin: 0 }.footer-main>a:last-child { color: #9de7ed; font-weight: 700 }.footer-bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid #ffffff20; color: #8cb0bd; font-size: 10px }
.service-dialog { width: min(610px,calc(100% - 30px)); max-height: calc(100vh - 38px); padding: 0; overflow: auto; border: 0; border-radius: 16px; color: var(--ink); box-shadow: 0 30px 80px rgba(2,44,62,.38) }.service-dialog::backdrop { background: rgba(4,40,57,.7); backdrop-filter: blur(3px) }.dialog-content { position: relative; padding: 38px 42px 34px }.dialog-close { width: 36px; height: 36px; position: absolute; top: 15px; right: 15px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; font-size: 24px; cursor: pointer }.dialog-close:hover { color: #fff; background: var(--blue) }.dialog-icon { margin-bottom: 17px }.dialog-label { margin: 0 0 5px; color: var(--cyan); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase }.service-dialog h2 { margin: 0 45px 13px 0; color: var(--blue-dark); font-size: 34px }.service-dialog h3 { margin: 26px 0 9px; font-size: 15px }#service-dialog-description { color: var(--muted); line-height: 1.65 }#service-dialog-items { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 19px; margin: 0; padding: 0; list-style: none }#service-dialog-items li { position: relative; padding-left: 19px; font-size: 13px; font-weight: 600 }#service-dialog-items li::before { position: absolute; left: 0; content: "✓"; color: var(--green); font-weight: 800 }.dialog-note { margin: 22px 0 0; padding: 12px 14px; border-radius: 7px; color: var(--muted); background: var(--sky); font-size: 11px; line-height: 1.55 }.dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px }.dialog-direction { margin-left: auto; color: var(--blue); font-size: 12px; font-weight: 800 }body.dialog-open { overflow: hidden }
@media(max-width:900px) { .hero { min-height: 510px }.hero-content { min-height: 510px }.hero-card { margin-left: 250px }.quick-grid { grid-template-columns: repeat(3,1fr) }.quick-grid>div:last-child { grid-column: span 3; min-height: 58px; padding: 0; border: 0 }.about-grid,.team-wrap { gap: 50px }.service-grid { grid-template-columns: repeat(2,1fr) }.care-grid { gap: 12px }.contact-grid { gap: 55px } }
@media(max-width:720px) { html { scroll-padding-top: 69px }.container { width: min(100% - 34px,1140px) }.utility-inner { min-height: 31px; justify-content: center }.utility-inner div { display: none }.site-header { height: 67px }.nav { position: relative }.nav-toggle { display: block }nav { position: absolute; top: 57px; right: 0; left: 0; display: none; padding: 14px 17px; border: 1px solid var(--line); border-radius: 0 0 11px 11px; background: #fff; box-shadow: var(--shadow); align-items: stretch; gap: 7px }nav.open { display: flex; flex-direction: column }nav>a { padding: 7px 0 }.nav-cta { margin-top: 5px; text-align: center }.hero { min-height: auto; background: var(--sky) }.hero-photo { position: relative; height: 320px }.hero-photo::after { background: linear-gradient(180deg,rgba(234,247,251,0) 70%,var(--sky) 100%) }.hero-photo img { object-position: right center }.hero-content { min-height: 0; display: block }.hero-copy { padding: 25px 0 30px; margin-top: 0; position: relative; min-height: auto }.hero-copy h1 { max-width: 500px }.lead { max-width: 510px }.hero-card { margin: 0 0 31px 0; max-width: 370px }.quick-grid { grid-template-columns: 1fr 1fr }.quick-grid>div { min-height: 83px; padding: 14px; border-bottom: 1px solid rgba(203,236,245,.18) }.quick-grid>div:nth-child(2) { border-right: 0 }.quick-grid>div:nth-child(3),.quick-grid>div:last-child { grid-column: span 2 }.quick-grid>div:last-child { min-height: 54px }.section { padding: 74px 0 }.about-grid,.team-wrap,.contact-grid { grid-template-columns: 1fr }.about-grid { gap: 41px }.about-visual { min-height: 300px }.about-cross { top: 40px; left: 39px; font-size: 112px }.section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 31px }.section-heading>p { max-width: 535px; margin: 0 }.care-points { padding-bottom: 75px }.care-grid { grid-template-columns: 1fr }.care-grid article { min-height: 203px }.team { padding: 75px 0 }.team-wrap { gap: 40px }.contact { padding: 75px 0 }.contact-grid { gap: 48px }.enquiry-card { max-width: 570px }.footer-main,.footer-bottom { align-items: flex-start; flex-direction: column; gap: 13px } }
@media(max-width:480px) { .container { width: min(100% - 30px,1140px) }.brand { font-size: 16px }.brand-mark { width: 30px; height: 30px; font-size: 18px }.hero-photo { height: 320px }.hero-copy { min-height: auto; margin-top: 0; padding-top: 25px }h1 { font-size: 41px }.lead { font-size: 15px }.hero-actions { align-items: stretch; flex-direction: column; max-width: 270px }.hero-actions .button { width: 100% }.hero-card { margin-bottom: 25px }.quick-grid { grid-template-columns: 1fr }.quick-grid>div { gap: 7px; border-right: 0 }.quick-grid>div:nth-child(3),.quick-grid>div:last-child { grid-column: span 1 }.quick-grid p { font-size: 11px }.quick-grid b { font-size: 11px }.check-list,.service-grid { grid-template-columns: 1fr }.check-list { gap: 8px; margin: 24px 0 }.service-card { min-height: 232px }.service-card p { min-height: auto }.team-grid { grid-template-columns: 1fr }.team-card { min-height: 171px }.contact-links b { font-size: 12px }.enquiry-card { padding: 26px 22px }.dialog-content { padding: 31px 22px 26px }.service-dialog h2 { font-size: 27px }#service-dialog-items { grid-template-columns: 1fr }.dialog-actions { align-items: stretch; flex-direction: column }.dialog-actions .button { width: 100% }.dialog-direction { margin: 4px auto 0 } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto }.button,.service-card { transition: none } }

.team-copy-center { text-align: center; margin: 0 auto 40px; max-width: 600px; }
.team-copy-center p:not(.eyebrow) { color: #c0dbe5; font-size: 15px; margin: 0 auto; }
.team-grid-centered { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-action-centered { text-align: center; margin-top: 40px; }
.portrait-img { width: 100px; height: 100px; margin: 0 auto 21px; display: block; border: 3px solid #ffffff60; border-radius: 50%; object-fit: cover; }
.center-card { text-align: center; }

@media(max-width: 720px) {
  .team-grid-centered { grid-template-columns: 1fr; gap: 15px; }
}