/* A.T. Construction faithful design CSS */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --teal:         #2F859C;
  --teal-dark:    #1C6478;
  --teal-deeper:  #0F3E4D;
  --teal-mid:     #3D9DB6;
  --teal-pale:    #E4F4F8;
  --teal-pale2:   #C6E8F1;
  --amber:        #F4A623;
  --amber-dark:   #D98B0A;
  --white:        #FFFFFF;
  --off-white:    #F8FCFD;
  --section-alt:  #F0F8FB;
  --text:         #1C3A42;
  --text-mid:     #3D6470;
  --text-light:   #6B909A;
  --border:       #D0E8EE;
  --shadow:       rgba(47,133,156,0.12);

  --f-display: 'DM Sans', sans-serif;
  --f-body:    'Inter', sans-serif;

  --radius-sm:  6px;
  --radius-md:  14px;
  --radius-lg:  24px;
  --radius-xl:  36px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
.at-page *, .at-page *::before, .at-page *::after { box-sizing: border-box; }
.at-page {
  font-family: var(--f-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
}
.at-page img { max-width: 100%; display: block; }
.at-page a { color: inherit; text-decoration: none; }
.at-page ul, .at-page ol { list-style: none; margin:0; padding:0; }
.at-page button { cursor: pointer; font-family: inherit; border: none; background: none; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SHARED LAYOUT
   ============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container-sm { max-width: 820px; margin: 0 auto; padding: 0 28px; }

.section-pad     { padding: 96px 0; }
.section-pad-sm  { padding: 64px 0; }
.section-alt     { background: var(--section-alt); }
.section-teal    { background: var(--teal); }
.section-deep    { background: var(--teal-deeper); }

/* ============================================================
   TYPE UTILITIES
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--teal); margin-bottom: 16px;
}
.eyebrow::before {
  content: ''; width: 24px; height: 3px;
  background: var(--teal); border-radius: 2px;
}
.eyebrow-amber { color: var(--amber); }
.eyebrow-amber::before { background: var(--amber); }
.eyebrow-white { color: rgba(255,255,255,.7); }
.eyebrow-white::before { background: rgba(255,255,255,.5); }

.heading-xl {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1.02; letter-spacing: -1.5px;
  color: var(--text);
}
.heading-lg {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08; letter-spacing: -1px;
  color: var(--text);
}
.heading-md {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15; letter-spacing: -.5px;
  color: var(--text);
}
.heading-sm {
  font-family: var(--f-display); font-weight: 700;
  font-size: 20px; line-height: 1.3;
  color: var(--text);
}
.white-text, .white-text * { color: white; }
.body-lg { font-size: 17px; color: var(--text-mid); line-height: 1.75; }
.body-md { font-size: 15px; color: var(--text-mid); line-height: 1.7; }

/* BUTTON SYSTEM */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 28px;
  border-radius: var(--radius-sm); font-family: var(--f-display);
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
  transition: all .22s; border: 2px solid transparent;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.btn-primary { background: var(--amber); color: white; box-shadow: 0 4px 18px rgba(244,166,35,.4); }
.btn-primary:hover { background: var(--amber-dark); box-shadow: 0 6px 24px rgba(244,166,35,.5); transform: translateY(-2px); }
.btn-teal { background: var(--teal); color: white; box-shadow: 0 4px 18px var(--shadow); }
.btn-teal:hover { background: var(--teal-dark); box-shadow: 0 6px 24px rgba(47,133,156,.35); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: white; }
.btn-outline-white { background: transparent; color: white; border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: white; }
.btn-ghost-white { background: rgba(255,255,255,.15); color: white; border-color: rgba(255,255,255,.25); backdrop-filter: blur(8px); }
.btn-ghost-white:hover { background: rgba(255,255,255,.25); }
.btn-whatsapp { background: #25D366; color: white; box-shadow: 0 4px 18px rgba(37,211,102,.35); }
.btn-whatsapp:hover { background: #1EAD54; box-shadow: 0 6px 24px rgba(37,211,102,.45); transform: translateY(-2px); }
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-full { width: 100%; }

/* --- HERO --- */
.hero { min-height: 100vh; background: var(--teal-deeper); position: relative; overflow: hidden; display: flex; align-items: center; padding-top: 70px; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(47,133,156,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(47,133,156,.18) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 100%); }
.water-drops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drop { position: absolute; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: rgba(75,180,210,.5); animation: fall linear infinite; }
.drop:nth-child(1){left:12%;animation-duration:4.2s;animation-delay:0s;width:6px;height:9px}
.drop:nth-child(2){left:25%;animation-duration:3.8s;animation-delay:1.2s;width:9px;height:13px}
.drop:nth-child(3){left:40%;animation-duration:5s;animation-delay:.5s;width:5px;height:8px}
.drop:nth-child(4){left:58%;animation-duration:3.5s;animation-delay:2.1s;width:8px;height:11px}
.drop:nth-child(5){left:72%;animation-duration:4.7s;animation-delay:.9s;width:6px;height:9px}
.drop:nth-child(6){left:85%;animation-duration:3.9s;animation-delay:1.7s;width:10px;height:14px}
.drop:nth-child(7){left:6%;animation-duration:5.2s;animation-delay:3s;width:5px;height:7px}
.drop:nth-child(8){left:33%;animation-duration:4.4s;animation-delay:.3s;width:7px;height:10px}
.drop:nth-child(9){left:50%;animation-duration:3.6s;animation-delay:1.5s;width:9px;height:13px}
.drop:nth-child(10){left:65%;animation-duration:4.9s;animation-delay:2.8s;width:5px;height:8px}
@keyframes fall { 0%{top:-20px;opacity:0} 10%{opacity:.7} 80%{opacity:.6} 100%{top:100vh;opacity:0} }
.hero-content { position: relative; z-index: 10; width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(47,133,156,.25); border: 1px solid rgba(75,168,190,.4); color: rgba(255,255,255,.85); font-family: var(--f-display); font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; padding: 8px 16px; border-radius: 100px; margin-bottom: 26px; }
.hero-badge-dot { width: 7px; height: 7px; background: var(--teal-mid); border-radius: 50%; animation: blink 2s ease-in-out infinite; }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
.hero-title { font-family: var(--f-display); font-weight: 800; font-size: clamp(46px, 5.5vw, 72px); line-height: .98; letter-spacing: -2px; color: white; margin-bottom: 24px; }
.hero-title .accent-line { color: var(--teal-mid); display: block; }
.hero-title .ruled { position: relative; display: inline-block; }
.hero-title .ruled::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; background: var(--amber); border-radius: 3px; }
.hero-desc { font-size: 17px; color: rgba(255,255,255,.65); line-height: 1.75; max-width: 460px; margin-bottom: 36px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 52px; }
.hero-trust { display: flex; gap: 28px; flex-wrap: wrap; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.hero-trust-item { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .5px; }
.hero-trust-item svg { width: 16px; height: 16px; fill: var(--teal-mid); flex-shrink:0; }
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.shield-wrap { position: relative; width: 100%; max-width: 480px; }
.shield-svg { width: 100%; filter: drop-shadow(0 24px 60px rgba(0,0,0,.4)); }
.hero-stat-cards { position: absolute; left: -40px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.hstat { background: rgba(255,255,255,.06); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 14px 20px; white-space: nowrap; }
.hstat-num { font-family: var(--f-display); font-weight: 800; font-size: 28px; color: white; line-height: 1; }
.hstat-num span { color: var(--amber); }
.hstat-label { font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .5px; margin-top: 3px; }
/* TRUST BAR */
.trust-bar { background: var(--teal); padding: 18px 0; }
.trust-bar-inner { max-width: 1200px; margin: 0 auto; padding: 0 28px; display: flex; gap: 0; align-items: stretch; flex-wrap: wrap; }
.tbar-item { display: flex; align-items: center; gap: 10px; font-family: var(--f-display); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); padding: 6px 28px; border-right: 1px solid rgba(255,255,255,.2); flex: 1; min-width: 160px; }
.tbar-item:last-child { border-right: none; }
.tbar-item svg { width: 18px; height: 18px; fill: rgba(255,255,255,.7); flex-shrink:0; }
/* INTRO / WHY US */
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.intro-visual-stack { position: relative; }
.intro-main-card { background: linear-gradient(145deg, var(--teal-pale) 0%, var(--teal-pale2) 100%); border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; position: relative; }
.intro-main-card svg { width: 80%; height: 80%; }
.intro-float-card { position: absolute; bottom: -20px; right: -24px; background: var(--teal); color: white; border-radius: var(--radius-md); padding: 20px 24px; box-shadow: 0 12px 40px rgba(47,133,156,.4); text-align: center; }
.float-num { font-family: var(--f-display); font-weight: 800; font-size: 38px; line-height: 1; color: white; }
.float-label { font-size: 11px; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.intro-second-card { position: absolute; top: -20px; left: -24px; background: white; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; box-shadow: 0 8px 28px rgba(0,0,0,.08); display: flex; align-items: center; gap: 12px; }
.second-icon { width: 40px; height: 40px; background: var(--teal-pale); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.second-icon svg { width: 20px; height: 20px; fill: var(--teal); }
.second-text strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); }
.second-text span { font-size: 12px; color: var(--text-light); }
.intro-text p { margin-bottom: 18px; }
.check-list { margin: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.check-item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text-mid); line-height: 1.6; }
.check-mark { width: 22px; height: 22px; background: var(--teal); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.check-mark svg { width: 12px; height: 12px; fill: white; }

/* SERVICES */
.services-header { max-width: 600px; margin-bottom: 56px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.svc-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: all .28s; position: relative; }
.svc-card:hover { transform: translateY(-5px); box-shadow: 0 20px 56px var(--shadow); border-color: var(--teal-pale2); }
.svc-card-top { padding: 32px 28px 24px; }
.svc-icon-wrap { width: 54px; height: 54px; background: var(--teal-pale); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background .28s; }
.svc-card:hover .svc-icon-wrap { background: var(--teal); }
.svc-icon-wrap svg { width: 27px; height: 27px; fill: var(--teal); transition: fill .28s; }
.svc-card:hover .svc-icon-wrap svg { fill: white; }
.svc-card h3 { margin-bottom: 10px; }
.svc-card p { font-size: 14px; color: var(--text-mid); line-height: 1.7; }
.svc-card-foot { padding: 16px 28px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 6px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--teal); transition: color .2s; }
.svc-card-foot svg { width: 14px; height: 14px; fill: var(--teal); transition: transform .2s; }
.svc-card:hover .svc-card-foot svg { transform: translateX(4px); }
/* PROJECTS PREVIEW */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; margin-top: 56px; }
.proj-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); transition: all .28s; background: white; }
.proj-card:hover { transform: translateY(-5px); box-shadow: 0 20px 56px var(--shadow); }
.proj-img { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--teal-deeper) 0%, var(--teal) 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.proj-img svg { width: 72px; height: 72px; fill: rgba(255,255,255,.1); }
.proj-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: white; font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; }
.proj-body { padding: 24px 26px; }
.proj-body h3 { margin-bottom: 8px; }
.proj-body p { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 14px; }
.proj-meta { display: flex; gap: 16px; flex-wrap: wrap; }
.proj-meta-item { font-size: 12px; color: var(--text-light); display: flex; align-items: center; gap: 5px; }
.proj-meta-item strong { color: var(--teal); font-weight: 600; }
/* TESTIMONIALS */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-top: 56px; }
.testi-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 30px; transition: box-shadow .28s; }
.testi-card:hover { box-shadow: 0 12px 40px var(--shadow); }
.stars { display: flex; gap: 3px; margin-bottom: 16px; }
.star { width: 16px; height: 16px; fill: var(--amber); }
.testi-quote { font-size: 14px; color: var(--text-mid); line-height: 1.75; margin-bottom: 20px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-mid)); display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; font-size: 14px; color: white; flex-shrink: 0; }
.testi-name { font-size: 14px; font-weight: 600; color: var(--text); }
.testi-role { font-size: 12px; color: var(--text-light); }
/* CTA BAND */
.cta-band { background: linear-gradient(135deg, var(--teal-deeper) 0%, var(--teal-dark) 50%, var(--teal) 100%); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; }
.cta-inner { position: relative; z-index: 1; }
.cta-band h2 { color: white; margin-bottom: 14px; }
.cta-band p { color: rgba(255,255,255,.7); font-size: 17px; max-width: 500px; margin: 0 auto 36px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* PAGE HERO (inner) */
.page-hero { background: linear-gradient(135deg, var(--teal-deeper) 0%, var(--teal-dark) 60%, var(--teal) 100%); padding: 136px 0 72px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 44px 44px; }
.page-hero-content { position: relative; z-index: 2; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255,255,255,.45); margin-bottom: 18px; }
.breadcrumb .crumb-active { color: rgba(255,255,255,.8); }
.breadcrumb .sep { opacity: .35; }
.page-hero h1 { color: white; margin-bottom: 14px; }
.page-hero p { color: rgba(255,255,255,.7); font-size: 18px; max-width: 560px; }
/* ABOUT */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mission-vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.mv-card { border-radius: var(--radius-md); padding: 28px; border: 1px solid var(--border); }
.mv-card.mission { background: var(--teal-pale); border-color: var(--teal-pale2); }
.mv-card.vision { background: var(--teal); }
.mv-card .mv-label { font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--teal); margin-bottom: 10px; display: block; }
.mv-card.vision .mv-label { color: rgba(255,255,255,.65); }
.mv-card p { font-size: 14px; color: var(--text-mid); line-height: 1.75; }
.mv-card.vision p { color: rgba(255,255,255,.85); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; margin-top: 52px; }
.val-card { background: white; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px 24px; text-align: center; transition: all .28s; }
.val-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px var(--shadow); }
.val-icon { width: 56px; height: 56px; background: var(--teal); border-radius: 14px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; }
.val-icon svg { width: 28px; height: 28px; fill: white; }
.val-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.val-card p { font-size: 13px; color: var(--text-mid); line-height: 1.7; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 26px; margin-top: 52px; }
.team-card { text-align: center; }
.team-avatar { width: 90px; height: 90px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-dark), var(--teal-mid)); margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-weight: 800; font-size: 26px; color: white; }
.team-card h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.team-card p { font-size: 13px; color: var(--teal); font-weight: 600; }
.cert-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.cert-badge { background: var(--teal-pale); border: 1px solid var(--teal-pale2); border-radius: 8px; padding: 10px 20px; font-family: var(--f-display); font-size: 13px; font-weight: 700; color: var(--teal); }

.full-services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px;margin-top:52px;} .full-svc-card{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:white;transition:all .28s;} .full-svc-card:hover{transform:translateY(-5px);box-shadow:0 20px 56px var(--shadow);} .full-svc-top{background:linear-gradient(135deg,var(--teal-deeper),var(--teal-dark));padding:32px 28px;position:relative;overflow:hidden;} .full-svc-top::after{content:'';position:absolute;right:-20px;bottom:-20px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.04);} .full-svc-top svg{width:36px;height:36px;fill:rgba(255,255,255,.8);margin-bottom:12px;} .full-svc-top h3{font-family:var(--f-display);font-weight:800;font-size:22px;color:white;margin-bottom:4px;} .full-svc-top p{font-size:13px;color:rgba(255,255,255,.6);} .full-svc-body{padding:24px 28px;} .svc-feature-list{display:flex;flex-direction:column;gap:10px;} .svc-feature{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-mid);} .svc-feature-dot{width:6px;height:6px;background:var(--teal);border-radius:50%;flex-shrink:0;} .contact-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:60px;align-items:start;} .contact-info-block h2{margin-bottom:14px;} .contact-info-block .body-md{margin-bottom:36px;} .cinfo-item{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px;} .cinfo-icon{width:46px;height:46px;background:var(--teal-pale);border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .cinfo-icon svg{width:22px;height:22px;fill:var(--teal);} .cinfo-item h4{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-light);margin-bottom:4px;} .cinfo-item p{font-size:15px;color:var(--text-mid);line-height:1.6;} .cinfo-item a{color:var(--teal);font-weight:600;} .cinfo-item a:hover{text-decoration:underline;} .quick-actions{display:flex;flex-direction:column;gap:12px;margin-top:32px;} .qa-btn{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:white;transition:all .22s;text-align:left;} .qa-btn:hover{border-color:var(--teal);box-shadow:0 4px 16px var(--shadow);} .qa-btn.whatsapp{border-color:#d0f0de;background:#f0fbf4;} .qa-btn.whatsapp:hover{border-color:#25D366;} .qa-icon{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;} .qa-icon svg{width:22px;height:22px;} .qa-text strong{display:block;font-size:15px;font-weight:700;color:var(--text);} .qa-text span{font-size:13px;color:var(--text-light);} .qa-arrow{margin-left:auto;opacity:.4;} .qa-arrow svg{width:16px;height:16px;fill:var(--text);} .contact-form-card{background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius-xl);padding:44px;} .contact-form-card h2{margin-bottom:28px;} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .form-group{margin-bottom:20px;} .form-group label{display:block;font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--text);margin-bottom:7px;letter-spacing:.2px;} .form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 16px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:var(--f-body);font-size:14px;color:var(--text);background:white;outline:none;transition:border-color .2s,box-shadow .2s;appearance:none;} .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,133,156,.12);} .form-group textarea{resize:vertical;min-height:120px;} .form-note{font-size:12px;color:var(--text-light);text-align:center;margin-top:12px;} .at-footer{background:var(--teal-deeper);color:rgba(255,255,255,.6);padding:72px 0 32px;} .footer-grid{max-width:1200px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px;margin-bottom:56px;} .footer-brand .nav-logo{margin-bottom:18px;} .footer-brand p{font-size:14px;line-height:1.75;max-width:280px;} .footer-col h4{font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:white;margin-bottom:18px;} .footer-col a,.footer-col p{display:block;font-size:14px;padding:5px 0;color:rgba(255,255,255,.5);transition:color .2s;line-height:1.6;} .footer-col a:hover{color:var(--teal-mid);} .footer-bottom{max-width:1200px;margin:0 auto;padding:24px 28px 0;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;} .footer-bottom p{font-size:13px;} .footer-bottom a{color:var(--teal-mid);font-size:13px;} .footer-social{display:flex;gap:10px;} .social-btn{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .2s;} .social-btn:hover{background:var(--teal);} .social-btn svg{width:16px;height:16px;fill:rgba(255,255,255,.6);} .wa-float{position:fixed;bottom:28px;right:28px;z-index:300;display:flex;align-items:center;gap:10px;background:#25D366;color:white;padding:14px 22px;border-radius:100px;font-family:var(--f-display);font-size:14px;font-weight:700;box-shadow:0 6px 28px rgba(37,211,102,.5);transition:all .25s;animation:popIn .6s cubic-bezier(.34,1.56,.64,1) 1s both;} .wa-float:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 10px 36px rgba(37,211,102,.6);} .wa-float svg{width:20px;height:20px;fill:white;flex-shrink:0;} @keyframes popIn{from{opacity:0;transform:scale(.5);} to{opacity:1;transform:scale(1);}} @media (max-width:1024px){.hero-content{grid-template-columns:1fr;max-width:640px;} .hero-visual{display:none;} .hero-stat-cards{display:none;} .intro-grid,.about-grid,.contact-grid{grid-template-columns:1fr;} .intro-visual-stack{order:-1;} .intro-float-card{right:0;} .intro-second-card{left:0;} .process-grid{grid-template-columns:1fr 1fr;} .process-grid::before{display:none;} .footer-grid{grid-template-columns:1fr 1fr;}} @media (max-width:768px){.section-pad{padding:68px 0;} .hero-title{font-size:44px;letter-spacing:-1px;} .tbar-item{min-width:50%;border-right:none;border-bottom:1px solid rgba(255,255,255,.2);padding:10px 20px;} .process-grid{grid-template-columns:1fr 1fr;} .mission-vision-grid{grid-template-columns:1fr;} .contact-form-card{padding:28px;}} @media (max-width:580px){.section-pad{padding:56px 0;} .form-row{grid-template-columns:1fr;} .footer-grid{grid-template-columns:1fr;} .hero-actions{flex-direction:column;} .cta-actions{flex-direction:column;align-items:center;} .process-grid{grid-template-columns:1fr;} .wa-float span{display:none;} .wa-float{padding:14px;}} .mt-4{margin-top:16px;} .mt-6{margin-top:24px;} .mt-8{margin-top:32px;} .mt-12{margin-top:48px;} .mb-4{margin-bottom:16px;} .mb-8{margin-bottom:32px;} .text-center{text-align:center;} .mx-auto{margin-left:auto;margin-right:auto;} .max-600{max-width:600px;} .flex-gap-16{display:flex;gap:16px;flex-wrap:wrap;} hr.divider{border:none;border-top:1px solid var(--border);margin:0;} .proc-section{padding:88px 0;background:var(--teal-deeper);position:relative;overflow:hidden} .proc-section::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px} .proc-head{text-align:center;margin-bottom:64px;position:relative;z-index:1} .proc-head h2{color:white;margin-bottom:12px} .proc-head p{color:rgba(255,255,255,.55);font-size:15px;max-width:460px;margin:0 auto} .proc-cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;z-index:1} .proc-card-new{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:36px 24px 32px;text-align:center;transition:all .3s;position:relative} .proc-card-new:hover{background:rgba(47,133,156,.25);border-color:rgba(47,133,156,.5);transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,.3)} .proc-badge{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;background:var(--amber);border-radius:14px;font-family:var(--f-display);font-weight:800;font-size:20px;color:white;margin:0 auto 20px} .proc-icon-wrap-new{width:68px;height:68px;margin:0 auto 18px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .3s} .proc-card-new:hover .proc-icon-wrap-new{background:var(--teal)} .proc-icon-wrap-new svg{width:30px;height:30px;fill:none;transition:fill .3s} .proc-card-new h3{font-family:var(--f-display);font-weight:700;font-size:17px;color:white;margin-bottom:10px} .proc-card-new p{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65} @media(max-width:768px){.proc-cards-row{grid-template-columns:1fr 1fr}} @media(max-width:480px){.proc-cards-row{grid-template-columns:1fr}} .clients-strip{padding:52px 0;background:var(--teal-pale)} .clients-strip-label{text-align:center;margin-bottom:32px;font-family:var(--f-display);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--text-light)} .logos-flex{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .logo-pill{background:white;border:1px solid var(--border);border-radius:100px;padding:11px 22px;font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--text-mid);transition:all .2s;white-space:nowrap} .logo-pill:hover{border-color:var(--teal);color:var(--teal);transform:translateY(-2px);box-shadow:0 4px 14px var(--shadow)} .tl-section{padding:96px 0;background:var(--off-white)} .tl-outer{max-width:860px;margin:0 auto;padding:0 28px;position:relative} .tl-spine{position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent,var(--teal) 20%,var(--teal) 80%,transparent);transform:translateX(-50%);z-index:0} .tl-item{display:grid;grid-template-columns:1fr 56px 1fr;align-items:start;margin-bottom:52px;position:relative} .tl-item:last-child{margin-bottom:0} .tl-left{padding-right:24px} .tl-right{padding-left:24px} .tl-mid{display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:6px;z-index:1;position:relative} .tl-dot{width:20px;height:20px;background:var(--teal);border-radius:50%;border:4px solid white;box-shadow:0 0 0 3px var(--teal-pale2);flex-shrink:0;transition:transform .3s,box-shadow .3s} .tl-item:hover .tl-dot{transform:scale(1.35);box-shadow:0 0 0 5px var(--teal-pale2),0 0 18px rgba(47,133,156,.45)} .tl-yr-label{font-family:var(--f-display);font-size:11px;font-weight:800;color:var(--teal);letter-spacing:1px;text-align:center} .tl-box{background:white;border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:0 3px 16px rgba(0,0,0,.05)} .tl-box-tag{display:inline-block;background:var(--teal-pale);color:var(--teal);font-family:var(--f-display);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:8px} .tl-box h3{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--text);margin-bottom:5px} .tl-box p{font-size:13px;color:var(--text-mid);line-height:1.6} @media(max-width:640px){.tl-spine{left:20px} .tl-item{grid-template-columns:44px 1fr} .tl-left{display:none} .tl-right{padding-left:14px}} .at-page .section-pad:first-child .hero{padding-top:70px}
.project-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; } .filter-btn { padding: 9px 20px; border-radius: 100px; font-family: var(--f-display); font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); color: var(--text-mid); background: white; transition: all .2s; cursor: pointer; } .filter-btn:hover, .filter-btn.active { background: var(--teal); color: white; border-color: var(--teal); } .big-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 28px; } .big-proj-card { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); background: white; transition: all .28s; } .big-proj-card:hover { transform: translateY(-5px); box-shadow: 0 20px 56px var(--shadow); } .big-proj-img { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--teal-deeper), var(--teal)); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .big-proj-img svg { width: 80px; height: 80px; fill: rgba(255,255,255,.1); } .big-proj-tag { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); color: white; font-family: var(--f-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; } .big-proj-year { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,.3); backdrop-filter: blur(8px); color: rgba(255,255,255,.8); font-family: var(--f-display); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; } .big-proj-body { padding: 24px 26px; } .big-proj-body h3 { margin-bottom: 8px; } .big-proj-body p { font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 16px; } .proj-details-row { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--border); } .proj-detail { font-size: 12px; color: var(--text-light); } .proj-detail strong { display: block; color: var(--teal); font-size: 13px; font-weight: 700; }

/* navbar + responsive */
#navbar{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(255,255,255,0.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border);box-shadow:0 2px 24px rgba(47,133,156,0.08)}
.nav-wrap{max-width:1200px;margin:0 auto;padding:0 28px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.nav-logo-mark{width:38px;height:38px;background:var(--teal);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-logo-mark svg{width:22px;height:22px}
.nav-logo-text{font-family:var(--f-display);font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text);line-height:1.1}
.nav-logo-text span{color:var(--teal)}
.nav-logo-sub{font-family:var(--f-display);font-size:9px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-light);display:block}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{font-size:14px;font-weight:500;color:var(--text-mid);padding:7px 14px;border-radius:var(--radius-sm);transition:color .2s,background .2s;text-decoration:none;white-space:nowrap}
.nav-links a:hover{color:var(--teal);background:var(--teal-pale)}
.nav-links a.active{color:var(--teal);font-weight:600;background:var(--teal-pale)}
.nav-cta{display:flex;align-items:center;gap:10px}
.btn-nav-call{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--radius-sm);background:var(--teal-pale);color:var(--teal);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s}
.btn-nav-call:hover{background:var(--teal-pale2)}
.btn-nav-call svg{width:15px;height:15px;flex-shrink:0}
.btn-nav-primary{display:flex;align-items:center;gap:7px;padding:10px 20px;border-radius:var(--radius-sm);background:var(--amber);color:var(--white);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px rgba(244,166,35,.35);transition:background .2s,transform .15s}
.btn-nav-primary:hover{background:var(--amber-dark);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;border-radius:6px;background:none;border:none;cursor:pointer;transition:background .2s}
.hamburger:hover{background:var(--teal-pale)}
.hamburger span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:all .28s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:70px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:16px 24px 24px;z-index:199;flex-direction:column;gap:2px;box-shadow:0 12px 32px rgba(0,0,0,.1)}
.mobile-nav.open{display:flex}
.mobile-nav a.m-link{font-size:16px;font-weight:500;color:var(--text-mid);padding:14px 4px;border-bottom:1px solid var(--border);text-decoration:none;transition:color .2s}
.mobile-nav a.m-link:hover,.mobile-nav a.m-link.active{color:var(--teal)}
.mobile-nav .m-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.mobile-nav .btn-nav-call,.mobile-nav .btn-nav-primary{justify-content:center;padding:14px 20px;font-size:14px}
@media(max-width:980px){.nav-links{display:none}.nav-cta .btn-nav-call,.nav-cta .btn-nav-primary{display:none}.hamburger{display:flex}.nav-wrap{padding:0 18px}}
@media(max-width:420px){.nav-logo-text{font-size:16px}.nav-logo-mark{width:34px;height:34px}.nav-logo-sub{font-size:8px;letter-spacing:2px}}