:root{
--bg:#0b1220; --ink:#0f172a; --ink-2:#2d94ae; --ink-3:#015A70;
--fg:#0f172a; --fg-2:#334155; --fg-3:#475569;
--card:#ffffff; --band:#f9faff;
--brand:#ff7300; --brand-2:#ff841f;
--maxw:1100px;
--card-w: 480px;
--card-gap: 36px;
}
*{ box-sizing:border-box }
html{
    font-size: 18px;
    height: 100%;
}
body{
    min-height:100%;
    line-height: 1.55;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* no Inter */
    color: var(--ink);
    background: var(--band);
}
a{ 
color:inherit; 
text-decoration:none 
}
img{ 
max-width:100%; 
height:auto; 
display:block 
}
p { line-height: 1.4; }
ul { line-height: 1.4; }
h1, h2, h3 { line-height: 1.1; }
h1 { font-size: 2.25rem; } /* ~40px */
h2 { font-size: 1.75rem; } /* ~32px */
h3 { font-size: 1.35rem; } /* ~22px */
h4 { font-size: 1.125rem; } /* ~18px */


/* ----- Header / Nav ----- */
.nav{
position:sticky; 
top:0; 
z-index:50;
background:#e3eff6;
backdrop-filter: blur(10px);
border-bottom:1px solid rgba(148,163,184,.25);
}
.nav-inner{ 
max-width:var(--maxw); 
margin:0 auto; 
display:flex; 
align-items:center; 
justify-content:space-between; 
padding:.9rem 1rem;
}
.nav-inner nav{
display:flex;
align-items:center;
column-gap: 1.0rem; /* adjust to taste */
row-gap: 0.0rem;
flex-wrap: wrap;
}
.brand{
font-weight:800;
letter-spacing:.2px;
white-space: normal;
display: inline-block;
}
.nav a{
/*margin-left:0rem; */
color:var(--ink-3);
font-weight:600
}
.nav a:hover{
color:var(--ink-2) 
}

/* ----- Hero ----- */
.hero{
position: relative;
min-height: 66vh;
display: grid;
place-items: center;
color: #fff;
text-align: center;
background: #0b1220;
}
.hero img.bg{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
opacity: 1;
filter: hue-rotate(7deg) brightness(1.1) saturate(1.2);
z-index: 0;
}
.hero > :not(img.bg){
position: relative;
z-index: 1;
}
.hero::after{
content: none;
}
.hero h1{ 
font-size:clamp(2rem, 5vw, 4rem); 
margin:.2rem 0 
}
.hero p{ 
font-size:clamp(1rem, 2.2vw, 1.25rem); 
opacity:.95; 
margin:0 1rem 1.2rem 
}

/* ----- Sections ----- */
.wrap{ 
max-width:var(--maxw); 
margin:0 auto; 
padding:3.5rem 1rem; 
}
.two-col{ 
display:grid; 
grid-template-columns:1fr; 
gap:1.5rem 
}
@media (min-width:900px){
.two-col{ grid-template-columns:1.05fr .95fr }
}
p.lead{ 
font-size:1.3rem; 
color:var(--fg-3) 
}
.card{
background:var(--card); 
border:1px solid rgba(148,163,184,.25); 
border-radius:16px; 
padding:1.25rem;
box-shadow:0 8px 24px rgba(0,0,0,.06);
}
ul.clean{ 
padding-left:1.1rem; 
margin:.5rem 0 
}
ul.clean li{ 
margin:.45rem 0 
}

#puzzle img {
/*max-width: 480px;*/
height: auto;
display: block;
}
/* ----- About ----- */
#about .two-col {
display: grid;
grid-template-columns: 1fr auto; /* text grows, image column shrinks to fit */
gap: 2rem;                       /* adjust spacing between text and image */
align-items: start;
}
#about .card {
max-width: 350px;        /* limit card width */
margin: 1rem auto 0;     /* center under text with top margin */
padding: 1rem;           /* even padding around the image */
display: flex;           /* center image inside */
justify-content: center;
align-items: center;
}
#about .card img {
max-width: 100%;       /* image stays within the card */
height: auto;
filter: hue-rotate(0deg) brightness(1.05) saturate(1);
}
@media (max-width: 899px) {
#about .two-col {
grid-template-columns: 1fr; /* single column */
}
}

/* Services Grid: two fixed-width tracks that shrink-wrap to their total width */
.service-cards {
  display: grid;
  gap: var(--card-gap);
  grid-template-columns: repeat(2, minmax(0, var(--card-w)));
  width: min(100%, calc(2 * var(--card-w) + var(--card-gap)));
  justify-content: start;   /* hug the left edge */
  margin: 0;
}

/* One column when the viewport can’t fit two cards + gap */
@media (max-width: 920px) {
  .service-cards {
    grid-template-columns: minmax(0, var(--card-w));
    width: min(100%, var(--card-w));
  }
}

.service-card {
  width: 100%;  /* fill the grid track so the background shows */
  box-sizing: border-box;
  background: var(--card, #fff);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 20px;
  padding: 1rem 1.25rem;

  display: flex;
  flex-direction: column;
  align-items: center;  /* center children horizontally */
  text-align: center;   /* center text */
  box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset, 0 6px 20px rgba(0,0,0,0.06);

}

/* Icon inside card */
.service-card img.service-icon {
  max-width: auto;
  height: 180px;
  margin: 0 0 1rem 0;
  display: block;
  filter: hue-rotate(-2deg) brightness(0.85) saturate(2);
}

/* ----- Expertise ----- */
#expertise {
padding-top: 64px;
padding-bottom: 0px;
}

#expertise .subsection-title {
margin: 2rem 0 0.75rem;
}

/* Wrap to allow horizontal scroll on mobile */
#expertise .table-wrap {
display: block;
max-width: 100%;
margin: 0 0 2rem;           /* only bottom spacing */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset, 0 6px 20px rgba(0,0,0,0.06);
background: transparent; /*var(--band);*/
}

/* Table baseline */
#expertise .exp-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
min-width: 640px; /* keep structure on small screens */
font-size: 1.0rem;
font-weight: 400;
}

/* Alternate GROUP band colors per <tbody> */
#expertise .exp-table tbody:nth-of-type(odd)  { --group-band: #ffe7d7; } /* your alt color */
#expertise .exp-table tbody:nth-of-type(even) { --group-band: #ffffff; } /* a 2nd shade */

/* Apply the band to the whole group block */
#expertise .exp-table tbody th.group,
#expertise .exp-table tbody td {
  background: var(--group-band);
}

/* Cell padding & borders */
#expertise .exp-table td,
#expertise .exp-table th.group {
padding: 12px 16px;
vertical-align: top;
}

/* Left “group” column styling */
#expertise .exp-table th.group {
width: 30%;
text-align: left;
font-weight: 700;
position: relative;
}

/* Accent bar on the far left of group cells */
#expertise .exp-table th.group::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--accent, #ff7300);
}



/* Tighter layout on very small screens 
@media (max-width: 480px) {
#expertise .exp-table { font-size: 0.9rem; }
}*/

/* ----- Contact ----- */
.contact-box{ 
display:flex; 
flex-direction:column; 
gap:.6rem; 
align-items: flex-start; 
}
.contact-figure {
text-align: center;     /* centers both image and caption */
margin: 0;              /* remove default figure margins */
}
.contact-img{
max-width: 300px;
height: auto;       /* preserve aspect ratio */
width: auto;
display: inline-block;
margin: 0 auto 0;  /* optional: center it with spacing */
}
.contact-caption {
font-size: 0.9rem;      /* slightly smaller than body text */
color: #555;            /* softer color for caption */
margin-top: 0.5rem;     /* space between image and caption */
}
.btn{
display: inline-block; 
width: auto; 
align-self: start;       /* in flex/grid: hug the content */
justify-self: start;     /* in grid: hug the content */
background:var(--brand); 
color:#fff; 
border:none; 
border-radius:10px; 
padding:0.8rem 1.6rem; 
font-size: 0.95rem;
font-weight:700; 
cursor:pointer;
}
.btn:hover{ 
background:var(--brand-2) 
}
.muted{ 
color:var(--fg-3); 
font-size:1.25rem 
}

/* ----- Footer ----- */
footer{
background: linear-gradient(90deg, #003F4E, #015D73);
color:#cbd5e1; 
padding:2rem 1rem; 
margin-top:2rem;
}
.foot-inner{ 
max-width:var(--maxw); 
margin:0 auto; 
display:flex; 
flex-wrap:wrap; 
gap:1rem; 
align-items:center; 
justify-content:space-between 
}