/* kattamaipu.com styles. Tokens follow the Kattamaipu Style Guide (Sept 2026 mockup).
   Cards are used for sets people compare or choose from (services, programmes, articles, tools).
   Running text, steps and FAQs sit on open space with thin rules. */

@font-face { font-family: "Source Serif 4"; font-weight: 500; font-display: swap; src: url(/assets/fonts/source-serif-4-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 600; font-display: swap; src: url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: italic; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }

:root {
  --ink: #16201B;          /* body text, dark sections */
  --ink-2: #54594D;        /* secondary text (7.2:1 on white) */
  --paper: #FFFFFF;
  --paper-2: #F6F4EC;      /* hero and band backgrounds */
  --line: #E1DECF;         /* borders, dividers */
  --green: #15603E;        /* buttons, links, accents */
  --green-dark: #0E4A30;   /* hover */
  --green-pale: #E6EFE6;   /* callouts, tags */
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --radius: 12px;
  --measure: 68ch;
  --gutter: clamp(1rem, 3.5vw, 2.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--font-body); }
img { max-width: 100%; height: auto; }
a { color: var(--green); text-underline-offset: 0.18em; }
a:hover { color: var(--green-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid rgba(21, 96, 62, .5); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem 1rem; z-index: 60; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.18; letter-spacing: -0.005em; margin: 1.8em 0 .55em; color: var(--ink); }
h1 { font-size: clamp(1.9rem, 4.6vw, 3.1rem); font-weight: 500; line-height: 1.12; margin-top: 0; }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 500; line-height: 1.2; }
h3 { font-size: 1.2rem; line-height: 1.3; }
p, ul, ol { margin: 0 0 1em; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; padding-block: .9rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font: 600 1.2rem var(--font-head); color: var(--ink); text-decoration: none; }
.brand svg { flex: none; }
.site-header ul, .site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; padding: 0; margin: 0; }
.site-header nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; padding-block: .5rem; display: inline-block; }
.site-header nav a[aria-current="page"], .site-header nav a:hover { color: var(--green); }
.site-header nav a.nav-contact { background: var(--green); color: #fff; border-radius: 999px; padding: .5rem 1.2rem; }
.site-header nav a.nav-contact:hover { background: var(--green-dark); color: #fff; }

/* Footer */
.site-footer { background: var(--ink); color: rgba(255,255,255,.82); margin-top: 0; padding-block: 3.5rem 2rem; font-size: .95rem; }
/* Thin rule, content width only, between the closing call-to-action band and the footer (both dark) */
.site-footer > .wrap { position: relative; }
.site-footer.after-cta > .wrap::before { content: ""; position: absolute; top: -3.5rem; left: var(--gutter); right: var(--gutter); border-top: 1px solid rgba(255,255,255,.16); }
.site-footer a { color: rgba(255,255,255,.86); }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: #fff; }
.site-footer .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; }
.site-footer h2 { font: 600 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.55); margin: 0 0 1rem; }
.site-footer .footer-links { flex-direction: column; gap: .55rem; }
.site-footer .legal { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.5rem; padding-top: 1.25rem; color: rgba(255,255,255,.55); font-size: .85rem; }
.small { font-size: .875rem; }

/* Page structure */
.hero { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.hero .wrap { padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.25rem, 6vw, 4.5rem); }
.post { max-width: 1120px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0; }
.page-head { max-width: 860px; margin-bottom: 2.25rem; }
.section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.section.band { background: var(--paper-2); border-block: 1px solid var(--line); }
.section > .wrap > h2:first-child, .section h2.section-title { margin-top: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .07em; font-size: .8rem; font-weight: 600; color: var(--green); margin-bottom: .9rem; }
.lead { font-size: clamp(1.1rem, 1.8vw, 1.2rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.prose { max-width: var(--measure); } .page-wide .blk > :not(.cards) { max-width: var(--measure); }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 1.5rem 0; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
.prose th { font: 600 .8rem var(--font-head); text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--green-pale); border-radius: var(--radius); color: var(--ink); }
.table-scroll { overflow-x: auto; }

/* Cards: for sets people compare or choose from */
.cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 1.5rem 0 0; padding: 0; list-style: none; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.card h3 { margin: 0; font-size: 1.15rem; }
.card p { margin: 0; color: var(--ink-2); font-size: .97rem; }
.card .card-link { margin-top: auto; padding-top: .6rem; font-weight: 600; font-size: .95rem; text-decoration: none; }
.card .card-link::after { content: " \2192"; }
a.card { color: inherit; text-decoration: none; transition: border-color .15s; }
a.card:hover { border-color: var(--green); }
.tag { align-self: flex-start; display: inline-block; font-size: .78rem; font-weight: 600; padding: .25rem .75rem; border-radius: 999px; background: var(--green-pale); color: var(--green-dark); }
.callout { background: var(--green-pale); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.callout > :last-child { margin-bottom: 0; }

/* Numbered steps: open layout, no boxes */
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.steps li { counter-increment: step; border-top: 2px solid var(--green); padding-top: 1rem; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 600 .85rem var(--font-head); color: var(--green); margin-bottom: .4rem; }
.steps strong { display: block; font: 600 1.15rem var(--font-head); margin-bottom: .3rem; }

/* FAQ: open rules, expandable */
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
.faq details p { margin: .6rem 0 0; color: var(--ink-2); }

/* Buttons and calls to action */
.button { display: inline-flex; align-items: center; gap: .5rem; background: var(--green); color: #fff; padding: .85rem 1.6rem; border: 1px solid var(--green); border-radius: 999px; text-decoration: none; font: 600 .95rem var(--font-body); cursor: pointer; min-height: 44px; }
.button:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; text-decoration: none; }
.button.secondary { background: transparent; color: var(--ink); border-color: #c9c5b6; }
.button.secondary:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.cta { background: var(--ink); color: #fff; margin-top: clamp(3rem, 8vw, 5rem); }
.cta .wrap { padding-block: clamp(3rem, 8vw, 5rem); text-align: center; }
.cta h2 { color: #fff; margin: 0 auto .75rem; max-width: 24ch; }
.cta p { color: rgba(255,255,255,.75); margin: 0 auto; max-width: 52ch; }
.cta .cta-actions { justify-content: center; margin-top: 2rem; }
.cta .button { background: #fff; color: var(--ink); border-color: #fff; }
.cta .button:hover { background: var(--paper-2); }
.cta .button.secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.post-end { max-width: var(--measure); margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Forms */
.enquiry { max-width: 560px; }
.enquiry label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .3rem; }
.enquiry input[type=text], .enquiry input[type=email], .enquiry input[type=tel], .enquiry textarea {
  width: 100%; font: inherit; padding: .7rem .85rem; border: 1px solid #c9c5b6; border-radius: 8px; background: #fff; min-height: 44px; }
.enquiry input:focus, .enquiry textarea:focus { border-color: var(--green); }
.enquiry .optional { font-weight: 400; color: var(--ink-2); }
.enquiry .consent-line label { font-weight: 400; display: flex; gap: .6rem; align-items: flex-start; }
.enquiry .consent-line input { margin-top: .35rem; }
.hp { position: absolute; left: -9999px; }
.form-status { color: var(--ink-2); }

/* Consent banner */
.consent { position: fixed; inset: auto 1rem 1rem 1rem; max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: .95rem; box-shadow: 0 8px 28px rgba(22,32,27,.12); z-index: 70; }
.consent p { margin: .25rem 0; }
.consent .button { padding: .55rem 1.2rem; }

/* Article lists */
.post-list { list-style: none; padding: 0; max-width: var(--measure); }
.post-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
.post-list a { font: 600 1.25rem var(--font-head); color: var(--ink); text-decoration: none; }
.post-list a:hover { color: var(--green); }

@media (max-width: 760px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .site-header nav ul { gap: .1rem 1.1rem; }
}

/* Placeholders: [text in square brackets] still to fill. Highlighted on purpose; a live build lists them. */
mark.todo { background: #FFF1B8; color: #5A4500; padding: 0 .2em; border-radius: 3px; }
.page-cta { margin-top: 2.5rem; }
.faq { margin-top: 3rem; }
.faq h2 { margin-top: 0; }
@media (max-width: 640px) { .prose table { display: block; overflow-x: auto; } }

/* ---------- Inner pages: hero band, body with side box ---------- */
.page-hero { background: var(--paper-2); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; border-radius: 50%; border: 48px solid rgba(21, 96, 62, .06); pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; padding-block: clamp(2.25rem, 6vw, 4.25rem) clamp(2rem, 5vw, 3.5rem); }
.page-hero h1 { max-width: 22ch; }
.page-hero .eyebrow a { color: inherit; text-decoration: none; }
.page-hero .lead { margin-bottom: 0; }
.facts { list-style: none; padding: 0; margin: 1.75rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.facts li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; font-size: .88rem; color: var(--ink-2); }
.page-body { padding-top: clamp(2rem, 5vw, 3.5rem); }
.page-body.with-aside { display: grid; gap: 3.5rem; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
.page-main > .prose:first-child > .blk:first-child, .page-main > .prose > :first-child { margin-top: 0; }
.page-aside { position: sticky; top: 96px; }
.glance { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 10px 30px rgba(22, 32, 27, .06); }
.glance-title { font: 600 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--green); margin: 0 0 .75rem; }
.glance ul { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.glance li { padding: .6rem 0 .6rem 1.6rem; border-bottom: 1px solid var(--line); font-size: .95rem; position: relative; }
.glance li::before { content: ""; position: absolute; left: .2rem; top: 1.05rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.glance .button { width: 100%; justify-content: center; text-align: center; }
.glance-alt { margin: .9rem 0 0; font-size: .88rem; color: var(--ink-2); text-align: center; }
@media (min-width: 961px) { .page-hero .facts { display: none; } }
@media (max-width: 960px) { .page-body.with-aside { grid-template-columns: 1fr; gap: 0; } .page-aside { position: static; margin-top: 2.5rem; } .page-cta { display: none; } .glance ul { display: none; } }

/* ---------- Section looks ---------- */
.blk { margin: 0 0 3rem; }
.blk h2 { margin-top: 0; }
/* Ticked lists */
.blk-is-this-for-you ul, .blk-what-you-get ul, .blk-what-participants-practise ul { list-style: none; padding: 0; }
.blk-is-this-for-you li, .blk-what-you-get li, .blk-what-participants-practise li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
.blk-is-this-for-you li::before, .blk-what-you-get li::before, .blk-what-participants-practise li::before {
  content: ""; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--green-pale); }
.blk-is-this-for-you li::after, .blk-what-you-get li::after, .blk-what-participants-practise li::after {
  content: ""; position: absolute; left: .44rem; top: .42rem; width: .3rem; height: .58rem; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* "Is this for you?" as a tinted panel */
.blk-is-this-for-you { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 3vw, 2rem); }
.blk-is-this-for-you li::before { background: #fff; }
.blk-is-this-for-you ul { margin-bottom: 0; }
/* Numbered steps with a line */
.blk-how-it-works ol { list-style: none; counter-reset: s; padding: 0; position: relative; }
.blk-how-it-works ol::before { content: ""; position: absolute; left: 1.05rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--line); }
.blk-how-it-works li { counter-increment: s; position: relative; padding: .1rem 0 1.4rem 3.25rem; }
.blk-how-it-works li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--green); color: #fff; font: 600 .95rem/2.2rem var(--font-head); text-align: center; }
.blk-how-it-works li strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
/* Outcome panel */
.blk-what-changes-afterwards { background: var(--green); color: #fff; border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.blk-what-changes-afterwards h2 { color: #fff; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-body); }
.blk-what-changes-afterwards p { font: 500 clamp(1.15rem, 1.8vw, 1.35rem)/1.5 var(--font-head); margin: 0; }
.blk-what-changes-afterwards mark.todo { color: #5A4500; }
/* Tables as tidy panels */
.blk table { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.blk th { background: var(--green-pale); color: var(--green-dark); }
.blk td:first-child { font-weight: 600; }
.blk tr:last-child td { border-bottom: 0; }
/* Independence note on supplier audits */
.blk-independent-by-design { border-top: 2px solid var(--green); padding-top: 1.25rem; }
/* Who should attend */
.blk-who-should-attend p { font-size: 1.05rem; }
/* Programme outline (internal auditor) */
.blk-programme-outline ul { list-style: none; padding: 0; }
.blk-programme-outline li { padding: .9rem 0 .9rem 0; border-bottom: 1px solid var(--line); }
.blk-programme-outline li strong { color: var(--green); font-family: var(--font-head); margin-right: .3rem; }
.after-cards { margin-top: 1.5rem; }

/* ---------- Articles ---------- */
.post { max-width: 760px; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) var(--gutter) 0; }
.post-hero h1 { max-width: 26ch; }
.post-meta { color: var(--ink-2); font-size: .95rem; margin: 0; }
.post-image { display: block; width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 2rem; border: 1px solid var(--line); }
.post .prose { max-width: none; font-size: 1.1rem; line-height: 1.7; }
.post .prose img { border-radius: 8px; margin: 1rem 0; }
.post .prose h2 { margin-top: 2em; }
.post-end.callout { margin-top: 3rem; border-top: 0; padding: 1.5rem; }
.post-cards img { width: calc(100% + 3rem); max-width: none; margin: -1.5rem -1.5rem .5rem; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
.post-cards .card { overflow: hidden; }
.card-date { margin-top: auto; padding-top: .5rem; font-size: .85rem; color: var(--ink-2); }
.draft-banner { display: inline-block; margin: 1rem 0 0; background: #FFF1B8; color: #5A4500; border-radius: 8px; padding: .5rem .9rem; font-size: .9rem; }

/* ---------- Articles: list, chips, featured, cards ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; }
.chips a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: .92rem; background: #fff; min-height: 40px; }
.chips a:hover { border-color: var(--green); color: var(--green); }
.chips a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #fff; }
.chip-count { font-size: .78rem; opacity: .7; }
.featured-post { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; background: #fff; margin-bottom: 2rem; transition: border-color .15s; }
.featured-post:hover { border-color: var(--green); }
.featured-post img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.featured-body { padding: clamp(1.25rem, 3vw, 2.25rem); display: flex; flex-direction: column; gap: .75rem; justify-content: center; }
.featured-title { font: 500 clamp(1.4rem, 2.4vw, 1.85rem)/1.2 var(--font-head); }
.featured-desc { color: var(--ink-2); }
@media (max-width: 760px) { .featured-post { grid-template-columns: 1fr; } }
.card-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.tag-draft { background: #FFF1B8; color: #5A4500; }
.card-fallback { display: flex; align-items: center; justify-content: center; gap: .6rem; width: calc(100% + 3rem); margin: -1.5rem -1.5rem .5rem; aspect-ratio: 16 / 9; background: var(--green-pale); color: var(--green-dark); font: 600 1rem var(--font-head); border-radius: var(--radius) var(--radius) 0 0; }
.card-fallback svg { width: 34px; height: 34px; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feed-note { margin-top: 2rem; color: var(--ink-2); } .show-more { margin: 1.75rem 0 0; text-align: center; }

/* ---------- Article page: share, author, related ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .95rem; color: var(--ink-2); }
.share span { margin-right: .3rem; }
.share-btn { display: inline-flex; align-items: center; min-height: 40px; padding: .4rem 1rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 500; }
.share-btn:hover { border-color: var(--green); color: var(--green); }
.author-box { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); }
.author-box img, .author-initials { width: 88px; height: 88px; border-radius: 50%; flex: none; object-fit: cover; }
.author-initials { display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; font: 600 1.5rem var(--font-head); }
.author-box p { margin: 0 0 .4rem; font-size: .97rem; }
.author-name { font: 600 1.1rem var(--font-head) !important; }
.related { margin-top: 3rem; }
.related h2 { margin-top: 0; font-size: 1.35rem; }
.related .cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.further-reading { margin-top: 3rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); } .page-body:not(.with-aside) .further-reading { max-width: var(--measure); }
.further-reading h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.further-reading ul { margin: 0; padding-left: 1.1rem; }
.further-reading li { margin-bottom: .5rem; }
@media (max-width: 560px) { .author-box { flex-direction: column; } }


/* Cards in a grid: same height in each row */
.cards > li { display: flex; }
.cards > li > .card { flex: 1; }
/* Related training and services: three equal columns on wider screens */
@media (min-width: 700px) { .related .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Breathing room before the footer on pages without the closing call-to-action */
.page-body { padding-bottom: clamp(3rem, 7vw, 5rem); }
.post { padding-bottom: clamp(3rem, 7vw, 5rem); }
.cta { margin-top: 0; }
.about-photo-old { float: right; width: min(240px, 40%); height: auto; margin: 0 0 1.25rem 1.75rem; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; }
@media (max-width: 560px) { .about-photo { float: none; width: 200px; margin: 0 0 1.25rem; } }
.brand img { display: block; height: 40px; width: auto; }
.site-footer .brand img { height: 32px; }
.card-fallback img { width: 34px; height: auto; }
@media (max-width: 560px) { .site-header .brand img { height: 32px; } }

/* ---------- About page ---------- */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3.5rem; align-items: center; }
.about-intro { max-width: 62ch; margin-top: 1.25rem; }
.about-portrait { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem; box-shadow: 0 10px 30px rgba(22,32,27,.06); }
.about-portrait img { display: block; width: 100%; height: auto; border-radius: 8px; }
.about-portrait figcaption { font-size: .9rem; color: var(--ink-2); padding: .75rem .25rem .25rem; line-height: 1.45; }
.about-portrait figcaption strong { color: var(--ink); font-family: var(--font-head); font-size: 1.05rem; }
.about-two { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 3rem; align-items: start; }
.about-two h2 { margin-top: 0; }
.about-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.section:not(.band) .about-panel { background: var(--paper-2); }
.about-panel h3 { margin: 0 0 1rem; font-size: 1.1rem; }
.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { position: relative; padding-left: 2rem; margin-bottom: .75rem; }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--green-pale); }
.tick-list li::after { content: ""; position: absolute; left: .44rem; top: .42rem; width: .3rem; height: .58rem; border: solid var(--green); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.band .tick-list li::before { background: #fff; }
.process-chips { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.process-chips li { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1.1rem; font-weight: 500; }
.about-why { background: var(--green); color: #fff; border-radius: var(--radius); padding: clamp(1.75rem, 4vw, 3rem); }
.about-why .eyebrow { color: rgba(255,255,255,.75); }
.about-why-text { font: 500 clamp(1.35rem, 2.6vw, 1.9rem)/1.3 var(--font-head); max-width: 34ch; margin-bottom: 1rem; }
.about-why p:last-child { max-width: 65ch; margin-bottom: 0; color: rgba(255,255,255,.88); }
.principles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.principle-no { font: 600 .85rem var(--font-head); color: var(--green); }
.about-where p { margin: 0 0 .75rem; }
.about-name { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 3rem; align-items: center; }
.about-name-mark { margin: 0; text-align: center; padding: 2.5rem 1rem 2rem; background: var(--green-pale); border-radius: var(--radius); }
.about-name-mark img { width: clamp(84px, 12vw, 120px); height: auto; display: block; margin: 0 auto 1.25rem; }
.about-name-mark figcaption { display: flex; flex-direction: column; gap: .35rem; }
.about-name-mark [lang="ta"] { font: 600 1.5rem/1.4 "Noto Sans Tamil", "Tamil Sangam MN", "Nirmala UI", "Latha", var(--font-head); color: var(--green); }
.about-name-say { font-size: .85rem; letter-spacing: .04em; color: var(--ink); opacity: .7; }
.about-name-mean { font: italic 500 1.05rem/1.4 var(--font-head); color: var(--ink); }
.results-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.home-portrait { max-width: 280px; }
td.nowrap { white-space: nowrap; }
.about-name h2 { margin-top: 0; }
@media (max-width: 860px) {
  .about-hero-grid, .about-two, .about-name { grid-template-columns: 1fr; gap: 2rem; }
  .about-portrait { max-width: 260px; }
}

/* ---------- Tools page ---------- */
.tool-feature { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2.5vw, 1.75rem); }
.tool-feature + .tool-feature { margin-top: 1.5rem; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 1.5rem; }
.tool-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); }
.tool-card .tool-body { display: flex; flex-direction: column; flex: 1; }
.tool-card .tool-shot { margin-bottom: 1rem; }
.tool-card .cta-actions { margin-top: auto; padding-top: 1rem; }
.tool-shot img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.tool-body h2 { margin: .6rem 0 .5rem; }
.tool-body .tick-list { margin: 1rem 0 0; }
.tool-uses { margin-top: 3rem; }
.tool-uses h2 { margin: 0 0 .5rem; }
.tool-licence { margin-top: 2rem; color: var(--ink-2); max-width: 75ch; }
@media (max-width: 860px) { .tool-feature { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Article boxes and figures ---------- */
.callout-box { margin: 1.75rem 0; padding: 1.1rem 1.35rem; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line); }
.callout-box > :last-child { margin-bottom: 0; }
.callout-title { font: 600 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--green); margin: 0 0 .5rem; }
.callout-tip { background: var(--green-pale); border-color: #cfe0cf; }
.callout-warning { background: #FFF6DE; border-color: #F0DFAE; }
.callout-warning .callout-title { color: #7A5800; }
.callout-key { background: #fff; border: 2px solid var(--green); }
.post-figure { margin: 2rem 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); }
.post-figure figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ink-2); text-align: center; }
.downloads { margin-top: 3rem; }
.downloads h2 { margin: 0 0 .5rem; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-top: auto !important; padding-top: .75rem; }
.dl-actions .button { padding: .65rem 1.2rem; }

/* Screen-reader only text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Mobile menu: hamburger below 760px (only when JS runs; without JS the links simply wrap) */
.nav-toggle, .header-contact { display: none; }
@media (max-width: 760px) {
  .js .site-header .wrap { flex-wrap: nowrap; gap: .75rem; }
  .js .site-header .brand { margin-right: auto; }
  .js .header-contact { display: inline-block; background: var(--green); color: #fff; border-radius: 999px; padding: .45rem 1rem; font-weight: 500; font-size: .92rem; text-decoration: none; }
  .js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .2s, background .2s; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .js .site-header nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(22,32,27,.08); }
  .js .site-header.is-open nav { display: block; }
  .js .site-header nav ul { flex-direction: column; gap: 0; padding: .5rem 1rem 1rem; }
  .js .site-header nav li { border-bottom: 1px solid var(--line); }
  .js .site-header nav li:last-child { border-bottom: 0; }
  .js .site-header nav a { display: block; padding: .85rem .25rem; font-size: 1.05rem; }
  .js .site-header nav a.nav-contact { display: none; }
}

/* Article search */
.article-search { display: flex; gap: .5rem; max-width: 560px; margin: 0 0 1.25rem; }
.article-search input { flex: 1; min-width: 0; font: inherit; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); }
.article-search input:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.article-search .button { border-radius: 999px; }
.search-status { margin: -.5rem 0 1.25rem; color: var(--ink); }
.search-status a { margin-left: .5rem; }
.is-searching .chips, .is-searching .featured-post, .is-searching .show-more { display: none; }
.post-cards li[hidden], main:not(.is-searching) .post-cards > li.is-more { display: none; }