@charset "UTF-8";
@font-face{font-family:Manrope;src:url("assets/fonts/manrope-variable.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}

:root {
  --ink:#10213a;
  --muted:#5a687b;
  --dark:#041a3c;
  --blue:#0863df;
  --line:#e2e8ef;
  --width:1100px;
  font-family:Manrope,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:#fff;
  font-synthesis:none;
  color-scheme:light;
  -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100svh;display:flex;flex-direction:column}
main{flex:1;min-width:0}
a{color:inherit;text-decoration:none}
a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid #0867ed;outline-offset:5px}
.hero a:focus-visible,.contact a:focus-visible,footer a:focus-visible{outline-color:#a8cbff}
main:focus{outline:none}
p{margin:0;font-size:1.0625rem;line-height:1.8}
h1,h2{margin:0;font-weight:650;line-height:1.2;letter-spacing:-.04em;text-wrap:balance}
h1{font-size:clamp(2.25rem,4.4vw,3.25rem)}
h2{font-size:clamp(1.875rem,3vw,2.5rem)}
svg{display:block}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.25rem;height:1.25rem;flex-shrink:0}
.container{width:min(var(--width),calc(100% - 80px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:20px;padding:16px;background:#fff;z-index:10}
.skip-link:focus{top:15px}

/* One quiet menu, with the same treatment for all four pages. */
.header{background:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:112px;gap:32px}
.brand{display:block;width:260px;height:60px;flex-shrink:0;overflow:hidden;position:relative}
.brand img{position:absolute;display:block;width:125%;max-width:none;height:auto;left:-12.5%;top:-115%;mix-blend-mode:multiply}
nav{display:flex;align-items:center;background:#f1f4f8;border-radius:14px;padding:5px;gap:3px}
nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:10px;color:#526078;font-size:.9375rem;font-weight:550;white-space:nowrap}
nav a:hover{color:var(--ink);background:#e6ecf4}
nav a[aria-current="page"]{background:#fff;color:#064fad;font-weight:700;box-shadow:0 2px 7px #1634580b}

/* Clear page hierarchy, generous spacing, softer surfaces. */
.section{padding:76px 0}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:16px 24px;max-width:100%;border:1px solid transparent;border-radius:12px;font-size:1rem;font-weight:650;line-height:1.5;transition:background .18s,border-color .18s}
.button-blue{background:var(--blue);color:#fff}
.button-blue:hover{background:#0755c0}
.button-light{background:#fff;color:#113d75}
.button-light:hover{background:#e4efff}
.button-outline{border-color:#617694;color:#edf4ff;background:transparent}
.button-outline:hover{background:#ffffff0c;border-color:#aec7e8}
.page-content{max-width:860px}
.page-heading{margin-bottom:44px}
.page-heading h1{max-width:760px}
.page-heading p{color:var(--muted);margin-top:20px;max-width:620px}

/* A single introduction instead of several competing text fragments. */
.home-page main{background:var(--dark)}
.hero{background:var(--dark);color:#fff;padding:88px 0 76px}
.hero-content{text-align:center;max-width:840px}
.hero h1{font-size:clamp(2.75rem,5.4vw,4.5rem);line-height:1.15;margin-bottom:28px}
.hero h1 span{color:#9ec5ff}
.hero p{max-width:620px;margin:0 auto;color:#c8d6e9;font-size:1.1875rem;line-height:1.85;text-wrap:pretty}
.home-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:620px;margin:34px auto 0}
.home-page .contact{padding-top:8px}

/* Grouped services are easier to scan than one long, undivided list. */
.services,.work{background:#f3f6fa}
.service-groups{display:grid;gap:26px}
.service-group{background:#fff;border:1px solid #e3e9f1;border-radius:20px;padding:28px 32px 12px}
.service-group h2{font-size:1.5rem;letter-spacing:-.025em;line-height:1.4;margin-bottom:16px}
.service-list{min-width:0}
details{border-top:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:21px 0;font-size:1rem;font-weight:550;line-height:1.6}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";display:grid;place-items:center;width:28px;height:28px;background:#f0f4fa;border-radius:50%;font-size:20px;color:#536780;line-height:1;flex-shrink:0;font-weight:400}
summary:hover,details[open] summary{color:#075acb}
details[open] summary::after{content:"−";color:#075acb;background:#e3edfc}
details p{color:var(--muted);padding:0 44px 22px 0;font-size:1rem}

/* Real work will replace this simple empty state. */
.work-empty{min-height:300px;border:1px solid #e3e9f1;border-radius:20px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:40px;text-align:center;color:var(--muted)}
.photo-icon{color:#4277bd;padding:18px;background:#f0f5fc;border-radius:50%}
.photo-icon svg{width:38px;height:38px}
.work-gallery:has(figure){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.work-gallery figure{margin:0}
.work-gallery figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.work-gallery figcaption{font-size:1rem;margin-top:14px;line-height:1.7}

/* A recognisable closing block, kept on the same dark blue background. */
.contact{background:var(--dark);color:#fff}
.contact-panel{display:grid;grid-template-columns:1.5fr 1fr;gap:64px;align-items:center;background:#0d284e;border:1px solid #ffffff0d;border-radius:24px;padding:48px}
.contact-copy h1,.contact-copy h2{max-width:520px;margin-bottom:20px}
.contact-copy p{max-width:440px;color:#c7d6eb;margin-bottom:28px}
.contact-info{border-left:1px solid #ffffff24;padding-left:40px}
.contact-info a{display:inline-flex;align-items:center;min-height:48px;font-size:1.5rem;line-height:1.4;font-weight:650;white-space:nowrap;letter-spacing:-.015em;color:#fff}
.contact-info a:hover{text-decoration:underline;text-underline-offset:5px}
.contact-info p{font-size:1rem;color:#c7d6eb;margin-top:18px}
.contact-page main{display:flex;background:var(--dark)}
.contact-page .contact{width:100%;display:flex;align-items:center;min-height:560px}
.contact-page .contact-panel{padding-block:64px}
.contact-page h1{font-size:clamp(2.25rem,4vw,3rem)}
footer{background:var(--dark);color:#aebfd7;font-size:.875rem}
.footer-inner{border-top:1px solid #ffffff1f;min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-inner a{display:inline-flex;align-items:center;min-height:44px}
.footer-inner a:hover{color:#fff}

@media(max-width:1000px){
  .container{width:calc(100% - 56px)}
  .brand{width:230px;height:53px}
  nav a{padding-inline:16px}
  .contact-panel{gap:36px;padding:36px}
  .contact-info{padding-left:28px}
}
@media(max-width:760px){
  .container{width:calc(100% - 40px)}
  .header-inner{display:block;min-height:0;padding:16px 0}
  .brand{width:230px;height:53px;margin:0 auto 16px}
  nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:4px;border-radius:12px}
  nav a{font-size:.875rem;min-height:44px;padding:10px 0;border-radius:9px}
  .section{padding:48px 0}
  .hero{padding:52px 0 48px}
  .hero h1{font-size:clamp(2.125rem,8.8vw,3.5rem);margin-bottom:24px}
  .hero p{font-size:1.0625rem;line-height:1.8}
  .home-tabs{margin-top:28px;gap:8px}
  .button{font-size:1rem;padding-inline:20px}
  .home-tabs .button{font-size:.875rem;padding:14px 6px;white-space:nowrap}
  .home-page .contact{padding-top:0}
  .page-heading{margin-bottom:30px}
  .page-heading h1{font-size:clamp(2rem,7.6vw,2.75rem)}
  .page-heading p{margin-top:16px}
  .service-groups{gap:20px}
  .service-group{padding:24px 22px 8px;border-radius:16px}
  .service-group h2{font-size:1.25rem}
  summary{padding-block:18px;gap:14px}
  details p{padding-right:0}
  .work-empty{min-height:250px;padding:28px;border-radius:16px}
  .work-empty br{display:none}
  .work-gallery:has(figure){grid-template-columns:1fr}
  .contact-panel{grid-template-columns:1fr;gap:32px;padding:30px 26px;border-radius:20px}
  .contact-copy h2{font-size:1.875rem}
  .contact-copy p{font-size:1rem;margin-bottom:24px}
  .contact-copy .button{width:100%}
  .contact-info{border-left:0;border-top:1px solid #ffffff24;padding:24px 0 0}
  .contact-info a{font-size:1.375rem}
  .contact-info p{margin-top:12px}
  .contact-info br{display:none}
  .contact-page .contact{min-height:0;align-items:start}
  .contact-page .contact-panel{padding-block:32px}
  .contact-page h1{font-size:2rem}
  .footer-inner{flex-direction:column;align-items:center;text-align:center;padding:24px 0 16px;gap:8px}
}
@media(max-width:360px){
  .container{width:calc(100% - 32px)}
  nav a{font-size:.8125rem}
  .contact-panel{padding-inline:22px}
  .contact-copy .button{font-size:.875rem;padding-inline:14px}
  .service-group{padding-inline:18px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}