/* ===== ISSC — shared base styles (variables, reset, layout grids) ===== */
:root{
  --issc-yellow: #f0c830;
  --issc-yellow-dark: #ccaa29;
  --issc-green: #405868;
  --issc-green-dark: #2f4350;
  --issc-bg: oklch(98.5% 0.005 90);
  --issc-surface: oklch(100% 0 0);
  --issc-gray-light: oklch(94% 0.004 90);
  --issc-gray-medium: oklch(72% 0.005 90);
  --issc-charcoal: oklch(28% 0.006 90);
  --issc-gray-dark: oklch(28% 0.006 90);
  --issc-text: oklch(32% 0.006 90);
  --issc-text-soft: oklch(52% 0.006 90);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--issc-bg); font-family: 'Poppins', sans-serif; color: var(--issc-text); overflow-x: hidden; }
h1,h2,h3,h4 { font-family: 'Poppins', sans-serif; margin: 0; color: var(--issc-gray-dark); }
a { color: var(--issc-green); text-decoration: none; }
a:hover { color: var(--issc-yellow-dark); }
button { font-family: 'Poppins', sans-serif; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: 'Poppins', sans-serif; }
img { max-width: 100%; display: block; }

.issc-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; }
@media (min-width: 768px) { .issc-container { padding: 0 40px; } }
@media (min-width: 1024px) { .issc-container { padding: 0 80px; } }

/* ---- Nav ---- */
.issc-nav-links { display: none; }
.issc-nav-cta { display: none; }
.issc-nav-social { display: none; }
.issc-hamburger { display: inline-flex; }
.issc-nav-logo, .issc-nav-logo img { height: 33px !important; width: auto !important; }
@media (min-width: 768px) { .issc-nav-logo, .issc-nav-logo img { height: 39px !important; } }
@media (min-width: 1024px) {
  .issc-nav-logo, .issc-nav-logo img { height: 45px !important; }
  .issc-nav-links { display: flex; gap: 30px; align-items: center; }
  .issc-nav-cta { display: inline-flex; }
  .issc-nav-social { display: flex; }
  .issc-hamburger { display: none; }
}
@media (min-width: 1024px) { .issc-mobile-panel { display: none !important; } }

.site-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 50; background: oklch(20% 0.006 90 / 0.35); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); transition: background 0.35s ease, box-shadow 0.35s ease; }
.site-header.is-scrolled { background: oklch(98.5% 0.005 90 / 0.72); box-shadow: 0 1px 0 oklch(28% 0.006 90 / 0.08), 0 12px 32px oklch(28% 0.006 90 / 0.08); }
.site-header .nav-link, .site-header .nav-icon { color: white; transition: color 0.2s ease; }
.site-header.is-scrolled .nav-link, .site-header.is-scrolled .nav-icon { color: oklch(32% 0.006 90); }
.hamburger-bar { width: 24px; height: 2px; border-radius: 2px; background: white; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; }
.site-header.is-scrolled .hamburger-bar { background: oklch(28% 0.006 90); }
.logo-scrolled { display: none; }
.site-header.is-scrolled .logo-default { display: none; }
.site-header.is-scrolled .logo-scrolled { display: block; }
.issc-hamburger.is-open .bar-top { transform: translateY(7px) rotate(45deg); }
.issc-hamburger.is-open .bar-mid { opacity: 0; }
.issc-hamburger.is-open .bar-bot { transform: translateY(-7px) rotate(-45deg); }

.nav-dropdown-wrap { position: relative; }
.nav-dropdown { position: absolute; top: 28px; left: -20px; min-width: 260px; z-index: 500; margin-top: 0; padding: 18px 10px 10px; background: var(--issc-green); border-radius: 16px; box-shadow: 0 20px 48px oklch(28% 0.006 90 / 0.28); opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; transform-origin: top left; transition: opacity 0.22s cubic-bezier(0.16,1,0.3,1), transform 0.22s cubic-bezier(0.16,1,0.3,1); }
.nav-dropdown-wrap.is-open .nav-dropdown, .nav-dropdown-wrap:hover .nav-dropdown, .nav-dropdown-wrap:focus-within .nav-dropdown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.nav-dropdown a { display: block; padding: 12px 16px; font-size: 14px; color: white; font-weight: 500; border-radius: 10px; margin-bottom: 2px; transition: color 0.15s ease, background 0.15s ease; }
.nav-dropdown a:hover, .nav-dropdown a.is-active { color: var(--issc-yellow) !important; background: rgba(255,255,255,0.08); font-weight: 700; }
.nav-chevron { transition: transform 0.22s ease; }
.nav-dropdown-wrap.is-open .nav-chevron, .nav-dropdown-wrap:hover .nav-chevron { transform: rotate(180deg); }

.issc-mobile-panel { position: fixed; inset: 0; z-index: 60; background: oklch(28% 0.006 90 / 0.97); backdrop-filter: blur(6px); display: flex; flex-direction: column; opacity: 0; transform: translateY(-16px); pointer-events: none; transition: opacity 0.32s ease, transform 0.32s ease; overflow-y: auto; }
.issc-mobile-panel.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-services-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; }
.mobile-services-panel.is-open { max-height: 260px; opacity: 1; margin-top: 14px; }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-x-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); }
.reveal-x-left.is-visible { opacity: 1; transform: translateX(0); }
.reveal-x-right { opacity: 0; transform: translateX(32px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1) 0.1s, transform 0.75s cubic-bezier(0.16,1,0.3,1) 0.1s; }
.reveal-x-right.is-visible { opacity: 1; transform: translateX(0); }

/* ---- Accordion (policies, periods, scopes, FAQs) ---- */
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.accordion-panel.is-open { max-height: 2000px; }
.accordion-chevron { transition: transform 0.25s ease; }
.accordion-trigger.is-open .accordion-chevron { transform: rotate(180deg); }

.stacked-form { opacity: 0; transform: translateY(16px); pointer-events: none; z-index: 1; transition: opacity 0.4s cubic-bezier(0.16,1,0.3,1), transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.stacked-form.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; z-index: 2; }
#appeal-complaint-forms { display: grid; scroll-margin-top: 110px; }

/* ---- Stepper (timeline / process) ---- */
.stepper-row { display: flex; overflow-x: auto; gap: 0; padding-bottom: 8px; }
.stepper-step { cursor: pointer; }
.stepper-step:hover .step-circle { transform: scale(1.1); }
.stepper-step[data-step-index] .step-circle { transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.period-card:hover { box-shadow: 0 20px 44px oklch(28% 0.006 90 / 0.12); border-color: var(--issc-green); transform: translateY(-3px); }
.period-milestone { transition: transform 0.3s ease, box-shadow 0.4s ease; }
.period-milestone:hover { transform: scale(1.08); }
.period-milestone.is-active { box-shadow: 0 0 0 8px white, 0 0 0 13px oklch(58% 0.1 165 / 0.16), 0 0 22px 2px oklch(58% 0.1 165 / 0.35); }
.period-milestone.is-active svg { animation: periodIconPulse 1.8s ease-in-out infinite; }
@keyframes periodIconPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
.period-feature-row { transition: background 0.2s ease, transform 0.2s ease; }
.period-feature-row:hover { background: #4058681a; transform: translateX(3px); }
.doc-req-card { transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.doc-req-card:hover { box-shadow: 0 10px 26px oklch(28% 0.006 90 / 0.1); border-color: var(--issc-green); transform: translateY(-2px); }
.iso-standard-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.iso-standard-card:hover { box-shadow: 0 14px 32px oklch(28% 0.006 90 / 0.12); transform: translateY(-4px); }
.impact-stat-card { transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; }
.impact-stat-card:hover { box-shadow: 0 22px 48px oklch(28% 0.006 90 / 0.14); transform: translateY(-6px); border-color: var(--issc-green); }
.training-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.training-card:hover { box-shadow: 0 20px 44px oklch(28% 0.006 90 / 0.12); transform: translateY(-5px); }
.issc-sustainability-services-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
.sustainability-service-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.sustainability-service-card:hover { box-shadow: 0 20px 44px oklch(28% 0.006 90 / 0.14); transform: translateY(-6px); }
.svc-learn-more svg { transition: transform 0.25s ease; }
.sustainability-service-card:hover .svc-learn-more svg { transform: translateX(4px); }
.sustainability-service-card .accordion-chevron { transition: transform 0.25s ease; }
.sustainability-service-card [aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }
.issc-iso-cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-iso-cards { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-iso-cards { grid-template-columns: repeat(4, 1fr) !important; } }
.issc-iso-cards-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-iso-cards-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-iso-cards-grid { grid-template-columns: repeat(3, 1fr) !important; } }
.issc-doc-req-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-doc-req-grid { grid-template-columns: 1fr 1fr !important; } }
.doc-req-card .accordion-trigger svg { transition: stroke 0.2s ease; }
.issc-checklist-scroller::-webkit-scrollbar { display: none; }
.issc-checklist-scroller { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.accred-card { transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease, border-color 0.25s ease; }
.accred-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px oklch(28% 0.006 90 / 0.12); border-color: var(--issc-green); }
.accred-card:hover .accred-num { background: var(--issc-yellow); color: var(--issc-green-dark, #2f4350); }
.accred-num { transition: background 0.25s ease, color 0.25s ease; }
.stepper-step .step-circle { transition: background 0.25s ease, border-color 0.25s ease; }

/* ---- Forms / toast ---- */
.form-error { color: #b3413a; font-size: 12.5px; margin-top: 6px; }
.form-success { color: var(--issc-green); font-size: 13px; font-weight: 600; margin-top: 10px; text-align: center; }
.toast { position: fixed; bottom: 28px; right: 28px; z-index: 100; display: flex; align-items: center; gap: 12px; background: var(--issc-gray-dark); padding: 16px 22px; border-radius: 14px; box-shadow: 0 20px 48px oklch(15% 0.01 90 / 0.35); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16,1,0.3,1), transform 0.35s cubic-bezier(0.16,1,0.3,1); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
input.has-error, textarea.has-error, select.has-error { border-color: #c9564c !important; }

/* ---- Layout grids shared across pages ---- */
.issc-footer-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 640px) { .issc-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .issc-footer-grid { grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; gap: 32px; } }

@media (min-width: 1024px) { .issc-about-grid { grid-template-columns: 1fr 1fr !important; gap: 80px !important; } }

.issc-services-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-services-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-services-grid { grid-template-columns: repeat(4, 1fr) !important; } }

.issc-why-simple-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-why-simple-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) {
  .issc-why-simple-grid { grid-template-columns: 1fr 1fr 1fr !important; }
  .issc-why-item:not(:nth-child(3n+1)) { border-left: 1px solid oklch(90% 0.006 90); padding-left: 32px !important; }
}

@media (min-width: 1024px) { .issc-impact-grid { grid-template-columns: 1fr 1fr !important; gap: 70px !important; } }
.issc-impact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (min-width: 480px) and (max-width: 1023px) { .issc-impact-cards { max-width: 480px; margin: 0 auto; } }

@media (min-width: 640px) { .issc-industries-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-industries-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1280px) { .issc-industries-grid { grid-template-columns: repeat(6, 1fr) !important; } }

@media (min-width: 640px) { .issc-achievements-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-achievements-grid { grid-template-columns: repeat(5, 1fr) !important; } }

@media (min-width: 1024px) { .issc-contact-grid { grid-template-columns: 0.85fr 1.15fr !important; gap: 72px !important; } }
.issc-contact-merged { display: grid; grid-template-columns: 1fr; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 64px oklch(28% 0.006 90 / 0.12); }
@media (min-width: 900px) { .issc-contact-merged { grid-template-columns: 0.85fr 1.15fr !important; } }
.issc-form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) { .issc-form-grid { grid-template-columns: 1fr 1fr !important; } }

.issc-accreditation-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 1023px) { .issc-accreditation-grid { grid-template-columns: 1fr 1fr !important; } .issc-accreditation-grid > div:nth-child(3) { grid-column: 1 / span 2 !important; max-width: 340px; margin: 0 auto; } }
@media (min-width: 1024px) { .issc-accreditation-grid { grid-template-columns: repeat(3, 1fr) !important; } }

.issc-svcgrid, .issc-periods-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-svcgrid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-svcgrid { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 900px) { .issc-periods-grid { grid-template-columns: 1fr 1fr !important; } }
.issc-checklist-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-checklist-grid { grid-template-columns: 1fr 1fr !important; } }
.issc-cbam-timeline-grid { grid-template-columns: 1fr; align-items: center; gap: 48px; }
@media (min-width: 820px) { .issc-cbam-timeline-grid { grid-template-columns: 1.05fr 1fr !important; gap: 56px !important; } }
.issc-timeline-visual { animation: timelineFloat 5s ease-in-out infinite; }
@keyframes timelineFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.issc-periods-journey-grid { grid-template-columns: 1fr; }
@media (min-width: 960px) { .issc-periods-journey-grid { grid-template-columns: 300px 1fr !important; gap: 64px !important; } }
.journey-card:hover { box-shadow: 0 20px 48px oklch(28% 0.006 90 / 0.14) !important; transform: translateY(-3px); }
.journey-milestone-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.journey-milestone-card:hover { box-shadow: 0 16px 34px oklch(28% 0.006 90 / 0.13); transform: translateY(-4px); }
.issc-periods-compare-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .issc-periods-compare-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 899px) { .issc-periods-arrow { top: 0 !important; left: 50% !important; transform: translate(-50%,-50%) rotate(90deg) !important; } }
.period-feature-row-dark { transition: background 0.2s ease, transform 0.2s ease; }
.period-feature-row-dark:hover { background: oklch(100% 0 0 / 0.14) !important; transform: translateX(3px); }
[data-journey-dot].is-active { transform: scale(1.3); background: var(--issc-green) !important; }
.issc-appeal-info-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 700px) { .issc-appeal-info-grid { grid-template-columns: 1fr 1fr !important; } }
.issc-appeal-info-grid > div:first-child { border-bottom: 1px solid oklch(100% 0 0 / 0.12); }
@media (min-width: 700px) { .issc-appeal-info-grid > div:first-child { border-bottom: none; border-right: 1px solid oklch(100% 0 0 / 0.12); } }
.issc-appeal-cta-btn { width: 100%; justify-content: center; }
@media (min-width: 480px) { .issc-appeal-cta-btn { width: auto; justify-content: flex-start; } }

.issc-ftr-grid { display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:640px) { .issc-ftr-grid { grid-template-columns:1fr 1fr; gap:40px; } }
@media (min-width:1024px) { .issc-ftr-grid { grid-template-columns:1.3fr 0.85fr 0.85fr; gap:32px; } }
.issc-ftr-input::placeholder { color: oklch(100% 0 0 / 0.45); }

/* ---- Animations ---- */
@keyframes issc-hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes issc-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.issc-fade-up { animation: issc-fade-up 0.5s ease-out both; }
@keyframes issc-scroll-bounce { 0%,100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(9px); opacity: 0.4; } }
.issc-scroll-dot { animation: issc-scroll-bounce 1.9s ease-in-out infinite; }
@keyframes issc-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes issc-float-slow { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-16px); } }
@keyframes issc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.issc-marquee-track { animation: issc-marquee 32s linear infinite; }
.issc-marquee:hover .issc-marquee-track { animation-play-state: paused; }
.issc-logo-item { transition: transform 0.3s ease; }
.issc-logo-item:hover { transform: scale(1.06); }

@keyframes issc-float-slow2 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-12px,14px) rotate(8deg); } }
@keyframes issc-float-a { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(16px,-20px) rotate(8deg); } }
@keyframes issc-float-b { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-14px,18px) rotate(-6deg); } }
@keyframes issc-float-c { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,14px); } }

.issc-training-grid { grid-template-columns: 1fr; }
@media (min-width: 860px) { .issc-training-grid { grid-template-columns: 1fr 1fr !important; } }

@media (min-width: 1024px) { .issc-whoweare-grid { grid-template-columns: 1fr 1fr !important; gap: 80px !important; } }
.issc-whoweare-cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-whoweare-cards { grid-template-columns: repeat(3, 1fr) !important; } }

.issc-mv-grid { grid-template-columns: 1fr; }
@media (min-width: 768px) { .issc-mv-grid { grid-template-columns: 1fr 1fr !important; } }

.issc-offices-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .issc-offices-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .issc-offices-grid { grid-template-columns: repeat(3, 1fr) !important; } }

.issc-fields-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; }
.issc-fields-grid > div { width: 100%; }
@media (min-width: 640px) { .issc-fields-grid > div { width: calc(50% - 13px); } }
@media (min-width: 1024px) { .issc-fields-grid > div { width: calc(25% - 19.5px); } }

/* ---- Image placeholders (no real asset supplied) ---- */
.img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; background: repeating-linear-gradient(135deg, oklch(94% 0.004 90), oklch(94% 0.004 90) 10px, oklch(97% 0.004 90) 10px, oklch(97% 0.004 90) 20px); color: var(--issc-text-soft); font-size: 12px; font-family: monospace; padding: 12px; }