/* ==========================================================================
   ORANIS IT INFRASTRUCTURE LLP — shared stylesheet
   Palette sampled directly from the logo: bronze/taupe letterforms +
   charcoal wordmark on warm white. Loaded once, shared by every page.
   ========================================================================== */

:root{
  --bg:         #fefefe;   /* logo background white */
  --bg-raise:   #f6f3ee;   /* warm off-white for alternating sections */
  --panel:      #ffffff;
  --line:       #e2dcd0;
  --line-soft:  #eae5db;
  --text:       #302d29;   /* "IT Infrastructure LLP" charcoal */
  --text-dim:   #6b665d;
  --text-mute:  #948d80;
  --bronze:     #a08d7c;   /* "ORANIS" bronze, decorative */
  --bronze-lt:  #c3a98d;   /* light bronze, for use on dark */
  --bronze-dk:  #7d6a56;   /* darker bronze, accessible on white */
  --dark:       #211e1a;   /* charcoal panel, echoes the dark wordmark */
  --dark-raise: #2b2823;
  --off-white:  #fefefe;
  --radius: 2px;

  /* Consistent type scale, reused across every page */
  --fs-h1: clamp(34px, 4.6vw, 58px);
  --fs-h2: clamp(28px, 3.4vw, 40px);
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body: 16px;
  --fs-lead: 17px;
  --fs-small: 14px;
  --fs-label: 12px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; overflow-x:hidden; max-width:100%; }

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100%;
  position:relative;
}

body.menu-open{ overflow:hidden; }

h1,h2,h3,h4,.display{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:600;
  letter-spacing:0.01em;
  color:var(--text);
}
h1{ font-size:var(--fs-h1); line-height:1.08; letter-spacing:-0.01em; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
ul{ list-style:none; }
p{ font-size:var(--fs-body); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:var(--fs-label);
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--bronze-dk);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--bronze-dk);
  flex-shrink:0;
}
.on-dark .eyebrow{ color:var(--bronze-lt); }
.on-dark .eyebrow::before{ background:var(--bronze-lt); }

:focus-visible{ outline:2px solid var(--bronze-dk); outline-offset:3px; }

/* ---------- Header ---------- */
header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(33,30,26,0.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--dark-raise);
}

.util-bar{
  background:var(--dark-raise);
  color:#b7b0a3;
  border-bottom:1px solid #38352f;
}
.util-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:38px;
  font-size:var(--fs-label);
  letter-spacing:0.03em;
}
.util-inner .util-left{ display:flex; align-items:center; gap:24px; }
.util-inner .util-left span{ display:inline-flex; align-items:center; gap:7px; }
.util-inner .util-left span::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--bronze-lt);
  display:inline-block;
}
.util-inner a{ color:#b7b0a3; transition:color .2s ease; }
.util-inner a:hover{ color:var(--bronze-lt); }
.util-inner .util-right{ display:flex; gap:18px; }

.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:92px;
}

/* logo: highlighted chip so it reads as the header's focal point against
   the dark bar — the bronze glow echoes the mark's own accent dot */
.logo-link{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  text-decoration:none;
  padding:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  transition:opacity .2s ease;
}
.logo-link:hover{ opacity:0.8; transform:none; box-shadow:none; }
.logo-text-main{
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:22px;
  font-weight:800;
  color:var(--bronze-lt); /* fixed: was --bronze-dk, too low-contrast on the dark header */
  letter-spacing:6px;
  text-transform:uppercase;
  line-height:1.1;
}
.logo-text-divider{
  display:block;
  width:100%;
  height:1px;
  background:var(--bronze-lt);
  margin:3px 0;
  opacity:0.5;
}
.logo-text-sub{
  font-family:'Inter', sans-serif;
  font-size:9px;
  font-weight:600;
  color:var(--bronze-lt);
  letter-spacing:3px;
  text-transform:uppercase;
}

nav.menu{ display:flex; align-items:center; gap:40px; }
nav.menu a{
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#b7b0a3;
  position:relative;
  padding:6px 0;
  transition:color .2s ease;
}
nav.menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--bronze-lt);
  transition:width .25s ease;
}
nav.menu a:hover, nav.menu a:focus-visible{ color:var(--off-white); }
nav.menu a:hover::after, nav.menu a:focus-visible::after{ width:100%; }
nav.menu a.active{ color:var(--off-white); }
nav.menu a.active::after{ width:100%; }

.nav-cta{
  background:var(--bronze-lt) !important;
  color:var(--dark) !important;
  padding:12px 26px !important;
  font-size:12px !important;
  letter-spacing:0.1em !important;
  border-radius:2px;
  transition:background .2s ease, transform .2s ease;
}
.nav-cta:hover{ background:#d6bd9f !important; transform:translateY(-1px); }

.menu-toggle{
  display:none;
  background:none;
  border:1px solid #46423a;
  color:var(--off-white);
  width:42px; height:42px;
  border-radius:2px;
  cursor:pointer;
  font-size:18px;
  position:relative;
  z-index:210;
  transition:border-color .2s ease;
}
.menu-toggle:hover{ border-color:var(--bronze-lt); }
.menu-toggle[aria-expanded="true"]{ font-size:0; }
.menu-toggle[aria-expanded="true"]::before{
  content:"✕";
  font-size:18px;
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
}

/* backdrop behind the slide-in mobile menu */
.menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  z-index:150;
  opacity:0;
  transition:opacity .3s ease;
}
.menu-overlay.open{ display:block; opacity:1; }

/* ---------- Home hero ---------- */
.hero{ position:relative; padding:76px 0 90px; border-bottom:1px solid var(--line-soft); }
.hero-grid{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:60px; align-items:center; }
.hero h1 em{ font-style:normal; color:var(--bronze-dk); }
.hero p.lead{ margin-top:26px; max-width:480px; color:var(--text-dim); font-size:var(--fs-lead); }
.hero-actions{ margin-top:40px; display:flex; gap:18px; flex-wrap:wrap; }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 28px;
  font-family:'Plus Jakarta Sans', sans-serif;
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-radius:2px;
  transition:all .2s ease;
  cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{ background:var(--bronze-dk); color:var(--off-white); }
.btn-primary:hover{ background:#6a5947; }
.btn-ghost{ border-color:var(--line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--bronze-dk); color:var(--bronze-dk); }

.hero-mark{
  position:relative;
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg-raise);
}
.hero-mark::before{ content:""; position:absolute; inset:14%; border:1px solid var(--line); border-radius:50%; }
.hero-mark img{ width:52%; height:52%; }
.hero-mark .dot{
  position:absolute;
  top:18%; left:50%;
  width:8px; height:8px;
  background:var(--bronze-dk);
  border-radius:50%;
  transform:translateX(-50%);
  animation:orbit 14s linear infinite;
  transform-origin:0 130px;
}
@keyframes orbit{
  from{ transform:translateX(-50%) rotate(0deg) translateY(0); }
  to{ transform:translateX(-50%) rotate(360deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce){ .hero-mark .dot{ animation:none; } }

.stat-row{ display:flex; gap:56px; margin-top:64px; padding-top:36px; border-top:1px solid var(--line-soft); flex-wrap:wrap; }
.stat-row .num{ font-family:'Plus Jakarta Sans', sans-serif; font-size:30px; color:var(--bronze-dk); }
.stat-row .label{ font-size:var(--fs-label); letter-spacing:0.08em; text-transform:uppercase; color:var(--text-mute); margin-top:4px; }

/* ---------- Secondary page hero (Services / About) ---------- */
.page-hero{
  background:var(--dark);
  color:var(--off-white);
  padding:76px 0 64px;
  border-bottom:1px solid var(--dark-raise);
}
.page-hero .crumb{ font-size:13px; color:#a19a8c; margin-bottom:18px; }
.page-hero .crumb a{ color:#a19a8c; }
.page-hero .crumb a:hover{ color:var(--bronze-lt); }
.page-hero h1{ color:var(--off-white); font-size:var(--fs-h1); max-width:720px; }
.page-hero p.lead{ color:#bdb6a8; max-width:640px; margin-top:20px; font-size:var(--fs-lead); }

/* ---------- Section shared ---------- */
section{ padding:100px 0; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap; }
.section-head h2{ max-width:560px; }
.section-head p{ color:var(--text-dim); max-width:360px; font-size:var(--fs-small); }

/* ---------- Home services teaser ---------- */
.services{ background:var(--bg-raise); border-bottom:1px solid var(--line-soft); border-top:1px solid var(--line-soft); }
.service-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card{ background:var(--bg-raise); padding:38px 30px; transition:background .25s ease; }
.service-card:hover{ background:var(--panel); }
.service-card .icon{ width:38px; height:38px; margin-bottom:26px; color:var(--bronze-dk); }
.service-card h3{ margin-bottom:12px; }
.service-card p{ font-size:var(--fs-small); color:var(--text-dim); }
.service-card .idx{ display:block; font-family:'Plus Jakarta Sans', sans-serif; font-size:var(--fs-label); color:var(--text-mute); margin-bottom:20px; letter-spacing:0.08em; }
.see-all{ text-align:center; margin-top:44px; }

/* ---------- Services page: full detailed grid ---------- */
.service-detail-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-detail{ background:var(--panel); padding:44px 34px; transition:background .25s ease; }
.service-detail:hover{ background:var(--bg-raise); }
.service-detail .tile{
  width:64px; height:64px;
  border-radius:3px;
  background:var(--bg-raise);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:26px;
}
.service-detail .tile img{ width:36px; height:36px; }
.service-detail h3{ margin-bottom:12px; }
.service-detail p{ font-size:var(--fs-small); color:var(--text-dim); }

/* ---------- Approach ---------- */
.approach-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
.approach-list{ border-top:1px solid var(--line-soft); }
.approach-item{ display:grid; grid-template-columns:64px 1fr; gap:22px; padding:30px 0; border-bottom:1px solid var(--line-soft); }
.approach-item .n{ font-family:'Plus Jakarta Sans', sans-serif; color:var(--bronze-dk); font-size:14px; padding-top:2px; }
.approach-item h4{ margin-bottom:8px; }
.approach-item p{ color:var(--text-dim); font-size:var(--fs-small); max-width:480px; }

.approach-panel{ background:var(--panel); border:1px solid var(--line); padding:44px; border-radius:3px; }
.approach-panel h3{ margin-bottom:16px; }
.approach-panel p{ color:var(--text-dim); font-size:15px; margin-bottom:28px; }
.approach-panel ul li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line-soft); font-size:var(--fs-small); color:var(--text-dim); }
.approach-panel ul li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bronze-dk); flex-shrink:0; }

/* ---------- About page ---------- */
.about-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:70px; align-items:center; }
.about-grid p{ color:var(--text-dim); margin-bottom:18px; font-size:var(--fs-body); }
.about-grid p:last-child{ margin-bottom:0; }
.about-graphic{
  position:relative;
  aspect-ratio:4/3.4;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--bg-raise);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.about-graphic img{ width:78%; height:78%; }
.about-graphic .badge{
  position:absolute;
  bottom:22px; left:22px;
  background:var(--dark);
  color:var(--off-white);
  padding:10px 16px;
  border-radius:2px;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  display:flex; align-items:center; gap:8px;
}
.about-graphic .badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--bronze-lt); }

.affiliate-panel{
  background:var(--bg-raise);
  border:1px solid var(--line);
  border-left:3px solid var(--bronze-dk);
  padding:34px 38px;
  border-radius:2px;
  margin-top:60px;
}
.affiliate-panel p{ color:var(--text-dim); font-size:15px; }
.affiliate-panel strong{ color:var(--text); }

/* Why choose us */
.why-section{ background:var(--bg-raise); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.why-card{ background:var(--bg-raise); padding:32px 28px; transition:background .25s ease; display:flex; gap:16px; align-items:flex-start; }
.why-card:hover{ background:var(--panel); }
.why-card img{ width:22px; height:22px; flex-shrink:0; margin-top:3px; }
.why-card span{ font-size:15px; color:var(--text); font-weight:500; }

/* ---------- CTA band (dark, echoes the charcoal wordmark) ---------- */
.cta-band{ background:var(--dark); color:var(--off-white); text-align:center; padding:100px 0; }
.cta-band h2{ color:var(--off-white); font-size:clamp(30px,4vw,46px); max-width:640px; margin:0 auto 20px; }
.cta-band p.tagline{ color:var(--bronze-lt); font-family:'Plus Jakarta Sans', sans-serif; font-size:15px; letter-spacing:0.04em; margin-bottom:32px; }
.cta-band .btn-primary{ background:var(--bronze-lt); color:var(--dark); }
.cta-band .btn-primary:hover{ background:#d6bd9f; }

/* ---------- Footer (dark, matches cta band) ---------- */
footer{ background:var(--dark); padding-top:80px; border-top:1px solid var(--dark-raise); }
.logo-chip{ background:transparent; padding:0; border-radius:0; display:inline-flex; flex-direction:column; align-items:flex-start; line-height:1.2; box-shadow:none; }

.footer-top{ display:flex; justify-content:space-between; align-items:center; gap:60px; flex-wrap:wrap; padding-bottom:64px; border-bottom:1px solid var(--dark-raise); }
.footer-brand{ max-width:420px; }
.footer-col{ min-width:220px; }
.footer-brand p{ color:#9c968a; font-size:var(--fs-small); margin-top:20px; max-width:280px; }
.footer-col h5{ font-family:'Plus Jakarta Sans', sans-serif; font-size:var(--fs-label); letter-spacing:0.12em; text-transform:uppercase; color:#9c968a; margin-bottom:20px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul li a{ font-size:var(--fs-small); color:#cfc9bd; transition:color .2s ease; }
.footer-col ul li a:hover{ color:var(--bronze-lt); }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:12px; color:#8a8377; flex-wrap:wrap; gap:12px; }
.footer-bottom .socials{ display:flex; gap:20px; }
.footer-bottom .socials a{ color:#8a8377; }
.footer-bottom .socials a:hover{ color:var(--bronze-lt); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .util-inner .util-left span:last-child{ display:none; }
  .hero{ padding:56px 0 64px; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-mark{ max-width:280px; margin:0 auto; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .service-detail-grid{ grid-template-columns:repeat(2,1fr); }
  .approach-grid{ grid-template-columns:1fr; }
  .about-grid{ grid-template-columns:1fr; }
  .about-graphic{ max-width:420px; margin:0 auto; }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 680px){
  .wrap{ padding:0 20px; }

  /* util-bar: keep visible on mobile, but simplified — center the
     contact links and drop the address/hours so it doesn't wrap ugly */
  .util-inner{
    height:auto;
    flex-direction:column;
    justify-content:center;
    padding:10px 0;
    gap:6px;
  }
  .util-inner .util-left{
    justify-content:center;
    flex-wrap:wrap;
    width:100%;
    gap:6px 16px;
    font-size:11px;
    text-align:center;
  }
  .util-inner .util-left span:last-child{ display:inline-flex; }
  .util-inner .util-right{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    row-gap:4px;
    gap:8px 16px;
    font-size:12px;
    text-align:center;
  }

  .nav-inner{ height:84px; }
  .logo-text-main{ font-size:18px; letter-spacing:4px; }
  .logo-text-sub{ font-size:8px; letter-spacing:2px; }

  .logo-link img{ height:44px; }
  .hero{ padding:44px 0 56px; }
  .page-hero{ padding:48px 0 40px; }

  /* mobile menu: slide in from the LEFT as a full-height drawer */
  nav.menu{
    position:fixed;
    top:0; left:0;
    height:100vh;
    width:min(78vw, 320px);
    background:var(--dark);
    border-right:1px solid var(--dark-raise);
    border-bottom:none;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:100px 28px 32px;
    transform:translateX(-100%);
    transition:transform .3s ease, box-shadow .3s ease;
    overflow-y:auto;
    z-index:200;
  }
  nav.menu.open{
    transform:translateX(0);
    box-shadow:20px 0 60px rgba(0,0,0,.35);
  }
  nav.menu a{ width:100%; padding:16px 0; border-bottom:1px solid var(--dark-raise); }
  .nav-cta{ margin-top:16px; text-align:center; width:100%; }

  .menu-toggle{ display:block; }

  .service-grid{ grid-template-columns:1fr; }
  .service-detail-grid{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .stat-row{ gap:36px; }
}