:root{
  --ink:#1d2330;
  --muted:#7e8899;
  --accent:#c0176a;
  --nav:#2b3a49;
  --soft:#f8ebf2;
  --band:#fdf5f9;
  --heroY: 12%;
  --card-img-ratio: 4/3;
  --card-img-h: 320px;
}

*{box-sizing:border-box}
html,body{margin:0}
html{scroll-behavior:smooth}
body{font-family:"Inter",system-ui,Arial,sans-serif;color:var(--ink);background:var(--band);}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:static;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;z-index:1000}

/* ===== TOP CONTACT BAR ===== */
.topbar{background:#ffffff;border-bottom:1px solid #e5e5e5;}
.topbar .row{display:flex;align-items:center;gap:20px;padding:12px 0}
.topbar .brand{display:flex;align-items:center}
.topbar .brand img{height:80px}
.contact-list{margin-left:auto;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.contact-item{display:flex;align-items:center;gap:8px;transition:color .2s ease}
.contact-item:hover{color:var(--accent)}
.ico{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--soft);box-shadow:inset 0 0 0 6px rgba(240,221,232,0.7);}
.ico svg{width:14px;height:14px;color:var(--accent);}
.meta{display:grid}
.meta small{font-size:8px;color:var(--muted)}
.meta b{font-weight:700;font-size:12px;}

/*
 * =============================================================
 * Topbar responsiveness
 *
 * On narrow viewports the contact details in the top contact bar can
 * easily overwhelm the available horizontal space.  To preserve
 * readability we scale down the icon containers and text sizes while
 * giving the logo slightly more prominence.  We also tighten the
 * spacing between items.  These rules activate below 640px wide.
 */
@media (max-width: 640px) {
  /* Increase the logo size to enhance brand visibility */
  .topbar .brand img {
    height: 76px;
  }
  /* Reduce the overall spacing inside the topbar */
  .topbar .row {
    gap: 12px;
    padding: 8px 0;
  }
  /* Tighter spacing between contact items */
  .contact-list {
    gap: 16px;
  }
  .contact-item {
    gap: 6px;
  }
  /* Shrink the icon circles */
  .ico {
    width: 26px;
    height: 26px;
    box-shadow: inset 0 0 0 4px rgba(240,221,232,0.7);
  }
  .ico svg {
    width: 14px;
    height: 14px;
  }
  /* Smaller meta text */
  .meta small {
    font-size: 8px;
  }
  .meta b {
    font-size: 12px;
  }
}

/* ===== NAV ===== */
.nav{background:#ffffff !important;backdrop-filter:saturate(180%) blur(20px);color:var(--ink);position:sticky;top:0;z-index:40;border-bottom:1px solid #e5e5e5;}
.nav .row{display:flex;align-items:center;gap:18px;padding:14px 0}
.links{display:flex;gap:20px;margin-right:auto;flex-wrap:nowrap;}
.links a .nav-text{white-space:nowrap;}
.links a{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-weight:600;color:var(--ink);transition:color .18s ease, background .18s ease;}
.links a:hover,
.links a[aria-current="page"]{color:var(--accent);background:rgba(192,23,106,0.12);}
.links a .nav-icon svg{width:18px;height:18px;flex-shrink:0;transition:color .18s ease;}
.links a:hover .nav-icon svg,
.links a[aria-current="page"] .nav-icon svg{color:var(--accent);}
.search{display:flex;gap:8px;align-items:center}
.search input{background:rgba(0,0,0,0.03);border:1px solid var(--soft);color:var(--ink);padding:10px 12px;border-radius:10px;min-width:240px;}
.search button{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(0,0,0,0.05);border:1px solid var(--soft);color:var(--ink);cursor:pointer;}

/*
 * =============================================================
 * Navigation responsiveness
 *
 * On smaller viewports the primary navigation tends to overflow
 * because there are six links plus a search form laid out in a
 * single row.  To improve usability on phones we allow the nav
 * items to wrap to multiple lines and scale down their padding,
 * text and icon sizes.  The search bar stretches to fill the
 * available width and its controls shrink proportionally.  These
 * rules kick in at roughly 640px which corresponds to common
 * smartphone widths.
 */
@media (max-width: 640px) {
  /* Stack the nav content if necessary and tighten gaps */
  .nav .row {
    flex-wrap: wrap;
    gap: 10px;
  }
  /* Allow the link container to wrap and occupy full width */
  .nav .links {
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  /* Reduce padding and font sizes on links */
  .nav .links a {
    padding: 6px 8px;
    gap: 4px;
    font-size: 14px;
  }
  /* Scale down the icon size for mobile */
  .nav .links a .nav-icon svg {
    width: 16px;
    height: 16px;
  }
  /* Adjust the label font size */
  .nav .links a .nav-text {
    font-size: 14px;
  }
  /* Expand the search form to full width and reduce spacing */
  .nav .search {
    width: 100%;
    margin-top: 6px;
    gap: 4px;
  }
  /* Let the search input grow and shrink as needed */
  .nav .search input {
    min-width: 0;
    flex: 1 1 auto;
    width: auto;
    padding: 8px 10px;
    font-size: 14px;
  }
  /* Shrink the search button */
  .nav .search button {
    width: 32px;
    height: 32px;
  }
}

/* ===== ROUTER PAGES ===== */
[data-route]{display:none}
.route-active{display:block}

/* ===== HERO ===== */
.hero{min-height:80vh;position:relative;display:grid;align-items:end;color:#fff;overflow:hidden;animation:none;}
.hero::before{content:"";position:absolute;inset:0;background:none;}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.4),rgba(0,0,0,0.2));z-index:1;}
.hero-slider{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-slider .slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;}
.hero-slider .slide.active{opacity:1;}
.hero-slider .slide img{width:100%;height:100%;object-fit:cover;object-position:center;}
.hero > .container{position:relative;z-index:2;padding:16vh 20px 6vh}
.hero h2{color:var(--accent);margin:0;font-size:72px;font-weight:800;letter-spacing:1px;line-height:1.1;text-shadow:0 4px 10px rgba(0,0,0,0.4);}
.hero h1{font-size:48px;margin:.25em 0;font-weight:700;}
.btn{display:inline-block;padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:background .3s ease, color .3s ease, transform .2s ease, box-shadow .3s ease;}
.btn-light{background:linear-gradient(180deg,#ffffff,#f9f9fb);color:var(--ink);border:1px solid var(--soft);}
.btn-light:hover{background:linear-gradient(180deg,#f9f9fb,#ffffff);}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.15);}
.btn:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,0.1);}

/* ===== PAGE BANNERS ===== */
.page-banner{background:linear-gradient(0deg,rgba(253,245,249,0.92),rgba(253,245,249,0.92)),url('../img/banners/banner.jpg') center/cover no-repeat;}
.page-banner .container{padding:56px 20px}
.page-title{margin:0 0 6px;font-size:40px;font-weight:800}
.breadcrumb{color:#7e8899;font-size:14px}
.breadcrumb a{color:var(--ink)}
.breadcrumb a:hover{color:var(--accent)}

/* ===== Sections & Cards ===== */
section{padding:56px 0}
.section-title{font-size:30px;text-align:center;margin:0 0 8px}
.underline{width:70px;height:3px;background:var(--accent);margin:10px auto;border-radius:2px}

/* ===== Client Logos ===== */
.client-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:40px;margin-top:20px;}
.client-logos img{max-height:80px;width:auto;object-fit:contain;opacity:0.7;transition:opacity 0.3s ease;filter:grayscale(20%);}
.client-logos img:hover{opacity:1;filter:grayscale(0%);}

/* =========================
   PROJECT CARDS — UNIFORM HEIGHT
   ========================= */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  align-items:stretch;
}
@media (max-width:1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.cards{grid-template-columns:1fr}}

.card{
  border:1px solid var(--soft);
  border-radius:16px;
  overflow:hidden;
  background:#ffeef7;
  box-shadow:0 2px 6px rgba(0,0,0,0.05);
  transition:box-shadow .3s ease, transform .3s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}

.card .img{
  aspect-ratio:var(--card-img-ratio);
  overflow:hidden;
  flex:0 0 auto;
}
.card .img img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:16px 16px 0 0;
}
@supports not (aspect-ratio: 1){
  .card .img{height:var(--card-img-h)}
}

.card .body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.card h3{margin:0 0 8px}
.card p{color:#556075}
.card .body .readmore{
  margin-top:auto;
  color:var(--accent);
  font-weight:700;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 24px rgba(0,0,0,0.12),0 8px 16px rgba(0,0,0,0.08);
}

/* ===== Layout helpers ===== */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:start}
@media (max-width:980px){.split{grid-template-columns:1fr}}
.wrap{display:grid;grid-template-columns:280px 1fr;gap:32px}
@media (max-width:980px){.wrap{grid-template-columns:1fr}}
.sidenav{border:1px solid var(--soft);border-radius:12px;padding:16px}
.sidenav h4{margin:0 0 12px}
.sidenav ul{list-style:none;margin:0;padding:0}
.sidenav li{margin:10px 0}
.sidenav a{color:#394353}
.sidenav a:hover,.sidenav a.active{color:var(--accent);font-weight:700}

/* ===== ABOUT ===== */
.about .kicker{letter-spacing:.2em;font-weight:700;color:#9aa6b7;font-size:12px}
.h-underline{display:inline-block;position:relative;padding-bottom:8px}
.h-underline::after{content:"";position:absolute;left:0;bottom:0;width:54px;height:3px;background:var(--accent);border-radius:2px}
.band.soft{background:var(--band)}
.center-title{text-align:center;margin:0 0 8px}
.center-sub{color:#6a7485;text-align:center;max-width:1100px;margin:0 auto 26px}
.bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 60px}
@media (max-width:1100px){.bullets{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.bullets{grid-template-columns:1fr}}
.bullet{display:flex;gap:14px;align-items:flex-start}
.bullet .dot{width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px #f7e1ee;flex:0 0 22px}
.about .split img{border-radius:16px;overflow:hidden;}

/* ===== FOOTER ===== */
footer{background:#253245;color:#ffffff;padding:56px 0 24px;}
footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
footer h4{margin:0 0 12px;color:#ffffff;}
footer a{color:#ffffff;position:relative;transition:color .18s ease;}
footer a:hover{color:var(--accent)}
footer a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:#ffffff;transition:width .2s ease;}
footer a:hover::after{width:100%}
footer a[href^="mailto"]:hover{color:#d25d97;}
footer .cols > div:nth-of-type(3) h4{color:#ffffff;}
footer .cols > div:nth-of-type(3) a{color:var(--muted);}
footer .cols > div:nth-of-type(3) a:hover{color:var(--accent);}
footer .cols > div:nth-of-type(3) a::after{background:var(--muted);}
footer .cols > div:nth-of-type(4) h4{color:#ffffff;}
footer .cols > div:nth-of-type(4) a{color:var(--muted);}
footer .cols > div:nth-of-type(4) a:hover{color:var(--accent);}
footer .cols > div:nth-of-type(4) a::after{background:var(--muted);}
footer .cols > div:nth-of-type(4) .small{margin:0 0 10px;display:block;}
footer .cols > div:nth-of-type(4) .small:last-of-type{margin-bottom:0;}

/* ===== CONTACT INFO ===== */
.contact-info{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 26px;margin:0;padding:16px 0 28px;font-weight:700;}
.contact-info .chip{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:rgba(0,0,0,0.03);border:1px solid var(--soft);transition:transform .18s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;}
.contact-info .chip:hover,.contact-info .chip:focus-within{transform:translateY(-2px);background:#ffffff;border-color:var(--accent);box-shadow:0 10px 22px rgba(0,0,0,0.10);}
.contact-info:hover .chip:not(:hover){opacity:0.8;}
.contact-info a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;transition:color .18s ease,border-color .18s ease;}
.contact-info a:hover,.contact-info a:focus{color:var(--accent);border-color:var(--accent);}
@media (max-width: 640px){.contact-info{justify-content:flex-start;gap:10px 12px;}}

.small{font-size:14px;color:var(--muted);}
a:focus-visible, button:focus-visible, input:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ===== CAREER FORM ===== */
.career-form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.career-form .form-group{display:flex;flex-direction:column;}
.career-form label{font-weight:600;margin-bottom:4px;}
.career-form input,.career-form textarea{background:#fff;border:1px solid var(--soft);padding:10px 12px;border-radius:8px;font-size:16px;color:var(--ink);}
.career-form input[type="file"]{padding:8px 0;}
.career-form textarea{resize:vertical;}
.career-form button{align-self:flex-start;background:var(--accent);color:#fff;padding:12px 24px;border:none;border-radius:10px;font-weight:700;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,0.1);transition:background .3s ease, transform .2s ease, box-shadow .3s ease;}
.career-form button:hover{background:#a0145b;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.15);}
.career-form button:active{transform:translateY(0);box-shadow:0 1px 2px rgba(0,0,0,0.1);}

/* ===== APPLICATIONS TABLE ===== */
.table{width:100%;border-collapse:collapse;margin-top:20px;}
.table th,.table td{padding:10px;border-bottom:1px solid var(--soft);text-align:left;vertical-align:top;}
.table th{background:var(--band);font-weight:700;}
.table tr:hover{background:var(--soft);}