:root {
    --pt-color-navy: #1f2937;
    --pt-color-navy-deep: #102238;
    --pt-color-blue: #1d5eff;
    --pt-color-blue-dark: #1b4f8a;
    --pt-color-green: #8bd400;
    --pt-color-text: #111827;
    --pt-color-muted: #4b5563;
    --pt-color-line: #e5e7eb;
    --pt-color-soft: #f9fafb;
    --pt-radius-panel: 0.5rem;
    --pt-radius-control: 0.375rem;
    --pt-shadow-panel: 0 1px 2px rgba(15, 23, 42, 0.08);
    --pt-space-page: clamp(1rem, 3vw, 2rem);
    --pt-space-panel: 1.5rem;
    --pt-space-section: 2.5rem;
    --pt-gap-grid: 1rem;
    --pt-gap-split: 1.5rem;
    --pt-container-wide: 80rem;
    --pt-container-content: 72rem;
    --pt-container-reading: 60rem;
    --pt-container-faq: 64rem;
}

.pt-section {
    padding-block: var(--pt-space-section);
}

.pt-section--white { background: #fff; }
.pt-section--soft { background: var(--pt-color-soft); }
.pt-section--navy { background: var(--pt-color-navy); color: #fff; }
.pt-section--border-top { border-top: 1px solid var(--pt-color-line); }

.pt-container {
    width: min(100% - (2 * var(--pt-space-page)), var(--pt-container-wide));
    margin-inline: auto;
}

.pt-container--content { max-width: var(--pt-container-content); }
.pt-container--reading { max-width: var(--pt-container-reading); }
.pt-container--faq {
    width: min(100% - (2 * clamp(1.5rem, 6vw, 5rem)), var(--pt-container-faq));
    margin-inline: auto;
}

.pt-split {
    display: grid;
    gap: var(--pt-gap-split);
    align-items: stretch;
}

.pt-split--editorial {
    grid-template-columns: minmax(0, 1fr);
}

.pt-split--media {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}

.pt-panel {
    min-width: 0;
    border-radius: var(--pt-radius-panel);
    padding: var(--pt-space-panel);
    box-shadow: var(--pt-shadow-panel);
}

.pt-panel--light {
    background: #fff;
    border: 1px solid var(--pt-color-line);
}

.pt-panel--navy {
    background: var(--pt-color-navy);
    color: #fff;
}

.pt-panel--navy p { color: #d1d5db; }

.pt-panel--green-glass {
    position: relative;
    overflow: hidden;
    padding: 0;
    border: 1px solid #c8e8a0;
    background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(232,248,208,0.92) 52%, rgba(216,241,181,0.88) 100%);
    color: var(--pt-color-navy-deep);
}

.pt-panel--green-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(27,79,138,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27,79,138,0.055) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(135deg, rgba(0,0,0,0.8), transparent 72%);
}

.pt-panel--green-glass > * {
    position: relative;
    z-index: 1;
}

.pt-panel--green-glass .pt-green-line { background: var(--pt-color-blue-dark); }
.pt-panel--green-glass > .p-6 { padding: var(--pt-space-panel); }
.pt-panel--green-glass > .grid { background: rgba(255, 255, 255, 0.34); }
.pt-panel--green-glass > .grid > div {
    border-color: rgba(27, 79, 138, 0.16);
    text-align: center;
}
.pt-panel--green-glass > .grid h3 { color: var(--pt-color-navy-deep); }
.pt-panel--green-glass > .grid p { color: #334155; }

.pt-panel--green-glass + .pt-blue-panel {
    background: #fff;
    border: 1px solid var(--pt-color-line);
    color: var(--pt-color-text);
}
.pt-panel--green-glass + .pt-blue-panel > p:first-child { color: var(--pt-color-blue) !important; }
.pt-panel--green-glass + .pt-blue-panel h2,
.pt-panel--green-glass + .pt-blue-panel h3 { color: var(--pt-color-text); }
.pt-panel--green-glass + .pt-blue-panel p { color: var(--pt-color-muted); }
.pt-panel--green-glass + .pt-blue-panel .bg-white\/10 {
    border: 1px solid var(--pt-color-line);
    background: var(--pt-color-soft);
}

.pt-panel--contrast-light {
    background: #fff;
    border: 1px solid var(--pt-color-line);
    color: var(--pt-color-text);
}

.pt-contrast-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.pt-contrast-grid__item {
    display: block;
    padding: 1.25rem;
    border-top: 1px solid rgba(27, 79, 138, 0.16);
    background: rgba(255, 255, 255, 0.48);
    backdrop-filter: blur(8px);
    text-align: center;
}

.pt-contrast-list {
    display: grid;
    gap: 1rem;
}

.pt-contrast-list__item {
    padding: 1rem;
    border: 1px solid var(--pt-color-line);
    border-radius: var(--pt-radius-control);
    background: var(--pt-color-soft);
}

.pt-panel--segmented {
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--pt-color-line);
}

.pt-panel__body { padding: var(--pt-space-panel); }

.pt-media-frame {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    border-radius: var(--pt-radius-panel);
    box-shadow: var(--pt-shadow-panel);
    background: #e5e7eb;
}

.pt-media-frame img {
    width: 100%;
    height: 100%;
    min-height: 18rem;
    object-fit: cover;
}

.pt-media-copy {
    padding: clamp(0.25rem, 1vw, 0.75rem) 0;
}

.pt-green-line {
    height: 5px;
    width: 72px;
    border-radius: 999px;
    background: var(--pt-color-green);
}

.pt-dot {
    margin-top: 0.4rem;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: var(--pt-color-green);
}

/* Important notice badge — matches Option 31 from preview-circle-exclamation.php */
.pt-badge-important {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    flex-shrink: 0;
    background: #102238;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(16, 34, 56, .35);
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1;
}

/* Primary button override: green gradient + navy border (replaces bright blue buttons) */
a[class~="bg-blue-500"],
a[class~="bg-blue-600"],
button[class~="bg-blue-500"],
button[class~="bg-blue-600"],
a.pt-card-quote,
button.pt-card-quote {
    background: linear-gradient(135deg, #9fe600 0%, #7bc000 100%) !important;
    border: 2px solid var(--pt-color-navy-deep) !important;
    color: var(--pt-color-navy-deep) !important;
    font-weight: 700 !important;
    box-shadow: none !important;
}

a[class~="bg-blue-500"]:hover,
a[class~="bg-blue-600"]:hover,
button[class~="bg-blue-500"]:hover,
button[class~="bg-blue-600"]:hover,
[class~="hover\:bg-blue-600"]:hover,
[class~="hover\:bg-blue-700"]:hover,
[class~="hover\:bg-blue-500"]:hover {
    background: linear-gradient(135deg, #8bd400 0%, #6aa300 100%) !important;
}

/* Secondary quote buttons — approved option 21 from preview-secondary-buttons.php */
a.pt-card-quote,
button.pt-card-quote,
a.pt-secondary-quote,
button.pt-secondary-quote {
    background: linear-gradient(135deg, #ecfccb 0%, #d9f99d 100%) !important;
    color: #102238 !important;
    border: 1px solid #c8e88a !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

a.pt-card-quote:hover,
button.pt-card-quote:hover,
a.pt-secondary-quote:hover,
button.pt-secondary-quote:hover {
    background: linear-gradient(135deg, #d9f99d 0%, #bef264 100%) !important;
    border-color: #8bd400 !important;
}

/* Soft gradient callout — option 18 from preview */
.pq-18 {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: var(--pt-radius-panel);
    padding: 1rem 1.25rem;
    border: 1px solid #bae6fd;
}

.pq-18 h3 { color: var(--pt-color-navy-deep); font-weight: 700; font-size: 1.1rem; margin-bottom: .25rem; }
.pq-18 p { color: var(--pt-color-muted); font-size: .95rem; }

.pt-icon-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pt-gap-grid);
}

.pt-icon-card {
    padding: 1.25rem;
    border: 1px solid var(--pt-color-line);
    border-radius: var(--pt-radius-panel);
    background: #fff;
    box-shadow: var(--pt-shadow-panel);
    transition: box-shadow 180ms ease;
}

.pt-icon-card:hover { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10); }

.pt-icon-card__layout {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.pt-icon-card__icon {
    display: flex;
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid #f3f4f6;
    border-radius: var(--pt-radius-panel);
    background: var(--pt-color-soft);
}

.pt-inline-icon {
    display: flex;
    width: 4rem;
    height: 4rem;
    flex: 0 0 4rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(27, 79, 138, 0.14);
    border-radius: var(--pt-radius-control);
    background: rgba(255, 255, 255, 0.72);
}

.pt-inline-icon--stacked {
    margin: 0 auto 0.875rem;
}

.pt-capability-band .pt-inline-icon {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
}

.pt-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.pt-faq-card {
    padding: 1.25rem;
    border: 1px solid var(--pt-color-line);
    border-radius: var(--pt-radius-panel);
    background: #fff;
    box-shadow: var(--pt-shadow-panel);
}

.pt-faq-grid--dark .pt-faq-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

.pt-faq-grid--dark .pt-faq-card h3 { color: #fff; }
.pt-faq-grid--dark .pt-faq-card p { color: #d1d5db; }

.pt-section-heading {
    max-width: 48rem;
    margin: 0 auto 2rem;
    text-align: center;
}

.pt-section--navy .pt-section-heading__eyebrow { color: var(--pt-color-green); }
.pt-section--navy .pt-section-heading__title { color: #fff; }
.pt-section--navy .pt-section-heading__body { color: #d1d5db; }

.pt-service-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pt-gap-grid);
}

.pt-service-card {
    display: block;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--pt-color-line);
    border-radius: var(--pt-radius-panel);
    background: #fff;
    box-shadow: var(--pt-shadow-panel);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.pt-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.pt-service-card__media {
    position: relative;
    height: 9rem;
    overflow: hidden;
    background: #f3f4f6;
}

.pt-service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms ease;
}

.pt-service-card:hover .pt-service-card__media img { transform: scale(1.05); }
.pt-service-card__body { padding: 1rem; }

.pt-process-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.pt-process-step {
    position: relative;
    text-align: center;
}

.pt-process-step__number {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
    border-radius: 999px;
    background: var(--pt-color-blue-dark);
    color: #fff;
    font-weight: 600;
}

.pt-industry-path-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.pt-industry-path {
    display: flex;
    min-height: 100%;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--pt-color-line);
    border-top: 5px solid var(--pt-color-green);
    border-radius: var(--pt-radius-panel);
    background: #fff;
    box-shadow: var(--pt-shadow-panel);
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.pt-industry-path:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.pt-industry-path__content {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    align-self: stretch;
}

.pt-industry-path__count {
    display: inline-flex;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--pt-color-blue);
    font-size: 0.75rem;
    font-weight: 600;
}

.pt-capability-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}

.pt-capability-band__intro {
    padding-right: 0;
}

.pt-capability-band__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pt-capability-band__item {
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

@media (min-width: 640px) {
    .pt-icon-grid--2,
    .pt-icon-grid--3,
    .pt-icon-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-industry-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-capability-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-capability-band__item:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid rgba(255, 255, 255, 0.16); }
    .pt-capability-band__item:nth-child(even) { padding-left: 1.5rem; }
    .pt-contrast-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pt-contrast-grid--3 .pt-contrast-grid__item + .pt-contrast-grid__item {
        border-left: 1px solid rgba(27, 79, 138, 0.16);
    }
}

@media (min-width: 768px) {
    .pt-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .pt-split--editorial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-split--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
    .pt-icon-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pt-icon-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pt-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pt-process-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pt-industry-path-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .pt-capability-band { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; }
    .pt-capability-band__intro { padding-right: 1rem; }
}