/* IKON ICT - shared styles for /services/ pages.
   Loaded AFTER /css/design.css. Values are carried over unchanged from the
   original per-page inline <style> blocks, with these deliberate exceptions:
   - link and breadcrumb text use --ikon-link (a slightly deeper blue) so they pass WCAG AA contrast
   - .btn-primary text is set larger/bold so white-on-brand-blue passes as "large text"
   To revert the link colour, change --ikon-link back to #0D98D6. */

:root{--ikon-blue:#0099D9;--ikon-grey:#575756;--ikon-link:#0A76A6;--ikon-link-hover:#075D84}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:1000;background:#fff;color:#000;padding:.75rem 1rem;font-weight:700}
.skip-link:focus{left:0}
img{max-width:100%;height:auto}

/* Hero */
.subpage-hero{min-height:46vh}
.subpage-hero .grid.hero{min-height:46vh;height:auto;padding-top:3.5rem;padding-bottom:2.25rem}
.subpage-hero .hlogo img{width:min(520px,78vw);height:auto}
.subpage-hero .page-heading{max-width:900px;margin:1rem auto 0;text-align:center}
.subpage-hero .page-heading h1{margin:.3rem 0;color:#fff;font-family:Montserrat,sans-serif;font-size:clamp(2.1rem,5vw,4rem);line-height:1.1}
.subpage-hero .page-heading p{max-width:760px;margin:1rem auto;color:#fff;font-size:1.2rem}

/* Breadcrumb */
.page-breadcrumb{margin:0;padding:0;background:#f3f3f3;border-bottom:1px solid #d9d9d9}
.page-breadcrumb__inner{width:min(calc(100% - 40px),1180px);margin:0 auto;padding:14px 0}
.page-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.page-breadcrumb li{display:inline-flex;align-items:center;margin:0;padding:0;font-size:.95rem;line-height:1.4}
.page-breadcrumb li+li::before{content:"\203A";margin-right:8px;color:#8c8c8c}
.page-breadcrumb a{display:inline;margin:0;padding:0;color:var(--ikon-link)!important;background:transparent!important;font-weight:700;text-decoration:none}
.page-breadcrumb a:hover{text-decoration:underline}
.page-breadcrumb [aria-current="page"]{color:#575756;font-weight:400}

/* Article */
.service-content{width:min(calc(100% - 40px),1000px);margin:0 auto;padding:40px 0 64px}
.page-article{max-width:none;margin:0;text-align:left;font-size:1.08rem;line-height:1.75}
.page-article h2,.page-article h3{color:#575756;font-family:Montserrat,sans-serif}
.page-article h2{margin:2.4rem 0 .8rem;font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.2}
.page-article h3{line-height:1.25}
.page-article p,.page-article ul,.page-article ol{margin-top:0;margin-bottom:1.2rem}
.page-article a{color:var(--ikon-link);font-weight:700}
.page-article a:hover{color:var(--ikon-link-hover)}
.service-content a:focus-visible{outline:3px solid var(--ikon-blue);outline-offset:2px}

/* Callout */
.page-summary{margin:2rem 0 2.5rem;padding:1.35rem 1.5rem;background:#f5f5f5;border-left:5px solid var(--ikon-blue)}
.page-summary h2{margin-top:0}
.page-summary h3{margin:1.2rem 0 .5rem;font-size:1.2rem}
.page-summary p:last-child,.page-summary ul:last-child{margin-bottom:0}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:1.5rem 0}
.cards article{padding:1.4rem;background:#f7f7f7;border-top:4px solid #B5B5B6}
.cards h2,.cards h3{margin-top:0;font-size:1.3rem}
.cards p:last-child{margin-bottom:0}
.cards a{color:var(--ikon-link);font-weight:700}

/* About page intro */
.about-intro{display:grid;grid-template-columns:220px minmax(0,1fr);gap:2rem;align-items:start;margin-bottom:1rem}
.about-intro img{width:100%;border-radius:4px}
.about-intro h2{margin-top:0}

/* FAQ + related */
.faq-section h2,.related-services h2{line-height:1.2}
.related-services{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #ddd}
.related-services ul{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;padding:0;list-style:none}

/* Contact box + buttons */
.btn-primary{display:inline-block;background:#0099D9;color:#fff;padding:.85rem 1.75rem;border-radius:4px;font-weight:700;font-size:1.2rem;text-decoration:none}
.contact-box{margin-top:3rem;padding:2rem;text-align:center;background:#575756;color:#fff}
.contact-box h2{margin-top:0;color:#fff}
.contact-box p:last-child{margin-bottom:0}
.contact-box .btn-primary,.contact-box .btn-primary:link,.contact-box .btn-primary:visited{color:#fff!important;background:#0099D9!important;text-decoration:none!important}
.contact-box .btn-primary:hover,.contact-box .btn-primary:focus-visible{color:#fff!important;background:#0083b8!important;text-decoration:none!important}
.contact-box .contact-alt a{color:#fff!important;text-decoration:underline}

@media(max-width:700px){
.subpage-hero{min-height:52vh}
.subpage-hero .grid.hero{min-height:52vh;padding-top:4.75rem;padding-bottom:2rem}
.subpage-hero .page-heading{padding:0 1rem}
.page-breadcrumb__inner{width:min(calc(100% - 28px),1180px);padding:12px 0}
.service-content{width:min(calc(100% - 28px),1000px);padding:28px 0 48px}
.cards{grid-template-columns:1fr}
.about-intro{grid-template-columns:1fr}
.about-intro img{max-width:220px}
}

/* Tables (pricing page) */
.page-article table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:1rem;line-height:1.5}
.page-article th,.page-article td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid #ddd}
.page-article thead th{background:#f3f3f3;color:#575756;font-family:Montserrat,sans-serif;border-bottom:2px solid #B5B5B6}
@media(max-width:700px){.page-article table{font-size:.95rem}.page-article th,.page-article td{padding:.6rem .5rem}}


/* ---- Main-site look and feel (palette: #0099D9 blue, #575756 grey, white, black) ---- */
main.white{overflow-x:clip}
.service-content{position:relative;z-index:0}
.page-article h2{position:relative;margin:3.2rem 0 2.6rem;padding-top:1.3rem;text-align:center;color:var(--ikon-blue);font-weight:700;font-size:clamp(1.75rem,3.2vw,2.4rem)}
.page-article h2::before{content:"";display:block;width:100px;margin:0 auto 1rem;border-top:3px solid #000}
.page-article > h2:first-child{margin-top:0}
.page-article h3{color:var(--ikon-grey)}
.page-article strong{color:#000}
.page-article table th,.page-article table td{border-color:#dee8eb}

/* full-width tinted bands, like the homepage sections */
.cards,.faq-section{position:relative;margin-top:1.5rem;margin-bottom:1.5rem}
.cards::before,.faq-section::before{content:"";position:absolute;z-index:-1;top:-1.25rem;bottom:-1.5rem;left:calc(50% - 50vw);right:calc(50% - 50vw);background:#ecf7f7}
.faq-section{padding:1.5rem 0}
.faq-section h2{margin-top:0;padding-top:.5rem}
.cards article{background:#fff;border-top:4px solid var(--ikon-blue);border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.cards h3{color:var(--ikon-grey);font-size:1.25rem}

/* callout */
.page-summary{background:#ecf7f7;border-left:5px solid var(--ikon-blue);border-radius:0 6px 6px 0}

/* breadcrumb strip */
.page-breadcrumb{background:#ecf7f7;border-bottom:1px solid #dee8eb}

/* related pages as pills */
.related-services{border-top:0;text-align:center}
.related-services ul{justify-content:center}
.related-services a{display:inline-block;padding:.45rem 1rem;border:2px solid var(--ikon-blue);border-radius:999px;font-size:.98rem;text-decoration:none}
.related-services a:hover{background:var(--ikon-blue);color:#fff}

/* call-to-action band */
.contact-box{position:relative;z-index:0;border-radius:0;background:transparent;padding:3rem 1rem}
.contact-box::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:var(--ikon-grey);border-top:5px solid var(--ikon-blue)}
.contact-box h2{color:#fff}
.contact-box h2::before{border-top-color:#fff}
.contact-box .btn-primary{border-radius:999px;padding:.9rem 2.2rem}
.service-content{padding-bottom:0}
.contact-box{margin-bottom:0}