@layer components {
  .desktop-nav { gap: 19px; margin-right: 12px; }
  .desktop-nav a { font-size: 12px; white-space: nowrap; }
  .header-cta { padding-inline: 19px; gap: 18px; }
  .mobile-nav a[aria-current="page"] { font-weight: 700; color: #467335; }
  .footer-pages { display: flex; gap: 28px; flex-wrap: wrap; padding-bottom: 30px; font-size: 12px; }
  .footer-pages a:hover { text-decoration: underline; text-underline-offset: 5px; }
  .page-hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 90% 20%,#335f43,transparent 60%),#123b2d; color: #fff; padding-block: 32px 28px; border-radius: 0 0 28px 28px; }
  .page-hero::after { content: ''; position: absolute; z-index: -1; width: 470px; height: 470px; border: 1px solid #e1ebca12; border-radius: 50%; right: -110px; top: -180px; box-shadow: 0 0 0 75px #e1ebca05,0 0 0 150px #e1ebca04; }
  .breadcrumbs { display: flex; gap: 12px; align-items: center; font-size: 11px; color: #c4d4c0; }
  .breadcrumbs a:hover { color: #fff; text-decoration: underline; }
  .page-hero-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 80px; align-items: end; padding-block: 65px 55px; }
  .page-hero .eyebrow { color: #cadcba; }
  .page-hero .eyebrow > span { background: #bed694; }
  .page-hero h1 { font-size: clamp(2.5rem,4.6vw,4.6rem); max-width: 800px; font-weight: 500; letter-spacing: -.05em; }
  .page-hero h1 em { display: block; color: #c4dca0; font-style: normal; }
  .page-hero-description { color: #d0dccb; font-size: 14px; line-height: 1.9; padding-bottom: 5px; }
  .page-hero-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid #afc69a32; padding-top: 22px; font-size: 9px; color: #c1d0b6; letter-spacing: 1px; }
  .page-hero .eyebrow, .page-hero h1, .page-hero-description { animation: hero-enter .8s cubic-bezier(.22,1,.36,1) both; }
  .page-hero h1 { animation-delay: .1s; }
  .page-hero-description { animation-delay: .2s; }
  .home-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; }
  .home-intro > div > p:not(.eyebrow) { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
  .home-intro .button { margin-top: 8px; }
  .section-action { margin-top: 32px; text-align: center; }
  .home-proof { display: grid; grid-template-columns: .85fr 1fr; gap: 100px; align-items: center; }
  .proof-photo img { width: 100%; height: 460px; object-fit: cover; border-radius: 70px 8px 8px 8px; }
  .home-proof > div > p { margin-top: 25px; font-size: 14px; color: var(--muted); }
  .home-proof-links { display: grid; margin-top: 24px; }
  .home-proof-links a { border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; padding-block: 17px; font-size: 13px; }
  .home-proof-links a:hover { color: #5b7c3b; }
  .cta-section { padding-block: 0 85px; background: #fff; }
  .cta-panel { display: flex; justify-content: space-between; align-items: center; gap: 65px; padding: 52px; border-radius: 16px; background: radial-gradient(ellipse at right,#365a39,transparent 70%),#143f32; color: #fff; }
  .cta-panel h2 { max-width: 710px; font-size: clamp(1.8rem,3vw,2.6rem); }
  .cta-panel p:not(.eyebrow) { margin-top: 18px; max-width: 650px; color: #d0dcc7; font-size: 13px; }
  .cta-panel .eyebrow { color: #c4dca0; }
  .cta-panel .eyebrow > span { background: #c4dca0; }
  .cta-panel .button { flex-shrink: 0; }
  .values-section, .sector-section, .associates-section, .engagement-section, .registration-section, .contact-guide-section { background: #f4f6ed; }
  .values-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 20px; margin-top: 40px; }
  .values-grid article { padding: 25px 20px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
  .value-index { color: #7b9855; font-size: 11px; }
  .values-grid h3 { font-size: 18px; margin-block: 27px 15px; }
  .values-grid p { font-size: 12px; color: var(--muted); }
  .sector-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin-top: 35px; }
  .sector-grid article { background: #fff; padding: 25px; border: 1px solid var(--line); border-radius: 6px; }
  .sector-grid article > span { font-size: 10px; color: #72904f; }
  .sector-grid h3 { font-size: 17px; line-height: 1.5; margin-top: 24px; }
  .commitment-grid, .engagement-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; margin-top: 35px; }
  .commitment-grid article { border-top: 2px solid #a2bb7e; padding-top: 23px; }
  .commitment-grid h3, .engagement-grid h3 { font-size: 20px; margin-bottom: 15px; }
  .commitment-grid p, .engagement-grid p { font-size: 13px; color: var(--muted); }
  .engagement-grid article { background: #fff; border-radius: 10px; padding: 28px; border: 1px solid var(--line); }
  .engagement-grid article > span { display: block; font-size: 11px; color: #72904f; margin-bottom: 30px; }
  .services-directory { display: grid; grid-template-columns: 275px minmax(0,1fr); gap: 90px; align-items: start; }
  .service-directory-nav { position: sticky; top: 125px; padding: 25px; border: 1px solid var(--line); border-radius: 10px; background: #f8faf4; }
  .service-directory-nav nav { display: grid; }
  .service-directory-nav nav a { display: flex; align-items: baseline; gap: 12px; padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 12px; }
  .service-directory-nav nav a > span { font-size: 9px; color: #738b5c; }
  .service-directory-nav nav a:hover { color: #66813e; }
  .service-directory-nav .eyebrow { font-size: 9px; }
  .service-detail { scroll-margin-top: 125px; padding-bottom: 55px; margin-bottom: 55px; border-bottom: 1px solid var(--line); }
  .service-detail:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
  .service-detail-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
  .service-detail h2 { font-size: clamp(1.8rem,3vw,2.6rem); }
  .service-detail > p { color: var(--muted); font-size: 14px; margin-top: 22px; line-height: 1.9; }
  .service-detail h3, .person-biography h3 { font-size: 15px; margin-top: 28px; letter-spacing: -.02em; }
  .scope-list { list-style: none; padding: 0; margin-block: 18px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px 22px; }
  .scope-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; }
  .scope-list svg { margin-top: 3px; color: #78994b; }
  .team-profiles { display: grid; gap: 36px; }
  .team-profile { display: grid; grid-template-columns: .65fr 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .person-identity { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; background: radial-gradient(ellipse at 80% 0,#406c46,transparent 85%),#173e31; color: #c4dca0; }
  .team-profile:nth-child(2) .person-identity { background: #e5edda; color: #27503a; }
  .team-profile:nth-child(3) .person-identity { background: #f0eddf; color: #5c6445; }
  .person-monogram { display: grid; place-items: center; font: 500 72px var(--heading); letter-spacing: -5px; width: 160px; height: 160px; border: 1px solid currentColor; border-radius: 50%; }
  .person-focus { margin-top: 23px; font-size: 12px; }
  .person-index { margin-top: 30px; font-size: 8px; letter-spacing: 2px; opacity: .7; }
  .person-biography { padding: 43px; }
  .person-biography .eyebrow { font-size: 9px; }
  .person-biography h2 { font-size: clamp(1.8rem,3vw,2.5rem); }
  .person-biography > p:not(.eyebrow) { margin-top: 22px; font-size: 14px; color: var(--muted); }
  .person-biography .scope-list { grid-template-columns: 1fr; margin-bottom: 0; }
  .associate-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; margin-top: 38px; }
  .associate-grid article { padding: 28px; background: #fff; border-radius: 8px; border-top: 3px solid #9bb778; }
  .associate-grid .eyebrow { font-size: 9px; color: var(--muted); }
  .associate-grid h3 { font-size: 22px; }
  .associate-grid p { font-size: 12px; color: var(--muted); margin-top: 15px; }
  .capability-grid { margin-top: 30px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  .capability-grid > div { display: flex; gap: 12px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; }
  .capability-grid svg { color: #75924e; margin-top: 2px; }
  .registration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 35px; }
  .registration-grid > div { border-bottom: 1px solid #d7e0cd; padding-bottom: 20px; }
  .registration-grid dt { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
  .registration-grid dd { margin: 9px 0 0; font-size: 16px; }
  .registration-grid > div:last-child { grid-column: 1 / -1; }
  .document-note { margin-top: 35px; padding: 25px 30px; background: #f3f6eb; border-left: 3px solid #9bb778; border-radius: 0 7px 7px 0; }
  .document-note h3 { font-size: 18px; margin-bottom: 12px; }
  .document-note p { font-size: 12px; color: var(--muted); line-height: 1.9; }
  .contact-guide-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; margin-top: 35px; }
  .contact-guide-grid article > span { font-size: 11px; color: #73934a; }
  .contact-guide-grid h3 { font-size: 22px; margin-block: 20px 15px; }
  .contact-guide-grid p { font-size: 13px; color: var(--muted); }
  .enquiry-help { margin-top: 40px; border-top: 1px solid #cdd9bf; padding-top: 20px; font-size: 13px; }
  .enquiry-help summary { cursor: pointer; font-weight: 600; padding-block: 6px; }
  .enquiry-help p { padding-top: 15px; color: var(--muted); max-width: 750px; }
  .enquiry-help a { text-decoration: underline; overflow-wrap: anywhere; }
  .not-found h1 { font-size: clamp(2.5rem,5vw,4.5rem); }
  .not-found > p { margin-block: 25px; }
}
@layer responsive {
  @media (max-width: 1100px) {
    .desktop-nav, .header-cta { display: none; }
    .menu-toggle { display: grid; place-items: center; }
    .page-hero-grid { gap: 40px; }
    .home-intro, .home-proof { gap: 50px; }
    .values-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .sector-grid, .commitment-grid, .engagement-grid { grid-template-columns: 1fr 1fr; }
    .services-directory { grid-template-columns: 235px minmax(0,1fr); gap: 40px; }
    .person-biography { padding: 30px; }
    .cta-panel { gap: 35px; padding: 40px; }
  }
  @media (max-width: 900px) {
    .page-hero-grid { grid-template-columns: 1fr; gap: 25px; padding-block: 45px; }
    .page-hero-description { max-width: 650px; }
    .home-intro, .home-proof { gap: 35px; }
    .services-directory { grid-template-columns: 1fr; }
    .service-directory-nav { position: static; }
    .service-directory-nav nav { grid-template-columns: 1fr 1fr; gap: 0 25px; }
    .team-profile { grid-template-columns: .6fr 1fr; }
    .person-identity { padding: 25px; }
    .person-monogram { font-size: 55px; width: 120px; height: 120px; }
    .capability-grid { grid-template-columns: 1fr 1fr; }
    .cta-panel { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    .page-hero { border-radius: 0 0 18px 18px; }
    .page-hero h1 { font-size: clamp(2.2rem,8.5vw,3.4rem); }
    .page-hero-description { font-size: 13px; }
    .page-hero-bottom { flex-direction: column; gap: 8px; font-size: 8px; }
    .home-intro, .home-proof { grid-template-columns: 1fr; }
    .proof-photo img { height: 350px; }
    .values-grid, .sector-grid, .commitment-grid, .engagement-grid, .associate-grid, .capability-grid, .contact-guide-grid, .registration-grid { grid-template-columns: 1fr; }
    .service-directory-nav nav { grid-template-columns: 1fr; }
    .service-detail { scroll-margin-top: 100px; }
    .scope-list { grid-template-columns: 1fr; }
    .team-profile { grid-template-columns: 1fr; }
    .person-identity { padding: 30px; }
    .person-monogram { width: 130px; height: 130px; }
    .person-biography { padding: 28px; }
    .person-biography h2 { font-size: 29px; }
    .cta-panel { padding: 30px 25px; border-radius: 10px; }
    .cta-section { padding-bottom: 64px; }
    .footer-pages { gap: 15px 25px; }
    .home-proof-links a { font-size: 12px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .page-hero .eyebrow, .page-hero h1, .page-hero-description { animation: none !important; }
  }
}
/* Preserve the original proportions of each agency's artwork. */
.credentials-grid dt .agency-logo {
  display: block;
  width: 100%;
  max-width: 240px;
  height: 80px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: 20px;
}
.certificate-paper .agency-logo {
  display: block;
  width: 100%;
  height: 52px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
/* Shared footer: navigation and contact above a compact company record. */
.site-footer { padding-block: 56px 24px; }
.footer-main { display: grid; grid-template-columns: 1.2fr .7fr 1.1fr; gap: 56px; padding-bottom: 40px; }
.footer-main > * { min-width: 0; }
.footer-intro .brand { display: inline-flex; }
.footer-intro > p { margin: 20px 0; font-size: 14px; line-height: 1.8; color: var(--muted); }
.footer-profile, .footer-contact-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.footer-column h2, .footer-company h2 { font: 600 12px/1.5 var(--heading); letter-spacing: 1px; text-transform: uppercase; margin: 0 0 20px; color: var(--forest); }
.footer-links { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.footer-links a { display: inline-block; padding-block: 5px; font-size: 13px; }
.footer-contact address { display: grid; gap: 14px; font-style: normal; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.footer-contact address p { margin: 0; max-width: 280px; color: var(--muted); }
.footer-contact-link { margin-top: 22px; }
.site-footer a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; border-radius: 2px; }
.footer-company { border-top: 1px solid #d7dfcc; padding-top: 28px; }
.footer-company .company-registration { padding-bottom: 28px; gap: 24px; }
.footer-company .company-registration dd { line-height: 1.7; }
.site-footer .footer-bottom { font-size: 11px; }
.site-footer .back-top { margin-left: auto; order: initial; font-size: 11px; }
@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-intro { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer { padding-top: 36px; }
  .footer-main { grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; }
  .footer-intro { grid-column: auto; }
  .footer-links { grid-template-columns: 1fr 1fr; }
  .footer-company .company-registration { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .footer-column h2 { margin-bottom: 12px; }
  .site-footer .footer-bottom { align-items: flex-start; gap: 16px; }
  .site-footer .back-top { margin-left: 0; }
}

.team-fieldwork .field-gallery { margin-top: 30px; align-items: start; }
.team-fieldwork .field-gallery img { height: 480px; object-fit: contain; border-radius: 12px; }
.team-fieldwork figcaption { color: var(--muted); line-height: 1.7; }
@media (max-width: 640px) { .team-fieldwork .field-gallery img { height: auto; max-height: none; } }

.person-portrait { display: block; width: 100%; max-width: 280px; height: auto; border-radius: 12px; background: #fff; }
