/* Home — page-specific CSS.
   Shared pieces (tokens, reset, buttons, .pad, .sec-title, .chk, the CTA band, header and
   footer) are in shell.css. Ported verbatim from the approved design, index.html.

   Much of shell.css was LIFTED FROM THIS FILE seven pages ago: the chrome was ported first and
   the homepage is where the header, footer and closing band were drawn. So what is left here is
   genuinely homepage-only - the hero, the feature strip, the service cards, the project cards -
   and anything that looks shared probably already is. csscheck reports what is missing either
   way, which is how this file was checked rather than guessed. */

/* ---------- HERO ---------- */
/* Its own hero, not the inner-page .page-hero: full-height image, a left-to-right gradient
   rather than a flat scrim, and an 64px H1 with two highlighted words. */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 30%,rgba(13,36,56,.85) 46%,rgba(13,36,56,.15) 72%,rgba(13,36,56,.05) 100%);
}
.hero-inner{position:relative;z-index:1;padding:72px 24px 76px}
.hero-inner .eyebrow{color:#cdd8e2;letter-spacing:2px}
.hero h1{
  font-size:64px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:26px;
}
.hero h1 .hl{color:var(--blue-bright)}
.hero .lead{max-width:470px;color:#d3dde6;font-size:17px;margin-bottom:34px}
.hero-accent{width:64px;height:4px;background:var(--blue-bright);margin:22px 0 26px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}

/* ---------- FEATURE STRIP ---------- */
.features{background:var(--bg-gray);border-bottom:1px solid var(--line)}
.features .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.feat{display:flex;gap:16px;padding:34px 30px;border-right:1px solid var(--line)}
.feat:last-child{border-right:0}
.feat .ic{flex:0 0 auto;color:var(--brand)}
.feat .ic img{width:54px;height:54px;object-fit:contain}
.feat h4{font-size:16px;font-weight:600;margin-bottom:6px}
.feat p{font-size:13.5px;color:var(--slate);line-height:1.55}

/* ---------- ABOUT BAND ---------- */
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.about h2{font-size:34px;font-weight:700;line-height:1.2;margin-bottom:22px}
.about p{color:var(--slate);font-size:15px;margin-bottom:18px}
.about .btn{margin-top:12px}
.about-img{position:relative}
.about-img img{width:100%;height:420px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md);position:relative;z-index:1}

/* ---------- SERVICE CARDS ---------- */
.services{background:#fff}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.card .thumb{height:158px;overflow:hidden;position:relative}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .thumb img{transform:scale(1.06)}
.card .body{padding:24px 22px 26px;position:relative;flex:1;display:flex;flex-direction:column}
.card h3{font-size:18px;font-weight:600;margin:0 0 12px;line-height:1.3}
/* flex:1 on the copy is what keeps the three "Learn More" links on one line when the
   descriptions differ in length. */
.card p{font-size:14px;color:var(--slate);margin-bottom:18px;flex:1}
.learn{font-family:'Poppins';font-weight:600;font-size:12.5px;letter-spacing:.6px;color:var(--blue);display:inline-flex;align-items:center;gap:8px;text-transform:uppercase}
.learn:hover{gap:12px}

/* ---------- EXPERTISE ---------- */
/* The .exp-* and .chk rules themselves live in shell.css - About reuses this band - so only
   the homepage's own framing is here. */
.expertise{background:#fff;padding-top:8px}

/* ---------- FEATURED PROJECT CARDS ---------- */
/* The whole card is the link, which is why .cta-card is an <a> rather than a div with an
   anchor inside it: a 300px tile with a 19px title is a clumsy target otherwise. */
.projects{background:var(--bg-blue)}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px}
.cta-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;display:flex;box-shadow:var(--shadow-sm)}
.cta-card__bg{position:absolute;inset:0;z-index:0}
.cta-card__bg img{width:100%;height:100%;object-fit:cover;transition:.45s}
.cta-card:hover .cta-card__bg img{transform:scale(1.07)}
.cta-card__overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,23,36,.15) 25%,rgba(8,23,36,.9) 100%)}
.cta-card__content{position:relative;z-index:2;margin-top:auto;width:100%;padding:26px 24px;text-align:left}
.cta-card__title{color:#fff;font-size:19px;font-weight:600;line-height:1.25;margin-bottom:6px}
.cta-card__desc{font-size:12.5px;color:#cdd8e2;letter-spacing:.3px;margin-bottom:0}
.cta-card__title{transition:color .2s ease}
.cta-card:hover .cta-card__title{color:var(--blue-bright)}
.proj-cta{display:flex;justify-content:center;margin-top:32px}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1024px){
  .hero h1{font-size:50px}
  .features .grid{grid-template-columns:repeat(2,1fr)}
  /* Two across, so the SECOND tile is the one that loses its divider, and every tile gains a
     bottom rule instead. */
  .feat:nth-child(2){border-right:0}
  .feat{border-bottom:1px solid var(--line)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .hero h1{font-size:34px}
  .hero-inner{padding:64px 24px}
  .hero-bg::after{background:linear-gradient(180deg,rgba(13,36,56,.72),rgba(13,36,56,.86))}
  .features .grid,.svc-grid,.proj-grid{grid-template-columns:1fr}
  .feat{border-right:0}
}

/* ---------- DECORATIVE ----------
   Pure ornament, and all of it ::before/::after so none of it is in the markup. Kept in the
   same order as the design file: the accent frame behind the About image, the soft radial in
   the Services background, and the accent bar that wipes in across a card or feature cell on
   hover. */

/* accent frame behind the About image */
.about-img::before{content:"";position:absolute;left:-18px;top:-18px;width:62%;height:62%;
  border:3px solid var(--blue-bright);border-radius:var(--radius);z-index:0;opacity:.65}
.about-img::after{content:"";position:absolute;right:-16px;bottom:-16px;width:70px;height:70px;
  background:var(--blue);border-radius:var(--radius);z-index:0;opacity:.9}

/* decorative shape in the Services background */
.services{position:relative;overflow:hidden}
.services::after{content:"";position:absolute;top:40px;left:-70px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(26,111,192,.07),transparent 70%);pointer-events:none}

/* animated accent bar on cards and feature cells */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;z-index:3}
.card:hover::before{transform:scaleX(1)}
.feat{position:relative;transition:background .25s ease}
.feat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.feat:hover{background:#fff}
.feat:hover::before{transform:scaleX(1)}
.feat .ic img{transition:transform .3s ease}
.feat:hover .ic img{transform:scale(1.08)}

/* ---------- TWO SHELL VALUES THIS PAGE OVERRIDES ---------- */
/* shell.css carries About's 330px expertise image at this breakpoint; the homepage design
   says 320. Scoped to .expertise so About keeps its own. */
@media(max-width:1024px){
  .expertise .exp-img img{height:320px}
}
/* shell.css also shrinks the expertise heading to 25px at 680, which comes from the ABOUT
   design - about.html reduces it, index.html does not. Left alone, the homepage's heading
   wrapped to one line fewer than the approved design at 504px and the whole page below it sat
   17px too high. Scoped back to the design's 32px for this page only.

   ⚑ That is the SECOND rule the two pages disagree about (the expertise image height is the
   other). The expertise band is shared markup with an unshared responsive treatment, so when
   editing shell.css check index.html as well as about.html - csscheck cannot catch this class
   of fault, because it only knows about rules the design HAS, not ones shell adds. */
@media(max-width:680px){
  .expertise .exp h2{font-size:32px}
}

/* The design sets the hero H1 TWICE inside its 680px block - 38px, then 34px further down.
   Both are ported in the same order so this file says what the design says; the cascade
   resolves to 34px either way, which is what renders. */
@media(max-width:680px){
  .hero h1{font-size:38px}
  .hero h1{font-size:34px}
}