/* Visual rhythm and motion, kept separate from the base component styles. */
@layer components {
  .site-header { transition: box-shadow .25s, background .25s; }
  .site-header.is-scrolled { box-shadow: 0 5px 30px #102e2612; background: #fffffff5; backdrop-filter: blur(16px); }
  .hero { border-radius: 0 0 28px 28px; }
  .hero-content { position: relative; z-index: 1; }
  .hero h1 { max-width: 1050px; text-shadow: 0 3px 30px #091d1824; }
  .hero-eyebrow, .hero h1, .hero-description, .hero-actions { animation: hero-enter .8s cubic-bezier(.22,1,.36,1) both; }
  .hero h1 { animation-delay: .1s; }
  .hero-description { animation-delay: .22s; }
  .hero-actions { animation-delay: .34s; }
  .hero-image { animation: hero-zoom 12s ease-out both; }
  .hero-bottom a > span { animation: scroll-hint 2s ease-in-out 3; }
  .button svg { transition: transform .25s; }
  .button:hover svg { transform: translate(2px,-2px); }
  .principles-strip { background: linear-gradient(100deg,#edf3df,#f7f9f0); }
  .about-photo { isolation: isolate; }
  .about-photo::before { content: ''; position: absolute; inset: 28px 0 0 28px; z-index: -1; border: 1px solid #a7be87; border-radius: 8px; }
  .about-photo > img { border-radius: 8px 80px 8px 8px; }
  .photo-note { box-shadow: 0 15px 40px #163f3212; border-radius: 8px; }
  .purpose-section { padding-block: 15px 90px; }
  .purpose-grid { gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f5f7ef; }
  .purpose-grid article { border: 0; border-right: 1px solid var(--line); padding: 32px; }
  .purpose-grid article:last-child { border-right: 0; background: #e8f0da; }
  .services-section { background: radial-gradient(ellipse at 95% 0,#e4edcf99,transparent 50%),#f8f8f2; }
  .services-grid { gap: 18px; border: 0; overflow: visible; border-radius: 0; }
  .service-card { position: relative; border: 1px solid var(--line) !important; border-radius: 10px; box-shadow: 0 5px 20px #163f3203; transition: background .25s, border-color .25s, box-shadow .25s, transform .3s; }
  .service-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px 4px 16px 4px; background: #edf3e2; transition: background .25s, transform .3s; }
  .service-card:nth-child(3n+2) .service-icon { background: #e5efe8; }
  .service-card:focus-within { border-color: #7f9b62 !important; }
  .approach-section { background: radial-gradient(ellipse at 0 0,#2c634b 0,transparent 65%),#123b2d; }
  .steps { position: relative; }
  .step { position: relative; border: 0; padding-bottom: 36px; }
  .step:not(:last-child)::after { content: ''; position: absolute; top: 74px; bottom: -1px; left: 20px; width: 1px; background: linear-gradient(#b7d78c,#b7d78c35); transform-origin: top; transition: transform .8s ease .15s; }
  .step:first-child::after { top: 45px; }
  .motion-ready .step:not(.is-revealed)::after { transform: scaleY(0); }
  .step-number { background: #244e3c; position: relative; z-index: 1; transition: background .4s, box-shadow .4s; }
  .step.is-revealed .step-number { background: #c4dca0; color: #163f32; box-shadow: 0 0 0 6px #c4dca00d; }
  .company-profile-section { background: #fff; }
  .sector-tags span { border: 1px solid #dce6cd; background: #f3f6ec; border-radius: 50px; }
  .field-gallery { gap: 35px; align-items: start; }
  .field-gallery figure { background: #f4f6ee; padding: 16px; border-radius: 12px; border: 1px solid #e4eadb; }
  .field-gallery figure:nth-child(2) { margin-top: 55px; }
  .field-gallery img { border-radius: 7px; }
  .field-gallery figcaption { padding: 3px 8px 8px; }
  .credentials-block { background: #f2f5e9; padding: 38px; border-radius: 14px; margin-top: 70px; }
  .credentials-grid > div { border-radius: 7px; }
  .certificate-downloads { margin-top: 60px; }
  .certificate-list { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
  .certificate-card { padding: 18px; border-radius: 10px; transition: box-shadow .3s, transform .3s; }
  .certificate-card h4 { font-size: 15px; }
  .certificate-preview { display: block; position: relative; margin-bottom: 20px; padding: 18px; height: 180px; background: linear-gradient(145deg,#e8efdd,#f5f7f0); overflow: hidden; border-radius: 6px; }
  .certificate-paper { display: flex; flex-direction: column; gap: 10px; height: 178px; padding: 16px; background: #fff; border: 1px solid #dce4d1; border-top: 5px solid #366348; box-shadow: 0 6px 18px #163f3214; transform: rotate(-3deg); transition: transform .35s; }
  .certificate-paper > svg { color: #5c7c42; }
  .certificate-paper strong { font: 600 10px/1.5 var(--heading); max-width: 145px; }
  .certificate-paper small { font-size: 7px; text-transform: uppercase; letter-spacing: 1px; color: #718267; }
  .paper-rule { display: block; height: 2px; width: 100%; background: #e2e8da; }
  .paper-rule.short { width: 65%; }
  .certificate-preview-label { position: absolute; bottom: 9px; right: 9px; font-size: 8px; letter-spacing: .7px; background: #163f32; color: #fff; padding: 3px 7px; border-radius: 3px; }
  .certificate-actions { gap: 8px 18px; }
  .certificate-actions a { font-size: 11px; }
  .leadership-grid article { border-top: 3px solid #9ab978; padding: 25px; background: #f8f9f4; border-radius: 0 0 8px 8px; }
  .contact-form { background: #f5f7ed; border-radius: 14px; box-shadow: 0 18px 50px #163f3208; }
  .contact-details > div { border-bottom: 1px solid var(--line); padding-bottom: 18px; }
  .contact-form input, .contact-form select, .contact-form textarea { transition: border-color .2s, box-shadow .2s; }
  .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #719052; box-shadow: 0 0 0 3px #b8cf9426; }
  @keyframes hero-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes hero-zoom { from { transform: scale(1.055); } to { transform: scale(1); } }
  @keyframes scroll-hint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
}
@layer responsive {
  .services-grid .service-card { border: 1px solid var(--line) !important; }
  @media (hover: hover) and (pointer: fine) {
    .service-card:hover { transform: translateY(-7px); border-color: #a9bf8e !important; box-shadow: 0 18px 36px #163f3210; background: #fff; }
    .service-card:hover .service-icon { transform: rotate(-5deg); background: #deebcb; }
    .certificate-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px #163f3210; }
    .certificate-preview:hover .certificate-paper { transform: rotate(0deg) translateY(-3px); }
  }
  @media (min-width: 901px) { .approach-grid > div:first-child { position: sticky; top: 130px; align-self: start; } }
  @media (max-width: 1100px) { .certificate-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
  @media (max-width: 640px) {
    .hero { border-radius: 0 0 18px 18px; }
    .purpose-section { padding-block: 0 64px; }
    .purpose-grid article { padding: 26px; border-right: 0; border-bottom: 1px solid var(--line); }
    .purpose-grid article:last-child { border-bottom: 0; }
    .field-gallery figure:nth-child(2) { margin-top: 0; }
    .credentials-block { padding: 25px 20px; }
    .certificate-list { grid-template-columns: 1fr; }
    .certificate-preview { height: 190px; }
    .certificate-paper { max-width: 230px; margin-inline: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-image, .hero-eyebrow, .hero h1, .hero-description, .hero-actions, .hero-bottom a > span { animation: none !important; }
    .step::after { transform: none !important; }
    .service-card:hover, .certificate-card:hover, .service-card:hover .service-icon { transform: none; }
  }
  @media print {
    .hero-image { animation: none; }
    .hero-eyebrow, .hero h1, .hero-description, .hero-actions { animation: none; opacity: 1; }
    .step::after { transform: none !important; }
  }
}