/* ARACO — page styles (home + shared sections) */

/* ============== HERO ============== */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-top:var(--header-h); color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:0; background:var(--primary); }
.hero-slide{ position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transform:scale(1.06); transition:opacity 1.4s var(--ease), transform 7s linear; }
.hero-slide.is-on{ opacity:1; transform:scale(1); }
.hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(13,19,33,.86) 0%, rgba(13,19,33,.62) 42%, rgba(13,19,33,.30) 100%),
             linear-gradient(to top, rgba(13,19,33,.65), transparent 40%); }
.hero-grid-lines{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); pointer-events:none; opacity:.5; }
.hero-grid-lines span{ border-left:1px solid rgba(255,255,255,.07); }
.hero-grid-lines span:first-child{ border-left:0; }

.hero-in{ position:relative; z-index:2; padding-block:clamp(40px,7vh,90px); }
.hero-kick{ color:#fff !important; }
.hero-kick::before{ background:var(--accent) !important; opacity:1; }
.hero-h1{ color:#fff; font-size:clamp(38px,7vw,86px); line-height:1.02; margin-top:26px; max-width:16ch;
  text-shadow:0 2px 30px rgba(0,0,0,.45); }
.hero-em{ color:var(--gold); font-style:italic; font-family:var(--font-head); }
.hero-sub{ margin-top:28px; max-width:56ch; font-size:clamp(16px,1.7vw,20px); line-height:1.65;
  color:rgba(255,255,255,.86); text-shadow:0 1px 16px rgba(0,0,0,.4); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }

.hero-foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding-bottom:clamp(20px,4vh,40px); }
.hero-sectors{ display:flex; flex-wrap:wrap; gap:10px 26px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); }
.hero-sectors span{ position:relative; padding-left:18px; }
.hero-sectors span::before{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px;
  transform:translateY(-50%) rotate(45deg); border:1px solid var(--gold); }
.hero-dots{ display:flex; gap:9px; flex:0 0 auto; }
.hero-dots button{ width:26px; height:3px; background:rgba(255,255,255,.3); border:0; padding:0; transition:.3s; }
.hero-dots button.on{ background:var(--accent); width:40px; }

@media (max-width:880px){
  .hero{ min-height:92svh; }
  .hero-scrim{ background:linear-gradient(to top, rgba(13,19,33,.9) 0%, rgba(13,19,33,.55) 50%, rgba(13,19,33,.45) 100%); }
  .hero-sectors span:nth-child(n+4){ display:none; }
}

/* ============== CRED STRIP ============== */
.cred-in{ display:grid; grid-template-columns:auto 1fr; gap:clamp(32px,6vw,80px); align-items:center; }
.cred-lead{ display:flex; align-items:baseline; gap:18px; }
.cred-num{ font-family:var(--font-head); font-weight:800; font-size:clamp(72px,12vw,140px); line-height:.82;
  color:var(--ink); letter-spacing:-.04em; }
.cred-num span{ color:var(--accent); }
.cred-num-cap{ font-family:var(--font-mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); line-height:1.5; }
.cred-body p{ font-size:clamp(18px,2vw,23px); line-height:1.55; color:var(--ink-soft); max-width:44ch;
  font-family:var(--font-head); font-weight:500; letter-spacing:-.01em; }
.cred-body .alink{ margin-top:22px; }
@media (max-width:760px){
  .cred-in{ grid-template-columns:1fr; gap:28px; }
  .cred-lead{ align-items:center; }
}

/* ============== SERVICES OVERVIEW ============== */
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(40px,5vw,64px);
  background:var(--border); border:1px solid var(--border); }
.svc-card{ background:var(--bg-deep); padding:34px 30px 30px; position:relative; display:flex; flex-direction:column;
  min-height:248px; transition:background .35s var(--ease); overflow:hidden; }
.svc-card:hover{ background:var(--surface); }
.svc-top{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:auto; }
.svc-ico{ width:42px; height:42px; color:var(--ink); transition:color .35s, transform .5s var(--ease); }
.svc-card:hover .svc-ico{ color:var(--accent); transform:translateY(-2px); }
.svc-card h3{ font-size:20px; margin-top:34px; line-height:1.15; }
.svc-card p{ color:var(--muted); font-size:14.5px; margin-top:10px; line-height:1.55; }
.svc-arrow{ position:absolute; bottom:26px; right:26px; width:30px; height:30px; color:var(--accent);
  opacity:0; transform:translate(-6px,6px); transition:.35s var(--ease); }
.svc-arrow svg{ width:30px; height:30px; }
.svc-card:hover .svc-arrow{ opacity:1; transform:none; }
@media (max-width:1080px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .svc-grid{ grid-template-columns:1fr; } .svc-card{ min-height:0; } }

/* ============== FEATURED PROJECTS ============== */
.feat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:clamp(32px,4vw,52px); }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,22px); }
.feat-card{ position:relative; display:block; }
.feat-card--lg{ grid-column:span 2; grid-row:span 2; }
.feat-card .scrim-img{ height:100%; }
.feat-card .scrim-img img{ transition:transform .9s var(--ease); }
.feat-card:hover .scrim-img img{ transform:scale(1.06); }
.feat-meta{ position:absolute; left:0; right:0; bottom:0; padding:26px 26px 24px; }
.feat-cat{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.feat-meta h3{ color:#fff; font-size:clamp(19px,2vw,28px); margin-top:8px; line-height:1.1; }
.feat-spec{ display:block; font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.7); margin-top:8px; }
@media (max-width:880px){
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .feat-card--lg{ grid-column:span 2; grid-row:auto; }
  .feat-head-btn{ display:none; }
}
@media (max-width:520px){ .feat-grid{ grid-template-columns:1fr; } .feat-card--lg{ grid-column:auto; } }

/* ============== ABOUT TEASER ============== */
.about-teaser{ display:grid; grid-template-columns:0.85fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.about-teaser-img{ position:relative; }
.about-teaser-badge{ position:absolute; right:-14px; bottom:28px; background:var(--accent); color:#fff;
  padding:16px 22px; box-shadow:var(--shadow-md); display:flex; flex-direction:column; gap:3px; }
.about-teaser-badge .mono{ font-size:11px; letter-spacing:.18em; opacity:.85; }
.about-teaser-badge strong{ font-family:var(--font-head); font-size:20px; }
.about-teaser-body h2{ font-size:clamp(28px,3.8vw,46px); margin-top:18px; }
.about-teaser-body p{ color:var(--muted); margin-top:20px; font-size:17px; max-width:50ch; }
.about-teaser-vision{ border-left:2px solid var(--gold); padding-left:20px; color:var(--ink-soft) !important;
  font-family:var(--font-head); font-style:italic; font-size:19px !important; }
.about-teaser-vision .mono{ display:block; font-style:normal; font-size:11px; letter-spacing:.2em; color:var(--secondary);
  margin-bottom:6px; }
.about-teaser-body .btn{ margin-top:30px; }
@media (max-width:820px){
  .about-teaser{ grid-template-columns:1fr; gap:36px; }
  .about-teaser-badge{ right:18px; }
}

/* ============== TEAM TEASER ============== */
.team-row{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(20px,3vw,44px); margin-top:clamp(40px,5vw,60px); }
.team-mini{ margin:0; text-align:center; width:130px; }
.team-mini img{ width:104px; height:104px; border-radius:50%; object-fit:cover; margin:0 auto 16px; filter:grayscale(1);
  border:1px solid var(--border-2); transition:filter .4s, transform .4s var(--ease); }
.team-mini:hover img{ filter:grayscale(0); transform:translateY(-4px); }
.team-mini strong{ display:block; font-family:var(--font-head); font-size:15px; }
.team-mini span{ display:block; font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.35; }

/* ============== CONTACT BAND ============== */
.cband{ padding-block:clamp(60px,8vw,110px); }
.cband-in{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.cband-lead h2{ font-size:clamp(28px,4vw,50px); margin-top:18px; max-width:16ch; }
.cband-lead p{ color:rgba(234,235,239,.7); margin-top:20px; max-width:46ch; font-size:17px; }
.cband-lead .btn{ margin-top:32px; }
.cband-info{ display:flex; flex-direction:column; gap:2px; border-top:1px solid rgba(255,255,255,.14); }
.cband-item{ display:flex; align-items:center; gap:18px; padding:22px 4px; border-bottom:1px solid rgba(255,255,255,.14);
  color:#fff; transition:padding .3s var(--ease); }
a.cband-item:hover{ padding-left:14px; }
.cband-item svg{ width:24px; height:24px; color:var(--gold); flex:0 0 auto; }
.cband-item span{ display:flex; flex-direction:column; gap:3px; font-size:18px; font-weight:600; font-family:var(--font-head); }
.cband-item em{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(234,235,239,.5);
  font-style:normal; font-weight:400; }
@media (max-width:820px){ .cband-in{ grid-template-columns:1fr; gap:36px; } }