.cataloguing-books[src="images/catalogue-books.jpg"] {
position: absolute;
right: 4%;
bottom: 13px;
z-index: 1;
display: block;
width: 135px;
height: 88px;
object-fit: cover;
border: 0;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(16, 44, 78, 0.1);
mix-blend-mode: multiply;
opacity: .9;
mask-image: radial-gradient(ellipse at center, #000 55%, transparent 100%);
mask-repeat: no-repeat;
mask-size: 100% 100%;
transform: rotate(-2deg);
}
/* =========================================================
BASAVARAJ TALIKOTI
KOHA & LIBRARY AUTOMATION CONSULTANT
CLEAN MASTER STYLESHEET
========================================================= */

/* =========================================================
GLOBAL RESET
========================================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: #17324d;
background: #ffffff;
line-height: 1.6;
}

a {
text-decoration: none;
}

.site-breadcrumb {
width: min(1440px, calc(100% - 48px));
margin: 0 auto;
padding: 9px 0 3px;
color: #142b68;
font-size: .72rem;
font-weight: 700;
line-height: 1.3;
}

.site-breadcrumb a {
color: #142b68;
}

.site-breadcrumb a:hover {
color: #159653;
text-decoration: underline;
}

.site-breadcrumb span {
padding: 0 5px;
color: #159653;
}

.back-to-top {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 1100;
display: none;
place-items: center;
width: 42px;
height: 42px;
padding: 0;
border: 1px solid #159653;
border-radius: 8px;
background: #17324d;
color: #ffffff;
font: 700 1.25rem/1 "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
cursor: pointer;
box-shadow: 0 4px 12px rgba(16, 44, 78, 0.18);
}

.back-to-top.is-visible {
display: grid;
}

.back-to-top:hover {
background: #159653;
}

.back-to-top:focus-visible {
outline: 3px solid #f4b942;
outline-offset: 2px;
}

@media (max-width: 600px) {
.back-to-top {
right: 16px;
bottom: 16px;
}
}

.service-ownership-note {
width: min(1100px, calc(100% - 48px));
margin: 0 auto;
padding: 10px 14px;
border-left: 4px solid #159653;
background: #eef9f2;
color: #28476b;
font-size: .8rem;
line-height: 1.4;
}

.service-ownership-note a {
color: #0872d0;
font-weight: 700;
}

/* =========================================================
HEADER
========================================================= */

.site-header {
width: 100%;
background: #ffffff;
border-bottom: 1px solid #e8eef4;

position: sticky;
top: 0;
z-index: 1000;
}

.header-container {
max-width: 1400px;
min-height: 92px;

margin: 0 auto;
padding: 12px 35px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 30px;
}

/* =========================================================
BRAND
========================================================= */

.brand {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}

.brand-logo {
width: 52px;
height: 52px;
display: block;
object-fit: contain;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(7, 86, 184, 0.12);
}

.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}

.brand-name {
display: block;
color: #123c68;
font-size: clamp(1.15rem, 2vw, 2rem);
font-weight: 700;
letter-spacing: -0.5px;
}

.brand-tagline {
display: block;
margin-top: 3px;
color: #3d5d78;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.1px;
white-space: nowrap;
}

/* =========================================================
MAIN NAVIGATION
========================================================= */

.main-nav {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
position: relative;
z-index: 1200;
}

.nav-link,
.dropdown-button {
border: none;
background: transparent;
color: #29445d;
font-size: 14px;
font-weight: 600;
padding: 11px 13px;
border-radius: 7px;
cursor: pointer;
line-height: 1.2;
transition:
color 0.25s ease,
background 0.25s ease,
border-color 0.25s ease;
}

.nav-link:hover,
.dropdown-button:hover {
color: #0756b8;
background: #f2f7fc;
}

.nav-link.active {
color: #ffffff;
background: #0756b8;
}

.nav-link.active:hover {
color: #ffffff;
background: #064b9f;
}

/* =========================================================
DROPDOWN
========================================================= */

.nav-dropdown {
position: relative;
z-index: 1200;
}

.dropdown-button {
display: flex;
align-items: center;
gap: 6px;
border: 1px solid transparent;
}

.nav-dropdown.open .dropdown-button,
.dropdown-button[aria-expanded="true"] {
color: #0756b8;
background: #edf5ff;
border-color: #d8e9ff;
}

.dropdown-button span {
font-size: 9px;
color: #6b7f91;
transition: transform 0.2s ease;
}

.nav-dropdown.open .dropdown-button span {
transform: rotate(180deg);
}

.dropdown-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 220px;
padding: 8px;
background: rgba(255, 255, 255, 0.98);
border: 1px solid #e5edf4;
border-radius: 12px;
box-shadow: 0 18px 38px rgba(25, 55, 85, 0.14);
z-index: 1201;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.25s ease,
visibility 0.25s ease,
transform 0.25s ease;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown.open .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.nav-dropdown.active > .dropdown-button {
color: #0756b8;
background: #edf5ff;
border-color: #d8e9ff;
}

.dropdown-menu a {
display: block;
padding: 10px 12px;
color: #29445d;
font-size: 13px;
font-weight: 500;
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-menu a:hover {
color: #0756b8;
background: #f2f7fc;
}

/* =========================================================
GET IN TOUCH BUTTON
========================================================= */

.contact-button {
display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

margin-left: 10px;
padding: 11px 18px;

color: #ffffff;
background: #199447;

border-radius: 7px;

font-size: 14px;
font-weight: 700;

transition:
background 0.25s ease,
transform 0.25s ease;
}

.contact-button:hover {
background: #147b3a;
transform: translateY(-1px);
}

/* =========================================================
MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
display: none;

border: none;
background: transparent;

color: #17324d;

font-size: 28px;

cursor: pointer;
}

/* =========================================================
HERO
========================================================= */

.hero {
position: relative;

max-width: 1500px;
min-height: 440px;

margin: 0 auto;

padding: 35px 55px 30px;

display: grid;

grid-template-columns: minmax(0, 1fr) 650px;

align-items: center;

gap: 20px;

background:
linear-gradient(
120deg,
#ffffff 0%,
#f4f9fd 55%,
#eef6fb 100%
);

overflow: hidden;
}

/* =========================================================
HERO CONTENT
========================================================= */

.hero-content {
position: relative;
z-index: 2;

max-width: 700px;
}

.hero-label {
display: flex;
align-items: center;

gap: 12px;

margin-bottom: 18px;

color: #199447;

font-size: 14px;
font-weight: 800;

letter-spacing: 2px;
}

.hero-label .line {
width: 48px;
height: 2px;

background: #199447;
}

.hero h2 {
margin: 0;

color: #123c68;

font-size: clamp(48px, 5vw, 70px);

font-weight: 800;

line-height: 1.05;

letter-spacing: -1.5px;
}

.hero h3 {
margin-top: 14px;

color: #2b9147;

font-size: 28px;

font-weight: 700;

line-height: 1.25;
}

.hero-tagline {
margin-top: 20px;

color: #0756b8;

font-size: 19px;

font-weight: 600;

font-style: italic;

line-height: 1.5;
}

/* =========================================================
EXPERTISE TAGS
========================================================= */

.expertise-tags {
display: flex;
flex-wrap: wrap;

gap: 10px;

margin-top: 28px;
}

.tag {
display: inline-flex;
align-items: center;
justify-content: center;

padding: 9px 17px;

border-radius: 30px;

color: #ffffff;

font-size: 13px;
font-weight: 700;

box-shadow: 0 5px 12px rgba(20, 55, 90, 0.12);

transition: transform 0.2s ease;
}

.tag:hover {
transform: translateY(-2px);
}

.tag-koha {
background: #199447;
}

.tag-library {
background: #0756b8;
}

.tag-migration {
background: #6335d8;
}

.tag-marc {
background: #ed8515;
}

.tag-sql {
background: #23828a;
}

.tag-training {
background: #d93636;
}

/* =========================================================
COMBINED HERO PROFILE
PHOTO + MESSAGE = ONE BLOCK
========================================================= */

.hero-profile {
display: flex;
align-items: stretch;

width: 650px;
height: 330px;

background: #0756b8;

border-radius: 28px;

overflow: hidden;

box-shadow:
0 20px 45px rgba(20, 55, 90, 0.12);
}

/* =========================================================
PHOTO
========================================================= */

.hero-person {
position: relative;

width: 350px;
height: 330px;

flex-shrink: 0;

display: flex;
align-items: flex-end;
justify-content: center;

overflow: hidden;

background: #0756b8;

border: none;
}

.hero-person img {
width: 100%;
height: 100%;

object-fit: cover;

object-position: center center;

display: block;
}

/* =========================================================
HERO MESSAGE
========================================================= */

.hero-message {
position: relative;
z-index: 3;

width: 300px;
height: 330px;

padding: 40px 28px;

box-sizing: border-box;

background: #0756b8;

border-radius: 0;

box-shadow: none;

align-self: stretch;
}

.quote-mark {
color: #ffffff;

font-size: 52px;
font-weight: 800;

line-height: 0.7;
}

.hero-message p {
margin-top: 18px;

color: #ffffff;

font-size: 18px;
font-weight: 500;

line-height: 1.55;
}

/* =========================================================
INTRODUCTION
========================================================= */

.intro-section {
width: 100%;

padding: 60px 24px;

background: #ffffff;

box-sizing: border-box;
}

.intro-container {
max-width: 1000px;

width: 100%;

margin: 0 auto;

padding-left: 30px;

border-left: 4px solid #0756b8;
}

.section-label {
display: inline-block;

margin-bottom: 10px;

color: #199447;

font-size: 0.85rem;
font-weight: 700;

text-transform: uppercase;

letter-spacing: 1.5px;
}

.intro-container h2 {
margin: 0 0 18px;

color: #123c68;

font-size: 2.2rem;

font-weight: 800;

line-height: 1.3;
}

.intro-lead {
margin: 0 0 14px;

color: #334155;

font-size: 1.2rem;

font-weight: 600;

line-height: 1.6;
}

.intro-text {
margin: 0;

color: #475569;

font-size: 1rem;

font-weight: 400;

line-height: 1.75;
}

/* =========================================================
FOOTER
========================================================= */

.site-footer {
padding: 25px;

text-align: center;

background: #0d2d4d;

color: #b9c9d8;

font-size: 13px;
}

/* =========================================================
TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

.header-container {
padding-left: 25px;
padding-right: 25px;
}

.main-nav {
gap: 2px;
}

.nav-link,
.dropdown-button {
padding-left: 9px;
padding-right: 9px;
}

.hero {
grid-template-columns: minmax(0, 1fr) 560px;

padding-left: 35px;
padding-right: 35px;
}

.hero-profile {
width: 560px;
}

.hero-person {
width: 300px;
}

.hero-message {
width: 260px;
}
}

/* =========================================================
MOBILE NAVIGATION
========================================================= */

@media (max-width: 950px) {

.menu-toggle {
display: block;
}

.main-nav {
display: none;

position: absolute;

top: 100%;
left: 0;
right: 0;

padding: 15px 20px;

background: #ffffff;

border-bottom: 1px solid #e5edf4;

flex-direction: column;
align-items: stretch;
}

.main-nav.open {
display: flex;
}

.nav-dropdown {
width: 100%;
}

.nav-link,
.dropdown-button {
width: 100%;

text-align: left;
}

.dropdown-menu {
position: static;

display: none;

width: 100%;

opacity: 1;
visibility: visible;

transform: none;

box-shadow: none;

border: none;
}

.nav-dropdown.open .dropdown-menu {
display: block;
}

.contact-button {
margin-left: 0;

width: 100%;
}

/* HERO */

.hero {
grid-template-columns: 1fr;

padding: 55px 25px;

text-align: center;
}

.hero-content {
max-width: 750px;
margin: 0 auto;
}

.hero-label {
justify-content: center;
}

.expertise-tags {
justify-content: center;
}

.hero-profile {
width: 650px;
max-width: 100%;

margin: 0 auto;
}
}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 680px) {

.header-container {
min-height: 76px;

padding: 10px 18px;
}

.brand-logo {
width: 52px;
height: 52px;
}

.brand-text h1 {
font-size: 18px;
}

.brand-text p {
display: none;
}

/* HERO */

.hero {
padding: 45px 18px;
}

.hero h2 {
font-size: 42px;

letter-spacing: -1px;
}

.hero h3 {
font-size: 22px;
}

.hero-tagline {
font-size: 17px;
}

/* PROFILE */

.hero-profile {
width: 100%;
height: auto;

flex-direction: column;
}

.hero-person {
width: 100%;
height: 330px;
}

.hero-message {
width: 100%;
height: auto;

min-height: 220px;

padding: 32px 25px;

text-align: left;
}

/* INTRODUCTION */

.intro-section {
padding: 45px 18px;
}

.intro-container {
padding-left: 18px;

border-left-width: 3px;
}

.intro-container h2 {
font-size: 1.8rem;
}

.intro-lead {
font-size: 1.05rem;
}

.intro-text {
font-size: 0.98rem;
}
}

/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

.hero h2 {
font-size: 38px;
}

.hero h3 {
font-size: 20px;
}

.tag {
padding: 8px 13px;

font-size: 12px;
}

.hero-person {
height: 300px;
}

.hero-message {
min-height: 210px;
}
}

/* =========================================================
KOHA PAGE STYLES
Basavaraj Talikoti
Koha & Library Automation Consultant
========================================================= */

.koha-page {
width: 100%;
background: #ffffff;
color: #243447;
overflow: hidden;
}

.koha-container {
width: min(1100px, calc(100% - 48px));
margin: 0 auto;
}

.koha-hero {
width: 100%;
background: linear-gradient(135deg, #f4fbff 0%, #edf7ff 45%, #f5fafc 100%);
border-bottom: 1px solid #e1edf8;
}

.koha-hero-container {
width: min(1100px, calc(100% - 48px));
margin: 0 auto;
padding: 72px 0 60px;
display: grid;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 36px;
align-items: start;
}

.koha-hero-content {
max-width: 860px;
}

.koha-hero-highlight-card {
grid-column: 2;
grid-row: 1;
margin-top: 4px;
}

.koha-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}

.koha-hero-tags span {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: rgba(21, 115, 199, 0.08);
border: 1px solid rgba(21, 115, 199, 0.14);
color: #0e549a;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.section-kicker {
display: inline-block;
margin-bottom: 14px;
color: #199447;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}

.koha-hero h1 {
margin: 0;
max-width: 880px;
color: #143d67;
font-size: clamp(3.1rem, 5vw, 6rem);
line-height: 0.96;
font-weight: 800;
letter-spacing: -2.2px;
}

.koha-hero-intro {
max-width: 820px;
margin-top: 22px;
color: #3f586f;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.55;
}

.koha-hero-actions {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 30px;
}

.koha-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 10px;
background: #0756b8;
color: #ffffff;
font-size: 0.97rem;
font-weight: 700;
line-height: 1.2;
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 12px 22px rgba(7, 86, 184, 0.18);
}

.koha-button:hover {
background: #064c9f;
transform: translateY(-2px);
}

.koha-button-secondary {
background: #ffffff;
color: #0f4d8d;
border: 1px solid #cfe2f3;
box-shadow: none;
}

.koha-button-secondary:hover {
background: #f2f8ff;
}

.koha-modules-section,
.koha-detail-section,
.koha-section {
width: 100%;
padding: 72px 0;
background: #ffffff;
}

.koha-section-soft {
background: #f7fafc;
}

.koha-section-kicker {
display: inline-block;
margin-bottom: 14px;
color: #199447;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}

.koha-section-heading {
max-width: 760px;
margin-bottom: 28px;
}

.koha-section-heading h2 {
margin: 0;
color: #16324f;
font-size: clamp(2.4rem, 3.2vw, 3.4rem);
line-height: 1.05;
font-weight: 800;
letter-spacing: -1.2px;
}

.koha-section-heading p {
margin: 16px 0 0;
color: #53697d;
font-size: 1.05rem;
line-height: 1.7;
}

.koha-modules-visual {
margin: 0 auto 28px;
max-width: 860px;
}

.koha-modules-visual img {
display: block;
width: min(100%, 760px);
height: auto;
margin: 0 auto;
border-radius: 18px;
box-shadow: 0 16px 30px rgba(16, 52, 88, 0.08);
}

.koha-module-overview {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 26px;
}

.koha-module-column {
display: contents;
}

.koha-module-summary {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 18px 18px 16px;
background: #f8fbff;
border: 1px solid #dfeaf4;
border-radius: 16px;
}

.koha-module-number {
flex: 0 0 56px;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 4px;
color: #0f79d0;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.14em;
}

.koha-module-summary div {
flex: 1 1 auto;
min-width: 0;
}

.koha-module-summary h3 {
margin: 0 0 8px;
color: #17324d;
font-size: 1.08rem;
line-height: 1.35;
font-weight: 700;
}

.koha-module-summary p {
margin: 0;
color: #586f84;
font-size: 0.98rem;
line-height: 1.7;
}

.koha-text {
max-width: 900px;
}

.koha-text p {
margin: 0 0 18px;
color: #526579;
font-size: 1.04rem;
line-height: 1.75;
}

.koha-text p:last-child {
margin-bottom: 0;
}

.koha-feature-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr);
gap: 24px;
align-items: stretch;
}

.koha-feature-content {
padding: 24px 0 0;
}

.koha-feature-content h3 {
margin: 0 0 18px;
color: #16324f;
font-size: clamp(1.7rem, 2vw, 2.3rem);
line-height: 1.25;
font-weight: 800;
letter-spacing: -0.7px;
}

.koha-feature-content p {
margin: 0 0 18px;
color: #526579;
font-size: 1.04rem;
line-height: 1.8;
}

#koha-introduction .koha-feature-layout {
grid-template-columns: 1fr;
gap: 12px;
align-items: start;
}

#koha-introduction .koha-feature-content {
max-width: 900px;
width: 100%;
padding: 0;
text-align: left;
}

#koha-introduction .koha-intro-subheading {
margin-bottom: 10px;
font-size: clamp(2rem, 3vw, 3rem);
line-height: 1.08;
letter-spacing: -0.8px;
}

#koha-introduction .koha-glance-lead {
margin-bottom: 16px;
font-size: 1.05rem;
line-height: 1.75;
}

#koha-introduction .koha-feature-content p {
max-width: 880px;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-justify: inter-word;
}

#koha-introduction .koha-feature-content p:last-child {
margin-bottom: 0;
}

#koha-introduction .koha-glance-subheading {
margin-top: 2px;
padding-top: 12px;
border-top: 1px solid #dfeaf3;
font-size: 1.25rem;
letter-spacing: -0.2px;
}

#koha-introduction .koha-glance-kicker {
margin-top: 14px;
margin-bottom: 6px;
}

@media (max-width: 820px) {
#koha-introduction .koha-feature-content p {
text-align: left;
}
}

.koha-highlight-card {
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px 24px;
background: linear-gradient(135deg, #183e67, #0b5ea3);
border-radius: 20px;
color: #ffffff;
box-shadow: 0 22px 36px rgba(12, 60, 102, 0.18);
}

.koha-highlight-card .koha-card-number {
color: rgba(255, 255, 255, 0.82);
font-size: 0.74rem;
letter-spacing: 0.18em;
}

.koha-highlight-card h3 {
margin: 0 0 12px;
color: #ffffff;
font-size: 1.7rem;
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.5px;
}

.koha-highlight-card p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
font-size: 1rem;
line-height: 1.75;
}

.koha-card-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
}

.koha-info-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 24px 18px;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
transition: none;
}

.koha-info-card:hover {
transform: none;
box-shadow: none;
}

.koha-info-card .koha-card-icon,
.koha-info-card .koha-card-number {
display: none !important;
}

.koha-info-card h3 {
margin: 0 0 10px;
color: #17324d;
font-size: 1.1rem;
line-height: 1.35;
font-weight: 700;
}

.koha-info-card p {
margin: 0;
color: #586f84;
font-size: 0.98rem;
line-height: 1.7;
}

.koha-two-column {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}

.koha-list-panel {
padding: 26px 24px;
background: #f8fbff;
border: 1px solid #dfeaf4;
border-radius: 18px;
}

.koha-list-panel h3 {
margin: 0 0 18px;
color: #16324f;
font-size: 1.3rem;
line-height: 1.35;
font-weight: 800;
}

.koha-check-list {
list-style: none;
margin: 0;
padding: 0;
}

.koha-check-list li {
position: relative;
padding: 0 0 0 28px;
margin: 0 0 12px;
color: #465d72;
font-size: 1rem;
line-height: 1.6;
}

.koha-check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #199447;
font-weight: 800;
}

.koha-check-list li:last-child {
margin-bottom: 0;
}

.koha-highlight {
margin-top: 26px;
padding: 22px 24px;
border-left: 4px solid #199447;
border-radius: 0 14px 14px 0;
background: #edf9f1;
}

.koha-highlight h3 {
margin: 0 0 8px;
color: #17324d;
font-size: 1.2rem;
}

.koha-highlight p {
margin: 0;
color: #35596f;
font-size: 1.02rem;
line-height: 1.8;
}

.koha-service-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 18px;
}

.koha-service-card {
display: flex;
flex-direction: column;
min-height: 100%;
padding: 22px 18px;
background: #ffffff;
border: 1px solid #dfeaf4;
border-radius: 18px;
box-shadow: 0 10px 22px rgba(18, 52, 86, 0.04);
}

.koha-service-card h3 {
margin: 0 0 10px;
color: #17324d;
font-size: 1.08rem;
line-height: 1.4;
font-weight: 700;
}

.koha-service-card p {
margin: 0;
color: #586f84;
font-size: 0.96rem;
line-height: 1.7;
}

.koha-cta-section {
width: 100%;
padding: 0 0 80px;
background: #ffffff;
}

.koha-cta {
width: min(1100px, calc(100% - 48px));
margin: 0 auto;
padding: 34px 32px;
border-radius: 24px;
background: linear-gradient(135deg, #0d3d6f 0%, #0e5ca9 100%);
box-shadow: 0 22px 44px rgba(11, 56, 96, 0.14);
}

.koha-cta-content {
max-width: 760px;
}

.koha-cta-content h2 {
margin: 0;
color: #ffffff;
font-size: clamp(2.1rem, 3vw, 3rem);
line-height: 1.1;
font-weight: 800;
letter-spacing: -1px;
}

.koha-cta-content p {
margin: 16px 0 0;
color: rgba(255, 255, 255, 0.86);
font-size: 1.04rem;
line-height: 1.8;
}

.koha-cta-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 28px;
}

.koha-cta-item {
padding: 22px 20px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
}

.koha-cta-item h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: 1.18rem;
line-height: 1.35;
font-weight: 700;
}

.koha-cta-item p {
margin: 0 0 18px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.98rem;
line-height: 1.7;
}

.koha-cta-item .koha-button {
background: #ffffff;
color: #0b467f;
box-shadow: none;
}

.koha-cta-item .koha-button:hover {
background: #eef7ff;
}

.koha-quote {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.koha-quote p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 1.08rem;
line-height: 1.8;
font-style: italic;
}

.text-link {
display: inline-block;
margin-top: 22px;
color: #0756b8;
font-weight: 700;
transition: color 0.2s ease;
}

.text-link:hover {
color: #064b9f;
}

.koha-detail-grid,
.koha-benefits-grid,
.koha-feature-grid,
.koha-integration-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}

.koha-detail-card,
.koha-benefit-card,
.koha-feature-card,
.koha-integration-card {
min-height: 100%;
padding: 24px 22px;
background: #ffffff;
border: 1px solid #dfeaf4;
border-radius: 16px;
box-shadow: 0 9px 24px rgba(16, 52, 88, 0.04);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.koha-detail-card:hover,
.koha-benefit-card:hover,
.koha-feature-card:hover,
.koha-integration-card:hover {
transform: translateY(-3px);
border-color: #bfd7ec;
box-shadow: 0 16px 28px rgba(16, 52, 88, 0.08);
}

.koha-card-number,
.koha-detail-number {
display: inline-block;
margin-bottom: 18px;
color: #0f79d0;
font-size: 0.76rem;
letter-spacing: 2px;
font-weight: 800;
}

.koha-detail-card h3,
.koha-benefit-card h3,
.koha-feature-card h3,
.koha-integration-card h3 {
margin: 0 0 10px;
color: #17324d;
font-size: 1.1rem;
line-height: 1.35;
font-weight: 700;
}

.koha-detail-card p,
.koha-benefit-card p,
.koha-feature-card p,
.koha-integration-card p {
margin: 0;
color: #586f84;
font-size: 0.98rem;
line-height: 1.7;
}

.koha-cta {
width: 100%;
padding: 0 0 80px;
}

.koha-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 36px 38px;
border-radius: 20px;
background: linear-gradient(135deg, #0b467f 0%, #0e5ca7 100%);
box-shadow: 0 22px 38px rgba(11, 70, 127, 0.18);
}

.koha-cta-inner .section-kicker {
color: #d8ebff;
}

.koha-cta h2 {
margin: 0;
color: #ffffff;
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.7px;
}

.koha-cta p {
margin: 12px 0 0;
max-width: 620px;
color: rgba(255, 255, 255, 0.85);
font-size: 1.04rem;
line-height: 1.7;
}

.koha-cta .koha-button {
background: #ffffff;
color: #0b467f;
box-shadow: none;
}

.koha-cta .koha-button:hover {
background: #eef7ff;
}

@media (max-width: 950px) {
.koha-detail-grid,
.koha-benefits-grid,
.koha-feature-grid,
.koha-integration-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koha-cta-inner {
flex-direction: column;
align-items: flex-start;
}

.koha-cta-inner .koha-button {
align-self: flex-start;
}
}

@media (max-width: 680px) {
.koha-container {
width: min(100% - 24px, 100%);
}

.koha-hero .koha-container {
padding: 52px 0 46px;
}

.koha-section {
padding: 54px 0;
}

.koha-hero-actions {
flex-direction: column;
align-items: stretch;
}

.koha-button {
width: 100%;
}

.koha-detail-grid,
.koha-module-overview,
.koha-benefits-grid,
.koha-feature-grid,
.koha-integration-grid {
grid-template-columns: 1fr;
}

.koha-cta {
padding-bottom: 56px;
}

.koha-cta-inner {
padding: 28px 22px;
}
}

/* =========================================================
ABOUT PAGE — CLEAN MASTER VERSION
Basavaraj Talikoti
Koha & Library Automation Consultant
========================================================= */

.telegram-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 0.9rem;
line-height: 1;
}

.about-page { width:100%; background:#fff; color:#243447; overflow:hidden; }

.about-hero { width:100%; max-width:1180px; margin:0 auto; padding:55px 35px 50px; display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:55px; box-sizing:border-box; }
.about-hero-content { width:100%; max-width:760px; }
.about-eyebrow { display:inline-block; margin-bottom:12px; color:#1677b8; font-size:.78rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
.about-hero h1 { margin:0 0 10px; color:#16324f; font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; font-weight:800; letter-spacing:-1.5px; }
.about-hero h2 { margin:0 0 20px; color:#1677b8; font-size:1.25rem; line-height:1.4; font-weight:700; }
.about-hero p { max-width:680px; margin:0; color:#526579; font-size:1.05rem; line-height:1.7; }
.about-hero-image { width:240px; height:270px; max-width:240px; margin-left:auto; overflow:hidden; background:#e8f3fa; border-radius:22px; box-shadow:0 14px 30px rgba(20,55,90,.10); }
.about-hero-image img { display:block; width:100%; height:100%; object-fit:cover; object-position:center bottom; }

.about-section { width:100%; padding:55px 24px; background:#fff; box-sizing:border-box; }
.about-section-soft { background:#f7fafc; }
.about-container { width:100%; max-width:1050px; margin:0 auto; }
.about-section-heading { max-width:800px; margin-bottom:30px; }
.about-section-heading h2 { margin:0; color:#16324f; font-size:clamp(1.9rem,3.5vw,2.7rem); line-height:1.2; font-weight:800; }
.about-section-heading p { margin:18px 0 0; color:#526579; font-size:1rem; line-height:1.7; }
.section-kicker,.section-label { display:inline-block; margin-bottom:10px; color:#199447; font-size:.78rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; }
.about-text { max-width:900px; }
.about-text p { margin:0 0 14px; color:#526579; font-size:1.02rem; line-height:1.7; }
.about-text p:last-child { margin-bottom:0; }

.why-work-section { width:100%; padding:65px 24px; background:#f5f9fc; box-sizing:border-box; }
.why-work-container { width:100%; max-width:1000px; margin:0 auto; }
.why-work-container > h2 { max-width:850px; margin:0 0 30px; color:#193858; font-size:clamp(1.9rem,3.5vw,2.6rem); line-height:1.2; font-weight:800; }
.why-work-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.why-work-card { display:flex; align-items:flex-start; gap:18px; min-height:145px; padding:24px; background:#fff; border:1px solid #dbe7f0; border-radius:14px; box-sizing:border-box; box-shadow:0 7px 20px rgba(20,55,90,.055); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.why-work-card:hover { transform:translateY(-3px); border-color:#b8d2e5; box-shadow:0 12px 28px rgba(20,55,90,.09); }
.why-work-number { flex:0 0 42px; color:#0876c9; font-size:.78rem; font-weight:700; letter-spacing:1px; }
.why-work-content { min-width:0; }
.why-work-content h3 { margin:0 0 8px; color:#193858; font-size:1.05rem; line-height:1.35; }
.why-work-content p { margin:0; color:#5a6f86; font-size:.96rem; line-height:1.65; }

.expertise-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.expertise-card { min-width:0; padding:25px 27px; background:#fff; border:1px solid #dbe6ef; border-radius:14px; box-sizing:border-box; box-shadow:0 7px 20px rgba(20,55,90,.055); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.expertise-card:hover { transform:translateY(-3px); border-color:#c4d8e8; box-shadow:0 12px 28px rgba(20,55,90,.09); }
.expertise-card-header { display:flex; align-items:baseline; gap:8px; margin-bottom:15px; }
.expertise-number { flex:0 0 auto; color:#0876c9; font-size:.76rem; line-height:1; font-weight:700; letter-spacing:1px; }
.expertise-card h3 { margin:0; color:#193858; font-size:1.02rem; line-height:1.35; font-weight:700; }
.expertise-card p { margin:0; color:#5a6f86; font-size:.96rem; line-height:1.65; }

.experience-list { width:100%; max-width:950px; display:flex; flex-direction:column; }
.experience-item { display:grid; grid-template-columns:170px minmax(0,1fr); gap:40px; padding:25px 0; border-bottom:1px solid #e3edf4; }
.experience-item:first-child { padding-top:0; }
.experience-item:last-child { padding-bottom:0; border-bottom:none; }
.experience-year { color:#1677b8; font-size:.9rem; font-weight:800; line-height:1.4; }
.experience-content { min-width:0; }
.experience-content h3 { margin:0 0 7px; color:#16324f; font-size:1.12rem; line-height:1.4; font-weight:800; }
.experience-content h4 { margin:0 0 13px; color:#687b8d; font-size:.95rem; font-weight:700; }
.experience-content p { max-width:720px; margin:0 0 10px; color:#5a6e80; font-size:.98rem; line-height:1.7; }
.experience-content p:last-child { margin-bottom:0; }

.achievement-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.achievement-card { padding:25px; background:#f7fafc; border:1px solid #dce8f0; border-radius:14px; box-sizing:border-box; }
.achievement-card strong { display:block; margin-bottom:10px; color:#1677b8; font-size:2.7rem; line-height:1; font-weight:800; }
.achievement-card h3 { margin:0 0 10px; color:#16324f; font-size:1.05rem; line-height:1.4; }
.achievement-card p { margin:0; color:#607386; font-size:.95rem; line-height:1.65; }

.library-types { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.library-types span { display:block; padding:18px; background:#fff; border:1px solid #dce7ee; border-radius:12px; color:#344d63; font-size:.96rem; line-height:1.4; font-weight:700; }

.skills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.skills-column { padding:25px; background:#fff; border:1px solid #dfe8ef; border-radius:14px; box-sizing:border-box; }
.skills-column h3 { margin:0 0 18px; color:#16324f; font-size:1.1rem; line-height:1.45; }
.skills-column ul { margin:0; padding:0; list-style:none; }
.skills-column li { position:relative; padding:10px 0 10px 20px; border-bottom:1px solid #edf1f4; color:#5b6f80; font-size:.96rem; line-height:1.5; }
.skills-column li:last-child { border-bottom:none; }
.skills-column li::before { content:""; position:absolute; left:0; top:17px; width:7px; height:7px; border-radius:50%; background:#1677b8; }

.about-cta { width:100%; padding:60px 24px; background:#1677b8; box-sizing:border-box; }
.about-cta-inner { width:100%; max-width:1050px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.about-cta .section-kicker { color:#d9efff; }
.about-cta h2 { max-width:700px; margin:0 0 14px; color:#fff; font-size:clamp(1.9rem,3.5vw,2.7rem); line-height:1.2; font-weight:800; }
.about-cta p { max-width:700px; margin:0; color:#e5f4ff; font-size:1rem; line-height:1.7; }
.about-cta-button { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:14px 22px; background:#fff; color:#1677b8; border-radius:9px; font-size:.95rem; font-weight:800; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.about-cta-button:hover { transform:translateY(-2px); box-shadow:0 10px 25px rgba(0,0,0,.15); }

.menu-toggle:focus-visible,.main-nav a:focus-visible,.about-cta-button:focus-visible { outline:3px solid #0876c9; outline-offset:3px; }

@media (max-width:900px) {
.about-hero { grid-template-columns:1fr; gap:30px; padding:45px 25px; }
.about-hero-image { width:210px; height:235px; max-width:210px; margin:0 auto; }
.why-work-grid,.expertise-grid { grid-template-columns:1fr; }
.achievement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.library-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
.skills-grid { grid-template-columns:1fr; }
.about-cta-inner { flex-direction:column; align-items:flex-start; }
}

@media (max-width:768px) {
.about-hero { padding:40px 20px; }
.about-hero h1 { font-size:clamp(2.3rem,10vw,3.2rem); }
.about-hero h2 { font-size:1.15rem; }
.about-hero-image { width:200px; height:225px; }
.about-section { padding:45px 20px; }
.why-work-section { padding:50px 20px; }
.experience-item { grid-template-columns:1fr; gap:8px; }
.achievement-grid,.library-types { grid-template-columns:1fr; }
.about-cta { padding:50px 20px; }
}

@media (max-width:600px) {
.about-hero { padding:35px 18px; }
.about-hero-image { width:190px; height:215px; }
.about-section { padding:38px 18px; }
.about-section-heading { margin-bottom:22px; }
.about-section-heading h2 { font-size:1.85rem; }
.expertise-card,.why-work-card,.achievement-card,.skills-column { padding:20px; }
.about-cta { padding:45px 18px; }
.about-cta h2 { font-size:1.9rem; }
}

@media (max-width:400px) {
.about-hero h1 { font-size:2.25rem; }
.about-hero-image { width:180px; height:205px; }
.why-work-number { flex-basis:35px; }
}

html,body { max-width:100%; overflow-x:hidden; }

/* ========================================= KOHA LMS PAGE ========================================= */

.koha-roadmap {
width: 100%;
background: #f2f8ff;
border-top: 1px solid #dfeaf6;
border-bottom: 1px solid #dfeaf6;
}

.koha-roadmap .koha-container {
padding: 18px 0 14px;
}

.koha-roadmap-list {
list-style: none;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px 18px;
margin: 0;
padding: 0;
}

.koha-roadmap-list li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: #ffffff;
border: 1px solid #dfeaf6;
color: #17324d;
font-size: 0.84rem;
font-weight: 700;
line-height: 1.35;
box-shadow: 0 6px 14px rgba(16, 52, 88, 0.03);
}

.koha-roadmap-list span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 28px;
border-radius: 8px;
background: #edf6ff;
color: #0f69b3;
font-size: 0.7rem;
letter-spacing: 0.08em;
font-weight: 800;
}

@media (max-width: 980px) {
.koha-roadmap-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 640px) {
.koha-roadmap-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koha-roadmap-list li {
font-size: 0.78rem;
}
}

@media (max-width: 420px) {
.koha-roadmap-list {
grid-template-columns: 1fr;
}
}

/* =========================================================
KOHA LMS — DEDICATED PAGE STYLES
Appended at the end so it only affects the Koha page.
========================================================= */

.koha-page {
width: 100%;
background: #ffffff;
color: #243447;
overflow: hidden;
}

.koha-hero {
width: 100%;
background: linear-gradient(135deg, #f4fbff 0%, #edf7ff 42%, #f7fbff 100%);
border-bottom: 1px solid #dfeaf6;
}

.koha-hero-container,
.koha-container,
.koha-cta {
width: min(1100px, calc(100% - 48px));
margin: 0 auto;
}

.koha-hero-container {
padding: 72px 0 28px;
}

.koha-hero-content {
max-width: 870px;
}

.koha-hero-content h1 {
margin: 0;
color: #143d67;
font-size: clamp(3rem, 5vw, 5.6rem);
line-height: 0.96;
font-weight: 800;
letter-spacing: -2.2px;
}

.koha-hero-lead {
max-width: 820px;
margin: 22px 0 0;
color: #405d77;
font-size: clamp(1.05rem, 1.5vw, 1.4rem);
line-height: 1.55;
}

.koha-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}

.koha-hero-tags span {
display: inline-flex;
align-items: center;
padding: 10px 14px;
border-radius: 999px;
background: rgba(21, 115, 199, 0.08);
border: 1px solid rgba(21, 115, 199, 0.14);
color: #0e549a;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.koha-section {
width: 100%;
padding: 42px 0;
background: #ffffff;
}

.koha-section-soft {
background: #f7fafc;
}

.koha-section-heading {
max-width: 760px;
margin-bottom: 28px;
}

.section-kicker {
display: inline-block;
margin-bottom: 14px;
color: #199447;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}

.koha-section-heading h2 {
margin: 0;
color: #16324f;
font-size: clamp(2.2rem, 3vw, 3.3rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1px;
}

.koha-section-heading p {
margin: 16px 0 0;
color: #53697d;
font-size: 1.05rem;
line-height: 1.75;
}

.koha-feature-layout,
.koha-two-column,
.koha-feature-grid,
.koha-card-grid,
.koha-service-grid,
.koha-integration-grid,
.koha-cta-options {
display: grid;
gap: 20px;
}

.koha-feature-layout {
grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.9fr);
align-items: stretch;
}

.koha-feature-content {
grid-column: 1;
padding-top: 14px;
}

.koha-feature-content h3,
.koha-feature-card h3,
.koha-info-card h3,
.koha-list-panel h3,
.koha-cta-item h3,
.koha-service-card h3,
.koha-integration-card h3,
.koha-highlight-card h3,
.koha-highlight h3 {
margin: 0 0 12px;
color: #16324f;
font-weight: 800;
line-height: 1.3;
}

.koha-feature-content h3 {
font-size: clamp(1.7rem, 2vw, 2.3rem);
letter-spacing: -0.6px;
}

.koha-feature-content p,
.koha-feature-card p,
.koha-info-card p,
.koha-list-panel p,
.koha-service-card p,
.koha-integration-card p,
.koha-highlight p,
.koha-highlight-card p,
.koha-cta-item p,
.koha-cta-content p {
margin: 0;
color: #586f84;
font-size: 1rem;
line-height: 1.75;
}

.koha-feature-content p + p {
margin-top: 18px;
}

.koha-highlight-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-column: 2;
grid-row: 1;
align-self: start;
padding: 14px;
background: linear-gradient(135deg, #173e67 0%, #0b5ea3 100%);
border-radius: 20px;
box-shadow: 0 20px 38px rgba(9, 58, 99, 0.18);
}

.koha-highlight-image {
display: block;
width: 100%;
height: 150px;
margin-bottom: 18px;
border-radius: 12px;
object-fit: cover;
object-position: center;
}

.koha-highlight-card .koha-card-number {
display: inline-block;
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.82);
font-size: 0.74rem;
letter-spacing: 0.18em;
font-weight: 800;
}

.koha-highlight-card h3,
.koha-highlight-card p {
color: #ffffff;
}

.koha-highlight-card h3 {
font-size: 1.7rem;
letter-spacing: -0.5px;
}

.koha-card-grid,
.koha-service-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

.koha-info-card,
.koha-feature-card,
.koha-service-card,
.koha-integration-card,
.koha-list-panel {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}

.koha-info-card,
.koha-feature-card,
.koha-service-card,
.koha-integration-card {
min-height: 100%;
padding: 24px 20px;
}

.koha-info-card:hover,
.koha-feature-card:hover,
.koha-service-card:hover,
.koha-integration-card:hover {
transform: none !important;
box-shadow: none !important;
}

.koha-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 16px;
border-radius: 12px;
background: #edf6ff;
color: #0c6cc9;
font-size: 0.8rem;
font-weight: 800;
}

.koha-card-number {
display: inline-block;
margin-bottom: 16px;
color: #0f79d0;
font-size: 0.76rem;
letter-spacing: 2px;
font-weight: 800;
}

.koha-two-column {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koha-list-panel {
padding: 26px 24px;
background: #f8fbff;
}

.koha-check-list {
list-style: none;
margin: 0;
padding: 0;
}

.koha-check-list li {
position: relative;
padding: 0 0 0 28px;
margin: 0 0 12px;
color: #465d72;
font-size: 1rem;
line-height: 1.6;
}

.koha-check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #199447;
font-weight: 800;
}

.koha-check-list li:last-child {
margin-bottom: 0;
}

.koha-feature-grid,
.koha-integration-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koha-text-block {
margin-top: 26px;
padding-top: 24px;
border-top: 1px solid #e7eff8;
}

.koha-text-block h3 {
margin: 0 0 14px;
color: #16324f;
font-size: 1.5rem;
line-height: 1.3;
font-weight: 800;
}

.koha-text-block p {
margin: 0 0 12px;
color: #586f84;
font-size: 1.02rem;
line-height: 1.75;
}

.koha-highlight {
margin-top: 26px;
padding: 22px 24px;
border-left: 4px solid #199447;
border-radius: 0 14px 14px 0;
background: #edf9f1;
}

.koha-highlight p {
color: #35596f;
}

.koha-cta-section {
width: 100%;
padding-bottom: 80px;
background: #ffffff;
}

.koha-cta {
padding: 34px 32px;
border-radius: 24px;
background: linear-gradient(135deg, #0d3d6f 0%, #0e5ca9 100%);
box-shadow: 0 24px 42px rgba(11, 56, 96, 0.14);
}

.koha-cta-content {
max-width: 760px;
}

.koha-cta-content h2 {
margin: 0;
color: #ffffff;
font-size: clamp(2.1rem, 3vw, 3rem);
line-height: 1.1;
font-weight: 800;
letter-spacing: -1px;
}

.koha-cta-content p {
margin-top: 16px;
color: rgba(255, 255, 255, 0.86);
}

.koha-cta-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 30px;
}

.koha-cta-item {
padding: 22px 20px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
}

.koha-cta-item h3 {
color: #ffffff;
font-size: 1.18rem;
}

.koha-cta-item p {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.8);
}

.koha-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 22px;
border-radius: 10px;
background: #ffffff;
color: #0b467f;
font-size: 0.96rem;
font-weight: 800;
line-height: 1.2;
text-decoration: none;
box-shadow: none;
transition: transform 0.2s ease, background 0.2s ease;
}

.koha-button:hover {
background: #edf7ff;
transform: translateY(-2px);
}

.koha-quote {
margin-top: 28px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.koha-quote p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
font-size: 1.08rem;
line-height: 1.8;
font-style: italic;
}

@media (max-width: 980px) {
.koha-feature-layout,
.koha-two-column,
.koha-card-grid,
.koha-service-grid,
.koha-feature-grid,
.koha-integration-grid,
.koha-cta-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 760px) {
.koha-hero-container,
.koha-container,
.koha-cta {
width: min(100% - 30px, 100%);
}

.koha-hero-container {
padding: 56px 0 50px;
grid-template-columns: 1fr;
}

.koha-hero-highlight-card {
grid-column: 1;
grid-row: auto;
width: min(100%, 320px);
justify-self: end;
}

.koha-section {
padding: 56px 0;
}

.koha-feature-layout,
.koha-two-column,
.koha-card-grid,
.koha-service-grid,
.koha-feature-grid,
.koha-integration-grid,
.koha-cta-options {
grid-template-columns: 1fr;
}

.koha-feature-content,
.koha-highlight-card {
grid-column: 1;
grid-row: auto;
}

.koha-cta {
padding: 28px 22px;
}
}

@media (max-width: 480px) {
.koha-hero-tags {
gap: 10px;
}

.koha-hero-tags span {
font-size: 0.7rem;
padding: 9px 12px;
}

.koha-section-heading h2 {
font-size: 2rem;
}

.koha-cta-content h2 {
font-size: 2rem;
}
}

/* =========================================================
KOHA LMS PAGE
Professional layout
========================================================= */

.koha-page {
width: 100%;
overflow: hidden;
color: #334155;
background: #ffffff;
}

.koha-container {
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}

/* =========================================================
KOHA HERO
========================================================= */

.koha-hero {
padding: 90px 0 85px;
background: linear-gradient(
135deg,
#f4f9ff 0%,
#ffffff 65%
);
border-bottom: 1px solid #e5edf5;
}

.koha-hero-container {
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
}

.koha-hero-content {
max-width: 820px;
}

.koha-hero .section-kicker,
.koha-section .section-kicker,
.koha-cta-section .section-kicker {
display: inline-block;
margin-bottom: 14px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #16834b;
}

.koha-hero h1 {
margin: 0 0 22px;
font-size: clamp(2.4rem, 5vw, 4.2rem);
line-height: 1.08;
font-weight: 800;
letter-spacing: -1.5px;
color: #123b63;
}

.koha-hero-lead {
max-width: 760px;
margin: 0;
font-size: 1.18rem;
line-height: 1.8;
color: #526579;
}

.koha-hero-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}

.koha-hero-tags span {
display: inline-flex;
align-items: center;
padding: 8px 14px;
border: 1px solid #d7e5f1;
border-radius: 999px;
background: #ffffff;
color: #315b7d;
font-size: 0.86rem;
font-weight: 700;
}

/* =========================================================
GENERAL SECTIONS
========================================================= */

.koha-section {
padding: 82px 0;
background: #ffffff;
}

.koha-section-soft {
background: #f7fafc;
}

.koha-section-heading {
max-width: 760px;
margin-bottom: 46px;
}

/* KOHA PLATFORM PAGE */
.platform-page { overflow: hidden; background: #fff; color: #102b59; }
.platform-hero { display: grid; grid-template-columns: minmax(300px, .95fr) minmax(500px, 1.25fr); align-items: center; gap: 30px; min-height: 590px; padding: 58px max(5vw, 32px) 50px; background: linear-gradient(108deg, #fff 0%, #f8fbf7 56%, #e8f1f0 100%); }
.platform-hero-copy { max-width: 560px; margin: 0 auto; font-family: inherit; }.platform-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; color: #102b59; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; font-weight: 800; letter-spacing: 0; text-align: left; }.platform-kicker span { width: 62px; height: 5px; border-radius: 4px; background: #258d45; }.platform-hero h1 { max-width: 570px; margin-bottom: 28px; color: #102b59; font-size: clamp(2.15rem, 3.5vw, 3.45rem); line-height: 1.1; letter-spacing: -1px; font-weight: 800; text-align: justify; text-justify: inter-word; }
.platform-callout { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px 15px; max-width: 520px; padding: 22px 24px; border-radius: 0 18px 18px 18px; background: rgba(237, 249, 238, .86); box-shadow: 0 12px 25px rgba(35, 105, 63, .08); font-family: inherit; }.platform-globe { display: grid; place-items: center; width: 76px; height: 76px; border: 4px solid #176b43; border-radius: 50%; color: #176b43; font-size: 4rem; line-height: .7; }.platform-callout strong { display: block; color: #0c7044; font-size: 2.7rem; line-height: .95; }.platform-callout b { color: #122e64; font-size: 1.3rem; }.platform-callout p { grid-column: 1 / -1; margin-top: 6px; color: #28476b; font-size: 1rem; line-height: 1.45; text-align: justify; text-justify: inter-word; }
.platform-merged-copy { display: block; max-width: 520px; margin: 0; padding: 22px 24px; border-radius: 0 18px 18px 18px; background: rgba(237, 249, 238, .86); box-shadow: 0 12px 25px rgba(35, 105, 63, .08); color: #28476b; font-size: 1.05rem; line-height: 1.55; text-align: justify; text-justify: inter-word; }.platform-merged-copy .platform-globe { float: left; margin: 0 16px 8px 0; width: 68px; height: 68px; font-size: 3.5rem; }.platform-merged-copy strong { color: #0c7044; font-size: 1.55rem; }
.platform-visual { position: relative; min-height: 480px; }.platform-laptop { position: absolute; z-index: 2; top: 92px; left: 11%; width: 67%; transform: perspective(1000px) rotateY(-8deg) rotateX(3deg); filter: drop-shadow(12px 18px 12px rgba(18, 43, 54, .27)); }.platform-screen { padding: 8px; border: 3px solid #26313b; border-radius: 12px 12px 4px 4px; background: #15212b; }.screen-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; background: #edf2f5; color: #647381; font-size: 7px; }.screen-bar i { width: 5px; height: 5px; border-radius: 50%; background: #f07860; }.screen-bar i:nth-child(2) { background: #e7bb4b; }.screen-bar i:nth-child(3) { background: #62b879; }.screen-bar span { margin-left: auto; }.screen-brand { padding: 11px 13px; background: #fff; color: #2b8c48; font-size: 1.2rem; font-weight: 800; }.screen-layout { display: grid; grid-template-columns: 24% 1fr; min-height: 190px; background: #f5f7f8; color: #fff; font-size: 7px; }.screen-layout aside { padding: 14px 9px; background: #16345d; line-height: 2.55; }.screen-main { padding: 15px; color: #7a8995; }.screen-main small { display: block; padding: 7px; border: 1px solid #dce3e8; background: #fff; }.screen-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 16px; }.screen-tiles b { display: grid; place-items: center; min-height: 55px; border: 1px solid #dce4e9; border-radius: 3px; background: #fff; color: #159b68; font-size: 18px; }.screen-tiles em { display: block; color: #233f61; font-size: 7px; font-style: normal; }.platform-keyboard { width: 116%; height: 18px; margin: 0 -8%; border-radius: 2px 2px 12px 12px; background: linear-gradient(#b6c0c5, #76838a); }
.platform-books { position: absolute; z-index: 3; bottom: 55px; left: 2%; display: flex; flex-direction: column; align-items: flex-start; transform: rotate(-4deg); }.platform-books span { display: block; width: 132px; padding: 4px 10px; color: #fff; font-size: .68rem; font-weight: 700; text-align: center; box-shadow: 0 5px 6px rgba(0,0,0,.16); }.platform-books span:nth-child(1) { background: #407c85; }.platform-books span:nth-child(2) { background: #1a4c70; }.platform-books span:nth-child(3) { background: #236b85; }.platform-books span:nth-child(4) { background: #317b4a; }
.platform-orbit { position: absolute; z-index: 4; right: 0; display: flex; align-items: center; gap: 10px; width: 195px; padding: 11px; border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(24, 63, 72, .11); color: #294563; font-size: .68rem; line-height: 1.25; }.platform-orbit b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #d7f5df; color: #07924e; font-size: 1.55rem; }.platform-orbit strong { display: block; color: #078d44; }.orbit-one { top: 10px; }.orbit-two { top: 112px; }.orbit-two b { background: #d4ebff; color: #1679d1; }.orbit-two strong { color: #1679d1; }.orbit-three { top: 214px; }.orbit-three b { background: #e8d5ff; color: #7432be; }.orbit-three strong { color: #7432be; }
.platform-needs { padding: 10px max(5vw, 22px) 25px; }.platform-section-heading { max-width: 1080px; margin: 0 auto 18px; }.platform-section-heading .platform-kicker { margin-bottom: 10px; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: 1px; }.platform-section-heading h2 { margin: 0 0 4px; color: #11285b; font-size: clamp(1.55rem, 2.4vw, 2.15rem); line-height: 1.15; }.platform-section-heading > p:last-child { color: #617087; font-style: italic; }.platform-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 1160px; margin: 0 auto; }.platform-card { min-height: 205px; padding: 18px 16px; border-radius: 12px; }.platform-card-icon { float: left; display: grid; place-items: center; width: 50px; height: 50px; margin-right: 14px; border-radius: 50%; font-size: 1.6rem; }.platform-card h3 { min-height: 50px; margin: 3px 0 13px; color: #10295d; font-size: 1rem; line-height: 1.2; }.platform-card p { clear: both; color: #304969; font-size: .88rem; line-height: 1.42; }.card-blue { background: #eaf5ff; }.card-blue .platform-card-icon { background: #83caff; color: #11629e; }.card-green { background: #eaf8ec; }.card-green .platform-card-icon { background: #9fe4ae; color: #116738; }.card-gold { background: #fff5e6; }.card-gold .platform-card-icon { background: #ffd590; color: #ab6105; }.card-violet { background: #f4edff; }.card-violet .platform-card-icon { background: #ba8afa; color: #5922a2; }
.platform-footer-strip { display: flex; align-items: center; gap: 20px; margin-top: 10px; padding: 10px max(5vw, 22px); background: #145788; color: #fff; }.platform-footer-strip div { display: flex; align-items: center; gap: 8px; font-size: .7rem; line-height: 1.15; }.platform-footer-strip div + div { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.55); }.platform-footer-strip b { font-size: 1.65rem; }.platform-footer-strip > strong { align-self: stretch; display: flex; align-items: center; gap: 6px; margin: -10px max(-5vw, -22px) -10px auto; padding: 8px 5vw 8px 28px; border-left: 1px solid rgba(255,255,255,.55); background: #145788; color: #fff; font-family: Georgia, serif; font-size: 2.1rem; font-style: italic; font-weight: 700; }.platform-brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50% 45% 50% 25%; font-family: sans-serif; font-size: 1.3rem; font-style: normal; line-height: 1; }
.platform-copyright { padding: 14px 20px; background: #0d3d63; color: rgba(255, 255, 255, .82); font-size: .78rem; text-align: center; }

/* Targeted platform hero correction. */
.platform-hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(34px, 5vw, 76px); min-height: 0; padding-top: 42px; padding-bottom: 34px; }
.platform-hero-copy { max-width: 600px; }
.platform-kicker { margin-bottom: 14px; font-size: clamp(1rem, 1.6vw, 1.35rem); letter-spacing: .08em; }
.platform-kicker span { width: 42px; height: 4px; }
.platform-merged-copy { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 0; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: #102b59; font-size: clamp(2rem, 3.2vw, 3.35rem); line-height: 1.08; text-align: left; }
.platform-merged-copy .platform-globe { float: none; flex: 0 0 58px; width: 58px; height: 58px; margin: 0; font-size: 3rem; }
.platform-merged-copy strong { color: #102b59; font-size: inherit; line-height: inherit; }
.platform-hero-description { max-width: 520px; margin: 18px 0 0 74px; color: #536782; font-size: 1rem; line-height: 1.6; }
.screen-brand { text-align: center; }
.platform-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0 74px; }
.platform-button { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 14px; border: 1px solid transparent; border-radius: 5px; font: 700 .72rem Arial, sans-serif; line-height: 1.2; }
.platform-button-primary { background: #258d45; color: #fff; }.platform-button-primary:hover { background: #1d7138; }.platform-button-secondary { border-color: #1e6d99; color: #1e6d99; background: #fff; }.platform-button-secondary:hover { background: #eef6fa; }
.platform-visual { min-height: 420px; }
.platform-laptop { top: 48px; left: 5%; width: 78%; }
.platform-orbit { right: 5%; }
.platform-books { bottom: 28px; }
@media (max-width: 900px) { .platform-hero { grid-template-columns: 1fr; gap: 24px; padding-top: 36px; padding-bottom: 24px; }.platform-hero-copy { max-width: 680px; }.platform-visual { min-height: 420px; }.platform-laptop { top: 70px; left: 7%; width: 70%; } }
@media (max-width: 560px) { .platform-hero { padding: 30px 18px 16px; }.platform-kicker { font-size: 1rem; }.platform-merged-copy { align-items: flex-start; gap: 12px; font-size: 2.25rem; }.platform-merged-copy .platform-globe { flex-basis: 46px; width: 46px; height: 46px; font-size: 2.35rem; }.platform-hero-description { margin: 16px 0 0 58px; font-size: .9rem; }.platform-actions { margin-left: 58px; flex-direction: column; align-items: stretch; }.platform-button { justify-content: center; }.platform-visual { display: flex; min-height: 0; padding-top: 10px; flex-direction: column; align-items: center; transform: none; }.platform-laptop { position: relative; top: auto; left: auto; order: 1; width: 86%; }.platform-orbit { position: relative; top: auto !important; right: auto; align-self: flex-end; order: 2; width: min(100%, 250px); margin-top: 8px; }.platform-books { bottom: auto; left: 0; transform: scale(.82) rotate(-4deg); transform-origin: bottom left; } }

/* KOHA ARCHITECTURE PAGE */
.architecture-page { overflow: hidden; background: #fff; color: #102b59; }
.architecture-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; max-width: 1360px; margin: 0 auto; padding: 42px 30px 24px; }.architecture-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #168949; font-size: .9rem; font-weight: 800; letter-spacing: 1.1px; }.architecture-kicker span { width: 42px; height: 4px; border-radius: 3px; background: #21924b; }.architecture-intro h1 { margin: 0; color: #111b5e; font-size: clamp(2.15rem, 4vw, 4rem); line-height: 1.04; letter-spacing: -1px; }.architecture-intro h1 em { color: #1d914b; font-style: normal; }.architecture-intro > div > p:last-child { max-width: 720px; margin-top: 14px; color: #536782; font-size: 1rem; line-height: 1.5; }.architecture-intro aside { display: flex; flex-direction: column; min-width: 300px; padding-bottom: 5px; color: #566785; text-align: right; }.architecture-intro aside strong { font-size: .95rem; letter-spacing: .6px; }.architecture-intro aside span { margin-top: 8px; font-size: .8rem; }
.architecture-reference { position: relative; max-width: 1440px; margin: 0 auto; padding: 0 16px; }.architecture-reference::before { content: ""; position: absolute; z-index: 2; top: .7%; left: 2.1%; width: 20%; height: 5%; background: #fff; }.architecture-reference img { display: block; width: 100%; height: auto; border: 1px solid #dce8ec; box-shadow: 0 12px 30px rgba(17, 49, 83, .08); }.architecture-reference figcaption { margin: 10px auto 0; color: #63768c; font-size: .8rem; text-align: center; }
.architecture-expert { max-width: 1360px; margin: 0 auto; padding: 44px 30px 28px; }.architecture-section-heading { max-width: 760px; margin-bottom: 22px; }.architecture-section-heading h2 { margin: 0 0 8px; color: #111b5e; font-size: clamp(1.7rem, 2.8vw, 2.55rem); line-height: 1.12; }.architecture-section-heading > p:last-child { color: #5d7187; line-height: 1.5; }.architecture-layer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.architecture-layer { display: flex; align-items: flex-start; gap: 14px; min-height: 132px; padding: 17px; border-radius: 10px; }.architecture-layer > b { display: grid; place-items: center; flex: 0 0 45px; width: 45px; height: 45px; border-radius: 50%; color: #fff; font-size: 1.15rem; }.architecture-layer h3 { margin: 2px 0 7px; color: #111b5e; font-size: 1.1rem; }.architecture-layer p { color: #355274; font-size: .88rem; line-height: 1.4; }.layer-green { background: #e6f8ed; }.layer-green > b { background: #159653; }.layer-blue { background: #e6f4ff; }.layer-blue > b { background: #1689df; }.layer-orange { background: #fff0dc; }.layer-orange > b { background: #df8b08; }.layer-purple { background: #eee8ff; }.layer-purple > b { background: #7542d6; }
.architecture-connection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1360px; margin: 0 auto; padding: 0 30px 42px; }.architecture-connection-grid article { padding: 20px; border-top: 4px solid #188e4c; background: #f5f9fb; }.architecture-connection-grid article:nth-child(2) { border-color: #1689df; }.architecture-connection-grid article:nth-child(3) { border-color: #7542d6; }.architecture-connection-grid h3 { margin-bottom: 8px; color: #111b5e; font-size: 1.05rem; }.architecture-connection-grid p { color: #47617f; font-size: .9rem; line-height: 1.45; }
@media (max-width: 800px) { .architecture-intro { display: block; padding: 30px 20px 18px; }.architecture-intro aside { min-width: 0; margin-top: 20px; text-align: left; }.architecture-reference { padding: 0 10px; overflow-x: auto; }.architecture-reference img { min-width: 900px; max-width: none; }.architecture-reference figcaption { max-width: 700px; }.architecture-expert { padding: 34px 20px 24px; }.architecture-layer-grid, .architecture-connection-grid { grid-template-columns: 1fr; }.architecture-connection-grid { padding: 0 20px 32px; } }

/* KOHA ACQUISITIONS & SERIALS PAGE */
.acquisitions-page { overflow: hidden; background: #fff; color: #102b59; }
.acquisitions-intro { padding: 48px max(5vw, 30px) 34px; background: linear-gradient(112deg, #fff 0%, #f4fbf7 58%, #e8f7f0 100%); }
.acquisitions-intro > div { max-width: 900px; margin: 0 auto; }
.acquisitions-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; color: #168949; font-size: .9rem; font-weight: 800; letter-spacing: 1.1px; }
.acquisitions-kicker span { width: 42px; height: 4px; border-radius: 3px; background: #21924b; }
.acquisitions-breadcrumb a, .circulation-breadcrumb a { color: #142b68; text-decoration: none; }.acquisitions-breadcrumb a:hover, .circulation-breadcrumb a:hover { color: #159653; text-decoration: underline; }
.acquisitions-intro h1 { margin: 0; color: #111b5e; font-size: clamp(2.35rem, 4vw, 4.25rem); line-height: 1.04; letter-spacing: -1px; }
.acquisitions-intro h1 em { color: #1d914b; font-style: normal; }
.acquisitions-intro > div > p:last-child { max-width: 800px; margin-top: 18px; color: #536782; font-size: 1.05rem; line-height: 1.65; }
.acquisitions-feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1180px; margin: 0 auto; padding: 26px 30px 38px; }
.acquisitions-feature { min-height: 188px; padding: 22px 20px; border-radius: 12px; box-shadow: 0 10px 22px rgba(28, 71, 99, .06); }
.acquisitions-feature b { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; color: #fff; font-size: .78rem; }
.acquisitions-feature h2 { margin-bottom: 8px; color: #111b5e; font-size: 1.18rem; line-height: 1.2; }
.acquisitions-feature p { color: #355274; font-size: .9rem; line-height: 1.5; }
.acquisitions-feature-green { background: #e6f8ed; }.acquisitions-feature-green b { background: #159653; }
.acquisitions-feature-blue { background: #e6f4ff; }.acquisitions-feature-blue b { background: #1689df; }
.acquisitions-feature-orange { background: #fff0dc; }.acquisitions-feature-orange b { background: #df8b08; }
.acquisitions-feature-purple { background: #eee8ff; }.acquisitions-feature-purple b { background: #7542d6; }
.acquisitions-workflow { padding: 36px max(5vw, 30px) 44px; background: #f7fafc; }
.acquisitions-section-heading { max-width: 760px; margin: 0 auto 24px; }
.acquisitions-section-heading h2 { margin: 0 0 8px; color: #111b5e; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.1; }
.acquisitions-section-heading > p:last-child { color: #5d7187; line-height: 1.55; }
.acquisitions-step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1180px; margin: 0 auto; }
.acquisitions-step-grid article { padding: 20px; border-top: 4px solid #159653; background: #fff; }
.acquisitions-step-grid article:nth-child(2) { border-color: #1689df; }.acquisitions-step-grid article:nth-child(3) { border-color: #df8b08; }.acquisitions-step-grid article:nth-child(4) { border-color: #7542d6; }
.acquisitions-step-grid strong { color: #168949; font-size: .78rem; letter-spacing: 1px; }.acquisitions-step-grid h3 { margin: 8px 0; color: #111b5e; font-size: 1.05rem; }.acquisitions-step-grid p { color: #47617f; font-size: .88rem; line-height: 1.5; }
.acquisitions-outcomes { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; max-width: 1180px; margin: 0 auto; padding: 42px 30px 52px; }
.acquisitions-outcomes h2 { margin-bottom: 10px; color: #111b5e; font-size: clamp(1.7rem, 2.8vw, 2.45rem); line-height: 1.12; }.acquisitions-outcomes p { color: #536782; line-height: 1.6; }.acquisitions-outcome-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-content: center; }.acquisitions-outcome-list span { padding: 14px 16px; border-left: 4px solid #159653; background: #eef9f2; color: #28476b; font-size: .9rem; font-weight: 700; }.acquisitions-outcome-list span:nth-child(2) { border-color: #1689df; background: #eef7ff; }.acquisitions-outcome-list span:nth-child(3) { border-color: #df8b08; background: #fff7eb; }.acquisitions-outcome-list span:nth-child(4) { border-color: #7542d6; background: #f3efff; }
@media (max-width: 800px) { .acquisitions-intro { padding: 34px 20px 26px; }.acquisitions-feature-grid, .acquisitions-step-grid { grid-template-columns: repeat(2, 1fr); padding-left: 20px; padding-right: 20px; }.acquisitions-workflow { padding-left: 20px; padding-right: 20px; }.acquisitions-outcomes { grid-template-columns: 1fr; padding: 34px 20px 40px; }.acquisitions-outcome-list { margin-top: 4px; } }
@media (max-width: 520px) { .acquisitions-feature-grid, .acquisitions-step-grid, .acquisitions-outcome-list { grid-template-columns: 1fr; }.acquisitions-feature { min-height: 0; }.acquisitions-intro h1 { font-size: 2.45rem; } }

/* REFERENCE-STYLE ACQUISITIONS LAYOUT */
.acquisitions-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); max-width: 1440px; min-height: 275px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f5fbff 63%, #e8f7f0 100%); }
.acquisitions-hero-copy { padding: 14px 22px 20px 30px; }.acquisitions-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.acquisitions-breadcrumb span { padding: 0 5px; color: #159653; }.acquisitions-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.3rem, 4.8vw, 4.45rem); line-height: .98; letter-spacing: -1.6px; }.acquisitions-hero h1 span { color: #102c69; }.acquisitions-hero h1::first-letter { color: #102c69; }.acquisitions-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.15; }.acquisitions-hero-copy > p:last-child { max-width: 820px; color: #243d70; font-size: .78rem; line-height: 1.3; }
.acquisitions-hero-visual { position: relative; min-height: 275px; overflow: hidden; background: linear-gradient(90deg, rgba(229, 247, 255, .7), rgba(227, 248, 235, .8)); }.acquisitions-hero-message { position: absolute; z-index: 2; top: 20px; left: 20px; max-width: 142px; color: #102c69; }.acquisitions-hero-message strong { font-size: 1.35rem; line-height: 1.1; }.acquisitions-hero-message span { display: block; width: 38px; height: 3px; margin: 12px 0; background: #159653; }.acquisitions-hero-message p { font-size: .72rem; line-height: 1.3; }.acquisitions-books { position: absolute; right: -8px; bottom: 18px; display: flex; flex-direction: column; transform: rotate(-1deg); }.acquisitions-books b { display: block; width: 155px; padding: 5px 8px; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; box-shadow: 0 3px 5px rgba(16, 44, 78, .2); }.acquisitions-books b:nth-child(1) { background: #247d55; }.acquisitions-books b:nth-child(2) { background: #1a789f; }.acquisitions-books b:nth-child(3) { background: #e46721; }.acquisitions-books b:nth-child(4) { background: #164b78; }.acquisitions-books b:nth-child(5) { background: #328149; }
.acquisitions-main-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.08fr) minmax(220px, .8fr); gap: 10px; max-width: 1440px; margin: 0 auto; padding: 8px 22px 10px; background: #f9fcff; }.acquisitions-detail { padding: 13px 10px 8px; border: 1px solid rgba(39, 104, 139, .08); border-radius: 8px; }.acquisitions-detail-green { background: #e8faed; }.acquisitions-detail-blue { background: #e7f4ff; }.acquisitions-detail-title { display: flex; gap: 10px; align-items: flex-start; }.acquisitions-detail-title > b { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: #07934f; font-size: 1.55rem; }.acquisitions-detail-blue .acquisitions-detail-title > b { background: #1689df; }.acquisitions-detail-title h2 { margin: 0; color: #102c69; font-size: 1.75rem; line-height: 1; }.acquisitions-detail-title strong { display: block; margin-top: 3px; color: #08733e; font-size: .85rem; line-height: 1.15; }.acquisitions-detail-blue .acquisitions-detail-title strong { color: #075cb9; }.acquisitions-detail > p { margin: 9px 2px 6px; color: #19366e; font-size: .73rem; line-height: 1.3; }.acquisitions-detail ul { margin: 0; padding: 0; list-style: none; }.acquisitions-detail li { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px solid rgba(31, 101, 137, .12); color: #19366e; font-size: .68rem; line-height: 1.15; }.acquisitions-detail li > b { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #159653; font-size: .9rem; }.acquisitions-detail-blue li > b { background: #1689df; }.acquisitions-detail li span { display: block; }.acquisitions-detail li strong { display: block; color: #102c69; font-size: .74rem; }.acquisitions-detail footer { margin-top: 5px; padding: 8px; border-radius: 6px; color: #08733e; background: rgba(158, 234, 173, .55); font-size: .7rem; font-weight: 700; }.acquisitions-detail-blue footer { color: #075cb9; background: rgba(157, 211, 255, .6); }
.acquisitions-benefits { min-width: 0; }.acquisitions-benefits blockquote { margin: 0; padding: 16px 16px 9px; border-radius: 8px; background: #e5f9e9; color: #102c69; font-size: 1.12rem; font-weight: 800; font-style: italic; line-height: 1.1; }.acquisitions-benefits blockquote::first-letter { color: #159653; font-size: 2rem; }.acquisitions-benefits > p { margin: 0; padding: 0 16px 13px; background: #e5f9e9; color: #28476b; font-size: .7rem; }.acquisitions-benefits h2 { margin: 8px 0 4px; color: #102c69; font-size: 1.45rem; }.acquisitions-benefits ol { margin: 0; padding: 0; list-style: none; }.acquisitions-benefits li { display: flex; gap: 7px; align-items: center; padding: 5px 0; border-bottom: 1px solid #dcebf4; color: #244268; font-size: .62rem; line-height: 1.15; }.acquisitions-benefits li > b { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 7px; background: #d8f5dc; color: #168949; font-size: .82rem; }.acquisitions-benefits li:nth-child(even) > b { background: #d9edff; color: #1689df; }.acquisitions-benefits li strong { display: block; color: #102c69; font-size: .68rem; }.acquisitions-workflow-strip { display: grid; grid-template-columns: .95fr 1.55fr; gap: 18px; align-items: center; max-width: 1440px; margin: 0 auto; padding: 10px 22px 12px; border-top: 3px solid #159653; background: #f4fbff; }.acquisitions-workflow-strip h2 { margin: 0 0 3px; color: #102c69; font-size: 1rem; }.acquisitions-workflow-strip p { color: #355274; font-size: .68rem; line-height: 1.25; }.acquisitions-workflow-strip ol { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin: 0; padding: 0; list-style: none; }.acquisitions-workflow-strip li { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 5px; padding: 8px 7px; color: #0c7044; background: #d8f6d5; font-size: 1.05rem; }.acquisitions-workflow-strip li:nth-child(even) { color: #11629e; background: #d9edff; }.acquisitions-workflow-strip li strong { color: #102c69; font-size: .75rem; line-height: 1; }.acquisitions-workflow-strip li small { grid-column: 2; color: #28476b; font-size: .55rem; }
@media (max-width: 900px) { .acquisitions-hero { grid-template-columns: 1fr; }.acquisitions-hero-visual { min-height: 190px; }.acquisitions-main-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.acquisitions-benefits { grid-column: 1 / -1; }.acquisitions-benefits ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }.acquisitions-workflow-strip { grid-template-columns: 1fr; }.acquisitions-workflow-strip ol { margin-top: 4px; } }
@media (max-width: 560px) { .acquisitions-hero-copy { padding: 12px 18px 18px; }.acquisitions-hero h1 { font-size: 2.4rem; }.acquisitions-hero h2 { font-size: 1.05rem; }.acquisitions-hero-copy > p:last-child { font-size: .78rem; }.acquisitions-main-grid { grid-template-columns: 1fr; padding: 8px 12px; }.acquisitions-benefits { grid-column: auto; }.acquisitions-benefits ol { grid-template-columns: 1fr; }.acquisitions-workflow-strip { padding: 10px 12px; }.acquisitions-workflow-strip ol { grid-template-columns: repeat(3, 1fr); }.acquisitions-workflow-strip li { min-height: 46px; } }
@media (min-width: 701px) and (max-width: 900px) { .acquisitions-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.acquisitions-hero-visual { min-height: 275px; }.acquisitions-hero-copy { padding-left: 24px; padding-right: 14px; }.acquisitions-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.acquisitions-hero h2 { font-size: 1.05rem; }.acquisitions-hero-copy > p:last-child { font-size: .72rem; } }

/* KOHA CIRCULATION & PATRON SERVICES PAGE */
.circulation-page { overflow: hidden; background: #fff; color: #102b59; }
.circulation-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); max-width: 1440px; min-height: 276px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f4fbff 62%, #e8f7f0 100%); }
.circulation-hero-copy { padding: 12px 22px 18px 30px; }.circulation-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.circulation-breadcrumb span { padding: 0 5px; color: #159653; }.circulation-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.25rem, 4.7vw, 4.4rem); line-height: .98; letter-spacing: -1.5px; }.circulation-hero h1 span { display: block; }.circulation-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.15; }.circulation-hero-copy > p:last-child { max-width: 820px; color: #243d70; font-size: .78rem; line-height: 1.3; }
.circulation-hero-visual { position: relative; min-height: 276px; overflow: hidden; background: linear-gradient(90deg, rgba(226, 245, 255, .8), rgba(226, 248, 235, .85)); }.circulation-hero-message { position: absolute; top: 20px; left: 28px; color: #102c69; }.circulation-hero-message strong { font-size: 1.35rem; line-height: 1.1; }.circulation-hero-message span { display: block; width: 36px; height: 3px; margin: 12px 0; background: #159653; }.circulation-hero-message p { font-size: .76rem; line-height: 1.25; }.circulation-quote { position: absolute; top: 14px; right: 18px; width: min(220px, 56%); padding: 14px 15px 12px; border-radius: 9px; background: rgba(255, 255, 255, .82); color: #102c69; font-size: .95rem; font-style: italic; font-weight: 700; line-height: 1.2; }.circulation-quote::first-letter { color: #159653; font-size: 2rem; }.circulation-quote small { display: block; margin-top: 14px; padding-top: 8px; border-top: 3px solid #159653; color: #1a6b45; font-size: .62rem; font-style: normal; font-weight: 500; }
.circulation-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 1440px; margin: 0 auto; padding: 8px 18px 10px; background: #f9fcff; }.circulation-service { overflow: hidden; border-radius: 8px; }.circulation-service-blue { background: #eef7ff; }.circulation-service-green { background: #e8faed; }.circulation-service > header { display: flex; gap: 12px; align-items: center; padding: 10px 12px 8px; color: #fff; }.circulation-service-blue > header { background: linear-gradient(110deg, #0875d1, #0b9bd1); }.circulation-service-green > header { background: linear-gradient(110deg, #078746, #079653); }.circulation-service > header > b { display: grid; place-items: center; flex: 0 0 72px; width: 72px; height: 72px; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; font-size: 2.3rem; }.circulation-service h2 { margin: 0; font-size: 1.55rem; line-height: 1.05; }.circulation-service > header strong { display: block; margin-top: 3px; font-size: .8rem; }.circulation-service > p { margin: 0; padding: 7px 102px 6px; color: #18366f; font-size: .7rem; line-height: 1.25; }.circulation-item-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; padding: 0 10px 6px; background: rgba(255,255,255,.55); }.circulation-item-grid span { display: flex; gap: 8px; align-items: center; min-height: 48px; border-bottom: 1px solid rgba(28, 104, 158, .12); color: #102c69; font-size: .65rem; line-height: 1.15; }.circulation-item-grid span > b { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #dceeff; color: #0974ce; font-size: 1.2rem; }.circulation-service-green .circulation-item-grid span > b { background: #d9f4df; color: #078746; }.circulation-item-grid strong { display: block; }.circulation-item-grid small { display: block; margin-top: 2px; color: #355274; font-size: .58rem; font-weight: 400; line-height: 1.15; }
.circulation-journey { display: grid; grid-template-columns: minmax(190px, .8fr) 2.2fr; gap: 14px; align-items: center; max-width: 1440px; margin: 0 auto; padding: 9px 30px; border: 1px solid #dbeaf3; background: #f5fbff; }.circulation-journey h2 { margin: 0 0 3px; color: #102c69; font-size: 1.2rem; }.circulation-journey p { color: #355274; font-size: .68rem; line-height: 1.25; }.circulation-journey ol { display: grid; grid-template-columns: repeat(11, 1fr); align-items: center; gap: 3px; margin: 0; padding: 0; list-style: none; }.circulation-journey li { display: grid; place-items: center; color: #0872d0; text-align: center; font-size: 1.2rem; }.circulation-journey li b { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; background: #0875d1; color: #fff; }.circulation-journey li:nth-child(3n+1) b { background: #079653; }.circulation-journey li strong { display: block; margin-top: 3px; color: #102c69; font-size: .65rem; line-height: 1; }.circulation-journey li small { display: block; color: #355274; font-size: .55rem; font-weight: 400; }
.circulation-benefits { display: grid; grid-template-columns: 1.15fr repeat(4, 1fr); gap: 0; max-width: 1440px; margin: 9px auto 0; padding: 8px 30px; border: 1px solid #cfe9d6; background: #e8faed; }.circulation-benefits > div { border-right: 1px solid #b9dfc4; }.circulation-benefits h2 { margin: 0; color: #102c69; font-size: 1.35rem; }.circulation-benefits p { margin-top: 5px; color: #355274; font-size: .7rem; line-height: 1.2; }.circulation-benefits article { display: flex; gap: 8px; align-items: center; padding: 0 12px; border-right: 1px solid #b9dfc4; }.circulation-benefits article:last-child { border-right: 0; }.circulation-benefits article > b { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #079653; color: #fff; font-size: 1.3rem; }.circulation-benefits article:nth-child(3) > b { background: #1689df; }.circulation-benefits article:nth-child(4) > b { background: #7542d6; }.circulation-benefits article:nth-child(5) > b { background: #f39811; }.circulation-benefits strong { display: block; color: #102c69; font-size: .65rem; line-height: 1.1; }.circulation-benefits small { display: block; margin-top: 3px; color: #355274; font-size: .56rem; font-weight: 400; line-height: 1.15; }
@media (max-width: 900px) { .circulation-hero { grid-template-columns: 1fr; }.circulation-hero-visual { min-height: 190px; }.circulation-service-grid { grid-template-columns: 1fr; }.circulation-journey { grid-template-columns: 1fr; }.circulation-benefits { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 20px; }.circulation-benefits > div { grid-column: 1 / -1; padding-bottom: 8px; border-right: 0; border-bottom: 1px solid #b9dfc4; }.circulation-benefits article { min-height: 54px; border-right: 0; } }
@media (min-width: 701px) and (max-width: 900px) { .circulation-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.circulation-hero-visual { min-height: 276px; }.circulation-hero-copy { padding-left: 24px; padding-right: 14px; }.circulation-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.circulation-hero h2 { font-size: 1.05rem; }.circulation-hero-copy > p:last-child { font-size: .72rem; } }
@media (min-width: 701px) and (max-width: 900px) { .circulation-hero-message { left: 10px; max-width: 72px; }.circulation-hero-message strong { font-size: 1rem; }.circulation-hero-message p { font-size: .62rem; }.circulation-quote { right: 8px; width: 148px; padding: 10px; font-size: .7rem; } }
@media (max-width: 560px) { .circulation-hero-copy { padding: 12px 18px 18px; }.circulation-hero h1 { font-size: 2.35rem; }.circulation-hero h2 { font-size: 1.02rem; }.circulation-hero-copy > p:last-child { font-size: .76rem; }.circulation-hero-visual { min-height: 220px; }.circulation-service-grid { padding: 8px 10px; }.circulation-service > p { padding: 7px 12px; }.circulation-item-grid { grid-template-columns: 1fr; }.circulation-journey { padding: 10px 14px; }.circulation-journey ol { grid-template-columns: repeat(3, 1fr); gap: 10px 4px; }.circulation-journey li:nth-child(even) { display: none; }.circulation-benefits { grid-template-columns: 1fr; padding: 12px 14px; }.circulation-benefits > div { grid-column: auto; }.circulation-benefits article { border-bottom: 1px solid #b9dfc4; } }

/* KOHA REPORTING & ANALYTICS PAGE */
.reporting-page { overflow: hidden; background: #fff; color: #102b59; }
.reporting-hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr); max-width: 1440px; min-height: 275px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f5fbff 62%, #e8f7f0 100%); }
.reporting-hero-copy { padding: 12px 22px 20px 30px; }.reporting-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.reporting-breadcrumb span { padding: 0 5px; color: #159653; }.reporting-breadcrumb a { color: #142b68; }.reporting-breadcrumb a:hover { color: #159653; text-decoration: underline; }.reporting-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.3rem, 4.8vw, 4.45rem); line-height: .98; letter-spacing: -1.5px; }.reporting-hero h1 span { display: block; }.reporting-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.15; }.reporting-hero-copy > p:last-child { max-width: 820px; color: #243d70; font-size: .78rem; line-height: 1.3; }
.reporting-hero-visual { position: relative; min-height: 275px; overflow: hidden; background: linear-gradient(90deg, rgba(226, 245, 255, .8), rgba(226, 248, 235, .85)); }.reporting-dashboard { position: absolute; left: 20px; bottom: 12px; width: 245px; height: 164px; padding: 10px; border: 7px solid #273a4b; border-radius: 9px 9px 3px 3px; background: #f9fcff; box-shadow: 8px 14px 15px rgba(16, 44, 78, .2); transform: perspective(600px) rotateY(-7deg); color: #132f69; font-size: .48rem; }.reporting-dashboard > div:first-child { display: inline-block; width: 57%; height: 76px; padding: 6px; background: #fff; }.reporting-bars { display: flex; align-items: end; gap: 4px; height: 48px; margin-top: 7px; border-bottom: 1px solid #98abc0; }.reporting-bars i { width: 12px; background: #1689df; }.reporting-bars i:nth-child(1) { height: 17px; }.reporting-bars i:nth-child(2) { height: 28px; }.reporting-bars i:nth-child(3) { height: 22px; }.reporting-bars i:nth-child(4) { height: 38px; }.reporting-bars i:nth-child(5) { height: 31px; }.reporting-bars i:nth-child(6) { height: 46px; }.reporting-chart { display: inline-block; width: 40%; height: 76px; margin-left: 3%; padding: 6px; vertical-align: top; background: #fff; }.reporting-chart span { display: block; width: 42px; height: 42px; margin: 8px auto; border: 12px solid #f39811; border-top-color: #1689df; border-right-color: #7542d6; border-radius: 50%; }.reporting-dashboard > small { display: block; margin-top: 8px; padding: 5px; background: #eaf4fb; }.reporting-quote { position: absolute; top: 14px; right: 18px; width: 190px; padding: 15px; border-radius: 9px; background: rgba(255,255,255,.85); color: #102c69; font-size: .9rem; font-style: italic; font-weight: 700; line-height: 1.2; }.reporting-quote::first-letter { color: #159653; font-size: 2rem; }.reporting-quote small { display: block; margin-top: 13px; padding-top: 7px; border-top: 3px solid #159653; color: #1a6b45; font-size: .6rem; font-style: normal; font-weight: 500; }.reporting-books { position: absolute; right: -10px; bottom: 16px; display: flex; flex-direction: column; }.reporting-books b { width: 150px; padding: 5px; color: #fff; font-size: .68rem; text-align: center; box-shadow: 0 3px 5px rgba(16,44,78,.2); }.reporting-books b:nth-child(1) { background: #185179; }.reporting-books b:nth-child(2) { background: #167e9d; }.reporting-books b:nth-child(3) { background: #237b4c; }
.reporting-insight-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; max-width: 1380px; margin: 0 auto; padding: 8px 30px 11px; }.reporting-insight-grid article { min-height: 78px; padding: 12px 11px; border: 1px solid #dceaf3; border-radius: 8px; background: #f8fcff; }.reporting-insight-grid article:nth-child(2) { background: #eefaf2; }.reporting-insight-grid article:nth-child(3) { background: #eef7ff; }.reporting-insight-grid article:nth-child(4) { background: #fff5e8; }.reporting-insight-grid b { display: grid; place-items: center; float: left; width: 45px; height: 45px; margin-right: 10px; border-radius: 50%; background: #7542d6; color: #fff; font-size: 1.45rem; }.reporting-insight-grid article:nth-child(2) b { background: #159653; }.reporting-insight-grid article:nth-child(3) b { background: #1689df; }.reporting-insight-grid article:nth-child(4) b { background: #f39811; }.reporting-insight-grid h2 { margin: 2px 0 3px; color: #102c69; font-size: .85rem; }.reporting-insight-grid p { clear: both; color: #355274; font-size: .7rem; line-height: 1.2; }
.reporting-main-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; max-width: 1380px; margin: 0 auto; padding: 0 30px 10px; }.reporting-areas h2, .reporting-options h2 { margin: 0 0 3px; color: #102c69; font-size: 1.35rem; }.reporting-areas > p, .reporting-options > p { margin-bottom: 9px; color: #355274; font-size: .7rem; }.reporting-area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.reporting-area-grid article { min-height: 88px; padding: 10px; border-radius: 8px; background: #eaf4ff; }.reporting-area-grid article:nth-child(2) { background: #eaf9ee; }.reporting-area-grid article:nth-child(3) { background: #fff3e3; }.reporting-area-grid article:nth-child(4) { background: #f1ecff; }.reporting-area-grid article:nth-child(5) { background: #fff0f3; }.reporting-area-grid article:nth-child(6) { background: #e8f8f8; }.reporting-area-grid b, .reporting-options article b { display: grid; place-items: center; float: left; width: 41px; height: 41px; margin-right: 8px; border-radius: 50%; background: #1689df; color: #fff; font-size: 1.2rem; }.reporting-area-grid article:nth-child(2) b { background: #159653; }.reporting-area-grid article:nth-child(3) b { background: #f39811; }.reporting-area-grid article:nth-child(4) b { background: #7542d6; }.reporting-area-grid article:nth-child(5) b { background: #e65358; }.reporting-area-grid article:nth-child(6) b { background: #13a9aa; }.reporting-area-grid strong, .reporting-options strong { display: block; color: #102c69; font-size: .68rem; line-height: 1.15; }.reporting-area-grid small, .reporting-options small { display: block; margin-top: 3px; color: #355274; font-size: .58rem; font-weight: 400; line-height: 1.15; }.reporting-options article { min-height: 42px; margin-bottom: 6px; padding: 6px 10px; border: 1px solid #d9eaf4; border-radius: 8px; background: #eef8ff; }.reporting-options article:nth-of-type(2) { background: #eef4ff; }.reporting-options article:nth-of-type(3) { background: #f1edff; }.reporting-options article:nth-of-type(4) { background: #e9f9eb; }.reporting-options article b { width: 35px; height: 35px; font-size: 1rem; background: #159653; }.reporting-options article:nth-of-type(2) b { background: #1689df; }.reporting-options article:nth-of-type(3) b { background: #7542d6; }
.reporting-workflow { display: grid; grid-template-columns: .9fr 2.1fr; gap: 15px; align-items: center; max-width: 1380px; margin: 0 auto 10px; padding: 10px 30px; border: 1px solid #cfe3f2; border-left: 4px solid #1689df; background: #f4fbff; }.reporting-workflow h2 { margin: 0 0 3px; color: #102c69; font-size: 1.15rem; }.reporting-workflow p { color: #355274; font-size: .68rem; line-height: 1.25; }.reporting-workflow ol { display: grid; grid-template-columns: repeat(9, 1fr); align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }.reporting-workflow li { display: grid; place-items: center; color: #0875d1; text-align: center; font-size: 1.05rem; }.reporting-workflow li b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1689df; color: #fff; }.reporting-workflow li:nth-child(4n+1) b { background: #159653; }.reporting-workflow li strong { display: block; margin-top: 3px; color: #102c69; font-size: .62rem; line-height: 1; }.reporting-workflow li small { display: block; color: #355274; font-size: .52rem; font-weight: 400; }
@media (max-width: 900px) { .reporting-hero { grid-template-columns: 1fr; }.reporting-hero-visual { min-height: 220px; }.reporting-main-grid { grid-template-columns: 1fr; }.reporting-options { margin-top: 8px; }.reporting-workflow { grid-template-columns: 1fr; }.reporting-workflow ol { margin-top: 4px; } }
@media (min-width: 701px) and (max-width: 900px) { .reporting-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.reporting-hero-visual { min-height: 275px; }.reporting-hero-copy { padding-left: 24px; padding-right: 14px; }.reporting-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.reporting-hero h2 { font-size: 1.05rem; }.reporting-hero-copy > p:last-child { font-size: .72rem; } }
@media (max-width: 560px) { .reporting-hero-copy { padding: 12px 18px 18px; }.reporting-hero h1 { font-size: 2.35rem; }.reporting-hero h2 { font-size: 1.02rem; }.reporting-hero-copy > p:last-child { font-size: .76rem; }.reporting-hero-visual { min-height: 250px; }.reporting-dashboard { left: 8px; transform: scale(.78); transform-origin: bottom left; }.reporting-quote { right: 8px; width: 150px; font-size: .72rem; }.reporting-books { right: -18px; transform: scale(.8); transform-origin: bottom right; }.reporting-insight-grid { grid-template-columns: 1fr 1fr; padding: 8px 14px; }.reporting-main-grid { padding: 0 14px 10px; }.reporting-area-grid { grid-template-columns: 1fr; }.reporting-workflow { margin-left: 14px; margin-right: 14px; padding: 10px 12px; }.reporting-workflow ol { grid-template-columns: repeat(5, 1fr); gap: 7px 3px; }.reporting-workflow li:nth-child(even) { display: none; } }

/* KOHA SEARCH & DISCOVERY PAGE */
.searching-page { overflow: hidden; background: #fff; color: #102b59; }
.searching-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, .9fr); max-width: 1440px; min-height: 286px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f5fbff 61%, #e8f7f0 100%); }.searching-hero-copy { padding: 12px 20px 18px 30px; }.searching-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.searching-breadcrumb span { padding: 0 5px; color: #159653; }.searching-breadcrumb a { color: #142b68; }.searching-breadcrumb a:hover { color: #159653; text-decoration: underline; }.searching-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.35rem, 4.8vw, 4.5rem); line-height: .98; letter-spacing: -1.5px; }.searching-hero h1 span { display: block; }.searching-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.05rem, 1.7vw, 1.55rem); line-height: 1.15; }.searching-hero-copy > p:last-of-type { max-width: 830px; color: #243d70; font-size: .78rem; line-height: 1.3; }.searching-hero-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }.searching-hero-points span { display: flex; gap: 5px; align-items: center; color: #102c69; font-size: .58rem; line-height: 1.05; }.searching-hero-points b { display: grid; place-items: center; flex: 0 0 31px; width: 31px; height: 31px; border-radius: 50%; background: #159653; color: #fff; font-size: .9rem; }.searching-hero-points span:nth-child(2) b { background: #1689df; }.searching-hero-points span:nth-child(3) b { background: #7542d6; }.searching-hero-points span:nth-child(4) b { background: #f39811; }.searching-hero-points strong { display: block; }.searching-hero-points small { display: block; margin-top: 2px; color: #355274; font-size: .52rem; font-weight: 400; }
.searching-hero-visual { position: relative; min-height: 286px; overflow: hidden; background: linear-gradient(90deg, rgba(226,245,255,.8), rgba(226,248,235,.85)); }.searching-opac { position: absolute; z-index: 2; left: 12px; bottom: 12px; width: 305px; height: 205px; padding: 7px; border: 7px solid #263b4a; border-radius: 9px 9px 3px 3px; background: #f4f8fb; box-shadow: 8px 14px 15px rgba(16,44,78,.2); transform: perspective(650px) rotateY(-7deg); color: #16366e; font-size: .42rem; }.searching-opac-bar { display: flex; justify-content: space-between; padding: 4px 5px; background: #fff; }.searching-opac-bar b { color: #258b4d; font-size: .75rem; }.searching-opac-title { padding: 9px; background: #17366a; color: #fff; text-align: center; }.searching-opac-title strong { display: block; font-size: .82rem; }.searching-opac-title small { font-size: .45rem; }.searching-opac-search { margin: 7px 10px 3px; padding: 6px; border: 1px solid #c6d5e5; background: #fff; }.searching-opac-search b { float: right; padding: 2px 5px; border-radius: 3px; background: #0879d3; color: #fff; }.searching-opac-links { padding: 3px 10px; color: #0872d0; }.searching-opac-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; }.searching-opac-tiles b { display: grid; place-items: center; min-height: 35px; border: 1px solid #d8e4ed; border-radius: 3px; background: #fff; color: #0879d3; font-size: .8rem; }.searching-opac-tiles small { display: block; color: #233f61; font-size: .38rem; }.searching-quote { position: absolute; z-index: 3; top: 12px; right: 13px; width: 172px; padding: 13px; border-radius: 9px; background: rgba(255,255,255,.86); color: #102c69; font-size: .85rem; font-style: italic; font-weight: 700; line-height: 1.2; }.searching-quote::first-letter { color: #159653; font-size: 2rem; }.searching-quote small { display: block; margin-top: 12px; padding-top: 6px; border-top: 3px solid #159653; color: #1a6b45; font-size: .58rem; font-style: normal; font-weight: 500; }.searching-cta { position: absolute; z-index: 4; right: 13px; bottom: 15px; padding: 9px 12px; border-radius: 8px; background: #087346; color: #fff; font-size: .72rem; font-weight: 800; }
.searching-capabilities { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 1400px; margin: 0 auto; padding: 8px 20px 10px; }.searching-capabilities article { min-height: 260px; padding: 12px; border-radius: 8px; background: #eaf4ff; }.searching-capabilities article:nth-child(2) { background: #eaf9ee; }.searching-capabilities article:nth-child(3) { background: #fff3e3; }.searching-capabilities article:nth-child(4) { background: #f1ecff; }.searching-capabilities article:nth-child(5) { background: #e8f8f8; }.searching-capabilities article > b { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 7px; border-radius: 50%; background: #1689df; color: #fff; font-size: 1.45rem; }.searching-capabilities article:nth-child(2) > b { background: #159653; }.searching-capabilities article:nth-child(3) > b { background: #f39811; }.searching-capabilities article:nth-child(4) > b { background: #7542d6; }.searching-capabilities article:nth-child(5) > b { background: #13a9aa; }.searching-capabilities h2 { margin-bottom: 4px; color: #102c69; font-size: 1.05rem; line-height: 1.05; }.searching-capabilities p { margin-bottom: 7px; color: #355274; font-size: .72rem; line-height: 1.25; }.searching-capabilities ul { margin: 0; padding-left: 15px; color: #102c69; font-size: .67rem; line-height: 1.25; }
.searching-workflow { display: grid; grid-template-columns: .85fr 2.15fr; gap: 15px; align-items: center; max-width: 1400px; margin: 0 auto; padding: 10px 20px; border: 1px solid #d4e7f3; border-left: 4px solid #1689df; background: #f5fbff; }.searching-workflow h2 { margin: 0 0 3px; color: #102c69; font-size: 1.25rem; }.searching-workflow p { color: #355274; font-size: .7rem; line-height: 1.25; }.searching-workflow ol { display: grid; grid-template-columns: repeat(9, 1fr); align-items: center; gap: 3px; margin: 0; padding: 0; list-style: none; }.searching-workflow li { display: grid; place-items: center; color: #0875d1; text-align: center; font-size: 1.1rem; }.searching-workflow li b { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1689df; color: #fff; }.searching-workflow li:nth-child(4n+1) b { background: #159653; }.searching-workflow li strong { display: block; margin-top: 3px; color: #102c69; font-size: .62rem; line-height: 1; }.searching-workflow li small { display: block; color: #355274; font-size: .5rem; font-weight: 400; }
.searching-benefits { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 0; max-width: 1400px; margin: 8px auto 0; padding: 9px 20px; border: 1px solid #cfe9d6; background: #e8faed; }.searching-benefits > div { border-right: 1px solid #b9dfc4; }.searching-benefits h2 { margin: 0; color: #102c69; font-size: 1.25rem; }.searching-benefits p { color: #355274; font-size: .68rem; line-height: 1.2; }.searching-benefits article { display: flex; gap: 7px; align-items: center; padding: 0 10px; border-right: 1px solid #b9dfc4; }.searching-benefits article:last-child { border-right: 0; }.searching-benefits article > b { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: #159653; color: #fff; font-size: 1rem; }.searching-benefits strong { display: block; color: #102c69; font-size: .63rem; line-height: 1.1; }.searching-benefits small { display: block; margin-top: 2px; color: #355274; font-size: .54rem; font-weight: 400; line-height: 1.1; }
@media (max-width: 900px) { .searching-hero { grid-template-columns: 1fr; }.searching-hero-visual { min-height: 250px; }.searching-capabilities { grid-template-columns: repeat(2, 1fr); }.searching-workflow { grid-template-columns: 1fr; }.searching-benefits { grid-template-columns: repeat(2, 1fr); gap: 8px; }.searching-benefits > div { grid-column: 1 / -1; padding-bottom: 7px; border-right: 0; border-bottom: 1px solid #b9dfc4; }.searching-benefits article { min-height: 52px; border-right: 0; } }
@media (min-width: 701px) and (max-width: 900px) { .searching-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.searching-hero-visual { min-height: 286px; }.searching-hero-copy { padding-left: 24px; padding-right: 14px; }.searching-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.searching-hero h2 { font-size: 1.05rem; }.searching-hero-copy > p:last-of-type { font-size: .72rem; }.searching-opac { left: 5px; width: 220px; transform: scale(.75); transform-origin: bottom left; }.searching-quote { right: 7px; width: 145px; font-size: .7rem; }.searching-cta { right: 7px; font-size: .6rem; } }
@media (max-width: 560px) { .searching-hero-copy { padding: 12px 18px 18px; }.searching-hero h1 { font-size: 2.35rem; }.searching-hero h2 { font-size: 1.02rem; }.searching-hero-copy > p:last-of-type { font-size: .76rem; }.searching-hero-points { grid-template-columns: repeat(2, 1fr); }.searching-hero-visual { min-height: 270px; }.searching-opac { left: 6px; bottom: 7px; width: 230px; transform: scale(.75); transform-origin: bottom left; }.searching-quote { right: 7px; width: 145px; font-size: .7rem; }.searching-cta { right: 7px; bottom: 8px; font-size: .6rem; }.searching-capabilities { grid-template-columns: 1fr; padding: 8px 14px; }.searching-capabilities article { min-height: 0; }.searching-workflow { margin: 0 14px; padding: 10px 12px; }.searching-workflow ol { grid-template-columns: repeat(5, 1fr); gap: 8px 3px; }.searching-workflow li:nth-child(even) { display: none; }.searching-benefits { grid-template-columns: 1fr; margin: 8px 14px 0; padding: 10px 14px; }.searching-benefits > div { grid-column: auto; }.searching-benefits article { border-bottom: 1px solid #b9dfc4; } }

/* KOHA OPAC PAGE */
.opac-page { overflow: hidden; background: #fff; color: #102b59; }.opac-hero { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(330px, 1fr); max-width: 1440px; min-height: 286px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f5fbff 59%, #e8f7f0 100%); }.opac-hero-copy { padding: 12px 18px 18px 30px; }.opac-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.opac-breadcrumb span { padding: 0 5px; color: #159653; }.opac-breadcrumb a { color: #142b68; }.opac-breadcrumb a:hover { color: #159653; text-decoration: underline; }.opac-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.5rem, 5vw, 4.7rem); line-height: .95; letter-spacing: -1.6px; }.opac-hero h1 span { display: inline; }.opac-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.08; }.opac-hero-copy > p:last-of-type { max-width: 650px; color: #243d70; font-size: .78rem; line-height: 1.3; }.opac-hero-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }.opac-hero-points span { display: flex; gap: 5px; align-items: center; color: #102c69; font-size: .58rem; line-height: 1.05; }.opac-hero-points b { display: grid; place-items: center; flex: 0 0 33px; width: 33px; height: 33px; border-radius: 50%; background: #159653; color: #fff; font-size: 1rem; }.opac-hero-points span:nth-child(2) b { background: #7542d6; }.opac-hero-points span:nth-child(3) b { background: #1689df; }.opac-hero-points span:nth-child(4) b { background: #f39811; }.opac-hero-points strong { display: block; }.opac-hero-points small { display: block; margin-top: 2px; color: #355274; font-size: .5rem; font-weight: 400; }
.opac-hero-visual { position: relative; min-height: 286px; overflow: hidden; background: linear-gradient(90deg, rgba(226,245,255,.8), rgba(226,248,235,.85)); }.opac-device { position: absolute; z-index: 2; left: 12px; bottom: 11px; width: 330px; height: 222px; padding: 7px; border: 7px solid #263b4a; border-radius: 9px 9px 3px 3px; background: #f4f8fb; box-shadow: 8px 14px 15px rgba(16,44,78,.2); transform: perspective(650px) rotateY(-7deg); color: #16366e; font-size: .42rem; }.opac-device-bar { display: flex; justify-content: space-between; padding: 4px 5px; background: #fff; }.opac-device-bar b { color: #258b4d; font-size: .75rem; }.opac-device-heading { padding: 10px; background: #17366a; color: #fff; text-align: center; }.opac-device-heading strong { display: block; font-size: .88rem; }.opac-device-heading small { font-size: .45rem; }.opac-device-search { margin: 7px 10px 3px; padding: 6px; border: 1px solid #c6d5e5; background: #fff; }.opac-device-search b { float: right; padding: 2px 5px; border-radius: 3px; background: #0879d3; color: #fff; }.opac-device-links { padding: 3px 10px; color: #0872d0; }.opac-device-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; }.opac-device-tiles b { display: grid; place-items: center; min-height: 38px; border: 1px solid #d8e4ed; border-radius: 3px; background: #fff; color: #0879d3; font-size: .8rem; }.opac-device-tiles small { display: block; color: #233f61; font-size: .38rem; }.opac-quote { position: absolute; z-index: 3; top: 14px; right: 14px; width: 175px; padding: 14px; border-radius: 9px; background: rgba(255,255,255,.86); color: #102c69; font-size: .88rem; font-style: italic; font-weight: 700; line-height: 1.2; }.opac-quote::first-letter { color: #159653; font-size: 2rem; }.opac-quote small { display: block; margin-top: 12px; padding-top: 7px; border-top: 3px solid #159653; color: #1a6b45; font-size: .58rem; font-style: normal; font-weight: 500; }
.opac-search-panel { max-width: 1380px; margin: 8px auto 0; padding: 0 20px 10px; }.opac-search-heading { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid #d8e7f2; background: #eef8ff; }.opac-search-heading > b { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: #159653; color: #fff; font-size: 1.5rem; }.opac-search-heading h2 { margin: 0; color: #102c69; font-size: 1.35rem; line-height: 1; }.opac-search-heading p { margin-top: 2px; color: #355274; font-size: .66rem; line-height: 1.2; }.opac-search-heading nav { margin-left: auto; display: flex; gap: 8px; font-size: .62rem; }.opac-search-heading nav a { color: #0872d0; }.opac-search-fields { padding: 8px; border: 1px solid #d8e7f2; border-top: 0; color: #102c69; font-size: .65rem; }.opac-search-fields > strong { display: block; margin-bottom: 4px; }.opac-search-fields label { display: grid; grid-template-columns: 35px 190px 1fr; gap: 5px; align-items: center; margin: 4px 0; }.opac-search-fields label:first-of-type { grid-template-columns: 225px 1fr; }.opac-search-fields select, .opac-search-fields input, .opac-filter-grid select, .opac-filter-grid input { min-width: 0; padding: 5px; border: 1px solid #cbd9e5; background: #fff; color: #355274; font: inherit; }.opac-search-actions { margin: 6px 0 0 205px; display: flex; gap: 5px; }.opac-search-actions button { padding: 5px 12px; border: 1px solid #b8c8d7; border-radius: 4px; background: #fff; color: #243d70; font-size: .62rem; }.opac-search-actions button:first-child { border-color: #078746; background: #078746; color: #fff; }.opac-filter-grid { display: grid; grid-template-columns: 1.7fr repeat(4, 1fr); gap: 7px; padding: 7px; border: 1px solid #d8e7f2; }.opac-filter-grid fieldset { grid-row: span 2; display: flex; flex-wrap: wrap; gap: 3px 9px; padding: 6px; border: 1px solid #cfe1ef; color: #355274; font-size: .58rem; }.opac-filter-grid legend { color: #0872d0; font-weight: 700; }.opac-filter-grid fieldset p { width: 100%; color: #102c69; }.opac-filter-grid fieldset label { width: 45%; }.opac-filter-grid > label { display: flex; flex-direction: column; gap: 3px; color: #102c69; font-size: .6rem; }
.opac-side-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; max-width: 1380px; margin: 0 auto; padding: 0 20px 8px; }.opac-side-grid article { padding: 10px; border-radius: 8px; background: #eaf4ff; }.opac-side-grid article:nth-child(2) { background: #eefaf2; }.opac-side-grid article:nth-child(3) { background: #fff5e8; }.opac-side-grid article > b { display: grid; place-items: center; float: left; width: 40px; height: 40px; margin-right: 8px; border-radius: 50%; background: #1689df; color: #fff; font-size: 1.3rem; }.opac-side-grid article:nth-child(2) > b { background: #159653; }.opac-side-grid article:nth-child(3) > b { background: #f39811; }.opac-side-grid h2 { margin: 2px 0 5px; color: #102c69; font-size: 1.05rem; }.opac-side-grid p { color: #355274; font-size: .65rem; line-height: 1.25; }.opac-side-grid ul { clear: both; margin: 0; padding: 5px 0 0 16px; color: #102c69; font-size: .62rem; line-height: 1.25; }.opac-side-grid li::marker { color: #159653; }.opac-side-grid a { display: inline-block; margin-top: 10px; padding: 6px 10px; border: 1px solid #1689df; border-radius: 4px; color: #0872d0; font-size: .62rem; font-weight: 700; }
.opac-benefits { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 0; max-width: 1380px; margin: 0 auto 9px; padding: 9px 20px; border: 1px solid #cfe9d6; background: #e8faed; }.opac-benefits > div { border-right: 1px solid #b9dfc4; }.opac-benefits h2 { margin: 0; color: #102c69; font-size: 1.25rem; }.opac-benefits p { color: #355274; font-size: .65rem; line-height: 1.2; }.opac-benefits article { display: flex; gap: 7px; align-items: center; padding: 0 10px; border-right: 1px solid #b9dfc4; }.opac-benefits article:last-child { border-right: 0; }.opac-benefits article > b { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 50%; background: #078746; color: #fff; font-size: 1rem; }.opac-benefits article:nth-child(3) > b { background: #1689df; }.opac-benefits article:nth-child(4) > b { background: #f39811; }.opac-benefits article:nth-child(5) > b { background: #7542d6; }.opac-benefits strong { display: block; color: #102c69; font-size: .62rem; line-height: 1.1; }.opac-benefits small { display: block; margin-top: 2px; color: #355274; font-size: .54rem; font-weight: 400; line-height: 1.1; }
@media (max-width: 900px) { .opac-hero { grid-template-columns: 1fr; }.opac-hero-visual { min-height: 255px; }.opac-filter-grid { grid-template-columns: repeat(2, 1fr); }.opac-filter-grid fieldset { grid-row: auto; grid-column: 1 / -1; }.opac-side-grid { grid-template-columns: 1fr 1fr; }.opac-side-grid article:last-child { grid-column: 1 / -1; }.opac-benefits { grid-template-columns: repeat(2, 1fr); gap: 8px; }.opac-benefits > div { grid-column: 1 / -1; padding-bottom: 7px; border-right: 0; border-bottom: 1px solid #b9dfc4; }.opac-benefits article { min-height: 50px; border-right: 0; } }
@media (min-width: 701px) and (max-width: 900px) { .opac-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.opac-hero-visual { min-height: 286px; }.opac-hero-copy { padding-left: 24px; padding-right: 14px; }.opac-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.opac-hero h2 { font-size: 1.1rem; }.opac-hero-copy > p:last-of-type { font-size: .72rem; }.opac-device { left: 4px; width: 230px; transform: scale(.75); transform-origin: bottom left; }.opac-quote { right: 7px; width: 145px; font-size: .7rem; } }
@media (max-width: 560px) { .opac-hero-copy { padding: 12px 18px 18px; }.opac-hero h1 { font-size: 2.45rem; }.opac-hero h2 { font-size: 1.05rem; }.opac-hero-copy > p:last-of-type { font-size: .76rem; }.opac-hero-points { grid-template-columns: repeat(2, 1fr); }.opac-hero-visual { min-height: 285px; }.opac-device { left: 5px; bottom: 8px; width: 235px; transform: scale(.72); transform-origin: bottom left; }.opac-quote { right: 7px; width: 145px; font-size: .7rem; }.opac-search-panel { padding: 0 12px 8px; }.opac-search-heading { align-items: flex-start; }.opac-search-heading nav { display: none; }.opac-search-fields label, .opac-search-fields label:first-of-type { grid-template-columns: 1fr; }.opac-search-actions { margin-left: 0; }.opac-filter-grid { grid-template-columns: 1fr; }.opac-side-grid { grid-template-columns: 1fr; padding: 0 12px 8px; }.opac-side-grid article:last-child { grid-column: auto; }.opac-benefits { grid-template-columns: 1fr; margin: 0 12px 9px; padding: 10px 14px; }.opac-benefits > div { grid-column: auto; }.opac-benefits article { border-bottom: 1px solid #b9dfc4; } }

/* KOHA CATALOGUING PAGE */
.cataloguing-page { overflow: hidden; background: #fff; color: #102b59; }.cataloguing-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); max-width: 1440px; min-height: 300px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f5fbff 59%, #e8f7f0 100%); }.cataloguing-hero-copy { padding: 12px 18px 18px 30px; }.cataloguing-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.cataloguing-breadcrumb span { padding: 0 5px; color: #159653; }.cataloguing-breadcrumb a { color: #142b68; }.cataloguing-breadcrumb a:hover { color: #159653; text-decoration: underline; }.cataloguing-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: .95; letter-spacing: -1.6px; }.cataloguing-hero h1 span { display: inline; }.cataloguing-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.25rem, 2vw, 1.8rem); line-height: 1.08; }.cataloguing-hero-copy > p:last-of-type { max-width: 660px; color: #243d70; font-size: .78rem; line-height: 1.3; }.cataloguing-hero-points { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }.cataloguing-hero-points span { display: flex; gap: 5px; align-items: center; color: #102c69; font-size: .58rem; line-height: 1.05; }.cataloguing-hero-points b { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: #159653; color: #fff; font-size: 1rem; }.cataloguing-hero-points span:nth-child(2) b { background: #1689df; }.cataloguing-hero-points span:nth-child(3) b { background: #f39811; }.cataloguing-hero-points span:nth-child(4) b { background: #7542d6; }.cataloguing-hero-points strong { display: block; }.cataloguing-hero-points small { display: block; margin-top: 2px; color: #355274; font-size: .5rem; font-weight: 400; }
.cataloguing-hero-visual { position: relative; min-height: 300px; overflow: hidden; background: linear-gradient(90deg, rgba(226,245,255,.8), rgba(226,248,235,.85)); }.cataloguing-editor { position: absolute; z-index: 2; left: 16px; bottom: 11px; width: 390px; height: 265px; padding: 7px; border: 7px solid #263b4a; border-radius: 9px 9px 3px 3px; background: #f4f8fb; box-shadow: 8px 14px 15px rgba(16,44,78,.2); transform: perspective(650px) rotateY(-7deg); color: #16366e; font-size: .4rem; }.cataloguing-editor-bar { display: flex; justify-content: space-between; padding: 4px 5px; background: #fff; }.cataloguing-editor-bar b { color: #258b4d; font-size: .75rem; }.cataloguing-editor-nav { padding: 5px; background: #12386b; color: #fff; }.cataloguing-editor-toolbar { display: flex; justify-content: space-between; padding: 7px; background: #fff; }.cataloguing-editor-toolbar strong { padding: 3px; background: #1689df; color: #fff; }.cataloguing-record { padding: 5px; background: #eef3f7; }.cataloguing-record > small { display: block; padding-bottom: 5px; }.cataloguing-record-row { display: grid; grid-template-columns: 12% 10% 63% 15%; min-height: 19px; border-bottom: 1px solid #c7d5e2; background: #fff; }.cataloguing-record-row b, .cataloguing-record-row span { padding: 4px; }.cataloguing-record-row b { background: #d9e7f3; }.cataloguing-quote { position: absolute; z-index: 3; top: 12px; right: 12px; width: 175px; padding: 14px; border-radius: 9px; background: rgba(255,255,255,.86); color: #102c69; font-size: .9rem; font-style: italic; font-weight: 700; line-height: 1.2; }.cataloguing-quote::first-letter { color: #159653; font-size: 2rem; }.cataloguing-quote small { display: block; margin-top: 13px; padding-top: 7px; border-top: 3px solid #159653; color: #1a6b45; font-size: .6rem; font-style: normal; font-weight: 500; }.cataloguing-books { position: absolute; right: -8px; bottom: 13px; display: flex; flex-direction: column; }.cataloguing-books b { width: 135px; padding: 5px; color: #fff; font-size: .68rem; text-align: center; box-shadow: 0 3px 5px rgba(16,44,78,.2); }.cataloguing-books b:nth-child(1) { background: #244969; }.cataloguing-books b:nth-child(2) { background: #238249; }.cataloguing-books b:nth-child(3) { background: #df8b08; }.cataloguing-books b:nth-child(4) { background: #7542d6; }
.cataloguing-capabilities { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 1400px; margin: 0 auto; padding: 9px 24px; }.cataloguing-capabilities article { min-height: 150px; padding: 11px; border-radius: 8px; background: #eaf4ff; }.cataloguing-capabilities article:nth-child(2) { background: #eaf9ee; }.cataloguing-capabilities article:nth-child(3) { background: #fff3e3; }.cataloguing-capabilities article:nth-child(4) { background: #f1ecff; }.cataloguing-capabilities article:nth-child(5) { background: #fff0f3; }.cataloguing-capabilities article:nth-child(6) { background: #e8f8f8; }.cataloguing-capabilities article > b { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 7px; border-radius: 50%; background: #1689df; color: #fff; font-size: 1.25rem; }.cataloguing-capabilities article:nth-child(2) > b { background: #159653; }.cataloguing-capabilities article:nth-child(3) > b { background: #f39811; }.cataloguing-capabilities article:nth-child(4) > b { background: #7542d6; }.cataloguing-capabilities article:nth-child(5) > b { background: #e65358; }.cataloguing-capabilities article:nth-child(6) > b { background: #13a9aa; }.cataloguing-capabilities h2 { margin-bottom: 5px; color: #102c69; font-size: .9rem; line-height: 1.1; }.cataloguing-capabilities p { color: #355274; font-size: .66rem; line-height: 1.25; }
.cataloguing-standards { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 8px; max-width: 1400px; margin: 0 auto; padding: 0 24px 9px; }.cataloguing-standards > div { padding: 10px; border-left: 4px solid #1689df; background: #f4fbff; }.cataloguing-standards > div > b { display: grid; place-items: center; float: left; width: 42px; height: 42px; margin-right: 8px; border-radius: 50%; background: #102c69; color: #fff; }.cataloguing-standards h2 { color: #102c69; font-size: 1rem; line-height: 1.1; }.cataloguing-standards p { color: #355274; font-size: .62rem; line-height: 1.2; }.cataloguing-standards article { padding: 10px; border: 1px solid #d7e6f0; background: #fff; }.cataloguing-standards strong { display: block; color: #102c69; font-size: .68rem; }.cataloguing-standards small { color: #355274; font-size: .58rem; line-height: 1.15; }
.cataloguing-workflow { display: grid; grid-template-columns: .9fr 2.1fr; gap: 15px; align-items: center; max-width: 1400px; margin: 0 auto 9px; padding: 9px 24px; border: 1px solid #cfe9d6; border-left: 4px solid #159653; background: #effbf3; }.cataloguing-workflow > div > b { display: grid; place-items: center; float: left; width: 42px; height: 42px; margin-right: 8px; border-radius: 50%; background: #159653; color: #fff; font-size: 1.3rem; }.cataloguing-workflow h2 { color: #102c69; font-size: 1.1rem; }.cataloguing-workflow p { color: #355274; font-size: .66rem; line-height: 1.2; }.cataloguing-workflow ol { display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; gap: 3px; margin: 0; padding: 0; list-style: none; }.cataloguing-workflow li { display: grid; place-items: center; color: #0875d1; text-align: center; font-size: 1.05rem; }.cataloguing-workflow li b { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #1689df; color: #fff; }.cataloguing-workflow li:nth-child(4n+1) b { background: #159653; }.cataloguing-workflow li strong { display: block; margin-top: 3px; color: #102c69; font-size: .6rem; line-height: 1; }.cataloguing-workflow li small { display: block; color: #355274; font-size: .5rem; font-weight: 400; }
@media (max-width: 900px) { .cataloguing-hero { grid-template-columns: 1fr; }.cataloguing-hero-visual { min-height: 270px; }.cataloguing-capabilities { grid-template-columns: repeat(3, 1fr); }.cataloguing-standards { grid-template-columns: repeat(3, 1fr); }.cataloguing-standards > div { grid-column: 1 / -1; }.cataloguing-workflow { grid-template-columns: 1fr; }.cataloguing-workflow ol { margin-top: 5px; } }
@media (min-width: 701px) and (max-width: 900px) { .cataloguing-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.cataloguing-hero-visual { min-height: 300px; }.cataloguing-hero-copy { padding-left: 24px; padding-right: 14px; }.cataloguing-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.cataloguing-hero h2 { font-size: 1.05rem; }.cataloguing-hero-copy > p:last-of-type { font-size: .72rem; }.cataloguing-editor { left: 2px; width: 235px; transform: scale(.58); transform-origin: bottom left; }.cataloguing-quote { right: 7px; width: 145px; font-size: .7rem; }.cataloguing-books { right: -25px; transform: scale(.72); transform-origin: bottom right; } }
@media (max-width: 560px) { .cataloguing-hero-copy { padding: 12px 18px 18px; }.cataloguing-hero h1 { font-size: 2.45rem; }.cataloguing-hero h2 { font-size: 1.05rem; }.cataloguing-hero-copy > p:last-of-type { font-size: .76rem; }.cataloguing-hero-points { grid-template-columns: repeat(2, 1fr); }.cataloguing-hero-visual { min-height: 290px; }.cataloguing-editor { left: 5px; bottom: 8px; width: 235px; transform: scale(.68); transform-origin: bottom left; }.cataloguing-quote { right: 7px; width: 145px; font-size: .7rem; }.cataloguing-books { right: -25px; transform: scale(.76); transform-origin: bottom right; }.cataloguing-capabilities { grid-template-columns: 1fr; padding: 8px 14px; }.cataloguing-capabilities article { min-height: 0; }.cataloguing-standards { grid-template-columns: 1fr; padding: 0 14px 8px; }.cataloguing-workflow { margin: 0 14px 8px; padding: 10px 12px; }.cataloguing-workflow ol { grid-template-columns: repeat(4, 1fr); gap: 8px 3px; }.cataloguing-workflow li:nth-child(even) { display: none; } }

/* KOHA TOOLS PAGE */
.tools-page { overflow: hidden; background: #fff; color: #102b59; }.tools-hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(340px, 1fr); max-width: 1440px; min-height: 290px; margin: 0 auto; background: linear-gradient(105deg, #fff 0%, #f5fbff 58%, #e8f7f0 100%); }.tools-hero-copy { padding: 12px 20px 18px 30px; }.tools-breadcrumb { margin-bottom: 5px; color: #142b68; font-size: .7rem; font-weight: 700; }.tools-breadcrumb span { padding: 0 5px; color: #159653; }.tools-breadcrumb a { color: #142b68; }.tools-breadcrumb a:hover { color: #159653; text-decoration: underline; }.tools-hero h1 { margin: 0; color: #102c69; font-size: clamp(2.65rem, 5vw, 4.8rem); line-height: .95; letter-spacing: -1.6px; }.tools-hero h1 span { display: inline; }.tools-hero h2 { margin: 5px 0 6px; color: #102c69; font-size: clamp(1.2rem, 2vw, 1.8rem); line-height: 1.08; }.tools-hero-copy > p:last-of-type { max-width: 680px; color: #243d70; font-size: .78rem; line-height: 1.3; }.tools-hero-points { display: flex; gap: 20px; margin-top: 13px; }.tools-hero-points span { display: flex; gap: 5px; align-items: center; color: #102c69; font-size: .6rem; line-height: 1.05; }.tools-hero-points b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #159653; color: #fff; font-size: 1rem; }.tools-hero-points span:nth-child(2) b { background: #1689df; }.tools-hero-points span:nth-child(3) b { background: #f39811; }.tools-hero-points strong { display: block; }.tools-hero-points small { display: block; margin-top: 2px; color: #355274; font-size: .5rem; font-weight: 400; }
.tools-hero-visual { position: relative; min-height: 290px; overflow: hidden; background: linear-gradient(90deg, rgba(226,245,255,.8), rgba(226,248,235,.85)); }.tools-dashboard { position: absolute; z-index: 2; left: 8px; bottom: 9px; width: 360px; height: 245px; padding: 7px; border: 7px solid #263b4a; border-radius: 9px 9px 3px 3px; background: #f4f8fb; box-shadow: 8px 14px 15px rgba(16,44,78,.2); transform: perspective(650px) rotateY(-7deg); color: #16366e; font-size: .4rem; }.tools-dashboard-bar { display: flex; justify-content: space-between; padding: 4px 5px; background: #fff; }.tools-dashboard-bar b { color: #258b4d; font-size: .75rem; }.tools-dashboard-nav { padding: 6px 5px; background: #12386b; color: #fff; line-height: 1.8; }.tools-dashboard-nav strong { color: #fff; border-bottom: 2px solid #52c57c; }.tools-dashboard h3 { margin: 8px 8px 3px; color: #102c69; font-size: 1.1rem; }.tools-dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 7px; }.tools-dashboard-grid b { display: grid; grid-template-columns: 25px 1fr; align-items: center; min-height: 47px; padding: 5px; border: 1px solid #d7e3ed; border-radius: 4px; background: #fff; color: #0872d0; font-size: 1rem; }.tools-dashboard-grid small { color: #102c69; font-size: .58rem; }.tools-message { position: absolute; top: 15px; right: 12px; z-index: 3; color: #102c69; }.tools-message strong { font-size: 1.15rem; font-style: italic; line-height: 1.05; }.tools-message span { display: block; width: 38px; height: 3px; margin: 10px 0; background: #159653; }.tools-message p { color: #355274; font-size: .68rem; line-height: 1.2; }.tools-books { position: absolute; right: -8px; bottom: 13px; display: flex; flex-direction: column; }.tools-books b { width: 145px; padding: 5px; color: #fff; font-size: .7rem; text-align: center; box-shadow: 0 3px 5px rgba(16,44,78,.2); }.tools-books b:nth-child(1) { background: #244969; }.tools-books b:nth-child(2) { background: #238249; }.tools-books b:nth-child(3) { background: #df8b08; }
.tools-section-heading { position: relative; max-width: 1400px; margin: 0 auto; padding: 10px 28px 7px; }.tools-section-heading h2 { margin: 0; color: #102c69; font-size: 1.35rem; }.tools-section-heading p { color: #355274; font-size: .7rem; }.tools-section-heading a { position: absolute; right: 28px; top: 10px; padding: 7px 12px; border: 1px solid #1689df; border-radius: 4px; color: #0872d0; font-size: .65rem; font-weight: 700; }
.tools-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 1400px; margin: 0 auto; padding: 0 22px 10px; }.tools-grid article { min-height: 300px; padding: 10px; border-radius: 8px; background: #eaf4ff; }.tools-grid article:nth-child(2) { background: #eaf9ee; }.tools-grid article:nth-child(3) { background: #fff3e3; }.tools-grid article:nth-child(4) { background: #f1ecff; }.tools-grid article:nth-child(5) { background: #e8f8f8; }.tools-grid article:nth-child(6) { background: #eef5ff; }.tools-grid article > b { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 6px; border-radius: 50%; background: #159653; color: #fff; font-size: 1.15rem; }.tools-grid article:nth-child(2) > b { background: #1689df; }.tools-grid article:nth-child(3) > b { background: #f39811; }.tools-grid article:nth-child(4) > b { background: #7542d6; }.tools-grid article:nth-child(5) > b { background: #13a9aa; }.tools-grid article:nth-child(6) > b { background: #1689df; }.tools-grid h2 { margin-bottom: 4px; color: #102c69; font-size: .92rem; line-height: 1.05; }.tools-grid article > p { min-height: 36px; color: #355274; font-size: .62rem; line-height: 1.15; }.tool-preview { min-height: 105px; margin: 7px 0; padding: 6px; border: 1px solid #c5dbe9; border-radius: 4px; background: rgba(255,255,255,.7); color: #102c69; font-size: .55rem; }.tool-preview strong { display: block; margin-bottom: 5px; color: #0872d0; }.tool-preview label { display: flex; justify-content: space-between; gap: 3px; margin: 3px 0; }.tool-preview select, .tool-preview input { width: 55%; min-width: 0; border: 1px solid #bfd0de; color: #355274; font-size: .5rem; }.tool-preview em { display: block; margin-top: 6px; color: #102c69; font-size: .75rem; font-style: normal; text-align: center; }.tool-preview button { float: right; border: 0; padding: 4px 8px; border-radius: 3px; background: #0872d0; color: #fff; font-size: .5rem; }.rfid-preview span { display: block; padding: 10px; color: #1689df; font-size: 2rem; text-align: center; }.rfid-preview em { font-size: .58rem; }.label-preview em { width: 85px; margin: 6px auto; padding: 5px; border: 1px solid #8599a7; background: #fff; text-align: left; }.log-preview span { display: block; padding: 4px 1px; border-bottom: 1px solid #d7e3ed; }.tools-grid ul { margin: 0 0 7px; padding-left: 14px; color: #102c69; font-size: .58rem; line-height: 1.25; }.tools-grid article > a { display: block; padding: 6px; border-radius: 4px; background: #0872d0; color: #fff; font-size: .62rem; font-weight: 700; text-align: center; }.tools-grid article:nth-child(1) > a { background: #159653; }.tools-grid article:nth-child(3) > a { background: #f39811; }.tools-grid article:nth-child(4) > a { background: #7542d6; }.tools-grid article:nth-child(5) > a { background: #13a9aa; }
.tools-plugins { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr) auto; gap: 10px; align-items: center; max-width: 1400px; margin: 0 auto 10px; padding: 10px 24px; border: 1px solid #d5e8f1; border-left: 4px solid #1689df; background: #f5fbff; }.tools-plugins > div > b { display: grid; place-items: center; float: left; width: 43px; height: 43px; margin-right: 8px; border-radius: 50%; background: #102c69; color: #fff; font-size: 1.4rem; }.tools-plugins h2 { color: #102c69; font-size: 1rem; }.tools-plugins p { color: #355274; font-size: .62rem; line-height: 1.2; }.tools-plugins > span { display: flex; gap: 6px; align-items: center; color: #159653; font-size: 1.2rem; }.tools-plugins > span:nth-child(3) { color: #1689df; }.tools-plugins > span:nth-child(4) { color: #7542d6; }.tools-plugins > span:nth-child(5) { color: #159653; }.tools-plugins strong { color: #102c69; font-size: .6rem; line-height: 1.1; }.tools-plugins a { padding: 8px 12px; border: 1px solid #1689df; border-radius: 4px; color: #0872d0; font-size: .62rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 950px) { .tools-hero { grid-template-columns: 1fr; }.tools-hero-visual { min-height: 260px; }.tools-grid { grid-template-columns: repeat(3, 1fr); }.tools-plugins { grid-template-columns: 1fr 1fr 1fr; }.tools-plugins > div { grid-column: 1 / -1; } }
@media (min-width: 701px) and (max-width: 950px) { .tools-hero { grid-template-columns: minmax(0, 1.55fr) minmax(230px, .75fr); }.tools-hero-visual { min-height: 290px; }.tools-hero-copy { padding-left: 24px; padding-right: 14px; }.tools-hero h1 { font-size: clamp(2.05rem, 4.5vw, 3.5rem); }.tools-hero h2 { font-size: 1.05rem; }.tools-hero-copy > p:last-of-type { font-size: .72rem; }.tools-dashboard { left: 2px; width: 235px; transform: scale(.62); transform-origin: bottom left; }.tools-message { right: 7px; }.tools-message strong { font-size: .85rem; }.tools-books { right: -26px; transform: scale(.72); transform-origin: bottom right; } }
@media (max-width: 560px) { .tools-hero-copy { padding: 12px 18px 18px; }.tools-hero h1 { font-size: 2.45rem; }.tools-hero h2 { font-size: 1.05rem; }.tools-hero-copy > p:last-of-type { font-size: .76rem; }.tools-hero-points { gap: 8px; }.tools-hero-points span { font-size: .52rem; }.tools-hero-points small { font-size: .45rem; }.tools-hero-visual { min-height: 270px; }.tools-dashboard { left: 4px; bottom: 7px; width: 235px; transform: scale(.62); transform-origin: bottom left; }.tools-message { right: 7px; }.tools-message strong { font-size: .82rem; }.tools-message p { font-size: .58rem; }.tools-books { right: -25px; transform: scale(.7); transform-origin: bottom right; }.tools-section-heading { padding: 10px 14px 7px; }.tools-section-heading a { right: 14px; font-size: .55rem; }.tools-grid { grid-template-columns: 1fr; padding: 0 14px 10px; }.tools-grid article { min-height: 0; }.tools-plugins { grid-template-columns: 1fr 1fr; margin: 0 14px 10px; padding: 10px 12px; }.tools-plugins > div { grid-column: 1 / -1; }.tools-plugins a { grid-column: 1 / -1; text-align: center; } }

/* KOHA ILMS OVERVIEW */
.overview-page { background: #fff; color: #102b59; }.overview-breadcrumb { margin-bottom: 12px; color: #142b68; font-size: .72rem; font-weight: 700; }.overview-breadcrumb a { color: #142b68; }.overview-breadcrumb span { padding: 0 5px; color: #159653; }.overview-section-kicker { margin-bottom: 8px; color: #168949; font-size: .78rem; font-weight: 800; letter-spacing: 1px; }.koha-overview-section { max-width: 1280px; margin: 0 auto; padding: 42px 28px; }.koha-overview-section h2 { margin: 0 0 9px; color: #102c69; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.1; }.koha-overview-section p { color: #355274; font-size: .94rem; line-height: 1.55; }.overview-definition { display: grid; grid-template-columns: .9fr 1.1fr; gap: 30px; background: #f7fbfd; }.overview-definition-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.overview-definition-cards article { padding: 17px; background: #e8f6ff; border-top: 4px solid #1689df; }.overview-definition-cards article:nth-child(2) { background: #eaf9ee; border-color: #159653; }.overview-definition-cards article:nth-child(3) { background: #fff3e3; border-color: #f39811; }.overview-definition-cards b { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 10px; border-radius: 50%; background: #1689df; color: #fff; }.overview-definition-cards article:nth-child(2) b { background: #159653; }.overview-definition-cards article:nth-child(3) b { background: #f39811; }.overview-definition-cards h3 { margin-bottom: 7px; color: #102c69; font-size: 1rem; }.overview-definition-cards p { font-size: .78rem; }.overview-lifecycle { display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; }.overview-lifecycle ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin: 0; padding: 0; list-style: none; }.overview-lifecycle li { padding: 12px; border-left: 4px solid #159653; background: #eaf9ee; color: #102c69; font-size: .78rem; font-weight: 700; }.overview-lifecycle li:nth-child(3n) { border-color: #1689df; background: #eaf4ff; }.overview-lifecycle b { display: block; margin-bottom: 4px; color: #159653; font-size: .68rem; }.overview-glance { background: #f7fafc; }.overview-glance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }.overview-glance-grid article { padding: 15px; border: 1px solid #d9e8f1; background: #fff; }.overview-glance-grid b { color: #159653; font-size: .72rem; }.overview-glance-grid h3 { margin: 7px 0 4px; color: #102c69; font-size: .95rem; }.overview-glance-grid p { font-size: .74rem; }.koha-overview-link { display: inline-block; margin-top: 12px; color: #0872d0; font-size: .82rem; font-weight: 800; }.overview-section-heading { margin-bottom: 16px; }.overview-module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.overview-module-grid a { padding: 14px; border-radius: 8px; background: #eaf4ff; color: #102c69; }.overview-module-grid a:nth-child(2n) { background: #eaf9ee; }.overview-module-grid b { display: block; margin-bottom: 8px; color: #1689df; font-size: 1.3rem; }.overview-module-grid strong, .overview-module-grid span { display: block; }.overview-module-grid strong { font-size: .9rem; }.overview-module-grid span { margin-top: 3px; color: #355274; font-size: .72rem; }.overview-platform { background: #f7fafc; }.overview-layer-stack { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 20px 0 14px; padding: 0; list-style: none; }.overview-layer-stack li { padding: 14px 7px; border-top: 4px solid #159653; background: #eaf9ee; color: #102c69; font-size: .73rem; font-weight: 700; text-align: center; }.overview-layer-stack li:nth-child(2n) { border-color: #1689df; background: #eaf4ff; }.overview-boundaries { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 13px; background: #fff3e3; color: #102c69; font-size: .75rem; }.overview-boundaries strong { margin-right: 8px; }.overview-boundaries span { padding: 6px 9px; border: 1px solid #f1cf9c; background: #fff; }.overview-why-grid, .overview-user-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 17px; }.overview-why-grid span, .overview-user-grid span { padding: 14px; border-left: 4px solid #159653; background: #eaf9ee; color: #102c69; font-weight: 700; }.overview-why-grid span:nth-child(2n), .overview-user-grid span:nth-child(2n) { border-color: #1689df; background: #eaf4ff; }.overview-practice { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; background: #f7fafc; }.overview-practice ol { display: flex; flex-wrap: wrap; gap: 7px; align-content: center; margin: 0; padding: 0; list-style: none; }.overview-practice li { padding: 10px 13px; border-radius: 4px; background: #eaf9ee; color: #102c69; font-size: .78rem; font-weight: 700; }.overview-practice li:nth-child(2n) { background: #eaf4ff; }.overview-cta { max-width: 1280px; margin: 0 auto 35px; padding: 30px 28px; background: #102f60; color: #fff; }.overview-cta h2 { color: #fff; font-size: 2rem; }.overview-cta p { margin: 8px 0 18px; color: #dce8f5; }.overview-cta .overview-button-secondary { margin-left: 8px; }
@media (max-width: 800px) { .overview-definition, .overview-lifecycle, .overview-practice { grid-template-columns: 1fr; }.overview-definition-cards { grid-template-columns: 1fr; }.overview-lifecycle ol, .overview-glance-grid { grid-template-columns: repeat(2, 1fr); }.overview-module-grid { grid-template-columns: repeat(2, 1fr); }.overview-layer-stack { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .koha-overview-section { padding: 32px 18px; }.overview-lifecycle ol, .overview-glance-grid, .overview-module-grid, .overview-why-grid, .overview-user-grid { grid-template-columns: 1fr; }.overview-layer-stack { grid-template-columns: repeat(2, 1fr); }.overview-cta { margin: 0 14px 24px; padding: 24px 18px; }.overview-cta .overview-button-secondary { margin: 8px 0 0; } }

@media (min-width: 701px) {
.opac-page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(255px, 1fr); align-items: start; }
.opac-hero, .opac-benefits { grid-column: 1 / -1; width: 100%; }
.opac-search-panel { grid-column: 1; width: 100%; max-width: none; }
.opac-side-grid { grid-column: 2; display: grid; grid-template-columns: 1fr; width: 100%; max-width: none; padding: 8px 20px 8px 0; }
.opac-side-grid article:last-child { grid-column: auto; }
}

@media (min-width: 701px) and (max-width: 900px) {
.opac-page { grid-template-columns: minmax(0, 1.7fr) minmax(210px, .9fr); }
.opac-search-heading nav { display: none; }
.opac-search-fields label, .opac-search-fields label:first-of-type { grid-template-columns: 1fr; }
.opac-search-actions { margin-left: 0; }
.opac-filter-grid { grid-template-columns: 1fr; }
.opac-filter-grid fieldset { grid-column: auto; }
.opac-side-grid { padding-right: 12px; }
}

@media (min-width: 701px) {
.opac-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opac-filter-grid fieldset { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opac-filter-grid fieldset p { grid-column: 1 / -1; }
.opac-filter-grid fieldset label { width: auto; }
}

@media (min-width: 701px) and (max-width: 900px) {
.opac-filter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .platform-hero { grid-template-columns: 1fr; padding-top: 42px; }.platform-hero-copy { max-width: 680px; }.platform-visual { min-height: 455px; }.platform-card-grid { grid-template-columns: repeat(2, 1fr); }.platform-footer-strip { gap: 18px; } }
@media (max-width: 560px) { .platform-hero { padding: 34px 18px 18px; }.platform-hero h1 { font-size: 2.35rem; }.platform-callout { grid-template-columns: 60px 1fr; padding: 17px; }.platform-globe { width: 57px; height: 57px; font-size: 3rem; }.platform-callout strong { font-size: 2.1rem; }.platform-callout b { font-size: 1rem; }.platform-visual { min-height: 350px; transform: scale(.9); transform-origin: top center; }.platform-laptop { top: 110px; left: 4%; width: 82%; }.platform-orbit { right: -8px; width: 170px; font-size: .6rem; }.orbit-one { top: 0; }.orbit-two { top: 78px; }.orbit-three { top: 156px; }.platform-books { bottom: 42px; left: -4px; }.platform-needs { padding: 16px 14px 14px; }.platform-card-grid { grid-template-columns: 1fr; }.platform-card { min-height: 0; }.platform-footer-strip { flex-wrap: wrap; gap: 10px; padding: 8px 14px; }.platform-footer-strip div + div { padding-left: 10px; }.platform-footer-strip > strong { width: 100%; min-height: 42px; margin: 4px -14px -8px; padding: 6px 14px; } }

.koha-section-heading h2 {
margin: 0 0 16px;
color: #123b63;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.2;
font-weight: 800;
letter-spacing: -0.6px;
}

.koha-section-heading p {
margin: 0;
font-size: 1.05rem;
line-height: 1.8;
color: #64748b;
}

/* =========================================================
FEATURE LAYOUT
========================================================= */

.koha-feature-layout {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
gap: 42px;
align-items: start;
}

.koha-feature-content {
max-width: 760px;
}

.koha-feature-content h3 {
margin: 0 0 18px;
color: #173f64;
font-size: 1.55rem;
line-height: 1.35;
}

.koha-feature-content p {
margin: 0 0 20px;
font-size: 1.02rem;
line-height: 1.85;
color: #526579;
}

.koha-feature-content p:last-child {
margin-bottom: 0;
}

/* =========================================================
HIGHLIGHT CARD
========================================================= */

.koha-highlight-card {
padding: 30px;
border: 1px solid #dce8f2;
border-radius: 18px;
background: #f5f9fd;
}

.koha-card-number {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
color: #16834b;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 1.5px;
}

.koha-highlight-card h3 {
margin: 0 0 12px;
color: #173f64;
font-size: 1.3rem;
line-height: 1.4;
}

.koha-highlight-card p {
margin: 0;
color: #607286;
font-size: 0.96rem;
line-height: 1.75;
}

.koha-hero-highlight-card {
width: 280px;
height: 280px;
padding: 18px;
border: none;
border-radius: 14px;
background: #1976c9;
box-shadow: 0 16px 30px rgba(25, 118, 201, 0.2);
}

.koha-hero-highlight-card .koha-card-number,
.koha-hero-highlight-card h3,
.koha-hero-highlight-card p {
color: #ffffff;
}

@media (max-width: 760px) {
.koha-section#koha-introduction .koha-feature-layout {
grid-template-columns: 1fr;
}

.koha-hero-highlight-card {
width: min(280px, 100%);
height: 280px;
}
}

/* =========================================================
CARD GRIDS
========================================================= */

.koha-card-grid,
.koha-feature-grid,
.koha-service-grid,
.koha-integration-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}

.koha-info-card,
.koha-feature-card,
.koha-service-card,
.koha-integration-card {
padding: 28px;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
transition: none !important;
}

.koha-info-card:hover,
.koha-feature-card:hover,
.koha-service-card:hover,
.koha-integration-card:hover {
transform: none !important;
border-color: transparent !important;
box-shadow: none !important;
}

.koha-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 20px;
border-radius: 10px;
background: #eaf5ef;
color: #16834b;
font-size: 0.78rem;
font-weight: 800;
}

.koha-info-card h3,
.koha-feature-card h3,
.koha-service-card h3,
.koha-integration-card h3 {
margin: 0 0 12px;
color: #173f64;
font-size: 1.18rem;
line-height: 1.45;
}

.koha-info-card p,
.koha-feature-card p,
.koha-service-card p,
.koha-integration-card p {
margin: 0;
color: #607286;
font-size: 0.96rem;
line-height: 1.75;
}

/* =========================================================
TWO COLUMN PANELS
========================================================= */

.koha-two-column {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}

.koha-list-panel {
padding: 30px;
border: 1px solid #e0e8ef;
border-radius: 16px;
background: #ffffff;
}

.koha-list-panel h3 {
margin: 0 0 20px;
color: #173f64;
font-size: 1.25rem;
}

.koha-list-panel p {
margin: 0 0 20px;
color: #607286;
line-height: 1.8;
}

/* =========================================================
CHECK LIST
========================================================= */

.koha-check-list {
display: grid;
gap: 12px;
margin: 0;
padding: 0;
list-style: none;
}

.koha-check-list li {
position: relative;
padding-left: 24px;
color: #526579;
font-size: 0.96rem;
line-height: 1.65;
}

.koha-check-list li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #16834b;
font-weight: 800;
}

/* =========================================================
TEXT BLOCK
========================================================= */

.koha-text-block {
max-width: 820px;
margin-top: 42px;
}

.koha-text-block h3 {
margin: 0 0 16px;
color: #173f64;
font-size: 1.45rem;
}

.koha-text-block p {
margin: 0 0 18px;
color: #526579;
font-size: 1rem;
line-height: 1.85;
}

/* =========================================================
HIGHLIGHT
========================================================= */

.koha-highlight {
max-width: 900px;
margin-top: 36px;
padding: 25px 28px;
border-left: 4px solid #16834b;
border-radius: 0 12px 12px 0;
background: #f4f8fb;
}

.koha-highlight h3 {
margin: 0 0 10px;
color: #173f64;
font-size: 1.25rem;
}

.koha-highlight p {
margin: 0;
color: #526579;
font-size: 1rem;
line-height: 1.8;
}

/* =========================================================
INTEGRATIONS
========================================================= */

.koha-integration-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koha-integration-card {
background: #fbfdff;
}

/* =========================================================
SERVICES
========================================================= */

.koha-service-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.koha-service-card .koha-card-number {
margin-bottom: 16px;
}

/* =========================================================
CTA
========================================================= */

.koha-cta-section {
padding: 85px 0;
background: #123b63;
}

.koha-cta {
max-width: 1050px;
margin: 0 auto;
}

.koha-cta-section .section-kicker {
color: #8dd3ae;
}

.koha-cta-content {
max-width: 800px;
}

.koha-cta-content h2 {
margin: 0 0 18px;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.2;
}

.koha-cta-content p {
margin: 0;
color: #d9e5ef;
font-size: 1.05rem;
line-height: 1.85;
}

.koha-cta-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
margin-top: 42px;
}

.koha-cta-item {
padding: 26px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 15px;
background: rgba(255, 255, 255, 0.06);
}

.koha-cta-item h3 {
margin: 0 0 10px;
color: #ffffff;
font-size: 1.15rem;
}

.koha-cta-item p {
margin: 0 0 20px;
color: #d9e5ef;
font-size: 0.94rem;
line-height: 1.7;
}

/* =========================================================
KOHA OVERVIEW — BRIGHT ILMS SUMMARY
========================================================= */

.overview-hero {
display: grid;
grid-template-columns: minmax(420px, 0.92fr) minmax(560px, 1.08fr);
align-items: center;
gap: 28px;
min-height: 0;
padding: 34px max(4vw, 28px) 20px;
background: linear-gradient(112deg, #ffffff 0%, #f9fcff 48%, #e7f5ff 100%);
}

.overview-hero-copy {
max-width: 630px;
margin: 0 auto;
}

.overview-kicker {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
color: #07934f;
font-size: 1rem;
font-weight: 800;
}

.overview-kicker span {
width: 48px;
height: 5px;
border-radius: 4px;
background: #07934f;
}

.overview-hero h1 {
margin: 0;
color: #102c5d;
font-size: clamp(2.8rem, 5vw, 5rem);
line-height: 1;
letter-spacing: -1px;
font-weight: 850;
}

.overview-subtitle {
margin: 18px 0 12px;
color: #597092;
font-size: clamp(1.25rem, 2vw, 1.7rem);
line-height: 1.25;
}

.overview-lead,
.overview-body {
max-width: 600px;
color: #1e3b62;
font-size: 1rem;
line-height: 1.58;
}

.overview-body {
margin-top: 12px;
}

.overview-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}

.overview-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 22px;
border-radius: 999px;
font-weight: 800;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.overview-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(16, 44, 93, 0.14);
}

.overview-button-primary {
background: #0ba65d;
color: #ffffff;
}

.overview-button-primary span {
display: grid;
place-items: center;
width: 27px;
height: 27px;
border-radius: 50%;
background: #ffffff;
color: #0ba65d;
font-size: 1.25rem;
}

.overview-button-secondary {
border: 2px solid #2588e4;
background: #ffffff;
color: #176fc4;
}

.overview-visual {
position: relative;
min-height: 430px;
min-width: 0;
}

.overview-laptop {
position: absolute;
z-index: 2;
top: 92px;
left: 50%;
width: 64%;
transform: translateX(-50%) perspective(1000px) rotateY(-7deg) rotateX(3deg);
filter: drop-shadow(12px 18px 12px rgba(18, 43, 54, 0.24));
}

.overview-screen {
padding: 8px;
border: 3px solid #26313b;
border-radius: 12px 12px 4px 4px;
background: #15212b;
}

.overview-screen-bar {
display: flex;
gap: 5px;
height: 20px;
padding: 0 8px;
background: #edf2f5;
}

.overview-screen-bar i {
width: 5px;
height: 5px;
margin-top: 7px;
border-radius: 50%;
background: #ef7760;
}

.overview-screen-bar i:nth-child(2) { background: #e7bb4b; }
.overview-screen-bar i:nth-child(3) { background: #62b879; }

.overview-screen-brand {
padding: 14px 16px 5px;
background: #ffffff;
color: #238e4d;
font-family: Georgia, serif;
font-size: 2rem;
font-style: italic;
font-weight: 700;
text-align: center;
}

.overview-screen p {
margin: 0;
padding: 0 16px 14px;
background: #ffffff;
color: #28466c;
font-size: 0.55rem;
text-align: center;
}

.overview-screen-tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
padding: 15px;
background: #f5f7f8;
}

.overview-screen-tiles b {
display: grid;
place-items: center;
min-height: 54px;
border: 1px solid #dce4e9;
border-radius: 5px;
background: #ffffff;
color: #0879d3;
font-size: 1.5rem;
}

.overview-screen-tiles em {
display: block;
color: #233f61;
font-size: 0.58rem;
font-style: normal;
}

.overview-keyboard {
width: 116%;
height: 18px;
margin: 0 -8%;
border-radius: 2px 2px 12px 12px;
background: linear-gradient(#b6c0c5, #76838a);
}

.overview-books {
position: absolute;
z-index: 3;
bottom: 32px;
left: 5%;
display: flex;
flex-direction: column;
transform: rotate(-4deg);
}

.overview-books span {
display: block;
width: 150px;
padding: 5px 9px;
color: #ffffff;
font-size: 0.68rem;
font-weight: 700;
text-align: center;
box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
}

.overview-books span:nth-child(1) { background: #247d55; }
.overview-books span:nth-child(2) { background: #1975a8; }
.overview-books span:nth-child(3) { background: #e18a13; }
.overview-books span:nth-child(4) { background: #2e5b78; }

.overview-plant {
position: absolute;
right: 9%;
bottom: 12px;
z-index: 3;
width: 112px;
height: 158px;
}

.overview-leaf {
position: absolute;
display: block;
width: 30px;
height: 72px;
border-radius: 100% 0 100% 0;
background: linear-gradient(135deg, #2fbd5d, #087c42);
box-shadow: inset 4px 0 5px rgba(255, 255, 255, 0.18);
transform-origin: bottom center;
}

.overview-leaf-one { left: 42px; top: 4px; transform: rotate(-8deg); }
.overview-leaf-two { left: 20px; top: 28px; transform: rotate(-38deg) scale(0.82); }
.overview-leaf-three { right: 12px; top: 27px; transform: rotate(38deg) scale(0.86); }
.overview-leaf-four { left: 43px; top: 42px; transform: rotate(12deg) scale(0.7); background: linear-gradient(135deg, #55c96a, #138b48); }

.overview-pot {
position: absolute;
left: 17px;
bottom: 0;
width: 78px;
height: 58px;
border-radius: 8px 8px 24px 24px;
background: linear-gradient(110deg, #ffffff 0%, #e8edf0 72%, #cbd5da 100%);
box-shadow: 8px 10px 14px rgba(32, 73, 79, 0.16);
}

.overview-pot::before {
content: "";
position: absolute;
top: -7px;
left: -5px;
width: 88px;
height: 14px;
border-radius: 50%;
background: #d9e1e4;
}

.overview-cup {
position: absolute;
right: 4%;
bottom: 12px;
z-index: 3;
width: 72px;
height: 64px;
padding-top: 20px;
border-radius: 6px 6px 20px 20px;
background: linear-gradient(110deg, #ffffff 0%, #f0f3f4 72%, #d1dadd 100%);
box-shadow: 7px 10px 14px rgba(32, 73, 79, 0.14);
color: #163967;
font-size: 0.48rem;
font-weight: 800;
line-height: 1.25;
text-align: center;
}

.overview-cup::before {
content: "";
position: absolute;
top: -5px;
left: -3px;
width: 78px;
height: 12px;
border-radius: 50%;
background: #dce4e6;
}

.overview-cup::after {
content: "";
position: absolute;
top: 16px;
right: -18px;
width: 22px;
height: 25px;
border: 5px solid #d1dadd;
border-left: 0;
border-radius: 0 16px 16px 0;
}

.overview-cup span {
position: relative;
z-index: 1;
}

.overview-cup span::after {
content: "";
display: block;
width: 28px;
height: 2px;
margin: 4px auto 0;
border-radius: 2px;
background: #15965a;
}

.overview-orbit {
position: absolute;
z-index: 4;
display: flex;
align-items: center;
gap: 10px;
width: 174px;
padding: 10px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 8px 20px rgba(24, 63, 72, 0.11);
color: #172f55;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.25;
}

.overview-orbit b {
display: grid;
place-items: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 50%;
color: #ffffff;
font-size: 1.45rem;
}

.overview-orbit-left { left: 0; }
.overview-orbit-right { right: 0; }
.overview-orbit-green { top: 18px; }
.overview-orbit-blue { top: 107px; }
.overview-orbit-teal { top: 196px; }
.overview-orbit-purple { top: 34px; }
.overview-orbit-orange { top: 128px; }
.overview-orbit-green b { background: #08a557; }
.overview-orbit-blue b { background: #1689df; }
.overview-orbit-teal b { background: #13b9b3; }
.overview-orbit-purple b { background: #7542d6; }
.overview-orbit-orange b { background: #f39811; }

.overview-summary {
padding: 0 max(3.5vw, 22px) 12px;
background: #f8fcff;
}

.overview-summary-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
max-width: 1380px;
margin: 0 auto;
}

.overview-summary-card {
min-height: 160px;
padding: 16px 14px;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 6px 18px rgba(40, 88, 128, 0.08);
}

.overview-summary-card b {
display: grid;
place-items: center;
float: left;
width: 42px;
height: 42px;
margin: 0 10px 8px 0;
border-radius: 50%;
color: #ffffff;
font-size: 1.3rem;
}

.overview-summary-card h2 {
min-height: 42px;
margin: 1px 0 12px;
color: #102c5d;
font-size: 0.98rem;
line-height: 1.2;
}

.overview-summary-card p {
clear: both;
color: #304d73;
font-size: 0.78rem;
line-height: 1.45;
}

.overview-summary-blue b { background: #1689df; }
.overview-summary-green b { background: #0ba65d; }
.overview-summary-purple b { background: #7542d6; }
.overview-summary-orange b { background: #f39811; }
.overview-summary-teal b { background: #13b9b3; }

.overview-quote {
display: flex;
align-items: center;
gap: 16px;
max-width: 1380px;
margin: 12px auto 0;
padding: 12px 18px;
border-left: 8px solid #0ba65d;
border-radius: 0 14px 14px 0;
background: linear-gradient(90deg, #ecfbf4, #effaff);
color: #153967;
}

.overview-quote strong {
color: #62d7b4;
font-size: 2.5rem;
line-height: 1;
}

.overview-quote em {
font-family: Georgia, serif;
font-size: 1rem;
font-weight: 700;
}

.overview-quote span {
margin-left: auto;
color: #228354;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}

@media (max-width: 1100px) {
.overview-hero {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
padding-top: 30px;
}
.overview-hero-copy { max-width: 820px; }
.overview-visual {
width: min(760px, 100%);
min-height: 390px;
margin: 0 auto;
}
.overview-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
.overview-hero { padding: 34px 18px 12px; }
.overview-hero h1 { font-size: 2.65rem; }
.overview-visual {
min-height: 340px;
transform: none;
}
.overview-laptop {
top: 110px;
left: 50%;
width: 75%;
transform: translateX(-50%) perspective(1000px) rotateY(-7deg) rotateX(3deg);
}
.overview-orbit { width: 152px; font-size: 0.6rem; }
.overview-books { left: 0; bottom: 20px; }
.overview-plant { right: 9%; transform: scale(0.76); transform-origin: bottom right; }
.overview-cup { right: 4%; transform: scale(0.76); transform-origin: bottom right; }
.overview-summary-grid { grid-template-columns: 1fr; }
.overview-summary-card { min-height: 0; }
.overview-quote { align-items: flex-start; flex-wrap: wrap; }
.overview-quote span { width: 100%; margin-left: 0; white-space: normal; }
}

.koha-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 17px;
border-radius: 8px;
background: #ffffff;
color: #123b63;
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
transition: transform 0.2s ease;
}

.koha-button:hover {
transform: translateY(-2px);
}

.koha-quote {
max-width: 850px;
margin-top: 50px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.koha-quote p {
margin: 0;
color: #eef5fa;
font-size: 1.12rem;
line-height: 1.8;
font-style: italic;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width: 900px) {

.koha-detail-grid,
.koha-card-grid,
.koha-feature-grid,
.koha-service-grid,
.koha-integration-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.koha-feature-layout {
grid-template-columns: 1fr;
}

.koha-cta-options {
grid-template-columns: 1fr;
}
}

@media (max-width: 700px) {

.koha-container,
.koha-hero-container {
width: min(100% - 32px, 1120px);
}

.koha-hero {
padding: 65px 0 32px;
}

.koha-section {
padding: 42px 0;
}

.koha-section-heading {
margin-bottom: 32px;
}

.koha-two-column,
.koha-module-overview,
.koha-detail-grid,
.koha-card-grid,
.koha-feature-grid,
.koha-service-grid,
.koha-integration-grid {
grid-template-columns: 1fr;
}

.koha-hero h1 {
font-size: 2.45rem;
}

.koha-hero-lead {
font-size: 1.04rem;
}

.koha-info-card,
.koha-feature-card,
.koha-service-card,
.koha-integration-card,
.koha-list-panel {
padding: 24px;
}

.koha-cta-section {
padding: 65px 0;
}
}

/* =========================================================
KOHA MODULE OVERVIEW
========================================================= */

.koha-modules-section .section-heading {
max-width: 820px;
margin: 0 auto 44px;
}

.koha-modules-section .section-heading h2 {
margin: 0 0 16px;
color: #123b63;
font-size: clamp(2rem, 4vw, 2.8rem);
line-height: 1.2;
font-weight: 800;
}

.koha-modules-section .section-heading p {
margin: 0 0 16px;
color: #526579;
font-size: 1.02rem;
line-height: 1.8;
}

.koha-modules-section .section-heading p:last-child {
margin-bottom: 0;
}

.koha-modules-grid {
width: min(1120px, calc(100% - 40px));
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}

.koha-module-card {
min-width: 0;
padding: 26px 24px;
background: #ffffff;
border: 1px solid #dce8f2;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(20, 55, 90, 0.05);
}

.koha-module-card h3 {
margin: 0 0 12px;
color: #173f64;
font-size: 1.12rem;
line-height: 1.4;
font-weight: 800;
}

.koha-module-card p {
margin: 0;
color: #607286;
font-size: 0.96rem;
line-height: 1.75;
}

@media (max-width: 900px) {
.koha-modules-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 700px) {
.koha-modules-section .section-heading {
margin-bottom: 32px;
}

.koha-modules-grid {
width: min(100% - 32px, 1120px);
grid-template-columns: 1fr;
}
}

/* Phase 2 visual system for the first three approved pages. */
.p2-site {
--p2-navy: #123653;
--p2-blue: #1e6d99;
--p2-green: #2d8a68;
--p2-ink: #183247;
--p2-muted: #5f7482;
--p2-line: #d8e6e9;
--p2-soft: #f1f8f6;
font-family: Georgia, "Times New Roman", serif;
color: var(--p2-ink);
background: #fff;
}
.p2-site .site-header { background: rgba(255,255,255,.96); border-bottom: 1px solid var(--p2-line); }
.p2-site .header-container { max-width: 1240px; min-height: 84px; padding: 12px 28px; gap: 20px; }
.p2-site .brand { gap: 12px; }
.p2-site .brand-logo { width: 48px; height: 48px; border-radius: 8px; box-shadow: none; }
.p2-site .brand-name { color: var(--p2-navy); font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; letter-spacing: 0; }
.p2-site .brand-tagline { color: var(--p2-muted); font-family: Arial, sans-serif; font-size: .7rem; }
.p2-site .main-nav { gap: 2px; }
.p2-site .nav-link, .p2-site .dropdown-button { color: var(--p2-ink); font-family: Arial, sans-serif; font-size: .75rem; letter-spacing: .01em; padding: 10px 9px; }
.p2-site .nav-link:hover, .p2-site .dropdown-button:hover { color: var(--p2-green); background: var(--p2-soft); }
.p2-site .nav-link.active { color: #fff; background: var(--p2-navy); }
.p2-site .contact-button { display: inline-flex; align-items: center; gap: 8px; margin-left: 7px; padding: 11px 14px; border-radius: 5px; background: var(--p2-green); color: #fff; font: 700 .72rem Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.p2-site .contact-button:hover { background: #236c52; }
.p2-site .menu-toggle { color: var(--p2-navy); }
.p2-container { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.p2-hero { background: linear-gradient(115deg, #f2f8f7 0%, #fff 62%); border-bottom: 1px solid var(--p2-line); }
.p2-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(340px, .76fr); gap: clamp(40px, 7vw, 110px); align-items: center; min-height: 570px; padding-top: 70px; padding-bottom: 70px; }
.p2-hero-copy { max-width: 680px; }
.p2-eyebrow { margin: 0 0 16px; color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; }
.p2-hero h1 { margin: 0; max-width: 760px; color: var(--p2-navy); font-size: clamp(2.9rem, 6vw, 5.25rem); font-weight: 700; letter-spacing: -.045em; line-height: .99; }
.p2-hero-role { margin: 18px 0 0; color: var(--p2-blue); font: 700 clamp(1.25rem, 2.4vw, 1.8rem) Arial, sans-serif; line-height: 1.25; }
.p2-lead { max-width: 650px; margin: 24px 0 0; color: var(--p2-muted); font: 1.05rem/1.75 Arial, sans-serif; }
.p2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.p2-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 46px; padding: 12px 18px; border: 1px solid transparent; border-radius: 5px; font: 700 .76rem Arial, sans-serif; letter-spacing: .04em; line-height: 1.2; }
.p2-button-primary { background: var(--p2-green); color: #fff; }
.p2-button-primary:hover { background: #236c52; }
.p2-button-secondary { border-color: var(--p2-blue); color: var(--p2-blue); background: transparent; }
.p2-button-secondary:hover { background: #eaf4f7; }
.p2-button-light { background: #fff; color: var(--p2-navy); }
.p2-button-outline-light { border-color: rgba(255,255,255,.45); color: #fff; }
.p2-proof { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 30px; color: var(--p2-muted); font: .75rem Arial, sans-serif; }
.p2-proof span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--p2-green); }
.p2-portrait { justify-self: end; width: min(100%, 380px); }
.p2-portrait-frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border: 12px solid #fff; background: #dcebe7; box-shadow: 0 20px 50px rgba(18,54,83,.16); }
.p2-portrait-frame::after { position: absolute; right: 0; bottom: 0; left: 0; height: 28%; background: linear-gradient(transparent, rgba(18,54,83,.28)); content: ""; }
.p2-portrait-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.p2-portrait-note { display: flex; justify-content: space-between; gap: 10px; padding-top: 13px; font: .72rem Arial, sans-serif; }
.p2-portrait-note strong { color: var(--p2-navy); }.p2-portrait-note span { color: var(--p2-muted); }
.p2-section { padding: 88px 0; }.p2-soft { background: var(--p2-soft); }.p2-navy { background: var(--p2-navy); color: #fff; }
.p2-two-col { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(38px, 8vw, 120px); align-items: start; }
.p2-section h2, .p2-cta h2 { margin: 0; max-width: 650px; color: var(--p2-navy); font-size: clamp(2rem, 3.5vw, 3.15rem); letter-spacing: -.035em; line-height: 1.08; }
.p2-navy h2, .p2-navy .p2-eyebrow, .p2-cta h2, .p2-cta .p2-eyebrow { color: #fff; }.p2-copy { margin: 0 0 18px; color: var(--p2-muted); font: 1rem/1.78 Arial, sans-serif; }.p2-navy .p2-copy, .p2-cta p { color: rgba(255,255,255,.78); }
.p2-text-link, .p2-card a { color: var(--p2-green); font: 700 .8rem Arial, sans-serif; }.p2-text-link span, .p2-card a span { margin-left: 5px; }
.p2-section-head { margin-bottom: 34px; }.p2-section-head h2 { max-width: 760px; }
.p2-card-grid { display: grid; gap: 14px; }.p2-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }.p2-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }.p2-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p2-card, .p2-value, .p2-mini { position: relative; min-height: 190px; padding: 24px; border: 1px solid var(--p2-line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,54,83,.045); }.p2-card:hover, .p2-value:hover { border-color: #9bcab8; transform: translateY(-2px); transition: transform .2s ease, border-color .2s ease; }.p2-card h3, .p2-value h3, .p2-mini h3 { margin: 24px 0 10px; color: var(--p2-navy); font-size: 1.14rem; line-height: 1.2; }.p2-card p, .p2-value p, .p2-mini p { margin: 0 0 20px; color: var(--p2-muted); font: .88rem/1.6 Arial, sans-serif; }.p2-number, .p2-value > span { color: var(--p2-green); font: 700 .72rem Arial, sans-serif; letter-spacing: .1em; }.p2-card a { position: absolute; bottom: 22px; }
.p2-value { min-height: 175px; border-top: 3px solid var(--p2-green); }.p2-value h3 { margin-top: 26px; }
.p2-expertise { align-items: center; }.p2-skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }.p2-skill-groups div { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.24); }.p2-skill-groups h3 { margin: 0 0 8px; color: #fff; font: 700 1rem Arial, sans-serif; }.p2-skill-groups p { margin: 0; color: rgba(255,255,255,.7); font: .83rem/1.65 Arial, sans-serif; }
.p2-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.p2-audience-grid span, .p2-pill-list span { padding: 17px 18px; border: 1px solid var(--p2-line); border-radius: 6px; color: var(--p2-navy); background: #fff; font: 700 .88rem Arial, sans-serif; }.p2-audience-grid span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--p2-green); }
.p2-process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 14px; padding: 0; list-style: none; }.p2-process li { position: relative; display: grid; gap: 5px; padding: 18px 18px 20px; border-top: 2px solid var(--p2-green); background: #fff; }.p2-process b { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; }.p2-process strong { color: var(--p2-navy); font-size: 1.05rem; }.p2-process span { color: var(--p2-muted); font: .78rem Arial, sans-serif; }.p2-process-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p2-experience-strip { display: grid; grid-template-columns: 1fr 1.1fr auto; gap: 30px; align-items: center; }.p2-experience-strip h2 { font-size: 2rem; }.p2-experience-strip .p2-copy { margin: 0; }.p2-cta { padding: 90px 0; background: var(--p2-blue); }.p2-cta h2 { max-width: 720px; }.p2-cta p { max-width: 700px; margin: 20px 0 0; font: 1rem/1.75 Arial, sans-serif; }
.p2-footer { padding: 24px 0; background: #103b64; color: #fff; }.p2-footer .p2-container { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px 28px; }.p2-footer-identity { display: grid; gap: 3px; }.p2-footer strong { color: #fff; font-size: 1.05rem; }.p2-footer span, .p2-footer small { color: rgba(255,255,255,.78); font: .74rem Arial, sans-serif; }.p2-footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px 16px; }.p2-footer-nav a { color: rgba(255,255,255,.88); font: 700 .7rem Arial, sans-serif; }.p2-footer-nav a:hover { color: #8de0b3; }.p2-footer small { grid-column: 2; justify-self: end; }
.p2-breadcrumb { border-bottom: 1px solid var(--p2-line); }.p2-breadcrumb .p2-container { padding: 12px 0; color: var(--p2-muted); font: .72rem Arial, sans-serif; }.p2-breadcrumb a { color: var(--p2-blue); }.p2-breadcrumb span { padding: 0 9px; color: var(--p2-green); }
.p2-about-hero, .p2-koha-hero { background: #f4f9f8; }.p2-koha-hero h1 { font-size: clamp(3.6rem, 7vw, 6.4rem); }.p2-koha-hero .p2-hero-grid { min-height: 500px; }.p2-koha-visual { position: relative; min-height: 330px; border: 1px solid #b9d7d2; background: #e3f1ed; box-shadow: 20px 20px 0 rgba(45,138,104,.13); }.p2-koha-window { position: absolute; top: 54px; right: 34px; left: 34px; padding: 24px; background: #fff; box-shadow: 0 15px 32px rgba(18,54,83,.15); }.p2-koha-window > span { color: var(--p2-navy); font: 700 1.8rem Georgia, serif; }.p2-koha-window div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 28px; }.p2-koha-window b { padding: 18px 10px; color: var(--p2-blue); background: #edf7f5; font: 700 .75rem Arial, sans-serif; }.p2-koha-accent { position: absolute; right: 20px; bottom: 20px; width: 75px; height: 75px; border-radius: 50%; background: var(--p2-green); opacity: .85; }
.p2-lifecycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; list-style: none; }.p2-lifecycle li { display: grid; gap: 12px; min-height: 112px; padding: 18px; border-left: 3px solid var(--p2-green); background: #fff; color: var(--p2-navy); font: 700 .95rem Arial, sans-serif; }.p2-lifecycle b { color: var(--p2-green); font-size: .7rem; }.p2-module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.p2-module-grid a { display: grid; gap: 7px; padding: 19px; border: 1px solid var(--p2-line); border-radius: 7px; background: #fff; }.p2-module-grid a:hover { border-color: var(--p2-green); }.p2-module-grid b { color: var(--p2-green); font: .7rem Arial, sans-serif; }.p2-module-grid strong { color: var(--p2-navy); font: 700 1rem Arial, sans-serif; }.p2-module-grid span { color: var(--p2-muted); font: .78rem Arial, sans-serif; }
.p2-architecture { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: center; margin-top: 34px; }.p2-layer-stack { display: grid; gap: 6px; padding: 0; list-style: none; }.p2-layer-stack li { padding: 13px 18px; border-left: 4px solid var(--p2-green); background: rgba(255,255,255,.1); color: #fff; font: 700 .86rem Arial, sans-serif; }.p2-boundaries { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; padding: 26px; border: 1px dashed rgba(255,255,255,.4); border-radius: 50%; }.p2-boundaries strong { width: 100%; color: #fff; text-align: center; font: 700 .8rem Arial, sans-serif; }.p2-boundaries span { padding: 9px 12px; border-radius: 20px; background: rgba(255,255,255,.13); color: rgba(255,255,255,.85); font: .72rem Arial, sans-serif; }.p2-pill-list { display: flex; flex-wrap: wrap; gap: 10px; }.p2-pill-list span { min-width: 145px; text-align: center; }.p2-timeline { position: relative; display: grid; gap: 20px; }.p2-timeline::before { position: absolute; top: 8px; bottom: 8px; left: 19px; width: 1px; background: rgba(255,255,255,.25); content: ""; }.p2-timeline article { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 22px; }.p2-timeline article > span { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--p2-green); border-radius: 50%; background: var(--p2-navy); color: #9dd8ba; font: .7rem Arial, sans-serif; }.p2-timeline h3 { margin: 2px 0 8px; color: #fff; font-size: 1.12rem; }.p2-timeline p { margin: 0 0 8px; color: rgba(255,255,255,.72); font: .87rem/1.6 Arial, sans-serif; }
@media (max-width: 1050px) { .p2-site .main-nav { gap: 0; }.p2-site .nav-link, .p2-site .dropdown-button { padding-left: 6px; padding-right: 6px; font-size: .68rem; }.p2-site .contact-button { padding: 10px; font-size: .64rem; }.p2-hero-grid { gap: 42px; }.p2-experience-strip { grid-template-columns: 1fr 1fr; }.p2-experience-strip .p2-button { grid-column: 2; justify-self: start; } }
@media (max-width: 820px) { .p2-site .header-container { min-height: 72px; padding: 10px 20px; }.p2-site .menu-toggle { display: block; }.p2-site .main-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; padding: 12px 20px 18px; border-top: 1px solid var(--p2-line); background: #fff; box-shadow: 0 15px 25px rgba(18,54,83,.12); }.p2-site .main-nav.open { display: flex; }.p2-site .nav-link, .p2-site .dropdown-button { width: 100%; justify-content: space-between; padding: 13px 8px; text-align: left; font-size: .78rem; }.p2-site .dropdown-menu { position: static; display: none; min-width: 0; margin: 0 0 5px; box-shadow: none; border: 0; transform: none; }.p2-site .nav-dropdown.open .dropdown-menu { display: block; opacity: 1; visibility: visible; }.p2-site .dropdown-menu a { padding: 10px 14px; }.p2-site .contact-button { justify-content: center; margin: 9px 0 0; }.p2-hero-grid, .p2-two-col { grid-template-columns: 1fr; }.p2-hero-grid { min-height: 0; padding-top: 58px; padding-bottom: 58px; }.p2-portrait { justify-self: start; width: min(100%, 330px); }.p2-six { grid-template-columns: repeat(2, minmax(0, 1fr)); }.p2-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }.p2-process { grid-template-columns: repeat(2, 1fr); }.p2-expertise { gap: 38px; }.p2-architecture { grid-template-columns: 1fr; }.p2-lifecycle { grid-template-columns: repeat(2, 1fr); }.p2-module-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p2-container { width: min(100% - 32px, 1160px); }.p2-site .brand-tagline { display: block; font-size: 0; white-space: normal; }.p2-site .brand-tagline::before { content: "Koha & Library Automation Consultant"; display: block; font-size: .7rem; line-height: 1.3; color: var(--p2-green); }.p2-site .brand-name { font-size: 1rem; }.p2-site .brand-logo { width: 40px; height: 40px; }.p2-hero h1, .p2-koha-hero h1 { font-size: 3rem; }.p2-section { padding: 62px 0; }.p2-section h2, .p2-cta h2 { font-size: 2.1rem; }.p2-actions { align-items: stretch; flex-direction: column; }.p2-button { width: 100%; }.p2-six, .p2-four, .p2-three, .p2-audience-grid, .p2-process, .p2-lifecycle, .p2-module-grid { grid-template-columns: 1fr; }.p2-skill-groups { grid-template-columns: 1fr; }.p2-experience-strip { display: block; }.p2-experience-strip .p2-copy { margin: 20px 0; }.p2-footer small { width: 100%; margin-left: 0; }.p2-koha-visual { min-height: 280px; }.p2-koha-window { top: 34px; right: 18px; left: 18px; padding: 18px; }.p2-koha-window div { margin-top: 18px; }.p2-architecture { margin-top: 24px; }.p2-boundaries { border-radius: 12px; }.p2-process-compact { grid-template-columns: 1fr; } }

/* Phase 3 shared feature-page components. */

/* Reference-matched Koha overview. */
.p2-koha-page { font-family: Arial, Helvetica, sans-serif; color: #153b5f; }
.p2-koha-page .p2-container { width: min(1160px, calc(100% - 48px)); }
.ref-hero { overflow: hidden; background: linear-gradient(115deg, #f3fbfa 0%, #ffffff 65%); border-bottom: 1px solid #d7ebe7; }
.ref-hero-grid { display: grid; grid-template-columns: minmax(0, .84fr) minmax(500px, 1.16fr); gap: 30px; align-items: center; min-height: 520px; padding-top: 42px; padding-bottom: 42px; }
.ref-hero-copy { position: relative; z-index: 1; }
.ref-eyebrow { margin: 0 0 14px; color: #08764b; font: 700 .68rem/1.4 Arial, sans-serif; letter-spacing: .13em; }
.ref-hero h1 { margin: 0; color: #103e73; font: 800 clamp(3.3rem, 6vw, 5.5rem)/.95 Arial, sans-serif; letter-spacing: -.06em; }
.ref-hero h1 em { color: #087d4d; font-style: normal; }
.ref-hero h2 { margin: 12px 0 0; color: #0e5b9b; font: 700 clamp(1.08rem, 1.8vw, 1.45rem)/1.25 Arial, sans-serif; }
.ref-lead { max-width: 570px; margin: 18px 0 0; color: #3e5870; font: .9rem/1.62 Arial, sans-serif; }
.ref-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 23px; }
.ref-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 6px; font: 700 .72rem Arial, sans-serif; text-decoration: none; }
.ref-button-primary { background: #07834e; color: #fff; box-shadow: 0 5px 10px rgba(8,131,78,.15); }
.ref-button-primary:hover { background: #05683e; }
.ref-button-secondary { border-color: #0b6cad; background: #fff; color: #0b5f9d; }
.ref-button-secondary:hover { background: #edf7fc; }
.ref-proof { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 25px; color: #365a70; font: 700 .63rem Arial, sans-serif; }
.ref-proof span::before { display: inline-block; width: 8px; height: 8px; margin: 0 6px 0 0; border-radius: 50%; background: #0a9b68; content: ""; }
.ref-hero-art { position: relative; min-height: 390px; padding: 30px 70px 18px 10px; border-radius: 50%; background: radial-gradient(ellipse at 48% 48%, rgba(123,220,168,.44), rgba(123,220,168,0) 68%); }
.ref-screen { position: relative; z-index: 1; width: 100%; border: 10px solid #dbe9e7; border-radius: 12px 12px 5px 5px; background: #fff; box-shadow: 0 18px 28px rgba(22,67,88,.24); transform: perspective(900px) rotateY(-3deg); }
.ref-screen::after { position: absolute; right: -35px; bottom: -22px; left: -35px; height: 18px; border-radius: 50%; background: #9aafb0; content: ""; box-shadow: 0 5px 0 #668184; }
.ref-window-bar { display: flex; gap: 4px; height: 17px; padding: 4px 7px; box-sizing: border-box; background: #f5f9f8; }
.ref-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #e35937; }.ref-window-bar i:nth-child(2) { background: #efb62e; }.ref-window-bar i:nth-child(3) { background: #45a96f; }
.ref-screen-body { display: grid; grid-template-columns: 60px 1fr; min-height: 260px; }
.ref-screen-body aside { display: grid; align-content: start; gap: 7px; padding: 11px 6px; background: #103e65; color: #d8eff3; font: .43rem Arial, sans-serif; }
.ref-screen-body aside strong { margin-bottom: 6px; color: #67c58d; font: italic 700 1.1rem Georgia, serif; text-transform: capitalize; }
.ref-dashboard { padding: 10px 11px; background: #f7fbfc; }.ref-dashboard-title { display: flex; justify-content: flex-end; color: #185ca0; font: .55rem Arial, sans-serif; }.ref-dashboard-title b { margin-left: 6px; }
.p2-koha-page .ref-dashboard::before { display: none; }
.p2-koha-page .ref-dashboard-title { color: #155487; font-size: .62rem; font-weight: 700; }
.ref-search { margin: 8px 0; padding: 6px 7px; border: 1px solid #c4deda; color: #587482; background: #fff; font: .47rem Arial, sans-serif; }.ref-search b { float: right; padding: 0 4px; color: #fff; background: #12905b; }
.p2-koha-page .ref-screen-body aside { font-size: .49rem; }.p2-koha-page .ref-screen-body aside strong { color: #118554; font-size: 1.2rem; }
.ref-module-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }.ref-module-tiles span { display: grid; place-items: center; min-height: 45px; border: 1px solid #c5e2d9; border-radius: 4px; color: #08764b; background: #eaf8f3; font-size: .85rem; }.ref-module-tiles b { margin-top: 3px; color: #173f5d; font: 700 .52rem/1.1 Arial, sans-serif; text-align: center; }
.ref-callouts { position: absolute; z-index: 2; top: 18px; right: -125px; display: grid; gap: 10px; width: 190px; }.ref-callouts article { display: grid; grid-template-columns: 31px 1fr; gap: 3px 8px; min-height: 58px; padding: 9px; border: 1px solid #c5e2d9; border-radius: 10px; background: rgba(255,255,255,.98); box-shadow: 0 8px 18px rgba(22,67,88,.13); }.ref-callouts article b { grid-row: span 2; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #08764b; background: #d7f5e6; font-size: .9rem; }.ref-callouts strong { color: #08764b; font: 700 .66rem/1.2 Arial, sans-serif; }.ref-callouts span { color: #456274; font: .57rem/1.25 Arial, sans-serif; }
.ref-overview { padding: 14px 0 7px; background: #fff; }.ref-overview-grid { display: grid; grid-template-columns: .85fr 1.35fr 1fr; gap: 9px; }.ref-panel { min-height: 135px; padding: 13px 15px; border-radius: 9px; }.ref-panel-blue { background: #eef8ff; }.ref-panel-green { background: #effaf5; }.ref-panel-orange { background: #fff8ef; }.ref-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #0872b8; background: #d8efff; font: 700 1.15rem Arial, sans-serif; }.ref-panel-green .ref-icon { color: #08764b; background: #ccefdc; }.ref-panel-orange .ref-icon { color: #cf641b; background: #ffe5c7; }
.ref-panel h2, .ref-section-title h2, .ref-why h2 { margin: -33px 0 8px 51px; color: #123f74; font: 800 1.05rem/1.1 Arial, sans-serif; }.ref-panel p { margin: 10px 0 0; color: #3c5b6f; font: .65rem/1.5 Arial, sans-serif; }.ref-panel a, .ref-why a { display: inline-block; margin-top: 11px; color: #006db2; font: 700 .62rem Arial, sans-serif; }.ref-panel-note { margin: -3px 0 8px 51px !important; }.ref-flow { display: flex; justify-content: space-between; gap: 3px; margin: 12px 0 0; padding: 0; list-style: none; }.ref-flow li { position: relative; display: grid; gap: 3px; justify-items: center; color: #214f68; font: 700 .5rem Arial, sans-serif; text-align: center; }.ref-flow b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #fff; background: #15935c; font-size: .65rem; }.ref-flow li:not(:last-child)::after { position: absolute; top: 4px; right: -8px; content: "→"; color: #15935c; }.ref-audiences { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 10px 0 0; padding: 0; list-style: none; }.ref-audiences li { padding: 6px 3px; border: 1px solid rgba(207,100,27,.15); border-radius: 4px; color: #35576a; background: rgba(255,255,255,.7); font: 700 .49rem/1.2 Arial, sans-serif; text-align: center; }
.ref-glance { padding: 8px 0 15px; background: #fff; }.ref-glance-grid { display: grid; grid-template-columns: 1.65fr .75fr; gap: 9px; }.ref-capabilities, .ref-why { padding: 14px 15px; border-radius: 9px; background: #eef8ff; }.ref-why { background: #eff8f7; }.ref-section-title { display: flex; gap: 12px; align-items: center; }.ref-section-title h2 { margin: 0; }.ref-section-title p { margin: 3px 0 0; color: #4c6876; font: .62rem Arial, sans-serif; }.ref-capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 12px; }.ref-capability-grid article { min-height: 68px; padding: 9px; border: 1px solid #d3e7ef; border-radius: 4px; background: #fff; }.ref-capability-grid b { color: #07834e; font-size: 1rem; }.ref-capability-grid strong { display: block; margin: 4px 0 2px; color: #153f70; font: 700 .58rem Arial, sans-serif; }.ref-capability-grid span { color: #557080; font: .5rem/1.25 Arial, sans-serif; }.ref-why h2 { margin-top: -33px; }.ref-why p { margin: 7px 0 12px 51px; color: #557080; font: .6rem Arial, sans-serif; }.ref-why ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }.ref-why li { color: #3a5b68; font: .6rem Arial, sans-serif; }.ref-why li::before { margin-right: 7px; color: #0b9a64; content: "✓"; font-weight: 800; }
.ref-architecture { padding: 14px 0 20px; background: #fff; }.ref-architecture .p2-container { padding: 15px; border-radius: 9px; background: #eff8ff; }.ref-architecture-grid { display: grid; grid-template-columns: 100px 1fr 55px; gap: 12px; align-items: center; margin-top: 12px; }.ref-external { display: grid; gap: 3px; }.ref-external span { padding: 6px 3px; color: #1b567e; background: #fff; font: .52rem Arial, sans-serif; text-align: center; }.ref-layers { display: grid; gap: 4px; }.ref-layers span, .ref-layers strong { padding: 6px 10px; border-radius: 3px; color: #fff; background: #0b5793; font: 700 .56rem Arial, sans-serif; text-align: center; }.ref-layers span:first-child { background: #15935c; }.ref-layers span:nth-child(5) { background: #ef791e; }.ref-layers span:last-child { background: #234866; }.ref-boundary { color: #1b567e; font: .52rem/1.3 Arial, sans-serif; }
.ref-bridge { padding: 25px 0; background: #effbf3; border-top: 1px solid #d3eddb; border-bottom: 1px solid #d3eddb; }.ref-bridge .p2-container { display: grid; grid-template-columns: 1.3fr auto .8fr; gap: 25px; align-items: center; }.ref-bridge h2 { margin: 0; color: #123f74; font: 800 1.4rem/1.15 Arial, sans-serif; }.ref-bridge p:not(.ref-eyebrow) { margin: 8px 0 0; color: #4d6972; font: .67rem/1.45 Arial, sans-serif; }.ref-bridge-actions { display: flex; gap: 8px; }.ref-bridge ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: #267050; font: 700 .6rem Arial, sans-serif; }.ref-bridge li::before { margin-right: 6px; content: "✓"; color: #0b9a64; }
.p2-koha-page .p2-footer { padding: 24px 0; background: #103b64; }.p2-koha-page .p2-footer span, .p2-koha-page .p2-footer small { color: rgba(255,255,255,.85); }
@media (max-width: 950px) { .ref-hero-grid { grid-template-columns: 1fr; }.ref-hero-copy { max-width: 700px; }.ref-hero-art { width: min(100%, 680px); margin: 0 auto; }.ref-overview-grid, .ref-glance-grid { grid-template-columns: 1fr; }.ref-capability-grid { grid-template-columns: repeat(4, 1fr); }.ref-bridge .p2-container { grid-template-columns: 1fr auto; }.ref-bridge ul { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .p2-koha-page .p2-container { width: min(100% - 28px, 1160px); }.ref-hero-grid { padding-top: 34px; padding-bottom: 25px; }.ref-hero h1 { font-size: 3.55rem; }.ref-hero-art { min-height: 290px; padding: 30px 94px 16px 4px; }.ref-callouts { right: 0; width: 145px; }.ref-callouts article { padding: 6px; }.ref-callouts article b { width: 21px; height: 21px; font-size: .7rem; }.ref-callouts strong { font-size: .56rem; }.ref-callouts span { font-size: .48rem; }.ref-screen-body { min-height: 190px; }.ref-module-tiles span { min-height: 34px; font-size: .62rem; }.ref-module-tiles b { font-size: .34rem; }.ref-overview-grid, .ref-capability-grid { grid-template-columns: 1fr 1fr; }.ref-panel { min-height: 154px; }.ref-panel-blue, .ref-panel-green, .ref-panel-orange { grid-column: 1 / -1; }.ref-flow { gap: 7px; }.ref-capabilities { grid-column: 1 / -1; }.ref-why { grid-column: 1 / -1; }.ref-capability-grid { gap: 5px; }.ref-architecture-grid { grid-template-columns: 1fr; }.ref-external { grid-template-columns: repeat(2, 1fr); gap: 4px; }.ref-boundary { text-align: center; }.ref-bridge .p2-container { grid-template-columns: 1fr; gap: 15px; }.ref-bridge-actions { flex-wrap: wrap; }.ref-bridge-actions .ref-button { flex: 1; }.ref-bridge ul { grid-template-columns: 1fr; }.ref-proof { gap: 8px 11px; } }

@media (min-width: 621px) and (max-width: 1100px) {
	.ref-hero-art { padding-right: 182px; }
	.ref-callouts { right: -2px; width: 180px; }
}

@media (min-width: 1101px) and (max-width: 1300px) {
	.ref-callouts { right: -50px; width: 170px; }
}

/* Keep the reference composition at tablet width; stack only on small phones. */
@media (min-width: 821px) and (max-width: 950px) {
	.p2-koha-page .menu-toggle { display: none; }
	.p2-koha-page .main-nav { position: static; display: flex; flex-direction: row; align-items: center; padding: 0; border: 0; box-shadow: none; }
	.p2-koha-page .nav-link,
	.p2-koha-page .dropdown-button { padding: 8px 4px; font-size: .58rem; }
	.p2-koha-page .contact-button { margin-left: 3px; padding: 8px 9px; font-size: .56rem; }
	.p2-koha-page .header-container { min-height: 68px; padding: 8px 16px; gap: 8px; }
	.p2-koha-page .brand { gap: 7px; }
	.p2-koha-page .brand-logo { width: 38px; height: 38px; }
	.p2-koha-page .brand-name { font-size: .92rem; }
	.ref-hero-grid { grid-template-columns: minmax(260px, .84fr) minmax(0, 1.16fr); gap: 12px; }
	.ref-hero-art { width: auto; margin: 0; }
	.ref-overview-grid { grid-template-columns: .85fr 1.35fr 1fr; }
	.ref-glance-grid { grid-template-columns: 1.65fr .75fr; }
	.ref-capability-grid { grid-template-columns: repeat(4, 1fr); }
	.ref-bridge .p2-container { grid-template-columns: 1.3fr auto .8fr; }
	.ref-bridge ul { grid-column: auto; grid-template-columns: 1fr; }
	.p2-koha-page .ref-lead { font-size: .92rem; }
	.p2-koha-page .ref-layers span,
	.p2-koha-page .ref-layers strong { font-size: .7rem; }
}

/* Koha overview readability refinements. */
.p2-koha-page .ref-lead { color: #29445d; font-size: .96rem; line-height: 1.7; }
.p2-koha-page .ref-icon,
.p2-koha-page .ref-callouts article b,
.p2-koha-page .ref-flow b,
.p2-koha-page .ref-capability-grid article > b { font-size: 0; }
.p2-koha-page .ref-icon::before,
.p2-koha-page .ref-callouts article b::before,
.p2-koha-page .ref-flow b::before,
.p2-koha-page .ref-capability-grid article > b::before { display: block; width: 13px; height: 13px; border: 2px solid currentColor; border-radius: 3px; content: ""; }
.p2-koha-page .ref-flow b::before { width: 8px; height: 8px; border-radius: 50%; }
.p2-koha-page .ref-module-tiles span { font-size: 0; }
.p2-koha-page .ref-module-tiles span::before { display: block; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 2px; content: ""; }
.p2-koha-page .ref-eyebrow { color: #075b3b; font-size: .76rem; }
.p2-koha-page .ref-hero h2 { color: #07558e; font-size: clamp(1.2rem, 2vw, 1.55rem); }
.p2-koha-page .ref-proof { color: #294b63; font-size: .72rem; }
.p2-koha-page .ref-panel h2,
.p2-koha-page .ref-section-title h2,
.p2-koha-page .ref-why h2 { color: #0c3767; font-size: 1.2rem; }
.p2-koha-page .ref-panel p { color: #29485f; font-size: .78rem; line-height: 1.55; }
.p2-koha-page .ref-panel a,
.p2-koha-page .ref-why a { color: #005d9c; font-size: .72rem; }
.p2-koha-page .ref-panel-note { color: #29485f !important; font-size: .72rem !important; }
.p2-koha-page .ref-flow li { color: #173f5d; font-size: .64rem; }
.p2-koha-page .ref-audiences li { color: #29485f; font-size: .66rem; }
.p2-koha-page .ref-section-title p { color: #38586b; font-size: .72rem; }
.p2-koha-page .ref-capability-grid strong { color: #103968; font-size: .7rem; }
.p2-koha-page .ref-capability-grid span { color: #38566b; font-size: .64rem; line-height: 1.35; }
.p2-koha-page .ref-why p { color: #38566b; font-size: .7rem; }
.p2-koha-page .ref-why li { color: #29485f; font-size: .7rem; }
.p2-koha-page .ref-external span { color: #164c72; font-size: .66rem; }
.p2-koha-page .ref-layers span,
.p2-koha-page .ref-layers strong { font-size: .68rem; }
.p2-koha-page .ref-boundary { color: #164c72; font-size: .66rem; }
.p2-koha-page .ref-bridge h2 { color: #0c3767; font-size: 1.55rem; }
.p2-koha-page .ref-bridge p:not(.ref-eyebrow) { color: #38566b; font-size: .78rem; }
.p2-koha-page .ref-bridge ul { color: #1b6246; font-size: .7rem; }
@media (max-width: 620px) {
.p2-koha-page .ref-lead { font-size: .98rem; }
.p2-koha-page .ref-panel p { font-size: .76rem; }
.p2-koha-page .ref-capability-grid strong { font-size: .64rem; }
.p2-koha-page .ref-capability-grid span { font-size: .58rem; }
.p2-koha-page .ref-panel h2,
.p2-koha-page .ref-section-title h2,
.p2-koha-page .ref-why h2 { font-size: 1.08rem; }
}
.p2-site:has(.p2-koha-hero) {
--p2-navy: #0d2f4b;
--p2-blue: #075f91;
--p2-green: #147a50;
--p2-ink: #172b3d;
--p2-muted: #3e5669;
--p2-line: #c9dce0;
--p2-soft: #eef8f5;
}
.p2-site:has(.p2-koha-hero) .p2-hero,
.p2-site:has(.p2-koha-hero) .p2-koha-hero { background: linear-gradient(115deg, #eaf7f3 0%, #ffffff 68%); }
.p2-site:has(.p2-koha-hero) .p2-lead,
.p2-site:has(.p2-koha-hero) .p2-copy { font-size: 1.06rem; line-height: 1.8; }
.p2-site:has(.p2-koha-hero) .p2-eyebrow { color: #126942; font-size: .74rem; }
.p2-site:has(.p2-koha-hero) .p2-card p,
.p2-site:has(.p2-koha-hero) .p2-value p,
.p2-site:has(.p2-koha-hero) .p2-mini p { color: #3e5669; font-size: .94rem; line-height: 1.65; }
.p2-site:has(.p2-koha-hero) .p2-card,
.p2-site:has(.p2-koha-hero) .p2-value,
.p2-site:has(.p2-koha-hero) .p2-mini { border-color: #c9dce0; box-shadow: 0 8px 24px rgba(18,54,83,.07); }
.p2-site:has(.p2-koha-hero) .p2-card h3,
.p2-site:has(.p2-koha-hero) .p2-value h3,
.p2-site:has(.p2-koha-hero) .p2-mini h3 { color: #0d2f4b; }
.p2-site:has(.p2-koha-hero) .p2-text-link,
.p2-site:has(.p2-koha-hero) .p2-card a { color: #0b7149; }
.p2-site:has(.p2-koha-hero) .p2-lifecycle li,
.p2-site:has(.p2-koha-hero) .p2-audience-grid span,
.p2-site:has(.p2-koha-hero) .p2-pill-list span,
.p2-site:has(.p2-koha-hero) .p2-process li,
.p2-site:has(.p2-koha-hero) .p2-module-grid a { border-color: #c9dce0; }
.p2-site:has(.p2-koha-hero) .p2-module-grid span { color: #3e5669; font-size: .84rem; line-height: 1.5; }
.p2-site:has(.p2-koha-hero) .p2-navy { background: #0d2f4b; }
.p2-site:has(.p2-koha-hero) .p2-navy .p2-copy,
.p2-site:has(.p2-koha-hero) .p2-cta p { color: rgba(255,255,255,.92); }
.p2-site:has(.p2-koha-hero) .p2-boundaries span { color: #ffffff; background: rgba(255,255,255,.18); }
.p2-site:has(.p2-koha-hero) .p2-footer span,
.p2-site:has(.p2-koha-hero) .p2-footer small { color: rgba(255,255,255,.82); }
.p2-site:has(.p2-koha-hero) a:focus-visible,
.p2-site:has(.p2-koha-hero) button:focus-visible { outline: 3px solid #f0b429; outline-offset: 3px; }

/* Koha overview composition. */
.p2-site:has(.p2-koha-hero) .p2-hero-grid { grid-template-columns: minmax(0, .94fr) minmax(420px, 1.06fr); gap: clamp(34px, 5vw, 72px); min-height: 520px; padding-top: 52px; padding-bottom: 52px; }
.p2-site:has(.p2-koha-hero) .p2-hero-copy { max-width: 620px; }
.p2-site:has(.p2-koha-hero) .p2-hero h1 { font-size: clamp(3.8rem, 7vw, 6.1rem); letter-spacing: -.055em; }
.p2-site:has(.p2-koha-hero) .p2-hero-role { color: #075f91; font-size: clamp(1.15rem, 2vw, 1.48rem); }
.p2-site:has(.p2-koha-hero) .p2-koha-visual { min-height: 350px; overflow: visible; border: 0; border-radius: 18px; background: radial-gradient(circle at 50% 8%, rgba(71,191,139,.28), transparent 48%), linear-gradient(145deg, #dff3ec, #f5fbfa); box-shadow: 14px 16px 0 rgba(20,122,80,.1); }
.p2-site:has(.p2-koha-hero) .p2-koha-visual::before,
.p2-site:has(.p2-koha-hero) .p2-koha-visual::after { position: absolute; z-index: 3; right: -34px; width: 166px; padding: 13px 14px 13px 42px; border: 1px solid #c7e2d8; border-radius: 11px; background: #fff; box-shadow: 0 10px 24px rgba(18,54,83,.11); color: #0d2f4b; font: 700 .68rem/1.35 Arial, sans-serif; white-space: pre-line; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual::before { top: 30px; content: "ACCESS FROM ANY DEVICE\A Desktop, laptop, tablet or mobile"; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual::after { right: -24px; bottom: 24px; content: "STANDARDS BASED\A MARC21, Z39.50, OAI-PMH"; }
.p2-site:has(.p2-koha-hero) .p2-koha-window { top: 42px; right: 74px; left: 28px; min-height: 238px; padding: 17px 18px 18px 72px; border: 8px solid #fff; border-radius: 10px; box-shadow: 0 18px 30px rgba(18,54,83,.2); background: linear-gradient(90deg, #123653 0 52px, #fff 52px); }
.p2-site:has(.p2-koha-hero) .p2-koha-window::before { position: absolute; top: -8px; right: -8px; left: -8px; height: 20px; border-radius: 7px 7px 0 0; background: #f7fafb; content: "•••"; color: #2d8a68; font: 700 13px/17px Arial, sans-serif; letter-spacing: 3px; padding-left: 8px; }
.p2-site:has(.p2-koha-hero) .p2-koha-window::after { position: absolute; top: 38px; bottom: 0; left: 0; width: 52px; background: linear-gradient(#0c456d 0 30%, #0b3a5c); content: "Home\A\A Circulation\A Patrons\A Cataloguing\A Acquisitions\A Serials\A Reports"; white-space: pre; color: #d9edf4; font: .5rem/1.9 Arial, sans-serif; padding: 8px; box-sizing: border-box; }
.p2-site:has(.p2-koha-hero) .p2-koha-window > span { display: block; margin-top: 13px; color: #198a58; font-size: 1.7rem; }
.p2-site:has(.p2-koha-hero) .p2-koha-window div { grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 22px; }
.p2-site:has(.p2-koha-hero) .p2-koha-window b { display: grid; min-height: 48px; place-items: center; padding: 8px 4px; border: 1px solid #d8e9e6; border-radius: 4px; color: #075f91; background: #f2faf8; font-size: .62rem; text-align: center; }
.p2-site:has(.p2-koha-hero) .p2-koha-accent { right: 42px; bottom: 7px; width: 92px; height: 92px; background: #2d8a68; opacity: .16; }
.p2-site:has(.p2-koha-hero) .p2-section { padding: 68px 0; }
.p2-site:has(.p2-koha-hero) .p2-section-head { margin-bottom: 27px; }
.p2-site:has(.p2-koha-hero) .p2-section-head h2,
.p2-site:has(.p2-koha-hero) .p2-two-col h2 { font-size: clamp(1.85rem, 3vw, 2.7rem); }
.p2-site:has(.p2-koha-hero) .p2-card,
.p2-site:has(.p2-koha-hero) .p2-value,
.p2-site:has(.p2-koha-hero) .p2-mini { min-height: 165px; padding: 21px; border-radius: 11px; }
.p2-site:has(.p2-koha-hero) .p2-card h3,
.p2-site:has(.p2-koha-hero) .p2-value h3,
.p2-site:has(.p2-koha-hero) .p2-mini h3 { margin-top: 19px; font-size: 1.05rem; }
.p2-site:has(.p2-koha-hero) .p2-four { gap: 11px; }
.p2-site:has(.p2-koha-hero) .p2-lifecycle li { min-height: 96px; border-left-width: 4px; border-radius: 0 8px 8px 0; box-shadow: 0 7px 16px rgba(18,54,83,.05); }
.p2-site:has(.p2-koha-hero) .p2-module-grid a { min-height: 103px; border-radius: 9px; box-shadow: 0 7px 16px rgba(18,54,83,.045); }
.p2-site:has(.p2-koha-hero) .p2-architecture { grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 42px; padding: 25px; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; background: rgba(4,32,53,.28); }
.p2-site:has(.p2-koha-hero) .p2-boundaries { border-radius: 12px; }
.p2-site:has(.p2-koha-hero) .p2-cta { padding: 70px 0; background: linear-gradient(120deg, #e8f7ef, #f5fbf7); border-top: 1px solid #c9e3d5; border-bottom: 1px solid #c9e3d5; }
.p2-site:has(.p2-koha-hero) .p2-cta h2 { color: #0d2f4b; }
.p2-site:has(.p2-koha-hero) .p2-cta .p2-eyebrow { color: #147a50; }
.p2-site:has(.p2-koha-hero) .p2-cta p { color: #3e5669; }

@media (max-width: 900px) {
.p2-site:has(.p2-koha-hero) .p2-hero-grid { grid-template-columns: 1fr; min-height: 0; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual { width: min(100%, 590px); margin: 0 auto; }
}

/* Final Koha overview polish. */
.p2-koha-page .ref-panel { padding: 15px 16px; }
.p2-koha-page .ref-icon { width: 40px; height: 40px; }
.p2-koha-page .ref-panel p { line-height: 1.55; }
.p2-koha-page .ref-flow { gap: 5px; }
.p2-koha-page .ref-flow li:not(:last-child)::after { right: -9px; color: #08764b; font-size: .7rem; font-weight: 700; }
.p2-koha-page .ref-audiences { gap: 6px; }
.p2-koha-page .ref-audiences li { padding: 7px 4px; line-height: 1.25; }
.p2-koha-page .ref-capability-grid article { padding: 10px; }
.p2-koha-page .ref-capability-grid article > b::before { width: 14px; height: 14px; }
.p2-koha-page .ref-capability-grid strong { font-size: .7rem; }
.p2-koha-page .ref-capability-grid span { font-size: .64rem; line-height: 1.35; }
.p2-koha-page .ref-why ul { gap: 8px; }
.p2-koha-page .ref-why li { font-size: .62rem; line-height: 1.35; }
.p2-koha-page .ref-why li::before { display: inline-block; width: 15px; margin-right: 5px; }
.p2-koha-page .ref-external { gap: 4px; }
.p2-koha-page .ref-external span { padding: 7px 3px; border: 1px solid #dcebef; font-size: .54rem; }
.p2-koha-page .ref-layers { gap: 5px; }
.p2-koha-page .ref-layers span,
.p2-koha-page .ref-layers strong { padding: 7px 10px; font-size: .57rem; }
.p2-koha-page .ref-boundary { font-size: .56rem; }

@media (min-width: 1101px) and (max-width: 1300px) {
	.p2-koha-page .ref-hero-art { padding-right: 126px; }
}

@media (max-width: 620px) {
	.p2-koha-page .p2-footer .p2-container { grid-template-columns: 1fr; gap: 14px; }
	.p2-koha-page .p2-footer-nav { justify-content: flex-start; gap: 8px 14px; }
	.p2-koha-page .p2-footer small { grid-column: 1; justify-self: start; width: auto; margin-left: 0; }
}

/* Koha at a Glance page. */
.glance-page { background: #fff; color: #153b5f; }
.glance-hero { background: linear-gradient(115deg, #f3fbfa 0%, #fff 72%); border-bottom: 1px solid #d7ebe7; }
.glance-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); gap: 48px; align-items: center; min-height: 390px; padding-top: 42px; padding-bottom: 42px; }
.glance-copy { max-width: 650px; }
.glance-kicker { margin: 0 0 13px; color: #075b3b; font: 700 .76rem/1.4 Arial, sans-serif; letter-spacing: .13em; }
.glance-kicker::after { display: block; width: 42px; height: 3px; margin-top: 9px; background: #15935c; content: ""; }
.glance-hero h1 { margin: 0; color: #103e73; font: 800 clamp(3.1rem, 6vw, 5.1rem)/.98 Arial, sans-serif; letter-spacing: -.055em; }
.glance-hero h1 em { color: #087d4d; font-style: normal; }
.glance-hero h2 { max-width: 620px; margin: 15px 0 14px; color: #07558e; font: 700 clamp(1.25rem, 2.2vw, 1.75rem)/1.25 Arial, sans-serif; }
.glance-copy > p:not(.glance-kicker) { max-width: 620px; margin: 0; color: #29445d; font: 1rem/1.7 Arial, sans-serif; }
.glance-hero-points { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 22px; color: #294b63; font: 700 .72rem Arial, sans-serif; }
.glance-hero-points span::before { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #0a9b68; content: ""; }
.glance-hero-mark { display: grid; place-items: center; min-height: 290px; border-left: 1px solid #c9dce0; background: radial-gradient(ellipse at 52% 45%, rgba(123,220,168,.35), transparent 68%); }
.glance-platform { position: relative; width: min(100%, 430px); padding: 20px 22px 24px; border: 9px solid #dbe9e7; border-radius: 12px 12px 5px 5px; background: #f7fbfc; box-shadow: 0 17px 28px rgba(22,67,88,.18); transform: perspective(900px) rotateY(-4deg); }
.glance-platform::after { position: absolute; right: -28px; bottom: -25px; left: -28px; height: 17px; border-radius: 50%; background: #9aafb0; box-shadow: 0 5px 0 #668184; content: ""; }
.glance-platform-brand { display: block; color: #118554; font: italic 700 2.2rem/1 Georgia, serif; }
.glance-platform-label { display: block; margin-top: 5px; color: #185487; font: 700 .64rem Arial, sans-serif; letter-spacing: .13em; }
.glance-platform-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 22px; }
.glance-platform-bars i { height: 54px; border: 1px solid #c5e2d9; border-radius: 4px; background: linear-gradient(#eaf8f3 0 35%, #fff 35%); }
.glance-platform-bars i:nth-child(even) { border-color: #c9dce8; background: linear-gradient(#eaf4fb 0 35%, #fff 35%); }
.glance-platform-base { width: 108%; height: 15px; margin: 18px -4% -14px; border-radius: 3px 3px 10px 10px; background: #72858a; }
.glance-capabilities, .glance-workflow, .glance-environments { padding: 42px 0; }
.glance-section-heading { max-width: 760px; margin-bottom: 22px; }
.glance-section-heading .glance-kicker { margin-bottom: 8px; }
.glance-section-heading h2, .glance-two-column h2, .glance-cta h2 { margin: 0; color: #0c3767; font: 800 clamp(1.75rem, 3vw, 2.35rem)/1.1 Arial, sans-serif; }
.glance-section-heading > p:last-child, .glance-two-column > div > p:last-child, .glance-cta p:not(.glance-kicker) { margin: 9px 0 0; color: #38566b; font: .9rem/1.6 Arial, sans-serif; }
.glance-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.glance-card { position: relative; min-height: 164px; padding: 16px; border: 1px solid #d3e7ef; border-top: 3px solid #15935c; border-radius: 9px; background: #fff; box-shadow: 0 6px 16px rgba(22,67,88,.06); }
.glance-card:nth-child(even) { border-top-color: #0b5793; background: #f5fbfd; }
.glance-number { position: absolute; top: 13px; right: 15px; color: #a6cdb2; font: 800 1rem Arial, sans-serif; }.glance-card:nth-child(even) .glance-number { color: #9db7d8; }
.glance-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 12px; border-radius: 50%; background: #15935c; color: #fff; font: 800 .85rem Arial, sans-serif; }.glance-card:nth-child(even) .glance-icon { background: #0b5793; }
.glance-card h3 { margin: 0 0 7px; color: #123f74; font: 800 1rem/1.2 Arial, sans-serif; }.glance-card p { margin: 0; color: #29485f; font: .78rem/1.5 Arial, sans-serif; }
.glance-standards, .glance-benefits { padding: 42px 0; background: #f7fbfd; border-top: 1px solid #e1edf1; border-bottom: 1px solid #e1edf1; }
.glance-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.glance-standards .ref-button { margin-top: 19px; }
.glance-standard-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.glance-standard-list span { padding: 11px 12px; border: 1px solid #cfe2ea; border-radius: 5px; background: #fff; color: #164c72; font: 700 .76rem Arial, sans-serif; }
.glance-workflow { background: #fff; }.glance-workflow-list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 0; padding: 0; list-style: none; }.glance-workflow-list li { position: relative; min-height: 76px; padding: 12px 8px; border-top: 3px solid #15935c; background: #effaf5; text-align: center; }.glance-workflow-list li:not(:last-child)::after { position: absolute; top: 25px; right: -7px; z-index: 1; color: #08764b; content: "→"; font-weight: 800; }.glance-workflow-list b { display: block; color: #267050; font: 700 .62rem Arial, sans-serif; }.glance-workflow-list strong { display: block; margin-top: 8px; color: #173f5d; font: 700 .68rem/1.25 Arial, sans-serif; }
.glance-environments { background: #fff; }.glance-environment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.glance-environment-grid article { min-height: 140px; padding: 17px; border: 1px solid #d3e7ef; border-radius: 9px; background: #eef8ff; box-shadow: 0 6px 16px rgba(22,67,88,.05); }.glance-environment-grid article:nth-child(2) { background: #effaf5; }.glance-environment-grid article:nth-child(3) { background: #fff8ef; }.glance-environment-grid span { color: #15935c; font: 800 .76rem Arial, sans-serif; }.glance-environment-grid h3 { margin: 10px 0 6px; color: #123f74; font: 800 1.05rem Arial, sans-serif; }.glance-environment-grid p { margin: 0; color: #29485f; font: .8rem/1.5 Arial, sans-serif; }.glance-links { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 18px; }.glance-links a { color: #005d9c; font: 700 .78rem Arial, sans-serif; }
.glance-audience-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }.glance-audience-list span { padding: 11px 13px; border: 1px solid #c9dce0; border-radius: 6px; background: #fff; color: #123f74; font: 700 .8rem Arial, sans-serif; }.glance-audience-list span::before { display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; border-radius: 50%; background: #15935c; content: ""; }
.glance-cta { padding: 38px 0; background: #effbf3; border-top: 1px solid #d3eddb; border-bottom: 1px solid #d3eddb; }.glance-cta .p2-container { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }.glance-cta .glance-kicker { margin-bottom: 8px; }.glance-cta-actions { display: flex; gap: 8px; }
@media (max-width: 950px) { .glance-grid { grid-template-columns: repeat(2, 1fr); }.glance-workflow-list { grid-template-columns: repeat(4, 1fr); row-gap: 10px; }.glance-workflow-list li:nth-child(4)::after { display: none; }.glance-two-column { gap: 28px; }.glance-cta .p2-container { grid-template-columns: 1fr auto; } }
@media (max-width: 820px) { .glance-hero-grid { grid-template-columns: 1fr; gap: 24px; }.glance-hero-mark { min-height: 250px; border-top: 1px solid #c9dce0; border-left: 0; }.glance-cta .p2-container { grid-template-columns: 1fr; }.glance-cta-actions { justify-content: flex-start; } }
@media (max-width: 620px) { .glance-grid, .glance-environment-grid, .glance-two-column { grid-template-columns: 1fr; }.glance-hero h1 { font-size: 3.35rem; }.glance-hero-grid { padding-top: 34px; padding-bottom: 30px; }.glance-platform { width: min(100%, 360px); }.glance-standard-list, .glance-audience-list { grid-template-columns: 1fr; }.glance-workflow-list { grid-template-columns: repeat(2, 1fr); }.glance-workflow-list li:nth-child(odd)::after { display: none; }.glance-workflow-list li:nth-child(even)::after { display: block; right: -7px; }.glance-workflow-list li:last-child::after { display: none; }.glance-capabilities, .glance-workflow, .glance-environments { padding: 34px 0; }.glance-standards, .glance-benefits { padding: 34px 0; }.glance-cta-actions { flex-wrap: wrap; }.glance-cta-actions .ref-button { flex: 1; } }


@media (max-width: 820px) {
body:has(.modules-page) .header-container { min-height: 72px; padding: 10px 20px; }
body:has(.modules-page) .header-container { width: 100%; max-width: 100%; }
body:has(.modules-page) .brand { min-width: 0; }
body:has(.modules-page) .brand-tagline { display: none; }
body:has(.modules-page) .menu-toggle { margin-left: auto; }
body:has(.modules-page) .menu-toggle { display: block; }
body:has(.modules-page) .main-nav { position: absolute; top: 100%; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; padding: 12px 20px 18px; border-top: 1px solid #c9dce0; background: #fff; box-shadow: 0 15px 25px rgba(18,54,83,.12); }
body:has(.modules-page) .main-nav.open { display: flex; }
body:has(.modules-page) .nav-link,
body:has(.modules-page) .dropdown-button { width: 100%; justify-content: space-between; padding: 13px 8px; text-align: left; }
body:has(.modules-page) .contact-button { justify-content: center; margin: 9px 0 0; }
}

/* Koha ILMS dropdown typography. */
.nav-dropdown .dropdown-menu a[href="koha-at-a-glance.html"] { display: none !important; }
.nav-dropdown .dropdown-menu a[href="koha.html"],
.nav-dropdown .dropdown-menu a[href="why-koha.html"],
.nav-dropdown .dropdown-menu a[href="koha-modules.html"],
.nav-dropdown .dropdown-menu a[href="koha-platform.html"],
.nav-dropdown .dropdown-menu a[href="koha-architecture.html"] { color: #17324d !important; font-size: 0 !important; font-weight: 600; line-height: 1.35; }
.nav-dropdown .dropdown-menu a[href="koha.html"]::after { content: "Koha Overview"; font-size: .9rem; }
.nav-dropdown .dropdown-menu a[href="why-koha.html"]::after { content: "Why Choose Koha"; font-size: .9rem; }
.nav-dropdown .dropdown-menu a[href="koha-modules.html"]::after { content: "Koha Modules"; font-size: .9rem; }
.nav-dropdown .dropdown-menu a[href="koha-platform.html"]::after { content: "Koha Platform"; font-size: .9rem; }
.nav-dropdown .dropdown-menu a[href="koha-architecture.html"]::after { content: "Koha Architecture"; font-size: .9rem; }
body.p2-koha-page .dropdown-menu a,
body:has(.platform-page) .dropdown-menu a,
body:has(.architecture-page) .dropdown-menu a { color: #17324d !important; font-size: .9rem !important; font-weight: 600; line-height: 1.35; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-at-a-glance.html"],
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-at-a-glance.html"],
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-at-a-glance.html"] { display: none; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha.html"],
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha.html"],
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha.html"],
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="why-koha.html"],
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="why-koha.html"],
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="why-koha.html"],
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-modules.html"],
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-modules.html"],
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-modules.html"],
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-platform.html"],
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-platform.html"],
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-platform.html"],
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-architecture.html"],
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-architecture.html"],
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-architecture.html"] { font-size: 0 !important; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha.html"]::after,
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha.html"]::after,
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha.html"]::after { content: "Koha Overview"; font-size: .9rem; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="why-koha.html"]::after,
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="why-koha.html"]::after,
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="why-koha.html"]::after { content: "Why Choose Koha"; font-size: .9rem; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-modules.html"]::after,
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-modules.html"]::after,
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-modules.html"]::after { content: "Koha Modules"; font-size: .9rem; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-platform.html"]::after,
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-platform.html"]::after,
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-platform.html"]::after { content: "Koha Platform"; font-size: .9rem; }
body.p2-koha-page .nav-dropdown .dropdown-menu a[href="koha-architecture.html"]::after,
body:has(.platform-page) .nav-dropdown .dropdown-menu a[href="koha-architecture.html"]::after,
body:has(.architecture-page) .nav-dropdown .dropdown-menu a[href="koha-architecture.html"]::after { content: "Koha Architecture"; font-size: .9rem; }

/* Contact page density and readability refinement. */
body.p5-contact .p2-section { padding-top: 64px; padding-bottom: 64px; }
body.p5-contact .p5-contact-hero { padding-top: 48px; padding-bottom: 48px; }
body.p5-contact .p5-contact-cta { padding-top: 56px; padding-bottom: 56px; }
body.p5-contact .p2-copy,
body.p5-contact .p5-contact-options p,
body.p5-contact .p2-card p,
body.p5-contact .p5-contact-cta p:not(.p2-eyebrow) { color: #29485f; }

/* OPAC readability and spacing refinement. */
body.p3-feature .p2-lead,
body.p3-feature .p2-copy,
body.p3-feature .p3-flow span,
body.p3-feature .p2-card p,
body.p3-feature .p3-service-note p:not(.p2-eyebrow) { color: #294765; font-size: 1rem; line-height: 1.7; }
body.p3-feature .p2-section { padding-top: 52px; padding-bottom: 52px; }
body.p3-feature .p3-hero { padding-top: 38px; padding-bottom: 38px; }
body.p3-feature .p2-section-head { margin-bottom: 22px; }
body.p3-feature .p2-section-head h2 { margin-bottom: 14px; }
body.p3-feature .p3-flow li { min-height: 132px; padding: 18px; }
body.p3-feature .p3-flow strong { margin: 4px 0 2px; }
body.p3-feature .p3-service-note { padding-top: 44px; padding-bottom: 44px; }
body.p3-feature .p3-related { padding-top: 28px; padding-bottom: 28px; }
body.p3-feature .p3-hero-panel { gap: 10px; min-height: 286px; padding: 24px; }
body.p3-feature .opac-interface-top { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
body.p3-feature .opac-interface-top > span { color: var(--p2-green); font: 700 .62rem Arial, sans-serif; letter-spacing: .14em; }
body.p3-feature .opac-interface-top strong { grid-column: 1; color: var(--p2-navy); font: 700 1.12rem Georgia, serif; }
body.p3-feature .opac-interface-top b { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 5px 7px; border: 1px solid #b9d7d2; border-radius: 4px; color: var(--p2-green); background: #fff; font: 700 .58rem Arial, sans-serif; }
body.p3-feature .opac-search-box { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px; border: 1px solid #c5deda; background: #fff; }
body.p3-feature .opac-search-box span { flex: 1; color: #5b7180; font: .62rem Arial, sans-serif; }
body.p3-feature .opac-search-box button { padding: 6px 9px; border: 0; border-radius: 3px; background: var(--p2-green); color: #fff; font: 700 .58rem Arial, sans-serif; }
body.p3-feature .opac-result-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #d7e8e4; }
body.p3-feature .opac-result-row i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 4px; background: #dff1eb; color: var(--p2-green); font: 700 .48rem Arial, sans-serif; font-style: normal; }
body.p3-feature .opac-result-row div { display: grid; gap: 2px; min-width: 0; }
body.p3-feature .opac-result-row strong { color: var(--p2-navy); font: 700 .62rem Arial, sans-serif; }
body.p3-feature .opac-result-row span { color: #4a6278; font: .55rem Arial, sans-serif; }
body.p3-feature .opac-result-row > b { padding: 3px 5px; border-radius: 3px; color: #16734d; background: #dff3e8; font: 700 .5rem Arial, sans-serif; }
body.p3-feature .opac-interface-footer { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid #c5deda; color: #1e6d99; font: 700 .52rem Arial, sans-serif; }
@media (max-width: 650px) {
	body.p3-feature .p2-section { padding-top: 38px; padding-bottom: 38px; }
	body.p3-feature .p3-hero { padding-top: 30px; padding-bottom: 30px; }
	body.p3-feature .p3-flow li { min-height: 0; padding: 16px; }
	body.p3-feature .p3-hero-panel { min-height: 286px; padding: 20px; }
}

/* Why Choose Koha page, using the completed overview design system. */
.why-koha-page { background: #fff; color: #153b5f; }
.why-koha-page .site-breadcrumb { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 12px 0; border-bottom: 1px solid #c9dce0; color: #38566b; font: .72rem Arial, sans-serif; }
.why-koha-page .site-breadcrumb a { color: #075f91; }
.why-koha-page .site-breadcrumb span { color: #15935c; }
.why-koha-page .why-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 48px; align-items: center; width: min(1160px, calc(100% - 48px)); min-height: 360px; margin: 0 auto; padding: 42px 0; background: linear-gradient(115deg, #f3fbfa 0%, #fff 72%); }
.why-koha-page .why-hero-copy { max-width: 660px; }
.why-koha-page .why-kicker { display: inline-block; margin: 0 0 14px; color: #075b3b; font: 700 .76rem/1.4 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.why-koha-page .why-kicker::after { display: block; width: 42px; height: 3px; margin-top: 10px; background: #15935c; content: ""; }
.why-koha-page .why-hero h1 { margin: 0; color: #103e73; font: 800 clamp(3.2rem, 6vw, 5rem)/.98 Arial, sans-serif; letter-spacing: -.055em; }
.why-koha-page .why-hero h2 { max-width: 620px; margin: 15px 0 14px; color: #07558e; font: 700 clamp(1.25rem, 2.2vw, 1.8rem)/1.25 Arial, sans-serif; }
.why-koha-page .why-hero p { max-width: 620px; margin: 0; color: #29445d; font: 1rem/1.7 Arial, sans-serif; }
.why-koha-page .why-mark { display: grid; place-items: center; min-height: 250px; padding: 24px; border-left: 1px solid #c9dce0; text-align: center; }
.why-koha-page .why-mark-symbol { display: grid; place-items: center; width: 78px; height: 78px; margin: 0 auto 16px; border-radius: 50% 50% 50% 12%; background: #15935c; color: #fff; font-size: 2.2rem; font-weight: 800; transform: rotate(-18deg); }
.why-koha-page .why-mark-word { margin: 0; color: #103e73; font: italic 700 3.5rem/1 Georgia, serif; }
.why-koha-page .why-mark-caption { margin-top: 15px; color: #38566b; font: 700 .72rem/1.5 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.why-koha-page .why-features { padding: 30px 0 44px; border-top: 1px solid #d7ebe7; background: #fff; }
.why-koha-page .why-features-inner { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }
.why-koha-page .why-features-heading { max-width: 760px; margin: 0 0 22px; }
.why-koha-page .why-features-heading h2 { margin: 0; color: #0c3767; font: 800 clamp(1.7rem, 3vw, 2.3rem)/1.1 Arial, sans-serif; }
.why-koha-page .why-features-heading p { margin: 8px 0 0; color: #38566b; font: .92rem/1.6 Arial, sans-serif; }
.why-koha-page .why-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.why-koha-page .why-card { min-height: 150px; padding: 18px; border: 1px solid #d3e7ef; border-top: 3px solid #15935c; border-radius: 9px; background: #eef8ff; box-shadow: 0 6px 16px rgba(22,67,88,.06); }
.why-koha-page .why-card:nth-child(even) { border-top-color: #0b5793; background: #effaf5; }
.why-koha-page .why-card h3 { margin: 0 0 8px; color: #123f74; font: 800 1.08rem/1.25 Arial, sans-serif; }
.why-koha-page .why-card p { margin: 0; color: #29485f; font: .84rem/1.55 Arial, sans-serif; }
.why-koha-page .why-footer-band { width: min(1160px, calc(100% - 48px)); margin: 0 auto 28px; padding: 20px 24px; border: 1px solid #c9e3d5; border-radius: 9px; background: #effbf3; color: #267050; font: 700 .9rem Arial, sans-serif; text-align: center; }
.why-koha-page .site-footer { display: grid; padding: 24px max(24px, calc((100% - 1160px) / 2)); background: #103b64; color: #fff; }
.why-koha-page .site-footer::before { color: #fff; content: "Basavaraj Talikoti\A Independent Koha & Library Automation Consultant"; font: 700 1.05rem/1.45 Arial, sans-serif; white-space: pre-line; }
.why-koha-page .site-footer::after { align-self: center; color: rgba(255,255,255,.88); content: "Home  |  About Me  |  Koha ILMS  |  Services  |  Contact"; font: 700 .7rem Arial, sans-serif; text-align: right; }
.why-koha-page .site-footer p { grid-column: 2; margin: 8px 0 0; color: rgba(255,255,255,.8); font: .74rem Arial, sans-serif; text-align: right; }
@media (max-width: 820px) {
	.why-koha-page .site-breadcrumb { width: min(100% - 28px, 1160px); }
	.why-koha-page .why-hero { grid-template-columns: 1fr; gap: 24px; width: min(100% - 28px, 1160px); min-height: 0; padding: 34px 0 30px; }
	.why-koha-page .why-hero h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
	.why-koha-page .why-mark { min-height: 0; padding: 24px 0 0; border-top: 1px solid #c9dce0; border-left: 0; }
	.why-koha-page .why-features-inner { width: min(100% - 28px, 1160px); }
	.why-koha-page .why-card-grid { grid-template-columns: 1fr; }
	.why-koha-page .site-footer { grid-template-columns: 1fr; padding: 24px 14px; }
	.why-koha-page .site-footer::after { grid-row: 2; text-align: left; }
	.why-koha-page .site-footer p { grid-column: 1; grid-row: 3; margin-top: 0; text-align: left; }
}
@media (max-width: 560px) {
.p2-site:has(.p2-koha-hero) .p2-hero h1 { font-size: 3.35rem; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual { min-height: 285px; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual::before,
.p2-site:has(.p2-koha-hero) .p2-koha-visual::after { right: -2px; width: 145px; font-size: .6rem; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual::before { top: 8px; }
.p2-site:has(.p2-koha-hero) .p2-koha-visual::after { bottom: 5px; }
.p2-site:has(.p2-koha-hero) .p2-koha-window { top: 39px; right: 18px; left: 10px; padding-left: 61px; }
.p2-site:has(.p2-koha-hero) .p2-koha-window div { grid-template-columns: repeat(2, 1fr); }
.p2-site:has(.p2-koha-hero) .p2-architecture { padding: 16px; gap: 24px; }
}
.p3-feature { --p3-blue: #1e6d99; }
.p3-hero { border-bottom: 1px solid var(--p2-line); background: linear-gradient(115deg, #f1f8f6 0%, #fff 70%); }
.p3-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .72fr); gap: clamp(42px, 8vw, 120px); align-items: center; min-height: 410px; padding-top: 60px; padding-bottom: 60px; }
.p3-hero h1 { max-width: 700px; margin: 0; color: var(--p2-navy); font-size: clamp(2.7rem, 5.5vw, 5rem); letter-spacing: -.045em; line-height: 1.01; }
.p3-hero-panel { display: grid; gap: 14px; min-height: 260px; align-content: center; padding: 32px; border: 1px solid #b8d6d1; border-radius: 8px; background: #e5f2ee; box-shadow: 16px 16px 0 rgba(45,138,104,.12); }
.p3-hero-panel > span { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .15em; }.p3-hero-panel strong { color: var(--p2-navy); font-size: 1.55rem; line-height: 1.15; }.p3-search-line, .p3-query { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--p2-line); background: #fff; color: var(--p2-muted); font: .8rem Arial, sans-serif; }.p3-search-line b, .p3-query b { color: var(--p2-green); font-size: 1.15rem; }.p3-code-lines { padding: 18px; border-left: 3px solid var(--p2-green); background: #fff; color: var(--p2-muted); font: .78rem/2 Arial, sans-serif; }.p3-code-lines i { display: inline-block; width: 38px; color: var(--p2-green); font-style: normal; font-weight: 700; }.p3-account { display: grid; gap: 5px; padding: 18px; border-left: 3px solid var(--p2-blue); background: #fff; font-family: Arial, sans-serif; }.p3-account b { color: var(--p2-navy); font-size: .8rem; }.p3-account span { color: var(--p2-muted); font-size: .72rem; }.p3-mini-flow { color: var(--p2-blue); font: 700 .8rem/1.7 Arial, sans-serif; }.p3-tool-stack { display: grid; gap: 6px; }.p3-tool-stack b { padding: 10px 12px; background: #fff; color: var(--p2-blue); font: .75rem Arial, sans-serif; }
.p3-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }.p3-flow li { position: relative; display: grid; gap: 9px; min-height: 150px; padding: 19px; border-top: 3px solid var(--p2-green); background: #fff; box-shadow: 0 7px 18px rgba(18,54,83,.05); }.p3-flow li:not(:last-child)::after { position: absolute; top: 29px; right: -9px; z-index: 2; color: var(--p2-green); content: "→"; font: 700 1rem Arial, sans-serif; }.p3-flow b { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .08em; }.p3-flow strong { color: var(--p2-navy); font-size: 1.05rem; line-height: 1.18; }.p3-flow span { color: var(--p2-muted); font: .77rem/1.5 Arial, sans-serif; }.p3-circulation-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }.p3-dark-flow { margin-top: 30px; }.p3-dark-flow li { background: rgba(255,255,255,.1); box-shadow: none; }.p3-dark-flow strong { color: #fff; }.p3-dark-flow span { color: rgba(255,255,255,.68); }.p3-dark-flow li:not(:last-child)::after { color: #9dd8ba; }
.p3-inline-image { width: min(100%, 300px); max-height: 170px; object-fit: cover; border-radius: 7px; opacity: .92; }
.p3-service-note { padding: 50px 0; border-top: 1px solid var(--p2-line); border-bottom: 1px solid var(--p2-line); background: #f5faf8; }.p3-service-note .p2-container { display: flex; align-items: center; justify-content: space-between; gap: 30px; }.p3-service-note h2 { margin: 0 0 10px; color: var(--p2-navy); font-size: clamp(1.5rem, 3vw, 2.3rem); }.p3-service-note p:not(.p2-eyebrow) { max-width: 650px; margin: 0; color: var(--p2-muted); font: .9rem/1.65 Arial, sans-serif; }.p3-related { padding: 42px 0; }.p3-related > .p2-container > div { display: flex; flex-wrap: wrap; gap: 10px; }.p3-related a { display: inline-flex; gap: 10px; padding: 12px 15px; border: 1px solid var(--p2-line); border-radius: 5px; color: var(--p2-blue); font: 700 .76rem Arial, sans-serif; }.p3-related a:hover { border-color: var(--p2-green); color: var(--p2-green); }.p3-related a span { color: var(--p2-green); }.p3-reporting-hero { background: #eff6f8; }.p3-dashboard { display: grid; gap: 18px; min-height: 260px; padding: 28px; border: 1px solid #b9d3de; border-radius: 8px; background: #e3eff4; box-shadow: 16px 16px 0 rgba(30,109,153,.12); }.p3-dashboard > span { color: var(--p2-blue); font: 700 .7rem Arial, sans-serif; letter-spacing: .15em; }.p3-dashboard strong { color: var(--p2-navy); font: 700 .85rem Arial, sans-serif; }.p3-bars { display: flex; align-items: end; gap: 10px; height: 120px; padding: 12px 18px 0; border-bottom: 2px solid var(--p2-blue); }.p3-bars i { display: block; width: 20%; background: var(--p2-green); }.p3-bars i:nth-child(1) { height: 42%; }.p3-bars i:nth-child(2) { height: 67%; background: var(--p2-blue); }.p3-bars i:nth-child(3) { height: 52%; }.p3-bars i:nth-child(4) { height: 88%; background: var(--p2-blue); }.p3-bars i:nth-child(5) { height: 74%; }.p3-reporting-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.p3-reporting-options div { display: grid; gap: 10px; padding: 24px; border-left: 3px solid var(--p2-blue); background: #eef6f8; }.p3-reporting-options b { color: var(--p2-navy); font: 700 .75rem Arial, sans-serif; letter-spacing: .08em; }.p3-reporting-options span { color: var(--p2-muted); font: .83rem/1.55 Arial, sans-serif; }
@media (max-width: 900px) { .p3-hero-grid { grid-template-columns: 1fr; min-height: 0; }.p3-hero-panel, .p3-dashboard { width: min(100%, 500px); }.p3-flow, .p3-circulation-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }.p3-flow li:not(:last-child)::after { display: none; }.p3-service-note .p2-container { align-items: flex-start; flex-direction: column; }.p3-reporting-options { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .p3-hero-grid { padding-top: 45px; padding-bottom: 45px; }.p3-hero h1 { font-size: 2.85rem; }.p3-hero-panel, .p3-dashboard { padding: 22px; }.p3-flow, .p3-circulation-flow { grid-template-columns: 1fr; }.p3-flow li { min-height: 0; }.p3-related a { width: 100%; justify-content: space-between; }.p3-inline-image { width: 100%; }.p3-service-note .p2-button { width: 100%; } }

/* Phase 4 components for technical integrations and professional services. */
.p4-page h1 { max-width: 780px; margin: 0; color: var(--p2-navy); font-size: clamp(2.8rem, 5.7vw, 5.25rem); letter-spacing: -.045em; line-height: 1; }
.p4-hero, .p4-service-hero { border-bottom: 1px solid var(--p2-line); background: linear-gradient(115deg, #eef7f5 0%, #fff 72%); }.p4-service-hero { background: linear-gradient(115deg, #f5f8fb 0%, #fff 72%); }
.p4-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .75fr); gap: clamp(42px, 8vw, 120px); align-items: center; min-height: 480px; padding-top: 64px; padding-bottom: 64px; }.p4-hero-grid .p2-lead { max-width: 690px; }
.p4-hero-panel { display: grid; gap: 18px; align-content: center; min-height: 280px; padding: 34px; border: 1px solid #b7d4cf; border-radius: 8px; background: #e1f0eb; box-shadow: 17px 17px 0 rgba(45,138,104,.12); }.p4-hero-panel > span { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .15em; }.p4-hero-panel strong { color: var(--p2-navy); font-size: 1.45rem; line-height: 1.2; }.p4-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }.p4-chip-row i { padding: 9px 12px; border-radius: 20px; background: #fff; color: var(--p2-blue); font: 700 .7rem Arial, sans-serif; font-style: normal; }
.p4-diagram-section { padding: 88px 0; background: var(--p2-navy); color: #fff; }.p4-diagram-section h2, .p4-diagram-section .p2-eyebrow { color: #fff; }.p4-boundary-diagram { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .72fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 42px; }.p4-boundary-column { display: grid; gap: 8px; }.p4-boundary-column strong { margin-bottom: 5px; color: #9dd8ba; font: 700 .76rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }.p4-boundary-column span { padding: 12px 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: rgba(255,255,255,.84); font: .78rem Arial, sans-serif; }.p4-external { text-align: right; }.p4-core { display: grid; gap: 8px; place-items: center; min-height: 170px; padding: 20px; border: 3px solid #9dd8ba; border-radius: 50%; background: rgba(255,255,255,.08); text-align: center; }.p4-core b { color: #fff; font: 700 1.7rem Georgia, serif; letter-spacing: .1em; }.p4-core span, .p4-core em { color: rgba(255,255,255,.72); font: .72rem Arial, sans-serif; font-style: normal; }.p4-diagram-note { max-width: 680px; margin: 30px auto 0; color: rgba(255,255,255,.72); font: .83rem/1.6 Arial, sans-serif; text-align: center; }
.p2-two-by-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }.p4-tech-card { min-height: 190px; padding: 25px; border: 1px solid var(--p2-line); border-top: 3px solid var(--p2-blue); border-radius: 7px; background: #fff; }.p4-tech-card > span, .p4-service-card > span { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .1em; }.p4-tech-card h3, .p4-service-card h3 { margin: 20px 0 10px; color: var(--p2-navy); font-size: 1.15rem; line-height: 1.2; }.p4-tech-card p, .p4-service-card p { margin: 0; color: var(--p2-muted); font: .87rem/1.65 Arial, sans-serif; }.p4-tech-card strong { color: var(--p2-blue); }
.p4-identity-flow { display: grid; gap: 5px; max-width: 400px; }.p4-identity-flow span { padding: 13px 17px; border-left: 3px solid var(--p2-green); background: #fff; color: var(--p2-navy); font: 700 .8rem Arial, sans-serif; }.p4-identity-flow b { color: var(--p2-green); font: 1rem Arial, sans-serif; text-align: center; }
.p4-service-bridge { padding: 76px 0; background: var(--p2-blue); color: #fff; }.p4-service-bridge .p2-container { display: flex; align-items: center; justify-content: space-between; gap: 50px; }.p4-service-bridge .p2-eyebrow, .p4-service-bridge h2 { color: #fff; }.p4-service-bridge h2 { max-width: 780px; margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); letter-spacing: -.035em; line-height: 1.1; }.p4-service-bridge p:not(.p2-eyebrow) { max-width: 730px; margin: 18px 0 0; color: rgba(255,255,255,.8); font: .95rem/1.7 Arial, sans-serif; }.p4-service-bridge .p2-actions { flex-shrink: 0; flex-direction: column; align-items: stretch; margin-top: 0; }.p4-service-bridge .p2-button { white-space: nowrap; }
.p4-consultant-panel { display: grid; gap: 8px; min-height: 300px; align-content: center; padding: 34px; border: 1px solid #cbd9e5; background: #eef4f8; box-shadow: 17px 17px 0 rgba(30,109,153,.1); }.p4-consultant-mark { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 10px; border-radius: 50%; background: var(--p2-green); color: #fff; font: 700 1.55rem Georgia, serif; }.p4-consultant-panel strong { color: var(--p2-navy); font-size: 1.35rem; }.p4-consultant-panel > span { color: var(--p2-blue); font: 700 .75rem/1.4 Arial, sans-serif; }.p4-consultant-panel p { max-width: 260px; margin: 12px 0 0; color: var(--p2-muted); font: .83rem/1.6 Arial, sans-serif; }
.p2-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }.p4-service-card { position: relative; min-height: 245px; padding: 26px; border: 1px solid var(--p2-line); border-radius: 8px; background: #fff; box-shadow: 0 8px 24px rgba(18,54,83,.045); }.p4-service-card h3 { margin-top: 20px; }.p4-service-card a { position: absolute; bottom: 22px; color: var(--p2-green); font: 700 .77rem Arial, sans-serif; }.p4-service-card a span { margin-left: 5px; }.p4-service-card:hover { border-color: #9bcab8; transform: translateY(-2px); transition: transform .2s ease, border-color .2s ease; }
.p4-service-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }.p4-service-flow li { display: grid; gap: 8px; min-height: 142px; padding: 18px; border-top: 3px solid var(--p2-green); background: #f4faf8; }.p4-service-flow b, .p4-approach > li > b { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; }.p4-service-flow strong { color: var(--p2-navy); font-size: 1rem; }.p4-service-flow span { color: var(--p2-muted); font: .75rem/1.5 Arial, sans-serif; }.p4-migration-flow li { border-top-color: var(--p2-blue); background: #f1f7fa; }
.p4-approach { display: grid; gap: 12px; padding: 0; list-style: none; }.p4-approach > li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 15px 17px; border-left: 3px solid var(--p2-green); background: #f4faf8; }.p4-approach strong { display: block; margin-bottom: 4px; color: var(--p2-navy); font-size: 1rem; }.p4-approach span { color: var(--p2-muted); font: .8rem/1.55 Arial, sans-serif; }
@media (max-width: 950px) { .p4-hero-grid { grid-template-columns: 1fr; min-height: 0; }.p4-hero-panel, .p4-consultant-panel { width: min(100%, 520px); }.p4-boundary-diagram { grid-template-columns: 1fr; }.p4-external { text-align: left; }.p4-core { width: min(100%, 240px); margin: 8px auto; }.p4-devices { order: 3; }.p4-service-bridge .p2-container { align-items: flex-start; flex-direction: column; }.p4-service-bridge .p2-actions { width: min(100%, 320px); }.p4-service-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .p2-two-by-two, .p2-three, .p4-service-flow { grid-template-columns: 1fr; }.p4-service-flow li { min-height: 0; }.p4-service-bridge .p2-actions { width: 100%; }.p4-service-bridge .p2-button { width: 100%; }.p4-consultant-panel { min-height: 250px; } }

/* Final mobile ordering for the targeted platform hero. */
@media (max-width: 560px) {
.platform-visual { display: flex; min-height: 0; padding-top: 10px; flex-direction: column; align-items: center; transform: none; }
.platform-laptop { position: relative; top: auto; left: auto; order: 1; width: 86%; }
.platform-orbit { position: relative; top: auto !important; right: auto; align-self: flex-end; order: 2; width: min(100%, 250px); margin-top: 8px; }
.platform-books { bottom: auto; left: 0; transform: scale(.82) rotate(-4deg); transform-origin: bottom left; }
}

/* Phase 5 service-detail and contact components. */
.p5-page h1, .p5-contact h1 { max-width: 780px; margin: 0; color: var(--p2-navy); font-size: clamp(2.8rem, 5.6vw, 5.1rem); letter-spacing: -.045em; line-height: 1.01; }
.p5-hero, .p5-contact-hero { border-bottom: 1px solid var(--p2-line); background: linear-gradient(115deg, #f3f8fb 0%, #fff 72%); }.p5-contact-hero { background: linear-gradient(115deg, #eef7f5 0%, #fff 72%); }.p5-migration-hero { background: linear-gradient(115deg, #f4f8f6 0%, #fff 72%); }.p5-operations-hero { background: linear-gradient(115deg, #f2f7fa 0%, #fff 72%); }.p5-training-hero { background: linear-gradient(115deg, #f3f8f6 0%, #fff 72%); }
.p5-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .75fr); gap: clamp(42px, 8vw, 120px); align-items: center; min-height: 460px; padding-top: 62px; padding-bottom: 62px; }.p5-hero-grid .p2-lead { max-width: 690px; }.p5-hero-panel { display: grid; gap: 17px; align-content: center; min-height: 260px; padding: 32px; border: 1px solid #bfd4df; border-radius: 8px; background: #e9f2f6; box-shadow: 17px 17px 0 rgba(30,109,153,.1); }.p5-hero-panel > span { color: var(--p2-blue); font: 700 .7rem Arial, sans-serif; letter-spacing: .15em; }.p5-hero-panel strong { color: var(--p2-navy); font-size: 1.45rem; line-height: 1.2; }.p5-mini-flow { color: var(--p2-green); font: 700 .8rem/1.6 Arial, sans-serif; }.p5-data-panel { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 6px; align-items: center; }.p5-data-panel i { padding: 12px 8px; background: #fff; color: var(--p2-blue); font: .7rem Arial, sans-serif; font-style: normal; text-align: center; }.p5-data-panel b { color: var(--p2-green); }
.p5-flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; padding: 0; list-style: none; }.p5-flow li { display: grid; gap: 8px; min-height: 146px; padding: 18px; border-top: 3px solid var(--p2-green); background: #fff; box-shadow: 0 7px 18px rgba(18,54,83,.05); }.p5-flow b { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .08em; }.p5-flow strong { color: var(--p2-navy); font-size: 1rem; line-height: 1.15; }.p5-flow span { color: var(--p2-muted); font: .75rem/1.5 Arial, sans-serif; }.p5-four-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }.p5-five-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.p5-service-bridge { padding: 68px 0; background: var(--p2-blue); color: #fff; }.p5-service-bridge .p2-container { display: flex; align-items: center; justify-content: space-between; gap: 45px; }.p5-service-bridge .p2-eyebrow, .p5-service-bridge h2 { color: #fff; }.p5-service-bridge h2 { max-width: 760px; margin: 0; font-size: clamp(1.8rem, 3.3vw, 3rem); letter-spacing: -.035em; line-height: 1.1; }.p5-service-bridge p:not(.p2-eyebrow) { max-width: 700px; margin: 16px 0 0; color: rgba(255,255,255,.8); font: .92rem/1.7 Arial, sans-serif; }.p5-service-bridge .p2-button { flex-shrink: 0; }
.p5-contact-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .7fr); gap: clamp(42px, 8vw, 120px); align-items: center; min-height: 480px; padding-top: 64px; padding-bottom: 64px; }.p5-contact-grid .p2-lead { max-width: 680px; }.p5-contact-card { display: grid; gap: 10px; min-height: 250px; align-content: center; padding: 34px; border: 1px solid #b9d7d2; background: #e5f2ee; box-shadow: 17px 17px 0 rgba(45,138,104,.12); }.p5-contact-card > span { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .15em; }.p5-contact-card strong { color: var(--p2-navy); font-size: 1.4rem; }.p5-contact-card b { color: var(--p2-blue); font: 700 .76rem/1.45 Arial, sans-serif; }.p5-contact-card a { margin-top: 14px; color: var(--p2-green); font: 700 .86rem Arial, sans-serif; overflow-wrap: anywhere; }.p5-contact-options { display: grid; gap: 12px; margin-top: 28px; }.p5-contact-options article { padding: 19px 20px; border-left: 3px solid var(--p2-green); background: #f4faf8; }.p5-contact-options h3 { margin: 0 0 7px; color: var(--p2-navy); font-size: 1rem; }.p5-contact-options p { margin: 0 0 10px; color: var(--p2-muted); font: .82rem/1.55 Arial, sans-serif; }.p5-contact-options a { color: var(--p2-green); font: 700 .75rem Arial, sans-serif; }.p5-contact-options a span { margin-left: 5px; }.p5-contact-cta { padding: 78px 0; background: var(--p2-blue); color: #fff; }.p5-contact-cta h2 { max-width: 720px; margin: 0; color: #fff; font-size: clamp(2rem, 3.7vw, 3.2rem); letter-spacing: -.035em; line-height: 1.08; }.p5-contact-cta p:not(.p2-eyebrow) { max-width: 640px; margin: 17px 0 25px; color: rgba(255,255,255,.8); font: .95rem/1.7 Arial, sans-serif; }
.p5-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.p5-checklist span { padding: 14px 16px; border: 1px solid var(--p2-line); background: #fff; color: var(--p2-navy); font: 700 .8rem Arial, sans-serif; }.p5-checklist span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--p2-green); }.p5-contrast-card { padding: 30px; border: 1px solid var(--p2-line); border-top: 4px solid var(--p2-green); background: #fff; }.p5-contrast-card.p5-custom-card { border-top-color: var(--p2-blue); }.p5-contrast-card > span { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .12em; }.p5-custom-card > span { color: var(--p2-blue); }.p5-contrast-card h3 { margin: 18px 0 10px; color: var(--p2-navy); font-size: 1.35rem; }.p5-contrast-card p { margin: 0; color: var(--p2-muted); font: .88rem/1.65 Arial, sans-serif; }
@media (max-width: 950px) { .p5-hero-grid, .p5-contact-grid { grid-template-columns: 1fr; min-height: 0; }.p5-hero-panel, .p5-contact-card { width: min(100%, 520px); }.p5-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }.p5-four-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }.p5-five-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }.p5-service-bridge .p2-container { align-items: flex-start; flex-direction: column; }.p5-service-bridge .p2-button { width: min(100%, 320px); } }
@media (max-width: 650px) { .p5-flow, .p5-four-flow, .p5-five-flow { grid-template-columns: 1fr; }.p5-flow li { min-height: 0; }.p5-data-panel { grid-template-columns: 1fr; }.p5-data-panel b { transform: rotate(90deg); }.p5-checklist { grid-template-columns: 1fr; }.p5-service-bridge .p2-button, .p5-contact-cta .p2-button { width: 100%; }.p5-hero-grid, .p5-contact-grid { padding-top: 46px; padding-bottom: 46px; }.p5-page h1, .p5-contact h1 { font-size: 2.85rem; } }


/* =========================================================
KOHA CATALOGUING PAGE (p3-cataloguing) - SCOPED STYLES
========================================================= */

.p3-cataloguing .p3-cataloguing-visual {
display: grid;
gap: 16px;
align-content: start;
min-height: 260px;
padding: 30px;
border: 1px solid #b8d6d1;
border-radius: 8px;
background: #e5f2ee;
box-shadow: 16px 16px 0 rgba(45, 138, 104, 0.12);
font-family: Arial, sans-serif;
font-size: 0.88rem;
}

body.p3-feature.p3-cataloguing .p3-cataloguing-visual {
gap: 16px;
padding: 30px;
}

.p3-cataloguing .p3-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(380px, .85fr);
gap: clamp(32px, 5vw, 72px);
min-height: 0;
padding-top: 30px;
padding-bottom: 30px;
}

.p3-cataloguing .p2-section {
padding-top: 48px;
padding-bottom: 48px;
}

.p3-cataloguing .cat-interface-top {
color: #159653;
font: 700 0.7rem Arial, sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
}

.p3-cataloguing .cat-marc-block {
display: grid;
gap: 12px;
padding: 16px;
border: 1px solid #c5deda;
background: #fff;
border-radius: 4px;
}

.p3-cataloguing .cat-field {
display: grid;
grid-template-columns: 42px 32px 1fr;
gap: 12px;
align-items: start;
padding: 12px;
border-bottom: 1px solid #e8f2f0;
}

.p3-cataloguing .cat-field:last-child {
border-bottom: none;
}

.p3-cataloguing .cat-tag {
color: #159653;
font: 700 0.82rem Arial, sans-serif;
font-style: normal;
text-align: center;
padding: 3px 0;
}

.p3-cataloguing .cat-ind {
color: #5b7180;
font: 700 0.75rem Arial, sans-serif;
text-align: center;
padding: 3px 0;
}

.p3-cataloguing .cat-content {
display: grid;
gap: 2px;
min-width: 0;
}

.p3-cataloguing .cat-content b {
color: #17324d;
font: 700 0.82rem Arial, sans-serif;
line-height: 1.2;
}

.p3-cataloguing .cat-content span {
color: #4a6278;
font: 0.76rem Arial, sans-serif;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.p3-cataloguing .cat-item-section {
display: grid;
gap: 10px;
padding: 12px;
border-top: 1px solid #c5deda;
margin-top: 4px;
}

.p3-cataloguing .cat-item-label {
color: #159653;
font: 700 0.76rem Arial, sans-serif;
letter-spacing: 0.1em;
text-transform: uppercase;
}

.p3-cataloguing .cat-item-row {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
padding: 7px 0;
font-size: 0.8rem;
}

.p3-cataloguing .cat-item-row b {
color: #17324d;
font: 700 0.76rem Arial, sans-serif;
}

.p3-cataloguing .cat-item-row span {
color: #16734d;
background: #dff3e8;
padding: 3px 6px;
border-radius: 3px;
font: 700 0.72rem Arial, sans-serif;
}

.p3-cataloguing .cat-actions {
display: flex;
gap: 10px;
padding: 14px;
border-top: 1px solid #c5deda;
margin-top: 4px;
}

.p3-cataloguing .cat-save-btn,
.p3-cataloguing .cat-link-btn {
padding: 8px 13px;
border: 1px solid #159653;
border-radius: 4px;
background: #159653;
color: #fff;
font: 700 0.74rem Arial, sans-serif;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}

.p3-cataloguing .cat-link-btn {
background: #fff;
color: #159653;
border-color: #159653;
}

.p3-cataloguing .cat-save-btn:hover {
background: #126942;
border-color: #126942;
}

.p3-cataloguing .cat-link-btn:hover {
background: #f1f8f6;
}

/* Responsive adjustments for cataloguing page */
@media (max-width: 900px) {
.p3-cataloguing .p3-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 35px;
padding-bottom: 35px;
}

.p3-cataloguing .p2-section {
padding-top: 40px;
padding-bottom: 40px;
}

.p3-cataloguing .p3-cataloguing-visual {
min-height: auto;
width: min(100%, 500px);
}
}

@media (max-width: 560px) {
.p3-cataloguing .p3-hero-grid {
gap: 24px;
padding-top: 28px;
padding-bottom: 28px;
}

.p3-cataloguing .p2-section {
padding-top: 34px;
padding-bottom: 34px;
}

body.p3-feature.p3-cataloguing .p3-cataloguing-visual {
padding: 20px;
gap: 12px;
}

.p3-cataloguing .cat-field {
grid-template-columns: 32px 24px 1fr;
gap: 8px;
padding: 8px;
}

.p3-cataloguing .cat-actions {
flex-direction: column;
}

.p3-cataloguing .cat-save-btn,
.p3-cataloguing .cat-link-btn {
width: 100%;
}
}

/* =========================================================
KOHA SEARCH & DISCOVERY PAGE (p3-searching) - SCOPED STYLES
========================================================= */

body.p3-feature.p3-searching .p2-section {
padding-top: 48px;
padding-bottom: 48px;
}

body.p3-feature.p3-searching .p3-hero-grid {
grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
gap: clamp(36px, 5vw, 72px);
min-height: 0;
padding-top: 30px;
padding-bottom: 30px;
}

body.p3-feature.p3-searching .search-visual {
display: grid;
gap: 14px;
align-content: start;
min-height: 340px;
padding: 24px;
font-family: Arial, sans-serif;
font-size: .8rem;
}

.p3-searching .search-interface-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.p3-searching .search-interface-top > span,
.p3-searching .search-results-label,
.p3-searching .search-filters > strong {
color: var(--p2-green);
font: 700 .66rem Arial, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}

.p3-searching .search-interface-top b {
padding: 4px 6px;
border-radius: 3px;
background: #dff3e8;
color: #16734d;
font: 700 .62rem Arial, sans-serif;
white-space: nowrap;
}

.p3-searching .search-query {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-searching .search-query span {
flex: 1;
color: #4a6278;
font: .7rem Arial, sans-serif;
}

.p3-searching .search-query .search-field-selector {
flex: 0 0 auto;
padding-right: 10px;
border-right: 1px solid #d7e8e4;
color: var(--p2-blue);
font-weight: 700;
}

.p3-searching .search-query .search-field-selector b {
margin-left: 4px;
color: var(--p2-green);
font-size: .55rem;
}

.p3-searching .search-query button {
padding: 7px 11px;
border: 0;
border-radius: 3px;
background: var(--p2-green);
color: #fff;
font: 700 .64rem Arial, sans-serif;
}

.p3-searching .search-interface-body {
display: grid;
grid-template-columns: 112px 1fr;
gap: 14px;
min-height: 170px;
padding: 14px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-searching .search-filters {
display: grid;
align-content: start;
gap: 7px;
padding-right: 12px;
border-right: 1px solid #e0eeeb;
}

.p3-searching .search-filters > span {
color: #4a6278;
font: .7rem Arial, sans-serif;
}

.p3-searching .search-filters > span::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
margin: 0 6px 1px 0;
border: 1px solid #9bcab8;
border-radius: 2px;
}

.p3-searching .search-results {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
}

.p3-searching .search-result {
display: grid;
grid-template-columns: 38px 1fr;
gap: 9px;
align-items: center;
padding: 7px 0;
border-top: 1px solid #e8f2f0;
}

.p3-searching .search-result > i {
display: grid;
width: 34px;
height: 30px;
place-items: center;
border-radius: 3px;
background: #dff1eb;
color: var(--p2-green);
font: 700 .48rem Arial, sans-serif;
font-style: normal;
}

.p3-searching .search-result > div {
display: grid;
gap: 2px;
min-width: 0;
}

.p3-searching .search-result strong {
overflow: hidden;
color: var(--p2-navy);
font: 700 .68rem Arial, sans-serif;
text-overflow: ellipsis;
white-space: nowrap;
}

.p3-searching .search-result span {
color: #4a6278;
font: .58rem Arial, sans-serif;
}

.p3-searching .search-result span b {
color: #16734d;
}

.p3-searching .search-interface-footer {
display: flex;
justify-content: space-between;
gap: 10px;
padding-top: 7px;
border-top: 1px solid #c5deda;
color: #1e6d99;
font: 700 .58rem Arial, sans-serif;
}

@media (max-width: 900px) {
body.p3-feature.p3-searching .p3-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 35px;
padding-bottom: 35px;
}

body.p3-feature.p3-searching .p2-section {
padding-top: 40px;
padding-bottom: 40px;
}

body.p3-feature.p3-searching .search-visual {
width: min(100%, 600px);
}
}

@media (max-width: 560px) {
body.p3-feature.p3-searching .p3-hero-grid {
gap: 24px;
padding-top: 28px;
padding-bottom: 28px;
}

body.p3-feature.p3-searching .p2-section {
padding-top: 34px;
padding-bottom: 34px;
}

body.p3-feature.p3-searching .search-visual {
min-height: 0;
padding: 20px;
}

.p3-searching .search-interface-body {
grid-template-columns: 1fr;
gap: 12px;
}

.p3-searching .search-filters {
grid-template-columns: repeat(3, 1fr);
padding: 0 0 10px;
border-right: 0;
border-bottom: 1px solid #e0eeeb;
}

.p3-searching .search-filters > strong {
grid-column: 1 / -1;
}

.p3-searching .search-interface-footer {
flex-direction: column;
gap: 5px;
}
}

/* =========================================================
KOHA CIRCULATION PAGE (p3-circulation) - SCOPED STYLES
========================================================= */

body.p3-feature.p3-circulation .p2-section {
padding-top: 48px;
padding-bottom: 48px;
}

body.p3-feature.p3-circulation .p3-hero-grid {
grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
gap: clamp(36px, 5vw, 72px);
min-height: 0;
padding-top: 30px;
padding-bottom: 30px;
}

body.p3-feature.p3-circulation .circulation-visual {
display: grid;
gap: 12px;
align-content: start;
min-height: 360px;
padding: 24px;
font-family: Arial, sans-serif;
font-size: .8rem;
}

.p3-circulation .circulation-interface-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.p3-circulation .circulation-interface-top > span,
.p3-circulation .circulation-loans-label {
color: var(--p2-green);
font: 700 .66rem Arial, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
}

.p3-circulation .circulation-interface-top b,
.p3-circulation .circulation-item > b {
padding: 4px 6px;
border-radius: 3px;
background: #dff3e8;
color: #16734d;
font: 700 .6rem Arial, sans-serif;
white-space: nowrap;
}

.p3-circulation .circulation-patron {
display: grid;
gap: 3px;
padding: 12px 14px;
border: 1px solid #c5deda;
border-left: 3px solid var(--p2-green);
background: #fff;
}

.p3-circulation .circulation-patron strong {
color: var(--p2-navy);
font: 700 .82rem Arial, sans-serif;
}

.p3-circulation .circulation-patron span,
.p3-circulation .circulation-scan span,
.p3-circulation .circulation-item span {
color: #4a6278;
font: .68rem Arial, sans-serif;
}

.p3-circulation .circulation-scan {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 11px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-circulation .circulation-scan b {
color: var(--p2-blue);
font: 700 .7rem Arial, sans-serif;
}

.p3-circulation .circulation-actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 7px;
}

.p3-circulation .circulation-action {
padding: 8px 6px;
border: 1px solid var(--p2-green);
border-radius: 3px;
background: var(--p2-green);
color: #fff;
font: 700 .62rem Arial, sans-serif;
}

.p3-circulation .circulation-action-secondary {
background: #fff;
color: var(--p2-green);
}

.p3-circulation .circulation-loans {
display: grid;
gap: 8px;
padding-top: 10px;
border-top: 1px solid #c5deda;
}

.p3-circulation .circulation-item {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 8px;
align-items: center;
padding: 7px 0;
border-top: 1px solid #e8f2f0;
}

.p3-circulation .circulation-item > i {
display: grid;
width: 30px;
height: 28px;
place-items: center;
border-radius: 3px;
background: #dff1eb;
color: var(--p2-green);
font: 700 .46rem Arial, sans-serif;
font-style: normal;
}

.p3-circulation .circulation-item > div {
display: grid;
gap: 2px;
min-width: 0;
}

.p3-circulation .circulation-item strong {
overflow: hidden;
color: var(--p2-navy);
font: 700 .66rem Arial, sans-serif;
text-overflow: ellipsis;
white-space: nowrap;
}

.p3-circulation .circulation-item > b.circulation-status-available {
background: #e4eef7;
color: var(--p2-blue);
}

body.p3-feature.p3-circulation .circulation-workflow {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
body.p3-feature.p3-circulation .p3-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 35px;
padding-bottom: 35px;
}

body.p3-feature.p3-circulation .p2-section {
padding-top: 40px;
padding-bottom: 40px;
}

body.p3-feature.p3-circulation .circulation-visual {
width: min(100%, 600px);
}

body.p3-feature.p3-circulation .circulation-workflow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
body.p3-feature.p3-circulation .p3-hero-grid {
gap: 24px;
padding-top: 28px;
padding-bottom: 28px;
}

body.p3-feature.p3-circulation .p2-section {
padding-top: 34px;
padding-bottom: 34px;
}

body.p3-feature.p3-circulation .circulation-visual {
min-height: 0;
padding: 20px;
}

body.p3-feature.p3-circulation .circulation-workflow {
grid-template-columns: 1fr;
}

.p3-circulation .circulation-item {
grid-template-columns: 30px 1fr;
}

.p3-circulation .circulation-item > b {
grid-column: 2;
justify-self: start;
}
}

/* =========================================================
KOHA ACQUISITIONS & SERIALS PAGE (p3-acquisitions) - SCOPED STYLES
========================================================= */

body.p3-feature.p3-acquisitions .p2-section {
padding-top: 48px;
padding-bottom: 48px;
}

body.p3-feature.p3-acquisitions .p3-hero-grid {
grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
gap: clamp(36px, 5vw, 72px);
min-height: 0;
padding-top: 30px;
padding-bottom: 30px;
}

body.p3-feature.p3-acquisitions .acquisitions-visual {
display: grid;
gap: 12px;
align-content: start;
min-height: 360px;
padding: 24px;
font-family: Arial, sans-serif;
font-size: .8rem;
}

.p3-acquisitions .acquisitions-interface-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.p3-acquisitions .acquisitions-interface-top > span,
.p3-acquisitions .acquisitions-order-heading span {
color: var(--p2-green);
font: 700 .66rem Arial, sans-serif;
letter-spacing: .11em;
text-transform: uppercase;
}

.p3-acquisitions .acquisitions-interface-top b,
.p3-acquisitions .acquisitions-order-line > b {
padding: 4px 6px;
border-radius: 3px;
background: #dff3e8;
color: #16734d;
font: 700 .6rem Arial, sans-serif;
white-space: nowrap;
}

.p3-acquisitions .acquisitions-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 7px;
align-items: center;
padding: 9px 10px;
border: 1px solid #c5deda;
background: #fff;
color: var(--p2-blue);
font: 700 .58rem Arial, sans-serif;
text-align: center;
}

.p3-acquisitions .acquisitions-flow b {
color: var(--p2-green);
font-size: .85rem;
}

.p3-acquisitions .acquisitions-order {
display: grid;
gap: 8px;
padding: 13px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-acquisitions .acquisitions-order-heading {
display: flex;
justify-content: space-between;
gap: 10px;
padding-bottom: 6px;
border-bottom: 1px solid #e8f2f0;
}

.p3-acquisitions .acquisitions-order-heading strong {
color: var(--p2-navy);
font: 700 .76rem Arial, sans-serif;
}

.p3-acquisitions .acquisitions-order-heading span {
font-size: .56rem;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}

.p3-acquisitions .acquisitions-order-line {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 8px;
align-items: center;
padding: 7px 0;
border-top: 1px solid #e8f2f0;
}

.p3-acquisitions .acquisitions-order-line > i {
display: grid;
width: 30px;
height: 27px;
place-items: center;
border-radius: 3px;
background: #dff1eb;
color: var(--p2-green);
font: 700 .46rem Arial, sans-serif;
font-style: normal;
}

.p3-acquisitions .acquisitions-order-line > div {
display: grid;
gap: 2px;
min-width: 0;
}

.p3-acquisitions .acquisitions-order-line strong {
overflow: hidden;
color: var(--p2-navy);
font: 700 .65rem Arial, sans-serif;
text-overflow: ellipsis;
white-space: nowrap;
}

.p3-acquisitions .acquisitions-order-line span {
color: #4a6278;
font: .58rem Arial, sans-serif;
}

.p3-acquisitions .acquisitions-order-line > b.acquisitions-received {
background: #e4eef7;
color: var(--p2-blue);
}

.p3-acquisitions .acquisitions-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding-top: 9px;
border-top: 1px solid #c5deda;
color: #4a6278;
font: .62rem Arial, sans-serif;
}

.p3-acquisitions .acquisitions-footer button {
padding: 7px 11px;
border: 0;
border-radius: 3px;
background: var(--p2-green);
color: #fff;
font: 700 .62rem Arial, sans-serif;
}

body.p3-feature.p3-acquisitions .p3-flow,
body.p3-feature.p3-acquisitions .serials-workflow {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
body.p3-feature.p3-acquisitions .p3-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 35px;
padding-bottom: 35px;
}

body.p3-feature.p3-acquisitions .p2-section {
padding-top: 40px;
padding-bottom: 40px;
}

body.p3-feature.p3-acquisitions .acquisitions-visual {
width: min(100%, 600px);
}

body.p3-feature.p3-acquisitions .p3-flow,
body.p3-feature.p3-acquisitions .serials-workflow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
body.p3-feature.p3-acquisitions .p3-hero-grid {
gap: 24px;
padding-top: 28px;
padding-bottom: 28px;
}

body.p3-feature.p3-acquisitions .p2-section {
padding-top: 34px;
padding-bottom: 34px;
}

body.p3-feature.p3-acquisitions .acquisitions-visual {
min-height: 0;
padding: 20px;
}

body.p3-feature.p3-acquisitions .p3-flow,
body.p3-feature.p3-acquisitions .serials-workflow {
grid-template-columns: 1fr;
}

.p3-acquisitions .acquisitions-flow {
grid-template-columns: 1fr;
gap: 4px;
}

.p3-acquisitions .acquisitions-flow b {
transform: rotate(90deg);
}

.p3-acquisitions .acquisitions-order-line {
grid-template-columns: 30px 1fr;
}

.p3-acquisitions .acquisitions-order-line > b {
grid-column: 2;
justify-self: start;
}
}

/* =========================================================
KOHA REPORTING & ANALYTICS PAGE (p3-reporting) - SCOPED STYLES
========================================================= */

body.p3-feature.p3-reporting .p2-section {
padding-top: 48px;
padding-bottom: 48px;
}

body.p3-feature.p3-reporting .p3-hero-grid {
grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
gap: clamp(36px, 5vw, 72px);
min-height: 0;
padding-top: 30px;
padding-bottom: 30px;
}

body.p3-feature.p3-reporting .reporting-visual {
display: grid;
gap: 12px;
align-content: start;
min-height: 390px;
padding: 24px;
font-family: Arial, sans-serif;
font-size: .8rem;
}

.p3-reporting .reporting-interface-top,
.p3-reporting .reporting-toolbar,
.p3-reporting .reporting-table > div {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.p3-reporting .reporting-interface-top > span,
.p3-reporting .reporting-chart > span,
.p3-reporting .reporting-table > span,
.p3-reporting .reporting-filters > strong {
color: var(--p2-blue);
font: 700 .64rem Arial, sans-serif;
letter-spacing: .11em;
text-transform: uppercase;
}

.p3-reporting .reporting-interface-top b {
padding: 4px 6px;
border-radius: 3px;
background: #dff3e8;
color: #16734d;
font: 700 .58rem Arial, sans-serif;
}

.p3-reporting .reporting-toolbar {
padding: 8px 9px;
border: 1px solid #c5deda;
background: #fff;
color: #4a6278;
font: .66rem Arial, sans-serif;
}

.p3-reporting .reporting-toolbar span:nth-child(2) {
padding-left: 8px;
border-left: 1px solid #d7e8e4;
color: var(--p2-blue);
}

.p3-reporting .reporting-toolbar button {
padding: 6px 9px;
border: 0;
border-radius: 3px;
background: var(--p2-green);
color: #fff;
font: 700 .6rem Arial, sans-serif;
}

.p3-reporting .reporting-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}

.p3-reporting .reporting-summary div {
display: grid;
gap: 2px;
padding: 9px 10px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-reporting .reporting-summary strong {
color: var(--p2-navy);
font: 700 1.05rem Georgia, serif;
}

.p3-reporting .reporting-summary span {
color: #4a6278;
font: .58rem Arial, sans-serif;
}

.p3-reporting .reporting-analysis {
display: grid;
grid-template-columns: 1.35fr .9fr;
gap: 12px;
padding: 13px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-reporting .reporting-chart {
display: grid;
gap: 8px;
}

.p3-reporting .reporting-bars {
display: flex;
align-items: end;
gap: 8px;
height: 105px;
padding: 8px 10px 0;
border-bottom: 2px solid #8eb9c8;
}

.p3-reporting .reporting-bars i {
display: block;
width: 16%;
background: var(--p2-green);
}

.p3-reporting .reporting-bars i:nth-child(1) { height: 42%; }
.p3-reporting .reporting-bars i:nth-child(2) { height: 58%; background: var(--p2-blue); }
.p3-reporting .reporting-bars i:nth-child(3) { height: 51%; }
.p3-reporting .reporting-bars i:nth-child(4) { height: 74%; background: var(--p2-blue); }
.p3-reporting .reporting-bars i:nth-child(5) { height: 68%; }
.p3-reporting .reporting-bars i:nth-child(6) { height: 88%; background: var(--p2-blue); }

.p3-reporting .reporting-filters {
display: grid;
align-content: start;
gap: 8px;
padding-left: 12px;
border-left: 1px solid #e0eeeb;
}

.p3-reporting .reporting-filters span {
padding: 6px 7px;
background: #f1f8f6;
color: #4a6278;
font: .62rem Arial, sans-serif;
}

.p3-reporting .reporting-table {
display: grid;
gap: 5px;
padding: 12px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-reporting .reporting-table > div {
padding: 5px 0;
border-top: 1px solid #e8f2f0;
color: #4a6278;
font: .6rem Arial, sans-serif;
}

.p3-reporting .reporting-table > div b {
color: var(--p2-navy);
font-weight: 700;
}

.p3-reporting .reporting-table em {
color: #16734d;
font-style: normal;
font-weight: 700;
}

@media (max-width: 900px) {
body.p3-feature.p3-reporting .p3-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 35px;
padding-bottom: 35px;
}

body.p3-feature.p3-reporting .p2-section {
padding-top: 40px;
padding-bottom: 40px;
}

body.p3-feature.p3-reporting .reporting-visual {
width: min(100%, 600px);
}
}

@media (max-width: 560px) {
body.p3-feature.p3-reporting .p3-hero-grid {
gap: 24px;
padding-top: 28px;
padding-bottom: 28px;
}

body.p3-feature.p3-reporting .p2-section {
padding-top: 34px;
padding-bottom: 34px;
}

body.p3-feature.p3-reporting .reporting-visual {
min-height: 0;
padding: 20px;
}

.p3-reporting .reporting-toolbar,
.p3-reporting .reporting-interface-top {
align-items: flex-start;
flex-direction: column;
}

.p3-reporting .reporting-toolbar button {
width: 100%;
}

.p3-reporting .reporting-analysis {
grid-template-columns: 1fr;
}

.p3-reporting .reporting-filters {
grid-template-columns: repeat(3, 1fr);
padding: 10px 0 0;
border-top: 1px solid #e0eeeb;
border-left: 0;
}

.p3-reporting .reporting-filters > strong {
grid-column: 1 / -1;
}

}


/* =========================================================
KOHA TOOLS PAGE (p3-tools) - SCOPED STYLES
========================================================= */

body.p3-feature.p3-tools .p2-section {
padding-top: 48px;
padding-bottom: 48px;
}

body.p3-feature.p3-tools .p3-hero-grid {
grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr);
gap: clamp(36px, 5vw, 72px);
min-height: 0;
padding-top: 30px;
padding-bottom: 30px;
}

body.p3-feature.p3-tools .tools-visual {
display: grid;
gap: 12px;
align-content: start;
min-height: 380px;
padding: 24px;
font-family: Arial, sans-serif;
font-size: .8rem;
}

.p3-tools .tools-interface-top,
.p3-tools .tools-interface-footer,
.p3-tools .tools-task-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

.p3-tools .tools-interface-top > span,
.p3-tools .tools-task-label,
.p3-tools .tools-menu > strong {
color: var(--p2-green);
font: 700 .64rem Arial, sans-serif;
letter-spacing: .11em;
text-transform: uppercase;
}

.p3-tools .tools-interface-top b {
padding: 4px 6px;
border-radius: 3px;
background: #e4eef7;
color: var(--p2-blue);
font: 700 .58rem Arial, sans-serif;
}

.p3-tools .tools-workspace {
display: grid;
grid-template-columns: 150px 1fr;
gap: 12px;
min-height: 230px;
padding: 12px;
border: 1px solid #c5deda;
background: #fff;
}

.p3-tools .tools-menu {
display: grid;
align-content: start;
gap: 5px;
padding-right: 10px;
border-right: 1px solid #e0eeeb;
}

.p3-tools .tools-menu > span {
padding: 6px 7px;
color: #4a6278;
font: .62rem Arial, sans-serif;
}

.p3-tools .tools-menu .tools-menu-selected {
border-left: 3px solid var(--p2-green);
background: #f1f8f6;
color: var(--p2-navy);
font-weight: 700;
}

.p3-tools .tools-task {
display: grid;
align-content: start;
gap: 9px;
min-width: 0;
}

.p3-tools .tools-task > strong {
color: var(--p2-navy);
font: 700 .82rem Arial, sans-serif;
}

.p3-tools .tools-task-field {
display: flex;
justify-content: space-between;
gap: 8px;
padding: 8px 9px;
border: 1px solid #d7e8e4;
background: #f8fbfa;
font: .62rem Arial, sans-serif;
}

.p3-tools .tools-task-field span {
color: #4a6278;
}

.p3-tools .tools-task-field b {
color: var(--p2-blue);
font-weight: 700;
text-align: right;
}

.p3-tools .tools-task-actions {
margin-top: auto;
padding-top: 8px;
border-top: 1px solid #e0eeeb;
}

.p3-tools .tools-task-actions button {
padding: 7px 10px;
border: 0;
border-radius: 3px;
background: var(--p2-green);
color: #fff;
font: 700 .62rem Arial, sans-serif;
}

.p3-tools .tools-task-actions span,
.p3-tools .tools-interface-footer {
color: #4a6278;
font: .6rem Arial, sans-serif;
}

.p3-tools .tools-interface-footer {
padding-top: 8px;
border-top: 1px solid #c5deda;
}

body.p3-feature.p3-tools .tools-workflow {
grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 900px) {
body.p3-feature.p3-tools .p3-hero-grid {
grid-template-columns: 1fr;
gap: 32px;
padding-top: 35px;
padding-bottom: 35px;
}

body.p3-feature.p3-tools .p2-section {
padding-top: 40px;
padding-bottom: 40px;
}

body.p3-feature.p3-tools .tools-visual {
width: min(100%, 600px);
}

body.p3-feature.p3-tools .tools-workflow {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px) {
body.p3-feature.p3-tools .p3-hero-grid {
gap: 24px;
padding-top: 28px;
padding-bottom: 28px;
}

body.p3-feature.p3-tools .p2-section {
padding-top: 34px;
padding-bottom: 34px;
}

body.p3-feature.p3-tools .tools-visual {
min-height: 0;
padding: 20px;
}

.p3-tools .tools-workspace {
grid-template-columns: 1fr;
}

.p3-tools .tools-menu {
grid-template-columns: repeat(2, 1fr);
padding: 0 0 10px;
border-right: 0;
border-bottom: 1px solid #e0eeeb;
}

.p3-tools .tools-menu > strong {
grid-column: 1 / -1;
}

.p3-tools .tools-task-actions,
.p3-tools .tools-interface-footer {
align-items: flex-start;
flex-direction: column;
}

body.p3-feature.p3-tools .tools-workflow {
grid-template-columns: 1fr;
}

.p3-tools .tools-task-actions button {
width: 100%;
}
}
.p3-reporting .reporting-summary {
grid-template-columns: repeat(2, 1fr);
}

/* =========================================================
KOHA INTEGRATIONS PAGE (p3-integrations) - SCOPED STYLES
========================================================= */

body.p3-feature.p3-integrations .p2-section { padding-top: 48px; padding-bottom: 48px; }
body.p3-feature.p3-integrations .p3-hero-grid { grid-template-columns: minmax(0, .85fr) minmax(380px, 1fr); gap: clamp(36px, 5vw, 72px); min-height: 0; padding-top: 30px; padding-bottom: 30px; }
body.p3-feature.p3-integrations .integrations-visual { display: grid; gap: 12px; align-content: start; min-height: 370px; padding: 24px; font-family: Arial, sans-serif; font-size: .8rem; }
.p3-integrations .integrations-layer, .p3-integrations .integrations-footer, .p3-integrations .integrations-connector { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p3-integrations .integrations-layer { padding: 10px 12px; border: 1px solid #c5deda; background: #fff; }
.p3-integrations .integrations-layer strong, .p3-integrations .integrations-layer span { color: var(--p2-navy); font: 700 .68rem Arial, sans-serif; }
.p3-integrations .integrations-layer span { color: #4a6278; font-size: .6rem; font-weight: 400; }
.p3-integrations .integrations-layer-core { border-left: 3px solid var(--p2-green); background: #f1f8f6; }
.p3-integrations .integrations-connector { justify-content: center; gap: 7px; color: var(--p2-blue); font: 700 .56rem Arial, sans-serif; text-transform: uppercase; }
.p3-integrations .integrations-connector span { padding: 4px 6px; border-radius: 3px; background: #e4eef7; }
.p3-integrations .integrations-endpoints { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.p3-integrations .integrations-endpoints div { display: grid; gap: 3px; padding: 8px; border: 1px solid #c5deda; background: #fff; }
.p3-integrations .integrations-endpoints b { color: var(--p2-blue); font: 700 .58rem Arial, sans-serif; }
.p3-integrations .integrations-endpoints span { color: #4a6278; font: .54rem Arial, sans-serif; }
.p3-integrations .integrations-footer { padding-top: 8px; border-top: 1px solid #c5deda; color: #4a6278; font: .6rem Arial, sans-serif; }
.p3-integrations .integrations-footer b { color: var(--p2-green); font-size: .58rem; }
.p3-integrations .integration-boundary { display: grid; justify-items: center; gap: 8px; max-width: 820px; margin: 0 auto; }
.p3-integrations .integration-layer { width: min(100%, 500px); justify-content: center; flex-direction: column; text-align: center; }
.p3-integrations .integration-layer-core { padding: 16px; border: 2px solid var(--p2-green); background: #fff; }
.p3-integrations .integration-arrow { color: var(--p2-green); font: 700 1.1rem Arial, sans-serif; }
.p3-integrations .integration-boundary-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; width: 100%; padding: 13px; border: 2px solid var(--p2-blue); background: #eaf3f7; text-align: center; }
.p3-integrations .integration-boundary-row strong { width: 100%; color: var(--p2-navy); font: 700 .68rem Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.p3-integrations .integration-boundary-row span, .p3-integrations .integration-external-grid span { padding: 7px 9px; border: 1px solid #b9d3de; background: #fff; color: var(--p2-blue); font: 700 .6rem Arial, sans-serif; }
.p3-integrations .integration-external-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.p3-integrations .integration-external-grid span { border-color: #c5deda; color: #4a6278; text-align: center; }
.p3-integrations .integration-standards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p3-integrations .integration-standards div { display: grid; gap: 5px; min-height: 90px; padding: 16px; border-left: 3px solid var(--p2-green); background: #f1f8f6; }
.p3-integrations .integration-standards strong { color: var(--p2-navy); font: 700 .76rem Arial, sans-serif; }
.p3-integrations .integration-standards span { color: #4a6278; font: .7rem/1.5 Arial, sans-serif; }
body.p3-feature.p3-integrations .integration-workflow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) {
body.p3-feature.p3-integrations .p3-hero-grid { grid-template-columns: 1fr; gap: 32px; padding-top: 35px; padding-bottom: 35px; }
body.p3-feature.p3-integrations .p2-section { padding-top: 40px; padding-bottom: 40px; }
body.p3-feature.p3-integrations .integrations-visual { width: min(100%, 600px); }
body.p3-feature.p3-integrations .integration-workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
body.p3-feature.p3-integrations .p3-hero-grid { gap: 24px; padding-top: 28px; padding-bottom: 28px; }
body.p3-feature.p3-integrations .p2-section { padding-top: 34px; padding-bottom: 34px; }
body.p3-feature.p3-integrations .integrations-visual { min-height: 0; padding: 20px; }
.p3-integrations .integrations-endpoints, .p3-integrations .integration-external-grid, .p3-integrations .integration-standards { grid-template-columns: 1fr; }
.p3-integrations .integrations-connector { flex-wrap: wrap; }
body.p3-feature.p3-integrations .integration-workflow { grid-template-columns: 1fr; }
}

/* =========================================================
ABOUT ME PAGE (p3-about) - SCOPED STYLES
========================================================= */

body.p3-about .p2-section { padding-top: 48px; padding-bottom: 48px; }
body.p3-about .p2-about-hero { padding-top: 30px; padding-bottom: 30px; }
body.p3-about .p2-hero-role { color: var(--p2-navy); font-weight: 700; }
body.p3-about .p2-copy { color: #294765; font-size: 1rem; line-height: 1.7; }
body.p3-about .p2-portrait-frame { max-width: 260px; margin-left: auto; }
body.p3-about .p2-portrait-frame img { display: block; width: 100%; height: auto; object-fit: contain; }
.p3-about .about-skills { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.p3-about .about-skills span { padding: 13px 14px; border-left: 3px solid var(--p2-green); background: #f1f8f6; color: var(--p2-navy); font: 700 .78rem Arial, sans-serif; }
.p3-about .about-approach { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0; list-style: none; }
.p3-about .about-approach li { display: grid; gap: 7px; min-height: 150px; padding: 18px; border-top: 3px solid var(--p2-green); background: #fff; box-shadow: 0 7px 18px rgba(18,54,83,.05); }
.p3-about .about-approach b { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; }
.p3-about .about-approach strong { color: var(--p2-navy); font-size: .94rem; line-height: 1.2; }
.p3-about .about-approach span { color: #294765; font: .75rem/1.5 Arial, sans-serif; }
.p3-about .p2-card-grid .p2-card { min-height: 170px; }
.p3-about .p2-card-grid .p2-card .p2-text-link { display: inline-block; margin-top: 12px; }
.p3-about .p2-timeline::before { background: var(--p2-line); }
.p3-about .p2-timeline h3 { color: var(--p2-navy); }
.p3-about .p2-timeline p { color: #294765; }
.p3-about .p2-timeline h3 { font-size: 1rem; line-height: 1.25; }
@media (max-width: 900px) {
body.p3-about .p2-portrait-frame { margin: 0 auto; }
.p3-about .about-skills { grid-template-columns: repeat(2, 1fr); }
.p3-about .about-approach { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
body.p3-about .p2-section { padding-top: 34px; padding-bottom: 34px; }
body.p3-about .p2-about-hero { padding-top: 28px; padding-bottom: 28px; }
body.p3-about .p2-portrait-frame { max-width: 220px; }
.p3-about .about-skills, .p3-about .about-approach { grid-template-columns: 1fr; }
.p3-about .about-approach li { min-height: 0; }
}

/* =========================================================
CANONICAL SERVICES PAGE (p3-services) - SCOPED STYLES
========================================================= */

body.p3-services .p2-section { padding-top: 48px; padding-bottom: 48px; }
body.p3-services .p4-service-hero { padding-top: 30px; padding-bottom: 30px; }
body.p3-services .p2-copy { color: #294765; font-size: 1rem; line-height: 1.7; }
body.p3-services .services-workspace { display: grid; gap: 12px; min-height: 330px; padding: 24px; }
.p3-services .services-workspace-top, .p3-services .services-workspace-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.p3-services .services-workspace-top span { color: var(--p2-green); font: 700 .66rem Arial, sans-serif; letter-spacing: .12em; }
.p3-services .services-workspace-top b { padding: 4px 6px; border-radius: 3px; background: #e4eef7; color: var(--p2-blue); font: 700 .58rem Arial, sans-serif; }
.p3-services .services-workflow-panel { display: grid; gap: 5px; align-content: start; padding: 12px; border: 1px solid #c5deda; background: #fff; }
.p3-services .services-workflow-panel div { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-left: 3px solid var(--p2-green); background: #f1f8f6; }
.p3-services .services-workflow-panel div:nth-of-type(2n) { border-left-color: var(--p2-blue); }
.p3-services .services-workflow-panel b { color: var(--p2-green); font: 700 .6rem Arial, sans-serif; }
.p3-services .services-workflow-panel span { color: var(--p2-navy); font: 700 .66rem Arial, sans-serif; }
.p3-services .services-workflow-panel i { color: var(--p2-green); font: 700 .8rem Arial, sans-serif; font-style: normal; text-align: center; }
.p3-services .services-workspace-footer { padding-top: 8px; border-top: 1px solid #c5deda; color: #4a6278; font: .6rem Arial, sans-serif; }
.p3-services .services-workspace-footer strong { color: var(--p2-navy); font-size: .68rem; }
.p3-services .services-profile-role { display: block; margin-top: 12px; color: var(--p2-blue); font: 700 .84rem Arial, sans-serif; }
.p3-services .p4-service-card { min-height: 260px; }
.p3-services .p2-card-grid { grid-auto-rows: 1fr; }
.p3-services .p4-service-card { height: 100%; }
.p3-services .p4-service-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.p3-services .p4-approach { gap: 12px; }
@media (max-width: 950px) {
body.p3-services .p4-hero-grid { grid-template-columns: 1fr; min-height: 0; }
body.p3-services .services-workspace { width: min(100%, 520px); }
body.p3-services .p4-service-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
body.p3-services .p2-section { padding-top: 40px; padding-bottom: 40px; }
body.p3-services .p4-service-flow { grid-template-columns: 1fr; }
body.p3-services .p4-service-card { min-height: 0; }
body.p3-services .p2-card-grid { grid-auto-rows: auto; }
body.p3-services .p4-service-card { height: auto; }
body.p3-services .services-workspace { min-height: 0; padding: 20px; }
body.p3-services .services-workspace-top, body.p3-services .services-workspace-footer { align-items: flex-start; flex-direction: column; }
body.p3-services .p2-button { width: 100%; }
}

/* =========================================================
CONTACT PAGE (p3-contact) - SCOPED STYLES
========================================================= */

body.p3-contact .p2-section { padding-top: 48px; padding-bottom: 48px; }
body.p3-contact .p5-contact-hero { padding-top: 30px; padding-bottom: 30px; }
body.p3-contact .p2-copy, body.p3-contact .p5-contact-options p, body.p3-contact .p5-contact-cta p:not(.p2-eyebrow) { color: #294765; font-size: 1rem; line-height: 1.7; }
@media (max-width: 900px) { body.p3-contact .p2-section { padding-top: 40px; padding-bottom: 40px; } }
@media (max-width: 560px) { body.p3-contact .p2-section { padding-top: 34px; padding-bottom: 34px; } body.p3-contact .p5-contact-hero { padding-top: 28px; padding-bottom: 28px; } }

body.p3-contact .contact-primary-grid { grid-auto-rows: 1fr; }
.p3-contact .contact-card { display: flex; min-height: 260px; flex-direction: column; align-items: flex-start; }
.p3-contact .contact-card-number { color: var(--p2-green); font: 700 .7rem Arial, sans-serif; letter-spacing: .1em; }
.p3-contact .contact-card h3 { margin-top: 14px; }
.p3-contact .contact-card strong { display: block; margin-bottom: 10px; color: var(--p2-blue); font: 700 .9rem Arial, sans-serif; overflow-wrap: anywhere; }
.p3-contact .contact-card p { flex: 1; color: #294765; font: .9rem/1.6 Arial, sans-serif; }
.p3-contact .contact-card .p2-button { margin-top: 16px; padding: 10px 13px; font-size: .66rem; }
.p3-contact .contact-form { display: grid; gap: 13px; padding: 24px; border: 1px solid var(--p2-line); background: #f7faf9; }
.p3-contact .contact-form-field { display: grid; gap: 6px; }
.p3-contact .contact-form label { color: var(--p2-navy); font: 700 .76rem Arial, sans-serif; }
.p3-contact .contact-form input, .p3-contact .contact-form textarea { width: 100%; padding: 10px 11px; border: 1px solid #bfd4d1; border-radius: 3px; background: #fff; color: #294765; font: .88rem Arial, sans-serif; }
.p3-contact .contact-form textarea { resize: vertical; }
.p3-contact .contact-form input:focus, .p3-contact .contact-form textarea:focus { outline: 2px solid var(--p2-blue); outline-offset: 2px; border-color: var(--p2-blue); }
.p3-contact .contact-form > .p2-button { justify-self: start; border: 0; cursor: pointer; }
.p3-contact .contact-form-note { color: #4a6278; font: .72rem/1.5 Arial, sans-serif; }
.p3-contact .contact-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.p3-contact .contact-topics label { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--p2-line); background: #fff; color: #294765; font: .8rem Arial, sans-serif; }
.p3-contact .contact-topics input { accent-color: var(--p2-green); }
.p3-contact .contact-profile-link { color: var(--p2-navy); }
.p3-contact .contact-profile-role { display: block; margin-top: 12px; color: var(--p2-blue); font: 700 .84rem Arial, sans-serif; }
.p3-contact .contact-inline-link { margin-left: 18px; }
.p3-contact .contact-cta-email { margin-left: 10px; }
@media (max-width: 900px) { .p3-contact .contact-topics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .p3-contact .contact-primary-grid { grid-auto-rows: auto; } .p3-contact .contact-card { min-height: 0; } .p3-contact .contact-form { padding: 20px; } .p3-contact .contact-topics { grid-template-columns: 1fr; } .p3-contact .contact-inline-link, .p3-contact .contact-cta-email { display: block; margin: 12px 0 0; } .p3-contact .contact-form > .p2-button { width: 100%; } }

/* Keep the added demo entry from crowding intermediate desktop widths. */
@media (min-width: 951px) and (max-width: 1399px) {
 .p2-header-inner { flex-wrap: wrap; }
 .p2-header .main-nav { flex-wrap: wrap; justify-content: flex-start; }
}
@media (max-width: 950px) {
 .p2-header .main-nav { max-height: calc(100dvh - 90px); overflow-y: auto; }
}
.contact-form button:disabled { opacity: .65; cursor: not-allowed; }

/* Final shared navigation: one consistent breakpoint and explicit state. */
.p2-site .site-header .nav-dropdown:not(.open) > .dropdown-menu { display:none; }
.p2-site .site-header .nav-dropdown.open > .dropdown-menu { display:block; opacity:1; visibility:visible; transform:none; }
.p2-site .site-header .brand { min-width:0; }
.p2-site .site-header .brand-text { min-width:0; }
.p2-site .site-header .brand-tagline { white-space:normal; }
@media (min-width:951px) {
 .p2-site .site-header .menu-toggle { display:none; }
 .p2-site .site-header .header-container { flex-wrap:wrap; }
 .p2-site .site-header .main-nav { display:flex; position:static; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:flex-start; max-height:none; overflow:visible; padding:0; border:0; box-shadow:none; }
}
@media (max-width:950px) {
 .p2-site .site-header .header-container { flex-wrap:nowrap; min-height:76px; padding:10px 16px; gap:10px; }
 .p2-site .site-header .menu-toggle { display:block; flex:0 0 44px; width:44px; height:44px; margin-left:auto; }
 .p2-site .site-header .main-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; padding:12px 16px; margin:0; max-height:calc(100dvh - 100px); overflow-y:auto; background:#fff; border-top:1px solid #c9dce0; }
 .p2-site .site-header .main-nav.open { display:flex; }
 .p2-site .site-header .nav-dropdown { width:100%; }
 .p2-site .site-header .nav-link, .p2-site .site-header .dropdown-button { width:100%; min-height:44px; padding:12px 8px; justify-content:space-between; text-align:left; }
 .p2-site .site-header .dropdown-menu { position:static; width:100%; min-width:0; padding:0; margin:0; border:0; box-shadow:none; }
 .p2-site .site-header .dropdown-menu a { min-height:44px; padding:12px 16px; }
 .p2-site .site-header .contact-button { margin:8px 0 0; justify-content:center; }
}
@media (max-width:450px) {
 .p2-site .site-header .brand-logo { width:38px; height:38px; }
 .p2-site .site-header .brand-name { font-size:1rem; }
 .p2-site .site-header .brand-tagline { font-size:.62rem; }
}
#enquiry-result[hidden] { display:none; }
#enquiry-result { display:grid; gap:12px; }
#enquiry-result a { justify-self:start; }
.contact-form button:disabled { cursor:not-allowed; opacity:.65; }

/* Remove legacy generated subtitle before showing the full real subtitle. */
.p2-site .site-header .brand-tagline { display:block; }
.p2-site .site-header .brand-tagline::before { content:none; display:none; }
.p2-home-hero h1 { font-size:clamp(2.25rem, 5vw, 4.4rem); line-height:1.06; }

.draft-actions { display:flex;flex-wrap:wrap;gap:10px; }
.draft-actions .p2-button { min-height:44px; }
#copy-status { margin:0;color:#294765;font: .85rem/1.6 Arial,sans-serif; }
@media(max-width:560px){.draft-actions{flex-direction:column}.draft-actions .p2-button{width:100%;}}

.p2-site.p3-contact a.p2-button-primary {color:#fff;background:#236c52;}
.p2-site.p3-contact a.p2-button-primary:hover {color:#fff;background:#1b573f;}

/* Readable footer links on the dark consultancy footer. */
.p2-footer a, .site-footer a {color:#fff;text-decoration:underline;text-underline-offset:3px;}
.p2-footer a:focus-visible, .site-footer a:focus-visible {outline:3px solid #fff;outline-offset:3px;}
.guide-cards h2 {font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.25;}