:root{--navy:#152a42;--blue:#1767bd;--muted:#617186}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,sans-serif;color:var(--navy)}a{color:inherit;text-decoration:none}.container{max-width:1160px;margin:auto;padding:0 24px}header{background:#fff;position:sticky;top:0;z-index:10;border-bottom:1px solid #e5eaf0}.header{height:84px;display:flex;align-items:center;justify-content:space-between}.logo{width:150px}nav{display:flex;gap:26px;align-items:center;font-size:14px;font-weight:bold}.button{display:inline-block;padding:15px 22px;background:var(--blue);color:#fff;border-radius:10px;font-weight:bold;font-size:14px}.button.secondary{background:white;color:var(--navy);border:1px solid #c9d5e3}.menu{display:none}.hero{background:linear-gradient(120deg,#f0f6fd,#e4effc)}.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:45px;padding-top:75px;padding-bottom:75px}.kicker{color:var(--blue);font-weight:bold;font-size:12px;letter-spacing:2px}h1{font-size:clamp(40px,5vw,65px);line-height:1.1;letter-spacing:-2px;margin:20px 0}h1 span{color:var(--blue)}.hero p{font-size:18px;line-height:1.8;color:var(--muted)}.hero img{width:100%;height:380px;object-fit:cover;border-radius:24px;box-shadow:0 25px 50px #204b7526}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.tags{display:flex;gap:20px;flex-wrap:wrap;margin-top:35px;color:#536980;font-size:13px;font-weight:bold}.tags span:before{content:'✓ ';color:var(--blue)}section{padding:80px 0}h2{font-size:clamp(30px,3vw,42px);letter-spacing:-1px;margin:12px 0}.intro{color:var(--muted);line-height:1.7;margin-bottom:35px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid #e1e8ef;border-radius:18px;overflow:hidden;background:#fff}.card img{width:100%;height:190px;object-fit:cover;background:#f2f5f8}.card-text{padding:23px}.card h3{font-size:19px;margin:0 0 12px}.card p{color:var(--muted);font-size:14px;line-height:1.7;min-height:75px}.card a{color:var(--blue);font-size:14px;font-weight:bold}.banner{background:#123253;color:#fff}.banner-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}.banner p{color:#c2d3e5}.banner .button{background:white;color:#123253}.details{background:#f5f8fc}details{background:#fff;border:1px solid #e0e7ef;border-radius:12px;margin:12px 0;scroll-margin-top:100px}summary{padding:22px;font-weight:bold;cursor:pointer}.detail-text{padding:0 22px 22px;color:#52647a;font-size:14px;line-height:1.6}.detail-text p{margin:8px 0}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.contact-box{background:#f0f6fd;padding:32px;border-radius:20px;line-height:1.8}iframe{width:100%;height:350px;border:0;border-radius:20px}footer{background:#0e243d;color:#c0cedd;padding:30px 0;font-size:13px}@media(max-width:800px){.menu{display:block;border:0;background:none;font-size:26px}nav{display:none;position:absolute;top:83px;left:0;right:0;background:#fff;padding:25px;flex-direction:column;align-items:start;box-shadow:0 12px 25px #0001}nav.open{display:flex}.hero-inner{grid-template-columns:1fr;padding-top:50px;padding-bottom:50px}.hero img{height:260px}.cards{grid-template-columns:repeat(2,1fr)}.contact-grid{grid-template-columns:1fr}.banner-inner{display:block}.banner .button{margin-top:20px}section{padding:55px 0}}@media(max-width:550px){.cards{grid-template-columns:1fr}.hero img{height:220px}.container{padding:0 18px}.logo{width:125px}}

/* Header that transitions from a soft blue to white as the page scrolls */
header{background:#d8eafb;transition:background-color .32s ease,box-shadow .32s ease,border-color .32s ease;border-bottom:1px solid #c7dff6}
header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 7px 22px rgba(18,45,75,.09);border-bottom-color:#e5eaf0;backdrop-filter:blur(12px)}
@media(max-width:800px){nav{background:#e8f3ff}header.scrolled nav{background:#fff}}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* CopyTec banner edition: graphic hero, HTML text stays readable and responsive */
header{background:#d9efff;border-bottom:1px solid rgba(23,103,189,.12);transition:background-color .35s ease,box-shadow .35s ease,border-color .35s ease}
header.scrolled{background:rgba(255,255,255,.97);box-shadow:0 5px 22px rgba(15,42,77,.09);border-bottom-color:#e5eaf0;backdrop-filter:blur(12px)}
.hero-banner{background:#d8effe url('Images/copytec-hero-banner.png') center center/cover no-repeat;position:relative}
.hero-banner-inner{display:flex;align-items:center;min-height:525px;padding-top:55px;padding-bottom:85px}
.hero-banner-inner>div{max-width:535px;position:relative;z-index:1}
.hero-banner h1{font-size:clamp(37px,4.5vw,59px)}
.hero-banner p{font-size:17px;line-height:1.65;color:#405a74;max-width:470px}
.hero-banner .tags{margin-top:25px}
@media(max-width:950px){.hero-banner{background-position:58% center}.hero-banner-inner{min-height:480px}.hero-banner-inner>div{max-width:460px}.hero-banner:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(227,245,255,.92),rgba(227,245,255,.76) 48%,rgba(227,245,255,.03) 100%)}}
@media(max-width:600px){.hero-banner{background-position:66% center}.hero-banner:before{background:linear-gradient(90deg,rgba(234,247,255,.96),rgba(234,247,255,.87) 72%,rgba(234,247,255,.50))}.hero-banner-inner{min-height:550px;padding-top:45px;padding-bottom:55px}.hero-banner h1{font-size:40px}.hero-banner p{font-size:16px}.hero-banner .tags{gap:10px 15px}.hero-banner .actions{gap:9px}.hero-banner .button{padding:13px 16px}.header{height:76px}nav{top:76px}header:not(.scrolled) nav.open{background:#eaf6ff}}

/* Distinct soft pastel palette for each service card */
#services .card{transition:transform .22s ease,box-shadow .22s ease;background:#f0f6ff;border-color:rgba(37,78,125,.10)}
#services .card:nth-child(1){background:#eaf3ff}
#services .card:nth-child(2){background:#e9f5ef}
#services .card:nth-child(3){background:#fff1e9}
#services .card:nth-child(4){background:#f3edff}
#services .card:nth-child(5){background:#fff4dc}
#services .card:nth-child(6){background:#e8f5f7}
#services .card:nth-child(7){background:#fcecf2}
#services .card:nth-child(8){background:#eef2e5}
#services .card:nth-child(9){background:#f0eefb}
#services .card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(28,56,85,.12)}
#services .card img{display:block}
#services .card-text{background:transparent}