/* NDTO NDT Services — shared stylesheet
   Layout concept: dense industrial dossier across real, separate pages —
   a fixed technical top bar with a working mobile drawer, report-style
   numbered grid cards, and a steel-toned contact/footer plate on every page. */
:root{
  --bg:#f2f1ec;
  --surface:#ffffff;
  --ink:#171b1f;
  --muted:#5c6570;
  --line:rgba(23,27,31,0.12);
  --accent:#d9760c;
  --accent-ink:#5c2e00;
  --steel:#2b4a5e;
  --font-display:'Space Grotesk', 'Arial Narrow', sans-serif;
  --font-body:'IBM Plex Sans', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14171a; --surface:#1c2126; --ink:#eef0f2; --muted:#9aa4ad;
    --line:rgba(238,240,242,0.14); --accent:#f2941c; --accent-ink:#ffd9a6;
    --steel:#7fa6bd; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#14171a; --surface:#1c2126; --ink:#eef0f2; --muted:#9aa4ad;
  --line:rgba(238,240,242,0.14); --accent:#f2941c; --accent-ink:#ffd9a6;
  --steel:#7fa6bd; color-scheme: dark;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{background:var(--bg); color:var(--ink); font-family:var(--font-body)}
img{max-width:100%; display:block}
h1,h2,h3{font-family:var(--font-display); text-wrap:balance; margin:0}
p{margin:0; line-height:1.62}
a{color:inherit}
.wrap{max-width:1120px; margin-inline:auto; padding-inline:20px}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-ink); background:color-mix(in srgb, var(--accent) 16%, transparent);
  display:inline-flex; align-items:center; gap:8px; padding:5px 10px; border-radius:3px; border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.eyebrow::before{content:""; width:6px; height:6px; background:var(--accent); border-radius:1px; flex:none}

/* Top bar */
header.topbar{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:40;
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{max-width:1120px; margin-inline:auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.01em; text-decoration:none}
.brand img{height:34px; width:auto; border-radius:4px}
.brand small{display:block; font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase}
nav.mainnav{display:flex; gap:22px; font-size:13.5px; font-weight:500}
nav.mainnav a{text-decoration:none; color:var(--muted); white-space:nowrap; padding-block:4px; border-bottom:2px solid transparent}
nav.mainnav a:hover{color:var(--ink)}
nav.mainnav a.active{color:var(--ink); border-color:var(--accent)}
.cta-btn{
  font-family:var(--font-mono); font-weight:600; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  background:var(--accent); color:#1a1105; border:none; padding:10px 16px; border-radius:3px; text-decoration:none;
  white-space:nowrap; flex:none; display:inline-block; cursor:pointer;
}
.cta-btn.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.topbar-right{display:flex; align-items:center; gap:14px}
.menu-btn{display:none; flex-direction:column; gap:4px; background:none; border:none; padding:8px; cursor:pointer}
.menu-btn span{width:20px; height:2px; background:var(--ink); display:block}
.mobile-drawer{display:none; flex-direction:column; padding:6px 20px 16px; border-top:1px solid var(--line); background:var(--surface)}
.mobile-drawer a{padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink); font-size:15px}
.mobile-drawer a:last-child{border-bottom:none}
.mobile-drawer.open{display:flex}
@media (max-width:900px){
  nav.mainnav{display:none}
  .menu-btn{display:flex}
}

/* Page hero (interior pages) */
.page-hero{border-bottom:1px solid var(--line); padding-block:52px; background:color-mix(in srgb, var(--steel) 7%, var(--bg))}
.page-hero h1{font-size:clamp(28px,4vw,42px); margin-top:14px}
.page-hero p{margin-top:14px; color:var(--muted); font-size:15.5px; max-width:64ch}
.breadcrumb{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.breadcrumb a{text-decoration:none; color:var(--muted)}
.breadcrumb a:hover{color:var(--ink)}

/* Home hero */
.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line)}
.hero-photo{position:relative; height:min(72vh, 620px); min-height:380px}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:60% 40%}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,12,14,.55) 0%, rgba(10,12,14,.35) 40%, rgba(10,12,14,.85) 100%)}
.hero-content{position:absolute; inset:0; display:flex; align-items:flex-end}
.hero-inner{max-width:1120px; margin-inline:auto; padding:0 20px 40px; width:100%; color:#f4efe6}
.hero-inner .eyebrow{background:rgba(217,118,12,.22); border-color:rgba(217,118,12,.5); color:#ffd9a6}
.hero-inner h1{font-size:clamp(32px,5.2vw,58px); line-height:1.03; margin-top:14px; color:#fff}
.hero-inner .tagline{font-size:clamp(15px,1.8vw,19px); color:#dfe3e6; max-width:46ch; margin-top:14px}
.hero-ctas{display:flex; gap:12px; margin-top:24px; flex-wrap:wrap}

.stat-strip{background:var(--steel); color:#eef3f6}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.stat{padding:18px 20px; border-right:1px solid rgba(255,255,255,.14)}
.stat:last-child{border-right:none}
.stat .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#b9d3e0}
.stat .v{font-family:var(--font-mono); font-weight:600; font-size:clamp(15px,2vw,19px); margin-top:6px; font-variant-numeric:tabular-nums}

/* Sections */
section{padding-block:64px}
section.tight{padding-block:44px}
.section-head{display:flex; flex-direction:column; gap:12px; margin-bottom:34px; max-width:70ch}
.section-head h2{font-size:clamp(24px,3vw,34px)}
.surface{background:var(--surface); border:1px solid var(--line); border-radius:6px}
.alt-bg{background:color-mix(in srgb, var(--steel) 6%, var(--bg))}
.center{text-align:center; margin-inline:auto}

/* Grids (generic, reused across pages) */
.grid-5{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media (max-width:900px){
  .grid-5{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .grid-5, .grid-4, .grid-3, .grid-2{grid-template-columns:1fr}
}

/* About / split layouts */
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
.split.reverse{grid-template-columns:.9fr 1.1fr}
.split p + p{margin-top:16px}
.photo-card{border-radius:6px; overflow:hidden; border:1px solid var(--line)}
.photo-card img{aspect-ratio:4/5; object-fit:cover}
.photo-card.wide img{aspect-ratio:4/3}
.photo-card figcaption{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:10px 12px; border-top:1px solid var(--line)}
.id-cards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-top:32px}
.id-card{background:var(--surface); padding:16px 18px}
.id-card .k{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink)}
.id-card .v{font-weight:600; margin-top:6px; font-size:14.5px}
@media (max-width:900px){ .split, .split.reverse{grid-template-columns:1fr} .id-cards{grid-template-columns:repeat(2,1fr)} }

/* Method / value / feature cards */
.method-card{padding:20px 16px; display:flex; flex-direction:column; gap:10px; min-width:0}
.method-tag{font-family:var(--font-mono); font-weight:700; font-size:20px; color:var(--accent)}
.method-card h3{font-size:15.5px}
.method-card p{font-size:13.5px; color:var(--muted)}

.num-item{display:flex; gap:14px; padding:16px 18px; min-width:0}
.num-item .n{font-family:var(--font-mono); font-weight:600; color:var(--accent); flex:none; width:26px}
.num-item p{font-size:14px; color:var(--muted)}
.num-item strong{color:var(--ink); font-size:14.5px}

.value-card{padding:18px}
.value-card .n{font-family:var(--font-mono); color:var(--accent); font-weight:700; font-size:13px}
.value-card h3{font-size:15px; margin-top:8px}
.value-card p{font-size:13.5px; color:var(--muted); margin-top:6px}

.tag{padding:16px 14px; font-size:13.5px; font-weight:600; text-align:center; border-radius:6px}
.code-card{padding:18px 14px}
.code-card .abbr{font-family:var(--font-mono); font-weight:700; font-size:19px; color:var(--steel)}
.code-card p{font-size:12.5px; color:var(--muted); margin-top:6px}

.vm-card{padding:26px}
.vm-card .glyph{font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--accent); border:2px solid var(--accent); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%}
.vm-card h3{margin-top:16px; font-size:16px; letter-spacing:.04em; text-transform:uppercase}
.vm-card p{margin-top:10px; color:var(--muted); font-size:14.5px}

.policy-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.policy-card{background:var(--surface); padding:26px}
.policy-card h3{font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink)}
.policy-card p{margin-top:12px; font-size:14.5px; color:var(--muted)}
@media (max-width:900px){ .policy-grid{grid-template-columns:1fr} }

.qa-card{padding:18px}
.qa-card h3{font-size:14.5px}
.qa-card p{font-size:13px; color:var(--muted); margin-top:6px}

.check-list{display:flex; flex-direction:column; gap:14px}
.check-item{display:flex; gap:12px; align-items:flex-start}
.check-mark{flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#1a1105; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; margin-top:1px}

.star-card{padding:18px}
.star-card .star{color:var(--accent); font-size:15px}
.star-card h3{font-size:14.5px; margin-top:8px}
.star-card p{font-size:13px; color:var(--muted); margin-top:6px}
.why-card{padding:20px}
.why-card h3{font-size:15px}
.why-card p{font-size:13.5px; color:var(--muted); margin-top:8px}

.process-track{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
.proc-step{padding:16px 12px; text-align:left}
.proc-step .n{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:13px}
.proc-step h3{font-size:13.5px; margin-top:8px}
@media (max-width:900px){ .process-track{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .process-track{grid-template-columns:1fr 1fr} }

.course-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden}
.course{background:var(--surface); padding:13px 16px; display:flex; gap:10px; align-items:baseline; font-size:14px; min-width:0}
.course .n{font-family:var(--font-mono); color:var(--accent); font-weight:600; flex:none}
@media (max-width:560px){ .course-grid{grid-template-columns:1fr} }
.career-item{padding:18px; border-bottom:1px solid var(--line)}
.career-item:last-child{border-bottom:none}
.career-item h3{font-size:15px; margin-bottom:6px}
.career-item p{font-size:13.5px; color:var(--muted)}
.contact-strip{font-family:var(--font-mono); font-size:13px; background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding:14px 16px; border-radius:6px; margin-top:20px}

/* CTA banner (used across pages) */
.cta-banner{background:var(--ink); color:var(--bg); border-radius:8px; padding:40px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.cta-banner h2{font-size:clamp(20px,2.6vw,28px); color:inherit}
.cta-banner p{color:color-mix(in srgb, var(--bg) 70%, transparent); margin-top:8px; max-width:50ch}

/* Contact page */
.contact-section{background:var(--steel); color:#eef3f6}
.contact-section .eyebrow{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#ffd9a6}
.contact-section h2, .contact-section h1{color:#fff}
.contact-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; margin-top:32px; align-items:start}
.contact-cards{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); border-radius:6px; overflow:hidden}
.ccard{background:rgba(255,255,255,.04); padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap}
.ccard .k{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#b9d3e0}
.ccard .v{font-weight:600; margin-top:4px; font-size:15px}
.copy-btn{font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; background:var(--accent); color:#1a1105; border:none; padding:8px 12px; border-radius:3px; cursor:pointer; flex:none}
.copy-btn:active{transform:translateY(1px)}
.thankyou{margin-top:24px; font-size:15px; color:#dfe3e6; max-width:50ch}
.info-block{margin-top:28px; padding-top:24px; border-top:1px solid rgba(255,255,255,.18)}
.info-block h3{font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#b9d3e0}
.info-block p{margin-top:8px; font-size:14px; color:#dfe3e6}
.contact-form{display:flex; flex-direction:column; gap:14px}
.contact-form label{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#b9d3e0; margin-bottom:6px; display:block}
.contact-form input, .contact-form textarea{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:11px 12px; border-radius:4px; font-family:var(--font-body); font-size:14px;
}
.contact-form input:focus, .contact-form textarea:focus{outline:2px solid var(--accent); outline-offset:1px}
.contact-form textarea{resize:vertical; min-height:100px}
.form-note{font-family:var(--font-mono); font-size:11px; color:#b9d3e0; margin-top:4px}

footer.site-footer{padding-block:36px; border-top:1px solid var(--line); background:var(--surface)}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:32px}
.footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:16px}
.footer-brand img{height:28px; border-radius:4px}
.footer-col h4{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.footer-col a{display:block; text-decoration:none; color:var(--muted); font-size:13.5px; padding-block:5px}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; color:var(--muted)}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .footer-grid{grid-template-columns:1fr} }