/* ==========================================================================
   UltraTech Centre of Excellence — Stylesheet
   Brand: blueprint navy + gold, civil-engineering / blueprint motif
   Mobile-first, responsive up to desktop.
   ========================================================================== */

@import url('./ig.css');

:root{
  --blueprint:#0B2A4A;
  --brand-blue:#0B4F8A;
  --green:#2E7D32;
  --gold:#F2B705;
  --grey:#5A6472;
  --bg-section:#F4F6F8;
  --paper:#FFFFFF;
  --ink:#12202E;
  --red:#C1272D;
  --max-width:1180px;
  --radius:8px;
  --shadow: 0 1px 3px rgba(11,42,74,.08);
  --shadow-lg: 0 8px 24px rgba(11,42,74,.14);
}

*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
}

h1,h2,h3,h4{
  font-family: Georgia, 'Times New Roman', serif;
  margin:0 0 .4em 0;
  color:var(--blueprint);
  line-height:1.2;
}

a{ color:inherit; }
/* A neutral background means a missing/failed image shows as a soft grey
   box (with visible alt text) instead of a jarring broken-image icon. */
img{ max-width:100%; display:block; background:var(--bg-section); }

.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--gold);
  color:var(--blueprint);
  padding:.8em 1.2em;
  font-weight:800;
  z-index:1000;
}
.skip-link:focus{ left:10px; top:10px; }

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  color:var(--gold);
  background:var(--blueprint);
  display:inline-block;
  padding:.3em .8em;
  border-radius:2px;
}

.wrap{ max-width:var(--max-width); margin:0 auto; position:relative; }

.blueprint-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---------- Top navigation ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  background:var(--blueprint);
  color:#fff;
}
.nav-bar{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.85em 20px;
}
.nav-brand{
  font-family:Georgia, serif;
  font-weight:700;
  font-size:1.05rem;
  color:#fff;
  text-decoration:none;
  letter-spacing:.02em;
}
.nav-brand span{ color:var(--gold); }

.nav-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:4px;
  color:#fff;
  cursor:pointer;
}
.nav-toggle svg{ width:20px; height:20px; }

.nav-links{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:var(--blueprint);
  display:flex;
  flex-direction:column;
  padding:0 20px 16px;
  gap:2px;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
}
.nav-links.open{ max-height:320px; }
.nav-links a{
  color:#dce6f0;
  text-decoration:none;
  font-size:.9rem;
  font-weight:700;
  padding:.7em 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-links a:hover,
.nav-links a:focus{ color:var(--gold); }
.nav-links .nav-cta{
  color:var(--blueprint);
  background:var(--gold);
  text-align:center;
  border-radius:4px;
  margin-top:10px;
  border-bottom:none;
}

/* ---------- Hero ---------- */
header.hero{
  position:relative;
  background:var(--blueprint);
  color:#fff;
  overflow:hidden;
}
.hero-media{ position:relative; }
.hero-media img{
  width:100%;
  height:340px;
  object-fit:cover;
  opacity:.55;
}
.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px 24px 26px;
  background:linear-gradient(180deg, rgba(11,42,74,.15) 0%, rgba(11,42,74,.94) 88%);
}
.hero-overlay .eyebrow{ margin-bottom:10px; }
.hero-overlay h1{ color:#fff; font-size:1.7rem; margin-bottom:.3em; }
.hero-overlay .sub{ color:var(--gold); font-weight:700; font-size:.95rem; margin-bottom:.6em; }
.hero-overlay p{ font-size:.86rem; color:#dce6f0; margin:0 0 1em 0; max-width:56ch; }
.hero-ctas{ display:flex; gap:10px; flex-wrap:wrap; }

.cta-btn{
  display:inline-block;
  background:var(--gold);
  color:var(--blueprint);
  font-weight:800;
  text-decoration:none;
  padding:.85em 1.4em;
  border-radius:3px;
  font-size:.88rem;
  letter-spacing:.03em;
  border:none;
  cursor:pointer;
  text-align:center;
}
.cta-btn:hover{ filter:brightness(1.05); }
.cta-btn.secondary{ background:transparent; color:#fff; border:2px solid var(--gold); padding:calc(.85em - 2px) calc(1.4em - 2px); }

/* ---------- Sections ---------- */
section{ padding:34px 24px; }
section.alt{ background:var(--bg-section); }
.section-inner{ max-width:var(--max-width); margin:0 auto; }
.section-head{ margin-bottom:18px; max-width:60ch; }
.section-head .eyebrow{ background:none; color:var(--brand-blue); padding:0; margin-bottom:.5em; }

.about-grid{ display:flex; flex-direction:column; gap:16px; }
.about-grid img{ width:100%; border-radius:6px; }
.about-grid p{ font-size:.92rem; color:var(--grey); }

.card-grid{ display:grid; grid-template-columns:1fr; gap:14px; }

.exp-card{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid #e4e9ee;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s ease, transform .2s ease;
}
.exp-card:hover{ box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.exp-card .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  font-family:Georgia,serif; font-weight:700; font-size:.95rem;
  color:#fff;
}
.exp-card .card-media{ height:150px; overflow:hidden; background:var(--bg-section); }
.exp-card .card-media img{ width:100%; height:100%; object-fit:cover; }
.exp-card .body{ padding:16px; flex:1; }
.exp-card h3{ font-size:1.02rem; margin-bottom:.3em; }
.exp-card p{ font-size:.86rem; color:var(--grey); margin:.3em 0 0; }
.exp-card ul{ margin:.5em 0 0; padding-left:1.1em; font-size:.82rem; color:var(--grey); }

.who-strip{ display:flex; flex-wrap:wrap; gap:10px; }
.who-pill{
  background:#fff; border:1px solid #dfe6ec; border-radius:20px;
  padding:.5em 1em; font-size:.8rem; font-weight:700; color:var(--blueprint);
}

.benefit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.benefit-card{
  background:#fff; border-radius:var(--radius); padding:14px;
  border-top:4px solid var(--brand-blue);
  box-shadow:var(--shadow);
}
.benefit-card .n{ font-family:Georgia,serif; font-weight:700; color:var(--gold); font-size:1rem; }
.benefit-card h4{ margin:.2em 0; font-size:.88rem; color:var(--blueprint); }

/* ---------- Form ---------- */
form.reg-form{
  background:#fff; border-radius:10px; padding:20px;
  border:1px solid #e4e9ee; box-shadow:0 2px 8px rgba(11,42,74,.08);
  max-width:640px;
}
.field{ margin-bottom:14px; }
.field label{
  display:block; font-size:.76rem; font-weight:700; color:var(--blueprint);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:.35em;
}
.field input, .field select, .field textarea{
  width:100%; padding:.65em .75em; border:1px solid #cfd8e0; border-radius:5px;
  font-size:.92rem; font-family:inherit; color:var(--ink); background:#fbfcfd;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--brand-blue); outline-offset:1px;
  border-color:var(--brand-blue);
}
.field input:invalid:not(:placeholder-shown){ border-color:var(--red); }
.field-error{
  display:none; font-size:.72rem; color:var(--red); margin-top:.3em; font-weight:700;
}
.field.has-error .field-error{ display:block; }
.field.has-error input, .field.has-error select{ border-color:var(--red); }

.field-row{ display:flex; gap:10px; flex-wrap:wrap; }
.field-row .field{ flex:1 1 200px; }
.required{ color:var(--red); }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }

.submit-btn{
  width:100%; background:var(--brand-blue); color:#fff; font-weight:800;
  padding:.95em; border:none; border-radius:5px; font-size:.95rem; letter-spacing:.03em;
  cursor:pointer; transition:background .2s ease;
  display:flex; align-items:center; justify-content:center; gap:.5em;
}
.submit-btn:hover{ background:var(--blueprint); }
.submit-btn:disabled{ opacity:.7; cursor:not-allowed; }
.form-note{ font-size:.72rem; color:var(--grey); margin-top:10px; text-align:center; }

.form-status{
  border-radius:8px; padding:24px 20px; text-align:center; margin-top:16px;
  display:none;
}
.form-status.show{ display:block; animation:status-in .3s ease; }
.form-status.success{ background:#E8F5E9; border:1px solid var(--green); }
.form-status.success strong{ color:var(--green); font-size:1.05rem; }
.form-status.error{ background:#FDEDEE; border:1px solid var(--red); }
.form-status.error strong{ color:var(--red); font-size:1.05rem; }
.form-status p{ font-size:.85rem; color:var(--ink); margin:.5em 0 0; }
.form-status .status-icon{ font-size:2rem; margin-bottom:.3em; line-height:1; }
@keyframes status-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite; display:none;
}
.submit-btn.loading .spinner{ display:inline-block; }
.submit-btn.loading .btn-label{ opacity:.8; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Contact & footer ---------- */
.contact-section{ background:var(--blueprint); color:#fff; }
.contact-section h2{ color:#fff; }
.contact-grid{ display:flex; flex-direction:column; gap:12px; }
.contact-row{ display:flex; gap:12px; align-items:flex-start; font-size:.86rem; }
.contact-row a{ color:#dce6f0; text-decoration:underline; }
.contact-row .ic{
  width:30px; height:30px; border-radius:50%; background:var(--gold);
  color:var(--blueprint); display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.8rem; flex-shrink:0;
}

footer{
  background:#08192C; color:#9fb2c4; text-align:center; padding:26px 24px; font-size:.78rem;
}
footer .quote{ color:var(--gold); font-family:Georgia,serif; font-style:italic; font-size:1rem; margin-bottom:.6em; }

/* ---------- Utility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .exp-card, .nav-links{ transition:none; }
  .spinner{ animation:none; }
}

/* ==========================================================================
   Tablet and up
   ========================================================================== */
@media (min-width:640px){
  .card-grid{ grid-template-columns:1fr 1fr; }
  .benefit-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-media img{ height:420px; }
  .hero-overlay h1{ font-size:2.1rem; }
  section{ padding:48px 24px; }
}

@media (min-width:860px){
  .about-grid{ flex-direction:row; align-items:center; gap:36px; }
  .about-grid .about-media{ flex:0 0 42%; }
  .about-grid .about-copy{ flex:1; }
  .about-grid p{ font-size:1rem; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width:960px){
  .nav-toggle{ display:none; }
  .nav-links{
    position:static;
    flex-direction:row;
    max-height:none;
    overflow:visible;
    padding:0;
    background:transparent;
    align-items:center;
    gap:26px;
  }
  .nav-links a{ border-bottom:none; padding:.3em 0; font-size:.85rem; }
  .nav-links .nav-cta{ margin-top:0; padding:.55em 1.1em; }

  header.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:40px; padding:0 24px; }
  .hero-media{ order:2; border-radius:10px; overflow:hidden; }
  .hero-media img{ height:480px; opacity:.85; border-radius:10px; }
  .hero-overlay{
    position:static;
    order:1;
    background:none;
    padding:64px 0;
  }
  .hero-overlay h1{ font-size:2.6rem; }
  .hero-overlay p{ font-size:1rem; }

  .card-grid{ grid-template-columns:repeat(3,1fr); }
  .benefit-grid{ grid-template-columns:repeat(6,1fr); }

  section{ padding:64px 24px; }
  .section-head h2{ font-size:1.8rem; }

  form.reg-form{ margin:0 auto; padding:32px; }
  .field-row{ gap:16px; }

  .contact-grid{ flex-direction:row; justify-content:space-between; flex-wrap:wrap; }
  .contact-row{ flex:1 1 240px; }
}

@media (min-width:1200px){
  .hero-media img{ height:540px; }
}