:root { --font-display: "Inter", ui-sans-serif, system-ui, sans-serif; }
/* Data-grid tables: tables in .cms-content are auto-wrapped in .pho-table-wrap (see layouts/site.blade.php); or add class="pho-table" */
.pho-table-wrap {
  --g-brand: var(--brand, #EF3035);
  margin: 1.75em 0; overflow-x: auto; -webkit-overflow-scrolling: touch; background: #fff;
  border: 1px solid #eceaea; border-top: 3px solid var(--g-brand); border-radius: 1rem;
  box-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 12px 28px -12px rgb(16 24 40 / .14);
}
.pho-table-wrap > table, .pho-table-wrap > .pho-table {
  margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; display: table; width: 100%; min-width: 680px;
  border-collapse: separate; border-spacing: 0; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.pho-table-wrap td:nth-child(n+3) { overflow-wrap: anywhere; }
/* header row */
.cms-content thead th, .cms-content tr:first-child > th, .pho-table thead th {
  background: linear-gradient(180deg, #fbf4f4, #f6e8e9); color: #7a1c1f;
  font-family: var(--font-display, inherit); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; border-bottom: 1px solid #ecd5d6; position: sticky; top: 0;
}

/* rows: zebra + hover with accent bar */
.cms-content tbody tr, .pho-table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.cms-content tbody tr:nth-child(even):not(:has(th)), .pho-table tbody tr:nth-child(even) { background: #fcf8f8; }
.cms-content tbody tr:hover:not(:has(th)), .pho-table tbody tr:hover { background: #fdeeee; }
.cms-content tbody tr:not(:has(th)) > td:first-child, .pho-table tbody tr > td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .15s ease; }
.cms-content tbody tr:hover:not(:has(th)) > td:first-child, .pho-table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--g-brand); }

/* first column becomes a pill badge (year / serial / key) */
.cms-content tbody tr:not(:has(th)) > td:first-child, .pho-table tbody tr > td:first-child {
  font-family: var(--font-display, inherit); font-weight: 700; color: var(--g-brand); white-space: nowrap; width: 1%;
}
/* second column emphasised, rest muted */
.cms-content td:nth-child(2), .pho-table td:nth-child(2) { font-weight: 600; color: #111; }
.cms-content td:nth-child(n+3), .pho-table td:nth-child(n+3) { color: #444; }
.cms-content td:empty::after, .pho-table td:empty::after { content: "—"; color: #c9c2c2; }

@media (max-width: 640px) {
  .cms-content table, .pho-table { font-size: .875rem; border-radius: .75rem; }
  .cms-content th, .cms-content td, .pho-table th, .pho-table td { padding: .75rem .85rem; }
}

/* Typography: Inter for headings & buttons, Inter (font-sans) for body text */
h1, h2, h3, h4, h5, h6, .font-display, button, .btn { font-family: var(--font-display); }
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4 { font-family: var(--font-display); }
.cms-content th, .cms-content td, .pho-table th, .pho-table td {
  border: 0; border-bottom: 1px solid #f1eeee; padding: .95rem 1.15rem; text-align: left; vertical-align: middle; line-height: 1.4;
}
.cms-content tr:last-child > td, .pho-table tr:last-child > td { border-bottom: 0; }
.cms-content table { margin: 1.75em 0; border-collapse: separate; border-spacing: 0; }
.pho-table-wrap > table { margin: 0; }

/* Gallery lightbox (plain CSS: independent of the Tailwind build) */
.gl-lb { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.95); display: flex; flex-direction: column; color: #fff; }
.gl-lb[x-cloak] { display: none !important; }
.gl-lb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.25rem; }
.gl-lb-title { font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-lb-sub { font-size: .75rem; color: rgba(255,255,255,.6); margin: 0; }
.gl-lb-stage { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 3.5rem; }
.gl-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.gl-lb-btn { width: 2.75rem; height: 2.75rem; border: 0; border-radius: 9999px; background: rgba(255,255,255,.12); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gl-lb-btn:hover { background: rgba(255,255,255,.28); }
.gl-lb-stage .gl-lb-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.gl-lb-prev { left: .5rem; } .gl-lb-next { right: .5rem; }
.gl-lb-cap { text-align: center; color: rgba(255,255,255,.8); font-size: .875rem; padding: .5rem 1rem; margin: 0; }
.gl-lb-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1rem; }
.gl-lb-thumbs button { flex: none; width: 4rem; height: 4rem; padding: 0; border-radius: .5rem; overflow: hidden; border: 2px solid transparent; opacity: .6; cursor: pointer; background: none; }
.gl-lb-thumbs button.on { border-color: var(--brand, #EF3035); opacity: 1; }
.gl-lb-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 640px) { .gl-lb-stage { padding: 0 5rem; } .gl-lb-prev { left: 1rem; } .gl-lb-next { right: 1rem; } .gl-lb-thumbs { justify-content: center; } }
.gl-lb-err { color: rgba(255,255,255,.7); font-size: .95rem; text-align: center; margin: 0; }

/* Gallery album cards */
.gal-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gal-card { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; background: #fff; border: 1px solid #eceaea; border-radius: 1.1rem; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease; }
.gal-card:hover, .gal-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgb(16 24 40 / .3); }
.gal-card:focus-visible { outline: 2px solid var(--brand, #EF3035); outline-offset: 2px; }
.gal-media { position: relative; display: grid; aspect-ratio: 4 / 3; background: #efeded; overflow: hidden; }
.gal-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gal-card:hover .gal-media img { transform: scale(1.06); }
.gal-media.is-collage { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.gal-media.is-collage img:first-of-type { grid-row: 1 / 3; }
.gal-shade { position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(to top, rgb(0 0 0 / .6), transparent); pointer-events: none; }
.gal-year { position: absolute; top: .75rem; left: .75rem; background: var(--brand, #EF3035); color: #fff; font: 700 .72rem/1 var(--font-display, inherit); padding: .35rem .6rem; border-radius: 999px; letter-spacing: .04em; }
.gal-count { position: absolute; bottom: .75rem; left: .75rem; background: rgb(255 255 255 / .95); color: #111; font: 700 .72rem/1 Inter, sans-serif; padding: .4rem .65rem; border-radius: 999px; }
.gal-view { position: absolute; bottom: .75rem; right: .75rem; color: #fff; font: 600 .78rem/1 Inter, sans-serif; opacity: 0; transform: translateX(-6px); transition: .25s; }
.gal-card:hover .gal-view { opacity: 1; transform: none; }
.gal-body { display: block; padding: 1rem 1.1rem 1.15rem; }
.gal-title { display: block; font: 600 1rem/1.35 var(--font-display, inherit); color: #111; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gal-card:hover .gal-title { color: var(--brand, #EF3035); }
.gal-date { display: block; margin-top: .35rem; font-size: .78rem; color: #888; }

/* Lightbox extras */
.gl-lb-tools { display: flex; gap: .5rem; align-items: center; }
.gl-lb-tools .gl-lb-btn { text-decoration: none; font-size: 1.1rem; }
.gl-lb-stage.is-zoom { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.gl-lb-stage.is-zoom img { max-width: none; max-height: none; width: auto; cursor: zoom-out; }
.gl-lb-stage:not(.is-zoom) img { cursor: zoom-in; }
.gl-lb-spin { position: absolute; width: 2.5rem; height: 2.5rem; border: 3px solid rgb(255 255 255 / .25); border-top-color: #fff; border-radius: 50%; animation: gl-spin .8s linear infinite; }
@keyframes gl-spin { to { transform: rotate(360deg); } }
.gl-lb-bar { height: 3px; background: rgb(255 255 255 / .15); }
.gl-lb-bar-fill { display: block; height: 100%; background: var(--brand, #EF3035); animation: gl-fill 3.5s linear forwards; }
@keyframes gl-fill { from { width: 0; } to { width: 100%; } }

/* Events: filter bar + cards */
.ev-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ev-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eceaea; border-radius: 1.1rem; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; }
.ev-card:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgb(16 24 40 / .3); }
.ev-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #fbe9ea, #fff 55%, #f6e8e9); }
.ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.ev-card:hover .ev-media img { transform: scale(1.05); }
.ev-card.is-past .ev-media img { filter: grayscale(.45); }
.ev-date { position: absolute; top: .8rem; left: .8rem; background: #fff; border-radius: .8rem; padding: .5rem .7rem; text-align: center; line-height: 1; box-shadow: 0 6px 16px rgb(0 0 0 / .15); min-width: 3.4rem; }
.ev-date b { display: block; font: 800 1.35rem/1 var(--font-display, inherit); color: #111; }
.ev-date i { display: block; font: 700 .68rem/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--brand, #EF3035); margin-top: .3rem; font-style: normal; }
.ev-date em { display: block; font: 500 .62rem/1 Inter, sans-serif; color: #888; margin-top: .2rem; font-style: normal; }
.ev-status { position: absolute; bottom: .8rem; left: .8rem; font: 700 .7rem/1 Inter, sans-serif; padding: .4rem .7rem; border-radius: 999px; color: #fff; background: #555; }
.ev-status.is-up { background: #0f766e; } .ev-status.is-soon { background: #d97706; } .ev-status.is-live { background: var(--brand, #EF3035); } .ev-status.is-done { background: #6b7280; }
.ev-type { position: absolute; top: .8rem; right: .8rem; background: rgb(0 0 0 / .7); color: #fff; font: 700 .65rem/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; padding: .4rem .65rem; border-radius: 999px; }
.ev-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.25rem 1.25rem; }
.ev-title { font: 600 1.05rem/1.4 var(--font-display, inherit); margin: 0 0 .6rem; }
.ev-title a { color: #111; text-decoration: none; } .ev-title a:hover { color: var(--brand, #EF3035); }
.ev-meta { list-style: none; margin: 0 0 .75rem; padding: 0; font-size: .85rem; color: #666; display: grid; gap: .4rem; }
.ev-meta li { display: flex; gap: .5rem; align-items: flex-start; } .ev-meta svg { flex: none; margin-top: .15rem; color: var(--brand, #EF3035); }
.ev-sum { font-size: .88rem; line-height: 1.6; color: #666; margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .9rem; border-top: 1px solid #f1eeee; }
.ev-cta { font: 600 .88rem Inter, sans-serif; color: var(--brand, #EF3035); text-decoration: none; } .ev-cta span { display: inline-block; transition: transform .2s; } .ev-cta:hover span { transform: translateX(4px); }
.ev-pdf { font: 700 .72rem Inter, sans-serif; color: #555; border: 1px solid #ddd; border-radius: 999px; padding: .3rem .7rem; text-decoration: none; } .ev-pdf:hover { color: var(--brand, #EF3035); border-color: var(--brand, #EF3035); }
@media (max-width: 640px) { .ev-grid, .gal-grid { grid-template-columns: 1fr; } }

/* ===== CMS content: typography, lists, links, images ===== */
.cms-content { font-size: 1.02rem; line-height: 1.8; color: #333; overflow-wrap: anywhere; }
.cms-content > :first-child { margin-top: 0; }
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4, .cms-content h5 { font-family: var(--font-display, inherit); color: #111; line-height: 1.3; }
.cms-content h2 { font-size: 1.55rem; margin: 2.2rem 0 .9rem; padding-bottom: .5rem; border-bottom: 2px solid #f1eeee; position: relative; }
.cms-content h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 56px; height: 2px; background: var(--brand, #EF3035); }
.cms-content h3 { font-size: 1.3rem; margin: 2rem 0 .8rem; }
.cms-content h4 { font-size: 1.12rem; margin: 1.8rem 0 .7rem; padding-left: .8rem; border-left: 4px solid var(--brand, #EF3035); }
.cms-content p { margin: 0 0 1.1em; }
.cms-content p strong, .cms-content li strong { color: #111; font-weight: 600; }
.cms-content a { color: var(--brand, #EF3035); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s; }
.cms-content a:hover { color: #b81f23; }
.cms-content hr { border: 0; height: 1px; background: #eee; margin: 2rem 0; }
.cms-content blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid var(--brand, #EF3035); background: #fbf4f4; border-radius: 0 .75rem .75rem 0; color: #444; font-style: italic; }
.cms-content img { max-width: 100%; height: auto; border-radius: .9rem; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .25); }

/* Unordered list: brand bullets */
.cms-content ul { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: .55rem; }
.cms-content ul > li { position: relative; padding-left: 1.6rem; }
.cms-content ul > li::before { content: ""; position: absolute; left: .15rem; top: .72em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brand, #EF3035); box-shadow: 0 0 0 4px #fbe5e6; }
.cms-content ul ul { margin: .55rem 0 0; }
.cms-content ul ul > li::before { background: #fff; border: 2px solid var(--brand, #EF3035); box-shadow: none; width: .45rem; height: .45rem; }

/* Ordered list: numbered circles */
.cms-content ol { list-style: none; counter-reset: pho; padding: 0; margin: 0 0 1.4em; display: grid; gap: .75rem; }
.cms-content ol > li { counter-increment: pho; position: relative; padding: .85rem 1rem .85rem 3.4rem; background: #fff; border: 1px solid #eee; border-radius: .9rem; box-shadow: 0 1px 2px rgb(16 24 40 / .04); transition: box-shadow .2s, transform .2s, border-color .2s; }
.cms-content ol > li:hover { box-shadow: 0 10px 22px -12px rgb(16 24 40 / .25); border-color: #f3d3d4; transform: translateY(-1px); }
.cms-content ol > li::before { content: counter(pho); position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--brand, #EF3035); color: #fff; font: 700 .85rem/1.9rem var(--font-display, inherit); text-align: center; }
.cms-content ol ol, .cms-content ul ol { margin-top: .75rem; }

/* list items that hold a document link: title on the left, button on the right */
.cms-content li:has(> a[href$=".pdf"]), .cms-content li:has(> a[href$=".doc"]), .cms-content li:has(> a[href$=".docx"]) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; }
.cms-content li > a[href$=".pdf"], .cms-content li > a[href$=".doc"], .cms-content li > a[href$=".docx"] {
  display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; white-space: nowrap; font-size: .85rem; font-weight: 600;
  padding: .4rem .9rem; border-radius: 999px; background: #fdeeee; color: var(--brand, #EF3035); border: 1px solid #f7d2d3; transition: background .15s, color .15s;
}
.cms-content li > a[href$=".pdf"]::before { content: "PDF"; font-size: .62rem; font-weight: 800; letter-spacing: .06em; background: var(--brand, #EF3035); color: #fff; padding: .15rem .35rem; border-radius: .3rem; }
.cms-content li > a[href$=".pdf"] strong { font-weight: 600; color: inherit; }
.cms-content li > a[href$=".pdf"]:hover, .cms-content li > a[href$=".doc"]:hover, .cms-content li > a[href$=".docx"]:hover { background: var(--brand, #EF3035); color: #fff; }
.cms-content li > a[href$=".pdf"]:hover::before { background: #fff; color: var(--brand, #EF3035); }

/* Photo galleries inside pages (.gallery-section / .gallery-row) */
.cms-content .gallery-section { margin: 2rem 0; padding: 1.25rem; background: #faf7f7; border: 1px solid #f1eeee; border-radius: 1.1rem; }
.cms-content .gallery-section .section-title h2 { margin: 0 0 1rem; padding: 0; border: 0; font-size: 1.1rem; }
.cms-content .gallery-section .section-title h2::after { display: none; }
.cms-content .gallery-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .85rem; }
.cms-content .gallery-row a { display: block; overflow: hidden; border-radius: .9rem; aspect-ratio: 4 / 3; background: #eee; position: relative; }
.cms-content .gallery-row img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; display: block; transition: transform .5s ease; }
.cms-content .gallery-row a:hover img { transform: scale(1.07); }
.cms-content .gallery-row a::after { content: "⤢"; position: absolute; right: .6rem; top: .6rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(0 0 0 / .55); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.cms-content .gallery-row a:hover::after { opacity: 1; }
@media (max-width: 640px) { .cms-content { font-size: 1rem; } .cms-content ol > li { padding-left: 3.1rem; } .cms-content li > a[href$=".pdf"] { white-space: normal; } }

/* ===== CMS content: clean-up of legacy / pasted markup ===== */
.cms-content p:empty, .cms-content li:empty { display: none; }
.cms-content [style*="font-family"] { font-family: inherit !important; }
.cms-content [style*="font-size"] { font-size: inherit !important; }
.cms-content [style*="line-height"] { line-height: inherit !important; }
.cms-content [style*="background-color: rgb(255, 255, 255)"], .cms-content [style*="background-color:#fff"] { background: transparent !important; }
.cms-content [style*="width"]:not(img):not(td):not(th):not(iframe) { max-width: 100%; }
.cms-content br + br { display: none; }
.cms-content iframe, .cms-content video, .cms-content embed { max-width: 100%; border: 0; border-radius: .9rem; }
.cms-content iframe[src*="youtube"], .cms-content iframe[src*="vimeo"] { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.cms-content pre, .cms-content code { background: #f6f3f3; border-radius: .4rem; font-size: .9em; }
.cms-content code { padding: .1rem .35rem; } .cms-content pre { padding: 1rem; overflow-x: auto; }
.cms-content figure { margin: 1.5rem 0; } .cms-content figcaption { font-size: .85rem; color: #777; text-align: center; margin-top: .5rem; }
.cms-content img[align="left"], .cms-content img.alignleft { float: left; margin: .25rem 1.25rem 1rem 0; }
.cms-content img[align="right"], .cms-content img.alignright { float: right; margin: .25rem 0 1rem 1.25rem; }
.cms-content::after { content: ""; display: block; clear: both; }
.cms-content > p:first-of-type { font-size: 1.1rem; color: #222; }
.cms-content a[href^="mailto:"], .cms-content a[href^="tel:"] { white-space: nowrap; }
.cms-content a[target="_blank"]:not(:has(img)):not([href$=".pdf"])::after { content: "↗"; font-size: .8em; margin-left: .2em; text-decoration: none; display: inline-block; }

/* ===== Global heading typography (one scale for the whole site) ===== */
:root {
  --h1: clamp(1.9rem, 1.4rem + 2vw, 3rem);
  --h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --h3: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  --h4: clamp(1.1rem, 1.05rem + .3vw, 1.25rem);
  --h5: 1.05rem; --h6: .95rem;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--h1); } h2 { font-size: var(--h2); } h3 { font-size: var(--h3); }
h4 { font-size: var(--h4); } h5 { font-size: var(--h5); } h6 { font-size: var(--h6); text-transform: uppercase; letter-spacing: .06em; }

/* Same scale inside CMS content (overrides the earlier per-heading sizes) */
.cms-content h1 { font-size: var(--h1); margin: 2.2rem 0 1rem; }
.cms-content h2 { font-size: var(--h2); }
.cms-content h3 { font-size: var(--h3); padding-left: .85rem; border-left: 4px solid var(--brand, #EF3035); }
.cms-content h4 { font-size: var(--h4); padding-left: 0; border-left: 0; margin: 1.8rem 0 .7rem; }
.cms-content h4::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; background: var(--brand, #EF3035); margin-right: .55rem; transform: translateY(-.08em); }
.cms-content h5 { font-size: var(--h5); margin: 1.5rem 0 .6rem; } .cms-content h6 { font-size: var(--h6); margin: 1.4rem 0 .5rem; color: #666; }
/* headings that are links: keep heading look, no underline/colour jump */
.cms-content h1 a, .cms-content h2 a, .cms-content h3 a, .cms-content h4 a, .cms-content h5 a, .cms-content h6 a { color: inherit; text-decoration: none; font: inherit; }
.cms-content h1 a:hover, .cms-content h2 a:hover, .cms-content h3 a:hover, .cms-content h4 a:hover, .cms-content h5 a:hover, .cms-content h6 a:hover { color: var(--brand, #EF3035); }
.cms-content h1 a[target="_blank"]::after, .cms-content h2 a[target="_blank"]::after, .cms-content h3 a[target="_blank"]::after, .cms-content h4 a[target="_blank"]::after { content: none; }
.cms-content h1 *, .cms-content h2 *, .cms-content h3 *, .cms-content h4 *, .cms-content h5 *, .cms-content h6 * { font-family: inherit; }
.cms-content h2 + h3, .cms-content h3 + h4 { margin-top: 1rem; }
@media (max-width: 640px) { .cms-content h2 { margin-top: 1.8rem; } }

/* ===== Header ===== */
.site-header { background: rgb(255 255 255 / .92) !important; -webkit-backdrop-filter: saturate(160%) blur(10px); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid #efecec !important; transition: box-shadow .25s ease; }
.site-header.is-scrolled { box-shadow: 0 8px 24px -14px rgb(16 24 40 / .35); }
.site-header > div:first-child { transition: height .25s ease; }
.site-header.is-scrolled > div:first-child { height: 64px !important; }
.site-header [aria-label="PHO India home"] img { transition: height .25s ease; }
.site-header.is-scrolled [aria-label="PHO India home"] img { height: 2.5rem; }

/* main nav links: animated underline + active state */
.site-header nav[aria-label="Main"] { gap: .25rem !important; font-family: var(--font-display, inherit); font-size: .88rem !important; font-weight: 500; }
.site-header nav[aria-label="Main"] > a, .site-header nav[aria-label="Main"] > .dropdown > button { position: relative; padding: .55rem .7rem; border-radius: .6rem; color: #222; transition: color .15s, background-color .15s; }
.site-header nav[aria-label="Main"] > a::after, .site-header nav[aria-label="Main"] > .dropdown > button::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--brand, #EF3035); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site-header nav[aria-label="Main"] > a:hover, .site-header nav[aria-label="Main"] > .dropdown:hover > button { color: var(--brand, #EF3035); background: #fdf3f3; }
.site-header nav[aria-label="Main"] > a:hover::after, .site-header nav[aria-label="Main"] > .dropdown:hover > button::after, .site-header nav[aria-label="Main"] .is-current::after { transform: scaleX(1); }
.site-header nav[aria-label="Main"] .is-current { color: var(--brand, #EF3035); }
.site-header nav[aria-label="Main"] .dropdown > button svg { transition: transform .2s; }
.site-header nav[aria-label="Main"] .dropdown:hover > button svg { transform: rotate(180deg); }

/* dropdown panels */
.site-header .dropdown-panel > div { border-radius: .9rem !important; border: 1px solid #efecec !important; padding: .4rem !important; box-shadow: 0 22px 44px -18px rgb(16 24 40 / .35) !important; font-family: Inter, sans-serif; }
.site-header .dropdown-panel a, .site-header .dropdown-panel button { border-radius: .55rem; font-size: .88rem !important; padding: .55rem .8rem !important; color: #333; transition: background-color .15s, color .15s, padding-left .15s; }
.site-header .dropdown-panel a:hover, .site-header .dropdown-panel button:hover { background: #fdf0f0 !important; color: var(--brand, #EF3035); padding-left: 1rem !important; }
.site-header .dropdown-panel .is-current { color: var(--brand, #EF3035); font-weight: 600; background: #fdf3f3; }

/* mobile menu */
#mobileMenu { box-shadow: 0 18px 30px -18px rgb(16 24 40 / .35); }
#mobileMenu a, #mobileMenu button { font-family: var(--font-display, inherit); }
#menuBtn { border: 1px solid #efecec; } #menuBtn:hover { background: #fdf3f3; border-color: #f3d3d4; }

/* top bar: a bit tighter and consistent */
.brand-bg { font-family: Inter, sans-serif; }

/* dropdowns never run off the screen */
.site-header .dropdown-panel { width: max-content !important; min-width: 14rem; max-width: min(22rem, calc(100vw - 1.5rem)); }
.site-header .dropdown-panel a, .site-header .dropdown-panel button { white-space: normal; }
.site-header .dropdown.flip > .dropdown-panel { left: auto !important; right: 0; }
.site-header .dropdown.flip .group\/nested > div.absolute { left: auto !important; right: 100%; padding-left: 0 !important; padding-right: .5rem; }

/* ===== Home: Office Bearers ===== */
#bearers { background: linear-gradient(180deg, #f4f1f1, #ececec); position: relative; }
#bearers .team-card > div { border: 1px solid #ece8e8; border-radius: 1.25rem; box-shadow: 0 1px 2px rgb(16 24 40 / .05); transition: transform .3s ease, box-shadow .3s ease; position: relative; }
#bearers .team-card:hover > div { transform: translateY(-6px); box-shadow: 0 24px 40px -20px rgb(16 24 40 / .35); }
/* photo */
#bearers .team-card > div > div:first-child { position: relative; aspect-ratio: 4 / 4.4; background: linear-gradient(160deg, #f6e8e9, #ececec); }
#bearers .team-card > div > div:first-child img { transition: transform .6s ease; filter: saturate(1.03); }
#bearers .team-card:hover > div > div:first-child img { transform: scale(1.05); }
#bearers .team-card > div > div:first-child::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to top, rgb(0 0 0 / .28), transparent); pointer-events: none; }
/* text block */
#bearers .team-card > div > div:last-child { padding: 1.1rem 1.25rem 1.3rem; position: relative; }
#bearers .team-card > div > div:last-child > span { width: 2rem; height: 3px; border-radius: 3px; transition: width .3s ease; }
#bearers .team-card:hover > div > div:last-child > span { width: 3.5rem; }
#bearers .team-card p:nth-of-type(1) { display: inline-block; background: #fdeeee; color: var(--brand, #EF3035); font: 600 .72rem/1 Inter, sans-serif; letter-spacing: .02em; padding: .4rem .7rem; border-radius: 999px; margin: 0 0 .7rem; }
#bearers .team-card p:nth-of-type(2) { font: 600 1.02rem/1.35 var(--font-display, inherit); text-transform: none; letter-spacing: 0; color: #111; }
#bearers .team-card p:nth-of-type(3) { font-size: .8rem; color: #777; margin-top: .3rem; }
/* arrows + dots */
#teamPrev, #teamNext { width: 2.9rem !important; height: 2.9rem !important; border: 1px solid #e6e1e1 !important; box-shadow: 0 8px 20px -8px rgb(16 24 40 / .3) !important; transition: background-color .2s, transform .2s, box-shadow .2s !important; }
#teamPrev:hover, #teamNext:hover { background: var(--brand, #EF3035) !important; transform: translateY(-50%) scale(1.06); }
#teamPrev:hover svg path, #teamNext:hover svg path { stroke: #fff; }
#teamDots { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 2rem; }
#teamDots span { display: block; height: .4rem; border-radius: 999px; background: #d4cfcf; width: .4rem; transition: width .3s, background-color .3s; }
#teamDots span.brand-bg { width: 2rem; background: var(--brand, #EF3035); }

/* ===== Office Bearers v3: portrait cards with text over the photo ===== */
#bearers .team-card > div { background: #111; border: 0; border-radius: 1.4rem; overflow: hidden; box-shadow: 0 14px 30px -18px rgb(16 24 40 / .5); }
#bearers .team-card > div > div:first-child { aspect-ratio: 3 / 4; background: linear-gradient(160deg, #f6e8e9, #e4dede); }
#bearers .team-card > div > div:first-child::after { display: none; }
#bearers .team-card > div > div:first-child img { object-position: center 15%; }
#bearers .team-card > div > div:last-child { position: absolute; inset: auto 0 0 0; padding: 3.5rem 1.15rem 1.15rem; background: linear-gradient(to top, rgb(10 10 12 / .92) 0%, rgb(10 10 12 / .62) 55%, transparent 100%); }
#bearers .team-card > div > div:last-child > span { display: none; }
#bearers .team-card p:nth-of-type(1) { background: var(--brand, #EF3035); color: #fff; font-size: .68rem; padding: .38rem .7rem; margin-bottom: .55rem; box-shadow: 0 4px 10px -4px rgb(239 48 53 / .7); }
#bearers .team-card p:nth-of-type(2) { color: #fff; font-size: 1.08rem; text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
#bearers .team-card p:nth-of-type(3) { color: rgb(255 255 255 / .72); font-size: .78rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#bearers .team-card:hover > div { transform: translateY(-8px); box-shadow: 0 30px 46px -22px rgb(16 24 40 / .6); }
/* thin brand accent that grows on hover */
#bearers .team-card > div::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--brand, #EF3035); transition: width .4s ease; z-index: 2; }
#bearers .team-card:hover > div::after { width: 100%; }
/* section: soft pattern + bigger title */
#bearers { background: radial-gradient(circle at 12% 0%, #fbe9ea 0, transparent 40%), radial-gradient(circle at 92% 100%, #fbe9ea 0, transparent 38%), #f3f0f0; }
#bearers h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem) !important; }
/* dots → thin progress track */
#teamDots span { height: .3rem; width: .3rem; background: #cfc8c8; }
@media (max-width: 640px) { #bearers .team-card > div > div:first-child { aspect-ratio: 4 / 5; } }

/* ===== Mobile polish (≤ 640px) ===== */
@media (max-width: 640px) {
  body { font-size: 15px; }
  /* hero banner: show more of the artwork */
  #heroCarousel.is-banner { aspect-ratio: 16 / 9 !important; }
  /* feature strip: compact 2-col tiles, no clipped arrows */
  #heroCarousel ~ div .grid > a, section .grid.grid-cols-2 > a[href] { padding: .9rem .75rem !important; gap: .6rem !important; min-width: 0; }
  section .grid.grid-cols-2 > a[href] > svg { display: none; }
  section .grid.grid-cols-2 > a[href] > span:first-child { width: 2.4rem; height: 2.4rem; }
  section .grid.grid-cols-2 > a[href] > span.text-sm { font-size: .8rem; line-height: 1.25; }
  /* ticker */
  .marquee-label { font-size: .75rem !important; padding: 0 .75rem !important; }
  /* certification banner: artwork already carries the text, hide the duplicate overlay */
  .aspect-\[16\/11\] > div { display: none !important; }
  .aspect-\[16\/11\] { aspect-ratio: 16 / 10 !important; }
  /* section rhythm */
  main section.py-14, section.py-14 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  h2.text-3xl, h2.sm\:text-4xl { font-size: 1.65rem !important; }
  /* CTA buttons: full width, easy to tap */
  section .brand-bg.inline-flex, section a.border.inline-flex { width: 100%; justify-content: center; }
  /* office bearers slider arrows closer to the edge */
  #teamPrev { left: -.25rem !important; } #teamNext { right: -.25rem !important; }
  /* footer/columns */
  footer .grid { gap: 1.75rem !important; }
}
@media (max-width: 640px) {
  #heroCarousel.is-banner { aspect-ratio: 2 / 1 !important; background: #fff; }
  #heroCarousel.is-banner .hero-slide img { object-fit: contain; }
}

/* ===== Hero banner: blurred backdrop, dots, smooth fade ===== */
.hero-bg { position: absolute; inset: -16px; background-size: cover; background-position: center; filter: blur(22px) saturate(1.1); transform: scale(1.05); opacity: .9; }
#heroCarousel.is-banner .hero-slide { overflow: hidden; background: #f3f0f0; }
#heroCarousel.is-banner .hero-slide > img, #heroCarousel.is-banner .hero-slide > a > img, #heroCarousel.is-banner .hero-slide picture, #heroCarousel.is-banner .hero-slide picture > img { position: relative; z-index: 1; }
.hero-slide { transition: opacity .7s ease, visibility .7s ease; }
.hero-dots { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); z-index: 15; display: flex; gap: .4rem; padding: .35rem .55rem; border-radius: 999px; background: rgb(0 0 0 / .35); backdrop-filter: blur(6px); }
.hero-dots button { width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 999px; background: rgb(255 255 255 / .6); cursor: pointer; transition: width .3s, background-color .3s; }
.hero-dots button.on { width: 1.4rem; background: #fff; }
@media (min-width: 768px) { .hero-dots { bottom: 1rem; } }

/* ===== Buttons in one row (mobile) ===== */
.btn-row > a { transition: transform .15s ease, box-shadow .2s ease, background-color .2s; }
.btn-row > a:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -12px rgb(239 48 53 / .6); }
@media (max-width: 640px) {
  .btn-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: .6rem !important; }
  .btn-row > a { width: auto !important; justify-content: center !important; padding: .8rem .5rem !important; font-size: .85rem; white-space: nowrap; min-width: 0; gap: .4rem !important; border-radius: .7rem !important; }
  .btn-row > a:only-child { grid-column: 1 / -1; }
  .btn-row > a svg { flex: none; }
}

/* ===== Numbered lists: number badge top-aligned, compact on mobile ===== */
.cms-content ol > li::before, .home-ol > li::before { top: 1rem; transform: none; }
.cms-content ol > li { display: block; min-height: 3.2rem; }
@media (max-width: 640px) {
  .cms-content ol { gap: .55rem; }
  .cms-content ol > li { padding: .8rem .9rem .8rem 3rem; font-size: .95rem; line-height: 1.6; border-radius: .8rem; }
  .cms-content ol > li::before { left: .75rem; top: .85rem; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; font-size: .8rem; }
}

/* ===== Tables on mobile: every row becomes a card ===== */
@media (max-width: 640px) {
  .pho-table-wrap { overflow: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0; margin: 1.25rem 0; }
  .pho-table-wrap > table { display: block !important; min-width: 0 !important; width: 100% !important; background: transparent; }
  .pho-table-wrap table > thead, .pho-table-wrap table > tbody { display: block !important; min-width: 0 !important; width: 100% !important; }
  .pho-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* kept for screen readers */
  .pho-table-wrap tr { display: block; margin: 0 0 .7rem; background: #fff !important; border: 1px solid #eceaea; border-left: 4px solid var(--brand, #EF3035); border-radius: .85rem; box-shadow: 0 1px 2px rgb(16 24 40 / .05); overflow: hidden; }
  .pho-table-wrap td, .pho-table-wrap th { display: block; width: auto !important; border: 0 !important; padding: .55rem .95rem !important; white-space: normal !important; }
  .pho-table-wrap td + td { padding-top: 0 !important; }
  .pho-table-wrap td::before { content: attr(data-label); display: block; font: 700 .64rem/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #999; margin-bottom: .25rem; }
  .pho-table-wrap td:not([data-label])::before, .pho-table-wrap td[data-label=""]::before { display: none; }
  .pho-table-wrap td:first-child { width: auto !important; font-size: .78rem; color: var(--brand, #EF3035); font-weight: 700; padding-bottom: .1rem !important; box-shadow: none !important; }
  .pho-table-wrap td:first-child::before { display: none; }
  .pho-table-wrap td:nth-child(2) { font-size: 1rem; color: #111; font-weight: 600; }
  .pho-table-wrap td:nth-child(n+3) { font-size: .9rem; color: #444; }
  /* a header row that sits inside the body becomes a section title */
  .pho-table-wrap tr:has(th) { background: linear-gradient(180deg, #fbf4f4, #f6e8e9) !important; border-left-color: #7a1c1f; }
  .pho-table-wrap tr:has(th) th { font: 700 .72rem/1.3 var(--font-display, inherit); letter-spacing: .08em; text-transform: uppercase; color: #7a1c1f; background: transparent; padding: .6rem .95rem !important; position: static; }
  .pho-table-wrap tr:has(th) th + th { display: none; }
}

/* ===== Footer accordion on mobile (+ / −) ===== */
@media (max-width: 640px) {
  footer .ft-col { border-bottom: 1px solid #eee; }
  footer .ft-col > h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 !important; padding: 1rem 0; cursor: pointer; font-size: 1.02rem; user-select: none; }
  footer .ft-col > h3::after { content: "+"; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fdeeee; color: var(--brand, #EF3035); font: 600 1.15rem/1.7rem Inter, sans-serif; text-align: center; transition: transform .25s, background-color .2s, color .2s; }
  footer .ft-col.is-open > h3::after { content: "−"; background: var(--brand, #EF3035); color: #fff; }
  footer .ft-col > h3:focus-visible { outline: 2px solid var(--brand, #EF3035); outline-offset: 2px; border-radius: .4rem; }
  footer .ft-col > :not(h3) { display: none; }
  footer .ft-col.is-open > span.block { display: block; margin-bottom: .9rem; }
  footer .ft-col.is-open > :not(h3):not(span.block) { display: block; padding-bottom: 1.1rem; animation: ft-in .25s ease; }
  footer .ft-col > span.block { display: none; }
  footer .grid { gap: 0 !important; }
  footer .grid > div:first-child { padding-bottom: 1.5rem; }
}
@keyframes ft-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 641px) { footer .ft-col > h3::after { content: none; } }

/* ===== Floated images from old editor markup (e.g. chairperson message) ===== */
.cms-content [style*="float: right"], .cms-content [style*="float:right"] { margin: .25rem 0 1rem 1.5rem; padding: 0 !important; }
.cms-content [style*="float: left"], .cms-content [style*="float:left"] { margin: .25rem 1.5rem 1rem 0; padding: 0 !important; }
.cms-content [style*="float"] > img { display: block; max-width: 100%; height: auto; border: 0 !important; border-radius: 1rem; box-shadow: 0 14px 30px -16px rgb(16 24 40 / .45); }
.cms-content [class*="et_pb_row"], .cms-content [class*="et_pb_column"], .cms-content [class*="et_pb_text"] { width: auto; max-width: 100%; float: none; margin: 0; padding: 0; }
@media (max-width: 640px) {
  .cms-content [style*="float"] { float: none !important; margin: 0 0 1.25rem !important; text-align: center; }
  .cms-content [style*="float"] > img { width: min(100%, 300px); height: auto; margin: 0 auto; }
  .cms-content [style*="float"] + h2, .cms-content [style*="float"] + h3 { margin-top: 0; }
}

/* headings next to a floated photo must not draw their underline across it */
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4, .cms-content h5, .cms-content h6 { display: flow-root; }

/* hero dots: desktop already has arrows + counter, so dots are for mobile only */
@media (min-width: 768px) { .hero-dots { display: none; } }

/* ===== Feature strip (Become a Member / Events / …) ===== */
.feature-strip { border: 1px solid #f0eded; box-shadow: 0 22px 40px -22px rgb(16 24 40 / .35) !important; overflow: hidden; }
.feature-strip > .grid > a { position: relative; transition: background-color .25s ease, transform .25s ease; }
.feature-strip > .grid > a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand, #EF3035); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.feature-strip > .grid > a:hover { background: #fdf6f6; }
.feature-strip > .grid > a:hover::before { transform: scaleX(1); }
.feature-strip > .grid > a > span:first-child { transition: transform .25s ease, background-color .25s ease; }
.feature-strip > .grid > a:hover > span:first-child { transform: scale(1.08) rotate(-4deg); }
.feature-strip > .grid > a > span.text-sm { font-family: var(--font-display, inherit); font-size: .95rem; font-weight: 600; letter-spacing: -.005em; }
.feature-strip > .grid > a > svg { width: 1.9rem; height: 1.9rem; padding: .5rem; border-radius: 50%; background: #fdeeee; transition: background-color .25s, color .25s, transform .25s; }
.feature-strip > .grid > a:hover > svg { background: var(--brand, #EF3035); color: #fff; transform: translateX(3px); }
.feature-strip > .grid > a:hover > svg path { stroke: #fff; }
@media (min-width: 768px) { .feature-strip { margin-top: -2.2rem !important; } }

/* never allow sideways page scroll (hidden dropdown panels / decorative blobs) */
html, body { overflow-x: clip; max-width: 100%; }
.site-header nav[aria-label="Main"] > .dropdown:nth-last-child(-n+2) > .dropdown-panel { left: auto !important; right: 0; }

/* Certification banner: the artwork already carries this text, so the HTML overlay is hidden at every size */
.aspect-\[16\/11\] > div, .sm\:aspect-\[16\/10\.5\] > div { display: none !important; }

/* ===== Accessibility polish: tap targets and minimum text size ===== */
@media (max-width: 767px) {
  .brand-bg > div a:not(.hidden), .brand-bg > div [class*="flex"] > a:not(.hidden) { display: inline-flex; align-items: center; min-height: 40px; }
  section ul li > a { display: inline-block; padding: .5rem 0; }
  section a.inline-flex, section a[class*="font-semibold"] { min-height: 40px; }
  #bearers .team-card p:nth-of-type(1) { font-size: .75rem; }
  .site-header a[aria-label="PHO India home"] .leading-tight > div:last-child { font-size: 11px !important; line-height: 1.25; }
}
a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--brand, #EF3035); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .marquee-track { animation: none !important; } }

/* ===== One typeface for the whole website: Inter ===== */
:root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-sans); }
html, body, button, input, select, textarea, .font-sans, .font-display { font-family: var(--font-sans); }
body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.02em; }

/* mobile tables: header row stays for screen readers but takes no space */
@media (max-width: 640px) {
  .pho-table-wrap table > thead { position: absolute !important; left: -9999px !important; width: 1px !important; min-width: 0 !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0); }
}

/* Photo grids written as plain markup in the editor: <div><a><img></a><a><img></a>…</div> (no classes or inline CSS needed) */
.cms-content div:has(> a > img:only-child) { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.25rem 0 1.75rem; }
.cms-content div:has(> a > img:only-child) > a { display: block; overflow: hidden; border-radius: .9rem; aspect-ratio: 1 / 1; background: #eee; }
.cms-content div:has(> a > img:only-child) > a > img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; box-shadow: none; transition: transform .5s ease; }
.cms-content div:has(> a > img:only-child) > a:hover > img { transform: scale(1.07); }
@media (max-width: 900px) { .cms-content div:has(> a > img:only-child) { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .cms-content div:has(> a > img:only-child) { grid-template-columns: repeat(2, 1fr); gap: .5rem; } }

/* ===== Contact page ===== */
.contact-grid { display: grid; grid-template-columns: 320px 1fr; gap: 2rem; align-items: start; }
.contact-info { background: linear-gradient(160deg, var(--brand, #EF3035), #b81f23); color: #fff; border-radius: 1.25rem; padding: 2rem; position: relative; overflow: hidden; }
.contact-info::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgb(255 255 255 / .1); }
.contact-info h2 { font-size: 1.4rem; margin: 0 0 1.25rem; color: #fff; }
.contact-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; position: relative; z-index: 1; }
.contact-info li span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-bottom: .2rem; }
.contact-info a, .contact-info p { color: #fff; margin: 0; word-break: break-word; font-weight: 500; }
.contact-card { background: #fff; border: 1px solid #eceaea; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 18px 36px -22px rgb(16 24 40 / .3); }
.contact-card .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.contact-card .field { margin-bottom: 1.1rem; }
.contact-card label { display: block; font-size: .82rem; font-weight: 600; color: #333; margin-bottom: .4rem; }
.contact-card label b { color: var(--brand, #EF3035); }
.contact-card input, .contact-card textarea { width: 100%; border: 1px solid #ddd; border-radius: .7rem; padding: .75rem .9rem; font: inherit; font-size: .95rem; background: #fff; transition: border-color .15s, box-shadow .15s; }
.contact-card input:focus, .contact-card textarea:focus { outline: none; border-color: var(--brand, #EF3035); box-shadow: 0 0 0 3px rgb(239 48 53 / .15); }
.contact-card .err { color: #b42318; font-size: .8rem; margin: .35rem 0 0; }
.contact-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; border-radius: .8rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.contact-btn { display: inline-flex; align-items: center; gap: .6rem; background: var(--brand, #EF3035); color: #fff; font: 600 .95rem Inter, sans-serif; border: 0; border-radius: .7rem; padding: .85rem 1.6rem; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.contact-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -12px rgb(239 48 53 / .7); }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } .contact-card .row2 { grid-template-columns: 1fr; gap: 0; } .contact-card, .contact-info { padding: 1.4rem; } .contact-btn { width: 100%; justify-content: center; } }

/* Hero: when every slide has a phone-sized image, use a taller 4:5 frame on phones */
.hero-slide picture { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) {
  #heroCarousel.is-banner.has-mobile-art { aspect-ratio: 4 / 5 !important; }
  #heroCarousel.is-banner.has-mobile-art .hero-slide img { object-fit: cover; }
}

/* ===== A paragraph / heading that is just a PDF link becomes a download row (newsletters, archives, notices…) ===== */
.cms-content :is(p, h3, h4, h5):has(> a[href$=".pdf"]:only-child) {
  display: flex; align-items: center; gap: .85rem; margin: 0 0 .65rem; padding: .85rem 1rem; background: #fff;
  border: 1px solid #eee; border-radius: .9rem; box-shadow: 0 1px 2px rgb(16 24 40 / .04); font-size: 1rem; font-weight: 600; line-height: 1.45;
  border-left-width: 1px; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.cms-content :is(p, h3, h4, h5):has(> a[href$=".pdf"]:only-child):hover { box-shadow: 0 10px 22px -12px rgb(16 24 40 / .25); border-color: #f3d3d4; transform: translateY(-1px); }
.cms-content :is(p, h3, h4, h5):has(> a[href$=".pdf"]:only-child)::before {
  content: "PDF"; flex: none; width: auto; height: auto; margin: 0; transform: none; border-radius: .4rem; background: var(--brand, #EF3035); color: #fff;
  font: 800 .66rem/1 Inter, sans-serif; letter-spacing: .06em; padding: .4rem .5rem;
}
.cms-content :is(p, h3, h4, h5):has(> a[href$=".pdf"]:only-child)::after { content: "↗"; margin-left: auto; color: var(--brand, #EF3035); font-weight: 700; flex: none; }
.cms-content :is(p, h3, h4, h5) > a[href$=".pdf"]:only-child { color: #111; text-decoration: none; flex: 1; min-width: 0; font: inherit; }
.cms-content :is(p, h3, h4, h5):has(> a[href$=".pdf"]:only-child):hover > a { color: var(--brand, #EF3035); }
.cms-content :is(p, h3, h4, h5) > a[href$=".pdf"]:only-child::after { content: none !important; }

/* ===== Login / register ===== */
.auth-wrap { background: radial-gradient(circle at 10% 0%, #fbe9ea 0, transparent 40%), radial-gradient(circle at 95% 100%, #fbe9ea 0, transparent 38%), #f6f3f3; padding: 3rem 1rem 4rem; }
.auth-card { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; background: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(16 24 40 / .35); border: 1px solid #eee; }
.auth-side { background: linear-gradient(160deg, var(--brand, #EF3035), #a91a1e); color: #fff; padding: 2.5rem 2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.auth-side::after { content: ""; position: absolute; right: -70px; bottom: -70px; width: 240px; height: 240px; border-radius: 50%; background: rgb(255 255 255 / .1); }
.auth-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .8; margin: 0 0 .75rem; }
.auth-side h2 { color: #fff; font-size: 1.8rem; margin: 0 0 .6rem; }
.auth-lead { opacity: .9; margin: 0 0 1.5rem; line-height: 1.6; }
.auth-side ul { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .8rem; position: relative; z-index: 1; }
.auth-side li { position: relative; padding-left: 1.6rem; font-size: .92rem; opacity: .95; }
.auth-side li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.auth-ghost { margin-top: auto; align-self: flex-start; position: relative; z-index: 1; border: 1.5px solid rgb(255 255 255 / .7); color: #fff; border-radius: 999px; padding: .6rem 1.2rem; font-weight: 600; font-size: .88rem; text-decoration: none; transition: background .2s, color .2s; }
.auth-ghost:hover { background: #fff; color: var(--brand, #EF3035); }
.auth-main { padding: 2.5rem 2.25rem; }
.auth-main h1 { font-size: 1.7rem; margin: 0 0 .4rem; }
.auth-sub { color: #666; margin: 0 0 1.5rem; }
.auth-alert { background: #fffaeb; border: 1px solid #fedf89; color: #93370d; padding: .8rem 1rem; border-radius: .8rem; margin-bottom: 1.25rem; font-size: .9rem; }
.auth-field { margin-bottom: 1.1rem; }
.auth-field label { display: block; font-size: .82rem; font-weight: 600; color: #333; margin-bottom: .4rem; }
.auth-field input { width: 100%; height: 3rem; border: 1px solid #ddd; border-radius: .75rem; padding: 0 1rem; font: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
.auth-field input:focus { outline: none; border-color: var(--brand, #EF3035); box-shadow: 0 0 0 3px rgb(239 48 53 / .15); }
.auth-err { color: #b42318; font-size: .8rem; margin: .35rem 0 0; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .25rem 0 1.4rem; font-size: .88rem; flex-wrap: wrap; }
.auth-row a, .auth-foot a { color: var(--brand, #EF3035); font-weight: 600; text-decoration: none; }
.auth-row a:hover, .auth-foot a:hover { text-decoration: underline; }
.auth-check { display: inline-flex; align-items: center; gap: .5rem; color: #444; }
.auth-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand, #EF3035); }
.auth-btn { width: 100%; height: 3rem; border: 0; border-radius: .75rem; background: var(--brand, #EF3035); color: #fff; font: 600 1rem Inter, sans-serif; cursor: pointer; transition: transform .15s, box-shadow .2s; }
.auth-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 24px -14px rgb(239 48 53 / .8); }
.auth-foot { text-align: center; color: #666; margin: 1.25rem 0 0; font-size: .9rem; }
@media (max-width: 800px) { .auth-card { grid-template-columns: 1fr; } .auth-side { padding: 1.75rem 1.5rem; } .auth-side ul { margin-bottom: 1.25rem; } .auth-main { padding: 1.75rem 1.5rem; } .auth-wrap { padding: 1.25rem .75rem 2.5rem; } }

/* register form (older markup): same softer look */
.fe-legacy form input:not([type=checkbox]):not([type=radio]):not([type=file]), .fe-legacy form select, .fe-legacy form textarea { border-radius: .7rem !important; border-color: #ddd; transition: border-color .15s, box-shadow .15s; }
.fe-legacy form input:focus, .fe-legacy form select:focus, .fe-legacy form textarea:focus { border-color: var(--brand, #EF3035) !important; box-shadow: 0 0 0 3px rgb(239 48 53 / .15) !important; outline: none; }
.fe-legacy form button[type=submit] { border-radius: .75rem !important; }
.fe-legacy form .rounded-sm { border-radius: .9rem !important; }

/* ===== Member area (dashboard + edit details) ===== */
.mem-wrap { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.mem-hero { background: linear-gradient(180deg, #f3f0f0, #ece8e8); border-bottom: 1px solid #e6e1e1; padding: 2rem 0; }
.mem-hero .mem-wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.mem-hero h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin: .1rem 0; }
.mem-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand, #EF3035); margin: 0; }
.mem-eyebrow a { color: inherit; text-decoration: none; }
.mem-sub { color: #666; margin: .2rem 0 0; }
.mem-id { display: flex; align-items: center; gap: 1.1rem; }
.mem-avatar { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .4); flex: none; }
.mem-avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--brand, #EF3035); color: #fff; font: 700 1.6rem Inter, sans-serif; }
.mem-body { padding: 2rem 0 3.5rem; background: #fff; }
.mem-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
.mem-side { display: grid; gap: 1.25rem; }
.mem-card { background: #fff; border: 1px solid #eceaea; border-radius: 1.1rem; padding: 1.5rem; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.mem-card h2, .mem-h2 { font-size: 1.05rem; margin: 0 0 1rem; }
.mem-h2 { margin-top: 1.5rem; }
.mem-dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin: 0 0 1.1rem; }
.mem-dl.one { grid-template-columns: 1fr; gap: .75rem; }
.mem-dl .wide { grid-column: 1 / -1; }
.mem-dl dt { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #999; }
.mem-dl dd { margin: .2rem 0 0; color: #222; font-weight: 500; overflow-wrap: anywhere; }
.mem-link { color: var(--brand, #EF3035); font-weight: 600; text-decoration: none; }
.mem-link:hover { text-decoration: underline; }
.mem-tag { display: inline-block; font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; margin-left: .35rem; }
.mem-tag.ok { background: #ecfdf3; color: #067647; } .mem-tag.bad { background: #fef3f2; color: #b42318; }
.mem-bar { height: .55rem; border-radius: 999px; background: #eee; overflow: hidden; }
.mem-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand, #EF3035), #ff7a7e); border-radius: inherit; }
.mem-note { color: #666; font-size: .85rem; margin: .6rem 0 0; }
.mem-links { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .1rem; }
.mem-links a { display: block; padding: .55rem .2rem; color: #222; text-decoration: none; border-bottom: 1px solid #f3f0f0; }
.mem-links a:hover { color: var(--brand, #EF3035); }
.mem-logout { width: 100%; border: 1px solid #f1c9cb; background: #fff; color: var(--brand, #EF3035); border-radius: .7rem; padding: .6rem; font: 600 .9rem Inter, sans-serif; cursor: pointer; }
.mem-logout:hover { background: #fdeeee; }
.mem-btn { display: inline-flex; align-items: center; border: 1.5px solid var(--brand, #EF3035); color: var(--brand, #EF3035); background: #fff; border-radius: .75rem; padding: .7rem 1.3rem; font: 600 .92rem Inter, sans-serif; text-decoration: none; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.mem-btn:hover { background: var(--brand, #EF3035); color: #fff; }
.mem-btn.solid { background: var(--brand, #EF3035); color: #fff; margin-top: .5rem; }
.mem-btn.solid:hover { box-shadow: 0 12px 22px -12px rgb(239 48 53 / .8); }
.mem-form .mem-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mem-f { margin-bottom: 1rem; }
.mem-f label, .mem-photo label { display: block; font-size: .8rem; font-weight: 600; color: #333; margin-bottom: .35rem; }
.mem-f input, .mem-f select, .mem-f textarea { width: 100%; border: 1px solid #ddd; border-radius: .7rem; padding: .7rem .85rem; font: inherit; background: #fff; transition: border-color .15s, box-shadow .15s; }
.mem-f input:focus, .mem-f select:focus, .mem-f textarea:focus { outline: none; border-color: var(--brand, #EF3035); box-shadow: 0 0 0 3px rgb(239 48 53 / .15); }
.mem-f input:disabled { background: #f7f5f5; color: #888; }
.mem-hint { color: #888; font-size: .76rem; margin: .3rem 0 0; }
.mem-err { color: #b42318; font-size: .8rem; margin: .3rem 0 0; }
.mem-ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; border-radius: .8rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.mem-photo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid #f1eeee; }
.mem-chk { display: flex !important; align-items: center; gap: .4rem; font-weight: 500 !important; margin-top: .4rem; }
@media (max-width: 860px) { .mem-grid { grid-template-columns: 1fr; } .mem-form .mem-row, .mem-dl { grid-template-columns: 1fr; } .mem-btn { width: 100%; justify-content: center; } }

/* feature strip on tablet / small laptop: 5 tiles must fit, so drop the arrow chip and tighten spacing */
@media (min-width: 768px) and (max-width: 1099px) {
  .feature-strip > .grid > a { padding: 1rem .75rem !important; gap: .55rem !important; min-width: 0; }
  .feature-strip > .grid > a > svg { display: none; }
  .feature-strip > .grid > a > span.text-sm { font-size: .88rem; }
}

/* Certification banner: artwork is 5:2, so use that ratio at every size or the text gets cropped */
.aspect-\[16\/11\], .sm\:aspect-\[16\/10\.5\] { aspect-ratio: 5 / 2 !important; background-color: #8f1018; }

/* ===== News & Highlights: equal cards (home + /highlights) ===== */
.hl-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hl-grid { grid-template-columns: 1fr; gap: 1.1rem; } }
.hl-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid #eceaea; border-radius: 1.1rem; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.hl-card:hover, .hl-card:focus-within { transform: translateY(-5px); box-shadow: 0 20px 38px -18px rgb(16 24 40 / .35); border-color: #f3c4c6; }
.hl-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fbe9ea, #fff 55%, #f6e8e9); }
.hl-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .6s ease; }
.hl-card:hover .hl-media img { transform: scale(1.06); }
.hl-tag { position: absolute; top: .75rem; left: .75rem; background: #fff; color: var(--brand, #EF3035); font: 700 .7rem/1 Inter, sans-serif; padding: .4rem .7rem; border-radius: 999px; box-shadow: 0 4px 12px rgb(0 0 0 / .15); }
.hl-body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.25rem 1.2rem; }
.hl-meta { font-size: .78rem; color: #888; margin: 0 0 .4rem; }
.hl-title { font: 700 1.05rem/1.4 var(--font-display, inherit); margin: 0 0 .55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.hl-title a { color: #111; text-decoration: none; transition: color .2s; }
.hl-card:hover .hl-title a { color: var(--brand, #EF3035); }
.hl-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.hl-link:focus-visible { outline: none; }
.hl-card:focus-within { outline: 2px solid var(--brand, #EF3035); outline-offset: 2px; }
.hl-sum { font-size: .88rem; line-height: 1.6; color: #666; margin: 0 0 1rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.8em; }
.hl-cta { margin-top: auto; padding-top: .85rem; border-top: 1px solid #f1eeee; font: 600 .88rem Inter, sans-serif; color: var(--brand, #EF3035); display: flex; align-items: center; justify-content: space-between; }
.hl-cta i { font-style: normal; display: inline-flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: 50%; background: #fdeeee; transition: transform .25s, background-color .25s, color .25s; }
.hl-card:hover .hl-cta i { background: var(--brand, #EF3035); color: #fff; transform: translateX(4px); }
.hl-detail { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .hl-detail { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; } .hl-detail-img { position: sticky; top: 6rem; } }
.hl-detail-img { width: 100%; border-radius: 1rem; border: 1px solid #eceaea; box-shadow: 0 18px 36px -20px rgb(16 24 40 / .3); }
@media (prefers-reduced-motion: reduce) { .hl-card, .hl-media img, .hl-cta i { transition: none; } .hl-card:hover { transform: none; } }

/* bullet dot from ContentBlock::bodyHtml: the arbitrary Tailwind class is missing in the stale build, so centre the dot on the first text line here */
li.flex.items-start > span.w-1\.5.h-1\.5.rounded-full { margin-top: calc(.8em - 3px) !important; }
/* list links get .5rem tap-target padding, so push the dot down by the same amount */
li.flex.items-start:has(> a) > span.w-1\.5.h-1\.5.rounded-full { margin-top: calc(.8em + 4px) !important; }
@media (max-width: 600px) { .hl-media { aspect-ratio: 4 / 3; } }
.hl-meta { min-height: 1.2em; }

/* ===== News & Highlights v2: richer cards + detail page ===== */
.hl-media { background: #f3eeee; isolation: isolate; }
.hl-media::before { content: ""; position: absolute; inset: -20px; background: var(--hl-bg, linear-gradient(135deg, #fbe9ea, #fff)) center / cover; filter: blur(22px) saturate(1.2); opacity: .55; z-index: -1; transform: scale(1.1); }
.hl-media img { position: relative; padding: .6rem; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .18)); }
.hl-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgb(0 0 0 / .06)); pointer-events: none; }
.hl-card { box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.hl-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand, #EF3035); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: 3; }
.hl-card:hover::before, .hl-card:focus-within::before { transform: scaleX(1); }
.hl-foot { margin-top: auto; padding-top: .85rem; border-top: 1px solid #f1eeee; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.hl-foot .hl-cta { margin: 0; padding: 0; border: 0; gap: .5rem; justify-content: flex-end; }
.hl-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.hl-badges b { font: 700 .66rem/1 Inter, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: #555; background: #f3f1f1; border-radius: 999px; padding: .35rem .55rem; }

.hl-hero { background: linear-gradient(180deg, #f6f1f1, #eee8e8); border-bottom: 1px solid #e6e1e1; padding: 2.5rem 0 2.2rem; }
@media (min-width: 768px) { .hl-hero { padding: 3.2rem 0 2.8rem; } }
.hl-detail-img { display: block; position: relative; overflow: hidden; border-radius: 1.1rem; background: #f3eeee; isolation: isolate; box-shadow: 0 22px 44px -22px rgb(16 24 40 / .4); border: 1px solid #eceaea; }
.hl-detail-img::before { content: ""; position: absolute; inset: -24px; background: var(--hl-bg) center / cover; filter: blur(26px); opacity: .55; z-index: -1; }
.hl-detail-img img { display: block; width: 100%; height: auto; padding: .8rem; }
.hl-prose { color: rgb(0 0 0 / .72); line-height: 1.75; font-size: 1.02rem; }
.hl-prose ul { margin-bottom: 1rem; }
.hl-atts { margin-top: 2rem; padding: 1.25rem 1.25rem 1rem; border-radius: 1rem; background: #faf7f7; border: 1px solid #efe9e9; }
.hl-atts h2 { font: 700 1.05rem/1.3 var(--font-display, inherit); margin: 0 0 .8rem; color: #111; }
.hl-atts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.hl-atts li a { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; background: #fff; border: 1px solid #eceaea; border-radius: .8rem; text-decoration: none; color: #111; transition: transform .2s, box-shadow .2s, border-color .2s; }
.hl-atts li a:hover { transform: translateX(4px); border-color: #f3c4c6; box-shadow: 0 10px 22px -14px rgb(16 24 40 / .35); }
.hl-att-ico { flex: none; width: 2.3rem; height: 2.3rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; background: #fdeeee; color: var(--brand, #EF3035); }
.hl-att-ico svg { width: 1.2rem; height: 1.2rem; }
.hl-att-ico.is-video { background: #fff1e6; color: #d9480f; } .hl-att-ico.is-social { background: #e8f1fb; color: #1d6fb8; } .hl-att-ico.is-link { background: #eef2f1; color: #3d5a52; }
.hl-att-txt { flex: 1; min-width: 0; font-weight: 600; font-size: .94rem; line-height: 1.35; }
.hl-atts li em { font: 700 .66rem/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #888; font-style: normal; }
.hl-atts li i { font-style: normal; color: var(--brand, #EF3035); transition: transform .2s; } .hl-atts li a:hover i { transform: translateX(3px); }
@media (min-width: 900px) { .hl-detail-img { position: sticky; top: 6rem; } }
/* any data: long words, many rows, missing fields must not break the layout */
.hl-title, .hl-sum, .hl-meta, .hl-att-txt, .hl-prose, .hl-hero h1 { overflow-wrap: anywhere; }
.hl-prose img { max-width: 100%; height: auto; }
.hl-prose table { display: block; overflow-x: auto; max-width: 100%; }
.hl-atts ul { max-height: 34rem; overflow-y: auto; padding-right: .25rem; }
.hl-att-plain { display: flex; align-items: center; gap: .8rem; padding: .65rem .8rem; background: #fff; border: 1px dashed #e4dede; border-radius: .8rem; color: #444; }

/* ===== News & Highlights v3: tighter, cleaner cards ===== */
.hl-grid { gap: 1.4rem; }
.hl-card { border-radius: 1.25rem; border-color: #ece7e7; background: #fff; }
.hl-card:hover, .hl-card:focus-within { transform: translateY(-6px); box-shadow: 0 26px 44px -22px rgb(16 24 40 / .38); }
.hl-media { aspect-ratio: 4 / 3; background: #f6f2f2; }
.hl-media::before { opacity: .38; filter: blur(26px) saturate(1.1); }
.hl-media::after { background: linear-gradient(180deg, rgb(0 0 0 / .05) 0, transparent 30%, transparent 75%, rgb(0 0 0 / .06) 100%); }
.hl-media img { padding: .55rem; filter: drop-shadow(0 6px 12px rgb(0 0 0 / .16)); border-radius: .9rem; }
.hl-tag { background: var(--brand, #EF3035); color: #fff; box-shadow: 0 6px 14px -4px rgb(239 48 53 / .55); letter-spacing: .02em; top: .8rem; left: .8rem; z-index: 2; }
.hl-body { padding: 1.05rem 1.25rem 1.15rem; gap: 0; }
.hl-meta { font: 600 .72rem/1.2 Inter, sans-serif; text-transform: uppercase; letter-spacing: .07em; color: #9a8f8f; margin: 0 0 .5rem; min-height: 1em; }
.hl-title { font-size: 1.12rem; line-height: 1.35; letter-spacing: -.01em; min-height: 3em; margin-bottom: .5rem; }
.hl-sum { font-size: .9rem; line-height: 1.6; color: #6b6464; min-height: 4.8em; margin-bottom: 1.1rem; }
.hl-foot { padding-top: .9rem; }
.hl-badges b { background: #fdeeee; color: var(--brand, #EF3035); }
.hl-cta { font-size: .9rem; }
.hl-all { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff; background: var(--brand, #EF3035); padding: .65rem 1.2rem; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 20px -10px rgb(239 48 53 / .6); transition: gap .2s, transform .2s, box-shadow .2s; }
.hl-all:hover { gap: .8rem; transform: translateY(-2px); box-shadow: 0 14px 24px -10px rgb(239 48 53 / .7); }
@media (max-width: 600px) { .hl-title, .hl-sum { min-height: 0; } .hl-body { padding: 1rem 1.1rem 1.1rem; } }
.hl-foot { justify-content: flex-end; }
.hl-detail-img img { border-radius: 1rem; box-shadow: 0 10px 24px -10px rgb(16 24 40 / .35); }

/* ===== Mega menu (top-level items with 4+ children; built from the Menus admin) ===== */
@media (min-width: 1280px) {
  .site-header nav[aria-label="Main"] { align-self: stretch; }
  .site-header nav[aria-label="Main"] > .dropdown.mega { position: static; display: flex; align-items: center; }
  .mega-panel { position: absolute; left: 0; right: 0; top: 100%; padding: 0 1.5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; pointer-events: none; }
  .dropdown.mega:hover > .mega-panel, .dropdown.mega:focus-within > .mega-panel { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .mega-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #fff; border: 1px solid #efecec; border-radius: 1.1rem; box-shadow: 0 34px 60px -26px rgb(16 24 40 / .45); overflow: hidden; font-family: Inter, sans-serif; white-space: normal; }
  .mega-intro { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; padding: 1.6rem 1.5rem; min-height: 190px; color: #fff; background: linear-gradient(145deg, #EF3035 0%, #b9181d 100%); overflow: hidden; }
  .mega-intro::before { content: ""; position: absolute; right: -50px; top: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgb(255 255 255 / .12); }
  .mega-intro::after { content: ""; position: absolute; right: 24px; bottom: -40px; width: 110px; height: 110px; border-radius: 50%; background: rgb(255 255 255 / .1); }
  .mega-eyebrow { position: relative; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
  .mega-intro strong { position: relative; font: 700 1.5rem/1.2 var(--font-display, inherit); letter-spacing: -.01em; }
  .mega-all { position: relative; align-self: flex-start; margin-top: .4rem; color: #fff !important; font-weight: 600; font-size: .85rem; padding: .4rem .85rem; border: 1px solid rgb(255 255 255 / .55); border-radius: 999px; text-decoration: none; transition: background-color .2s, color .2s; }
  .mega-all:hover { background: #fff; color: var(--brand, #EF3035) !important; }
  .mega-links { list-style: none; margin: 0; padding: 1.1rem 1.2rem; display: grid; grid-auto-flow: column; column-gap: 1.2rem; row-gap: .1rem; align-content: start; }
  .mega-links li { min-width: 0; }
  .mega-links a { display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: .6rem; color: #2a2a2a; font-size: .9rem; line-height: 1.35; font-weight: 500; text-decoration: none; transition: background-color .15s, color .15s, transform .15s; }
  .mega-links a:hover, .mega-links a:focus-visible { background: #fdf0f0; color: var(--brand, #EF3035); transform: translateX(3px); outline: none; }
  .mega-dot { flex: none; width: .4rem; height: .4rem; border-radius: 50%; background: #e3c6c7; transition: background-color .15s, transform .15s; }
  .mega-links a:hover .mega-dot { background: var(--brand, #EF3035); transform: scale(1.35); }
  .mega-txt { flex: 1; min-width: 0; }
  .mega-links em { flex: none; font: 700 .62rem/1 Inter, sans-serif; letter-spacing: .06em; color: #999; font-style: normal; background: #f4f1f1; border-radius: 999px; padding: .28rem .45rem; }
  .mega-links a:hover em { background: #fff; color: var(--brand, #EF3035); }
}
@media (min-width: 1280px) and (max-width: 1450px) { .mega-inner { max-width: 980px; grid-template-columns: 210px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .mega-panel, .mega-links a, .mega-dot { transition: none; } }

/* mega menu: no dead zone between the nav button and the panel (hover area spans the full header height) + short close delay */
@media (min-width: 1280px) {
  .site-header nav[aria-label="Main"] { align-items: stretch !important; }
  .site-header nav[aria-label="Main"] > a, .site-header nav[aria-label="Main"] > .dropdown { display: flex; align-items: center; }
  .site-header nav[aria-label="Main"] > a { padding-top: 0; padding-bottom: 0; }
  .site-header nav[aria-label="Main"] > .dropdown > button { padding-top: .55rem; padding-bottom: .55rem; }
  .mega-panel { transition: opacity .18s ease, transform .18s ease, visibility 0s linear .25s; }
  .dropdown.mega:hover > .mega-panel, .dropdown.mega:focus-within > .mega-panel { transition-delay: 0s; }
  .mega-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
}

/* Header brand name (tagline highlighted, PHO INDIA text removed) */
.brand-tagline { font-size: .8rem; font-weight: 600; line-height: 1.25; color: #1f2937; letter-spacing: -.005em; }
@media (min-width: 768px) { .brand-tagline { font-size: 1rem; font-weight: 700; } }

/* ===== Home: certification programme ===== */
.cert-section { background: linear-gradient(180deg, #fff 0%, #fdf6f6 100%); }
.cert-card { border-radius: 1.25rem; box-shadow: 0 30px 50px -28px rgb(239 48 53 / .45), 0 0 0 1px rgb(0 0 0 / .05); transition: transform .35s ease, box-shadow .35s ease; }
.cert-card:hover { transform: translateY(-3px); box-shadow: 0 36px 56px -26px rgb(239 48 53 / .55), 0 0 0 1px rgb(0 0 0 / .05); }
.cert-copy h2 { letter-spacing: -.02em; }
.cert-copy > p:nth-of-type(1) { padding-left: .85rem; border-left: 3px solid var(--brand, #EF3035); line-height: 1.35; }
.cert-copy > p:nth-of-type(2) { font-size: 1.05rem; line-height: 1.75; }
.cert-btn { box-shadow: 0 14px 26px -14px rgb(239 48 53 / .75); transition: transform .2s ease, box-shadow .2s ease, gap .2s ease, opacity .2s; }
.cert-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgb(239 48 53 / .85); }
@media (max-width: 1023px) { .cert-copy { text-align: left; } .cert-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .cert-card, .cert-btn { transition: none; } .cert-card:hover, .cert-btn:hover { transform: none; } }

.brand-tagline-main { display: block; color: #111; }
.brand-tagline-sub { display: block; margin-top: .15rem; font-size: .62rem; font-weight: 500; letter-spacing: .02em; color: rgb(0 0 0 / .6); }
@media (min-width: 768px) { .brand-tagline-sub { font-size: .72rem; } }
footer .brand-tagline { font-size: .95rem; font-weight: 700; }
footer .brand-tagline-sub { font-size: .7rem; }

/* ===== Footer: 5 categorised columns ===== */
.footer-cols { display: grid; }
@media (min-width: 1024px) { .footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; } }

/* ===== Home: core plan bullets sit on the first text line ===== */
.plan-li { align-items: flex-start !important; }
li.plan-li.flex.items-start > a { padding: .2rem 0 !important; line-height: 1.25rem !important; }
li.plan-li.flex.items-start:has(> a) > span.w-1\.5.h-1\.5.rounded-full, li.plan-li.flex.items-start > span.w-1\.5.h-1\.5.rounded-full { margin-top: .6375rem !important; flex-shrink: 0; }

/* ===== Home: office bearer cards, equal size, photo always fills the card ===== */
#bearers .team-card > div { aspect-ratio: 3 / 4; height: auto; }
#bearers .team-card > div > div:first-child { position: absolute; inset: 0; aspect-ratio: auto; }
#bearers .team-card > div > div:first-child img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
#bearers .team-card > div > div:last-child { padding: 4.5rem 1.2rem 1.25rem; background: linear-gradient(to top, rgb(10 10 12 / .94) 0%, rgb(10 10 12 / .7) 48%, transparent 100%); z-index: 1; }
#bearers .team-card p:nth-of-type(2) { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
#bearers .team-card p:nth-of-type(3) { margin-top: .25rem; }
#bearers .team-card > div > div:first-child::before { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); border-radius: inherit; z-index: 1; pointer-events: none; }