@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#142b35;--muted:#61747a;--teal:#2f8b83;--mint:#bfe5d9;--paper:#f7faf8;--line:#dce8e3;--dark:#102a32}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}.site-header{height:82px;padding:0 7.5%;display:flex;align-items:center;justify-content:space-between;background:rgba(247,250,248,.94);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(220,232,227,.75);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;font:800 19px Manrope,sans-serif;letter-spacing:.14em}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:var(--teal);color:white;font:800 18px Manrope;letter-spacing:0}.nav{display:flex;align-items:center;gap:34px;font-size:13px;font-weight:600;color:#50656b}.nav a:hover,.text-link:hover,.arrow-link:hover{color:var(--teal)}.nav-contact{border:1px solid #b8cec6;border-radius:30px;padding:10px 19px;color:var(--ink)}.menu-toggle{display:none;background:none;border:0;font-size:24px;color:var(--ink)}.hero{min-height:670px;padding:100px 7.5% 30px;background:radial-gradient(ellipse at 78% 43%,#e0f2eb 0,rgba(224,242,235,.2) 35%,transparent 65%),linear-gradient(115deg,#f8fbf9,#f1f7f4);position:relative;overflow:hidden;display:flex;align-items:center}.hero-content{width:54%;max-width:650px;position:relative;z-index:2}.eyebrow,.section-kicker{font-size:10px;letter-spacing:.19em;font-weight:700;color:var(--teal)}.pulse,.status-dot{display:inline-block;width:7px;height:7px;background:#58aa91;border-radius:50%;margin-right:9px;box-shadow:0 0 0 5px #dcefe7}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Manrope,sans-serif;letter-spacing:-.055em;line-height:1.08}h1{font-size:clamp(56px,7vw,92px);margin:27px 0 24px;font-weight:700}h1 em,h2 em{font-style:normal;color:var(--teal)}.hero-copy{max-width:500px;color:var(--muted);font-size:17px;line-height:1.8}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:35px}.button{display:inline-flex;gap:22px;align-items:center;padding:14px 21px;border-radius:4px;font-weight:700;font-size:13px}.button-primary{background:var(--dark);color:white}.button-primary:hover{background:var(--teal)}.text-link,.arrow-link{font-size:13px;font-weight:700}.hero-art{position:absolute;width:440px;height:440px;right:9%;top:50%;transform:translateY(-49%);border-radius:50%;background:radial-gradient(circle,#d3eee4 0,#eaf6f0 44%,rgba(234,246,240,0) 70%);display:grid;place-items:center}.orbit{position:absolute;border:1px solid rgba(47,139,131,.25);border-radius:50%;transform:rotate(-25deg)}.orbit-one{width:330px;height:330px}.orbit-two{width:420px;height:220px;transform:rotate(42deg)}.core{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#3f9b8c,#155e61);box-shadow:0 20px 55px #398d8050,inset 0 0 0 12px #ffffff18;color:white;font:700 35px Manrope;letter-spacing:-.06em}.node{position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;border:4px solid #62a99a;box-shadow:0 0 0 7px #a9d8c755}.node-a{top:56px;left:105px}.node-b{right:42px;top:190px}.node-c{bottom:53px;left:115px}.art-label{position:absolute;font-size:9px;letter-spacing:.16em;font-weight:700;color:#5b8f83}.label-a{top:38px;right:85px}.label-b{bottom:54px;right:35px}.label-c{left:28px;top:230px}.hero-foot{position:absolute;bottom:26px;left:7.5%;right:7.5%;display:flex;justify-content:space-between;border-top:1px solid #dce8e3;padding-top:17px;font-size:9px;letter-spacing:.15em;color:#80918f;font-weight:700}.section{padding:110px 10%}.intro-grid,.section-heading,.projects-row{display:grid;grid-template-columns:1.2fr .8fr;gap:9%;margin-top:38px}.section h2{font-size:clamp(36px,4.2vw,55px);margin:0}.intro{background:#fff}.lead{font:600 20px/1.5 Manrope;color:var(--ink)}.intro-grid p:not(.lead){color:var(--muted);font-size:14px}.arrow-link{display:inline-flex;gap:20px;margin-top:16px;color:var(--teal)}.focus{background:#f1f7f4}.section-heading{align-items:end;margin-top:25px}.section-heading>p{color:var(--muted);max-width:330px;font-size:14px;margin:0 0 6px}.focus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:55px}.focus-card{background:#fff;padding:28px 27px 32px;min-height:275px;position:relative;border:1px solid #e3eee8;transition:transform .2s,box-shadow .2s}.focus-card:hover{transform:translateY(-5px);box-shadow:0 18px 35px #1c55400e}.card-number{font-size:10px;color:#9aadaa;letter-spacing:.1em}.card-icon{font-size:29px;color:var(--teal);margin:22px 0 13px}.focus-card h3,.principle-list h3{font:700 18px Manrope;margin-bottom:10px}.focus-card p{font-size:13px;color:var(--muted);line-height:1.75}.card-line{position:absolute;bottom:0;left:27px;width:45px;height:3px;background:#7cb8a7}.projects{background:#fff}.projects-row{align-items:center}.project-note{border-left:1px solid var(--line);padding-left:34px}.status-text{font-size:9px;letter-spacing:.15em;color:var(--teal);font-weight:700}.project-note p{color:var(--muted);font-size:14px;margin:20px 0 0}.principles{background:#eaf4ef}.principles>h2{margin:28px 0 58px}.principle-list{border-top:1px solid #cfdfd7}.principle-list>div{display:grid;grid-template-columns:70px 1fr 1fr;gap:25px;align-items:center;padding:23px 0;border-bottom:1px solid #cfdfd7}.principle-list>div>span{font-size:11px;color:var(--teal);font-weight:700}.principle-list h3{margin:0}.principle-list p{margin:0;color:var(--muted);font-size:13px}.contact{padding-top:75px;padding-bottom:75px;background:#fff}.contact-panel{background:var(--dark);color:white;padding:70px 8%;position:relative;overflow:hidden}.contact-panel .section-kicker{color:#91cbbb}.contact-panel h2{font-size:clamp(40px,5vw,62px);margin:28px 0 18px;position:relative;z-index:1}.contact-panel h2 em{color:#8bd0b8}.contact-panel p{color:#bfd0ce;font-size:14px;max-width:440px;position:relative;z-index:1}.button-light{background:#d5eee4;color:#173b3c;margin-top:17px;position:relative;z-index:1}.button-light:hover{background:#fff}.contact-orbit{position:absolute;width:390px;height:390px;border:1px solid #ffffff20;border-radius:50%;right:8%;top:-90px;box-shadow:0 0 0 45px #ffffff08,0 0 0 90px #ffffff05}.footer{padding:28px 7.5%;display:flex;align-items:center;justify-content:space-between;background:#0b222a;color:#9eb4b2;font-size:11px}.footer-brand{color:white;font-size:15px}.footer-brand .brand-mark{width:28px;height:28px;font-size:15px}
@media(max-width:800px){.site-header{height:70px;padding:0 6%}.menu-toggle{display:block}.nav{display:none;position:absolute;top:70px;left:0;right:0;padding:20px 6% 26px;background:var(--paper);flex-direction:column;align-items:flex-start;gap:20px;border-bottom:1px solid var(--line)}.nav.open{display:flex}.hero{min-height:760px;padding:75px 7% 80px;align-items:flex-start}.hero-content{width:100%}.hero-art{width:300px;height:300px;top:auto;bottom:45px;right:5%;transform:none;opacity:.85}.orbit-one{width:230px;height:230px}.orbit-two{width:290px;height:155px}.core{width:105px;height:105px;font-size:26px}.hero-foot{left:7%;right:7%;font-size:7px;gap:12px}.section{padding:75px 7%}.intro-grid,.section-heading,.projects-row{grid-template-columns:1fr;gap:25px}.focus-grid{grid-template-columns:1fr}.focus-card{min-height:230px}.principle-list>div{grid-template-columns:35px 1fr;gap:12px}.principle-list p{grid-column:2}.contact-panel{padding:55px 8%}.footer{padding:25px 6%;gap:15px;flex-wrap:wrap}.footer>span:nth-child(2){display:none}}
.contact-form {
  position: relative;
  z-index: 2;
  max-width: 650px;
  margin-top: 28px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}

.form-field label {
  color: #d5eee4;
  font-size: 12px;
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #49636a;
  border-radius: 4px;
  background: #183740;
  color: white;
  font: inherit;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: 2px solid #8bd0b8;
  border-color: #8bd0b8;
}

.form-field textarea {
  resize: vertical;
}

.form-hidden {
  position: absolute;
  left: -9999px;
}

.contact-email {
  margin-top: 20px;
  font-size: 12px;
}

@media(max-width:600px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}


/* SMIRAG SERVICES */

.services-intro {
  max-width: 650px;
  line-height: 1.8;
  margin: 22px 0 38px;
}

/* Desktop: two equal columns */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
  width: 100%;
}

.service-card {
  width: 100%;
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(139, 208, 184, 0.25);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.service-number {
  color: #8bd0b8;
  font-size: 12px;
  letter-spacing: 2px;
}

.service-card h3 {
  margin: 20px 0 12px;
}

.service-card p {
  line-height: 1.75;
}

.service-price {
  display: block;
  margin-top: 22px;
  color: #8bd0b8;
  font-size: 13px;
  font-weight: 600;
}

/* Services bottom section */
.services-bottom {
  margin-top: 40px;
  padding: 45px;
  border-radius: 12px;
  background: #e4f0f1;
  color: #183740;
  border: 1px solid #c2dadd;
  box-shadow: 0 12px 30px rgba(16, 43, 53, 0.12);
}

.services-bottom h3 {
  color: #102b35;
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.services-bottom p {
  color: #294c55;
  font-size: 1rem;
  line-height: 1.8;
}

.services-bottom .button {
  background: #102b35;
  color: #ffffff;
  padding: 14px 25px;
  border-radius: 6px;
  font-weight: 600;
  display: inline-block;
  margin-top: 15px;
}

.services-bottom .button:hover {
  background: #285663;
}

.services-note {
  margin-top: 20px;
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.6;
}

/* Mobile: one column */
@media (max-width: 650px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 22px;
  }

  .services-bottom {
    padding: 25px;
  }
}
/* SMIRAG Logo */
.brand img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 650px) {
  .brand img {
    width: 175px;
  }
}