/* ===========================================================
   01-base.css
   Part of the India Fulfillment Center stylesheet set.
   Loaded in numeric order by includes/head-assets.php
   =========================================================== */

:root{
  --ink:#012D60;          /* IFC logo navy */
  --ink-2:#013975;
  --paper:#F7F5EF;        /* warm document ivory */
  --card:#FFFFFF;
  --marigold:#FA6D04;     /* IFC logo orange */
  --marigold-deep:#DB5A00;
  --teal:#087E2B;         /* IFC logo green */
  --line:#DDD6C8;
  --muted:#5B6B80;
  --muted-ivory:#B9C5D6;
  --radius:14px;
  --disp:'Sora',-apple-system,'Segoe UI',sans-serif;
  --body:'DM Sans',-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:126px}

body{font-family:var(--body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;padding-top:108px}

img{max-width:100%}

a{text-decoration:none;color:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 24px}

header .navwrap{max-width:1240px}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);font-weight:600;display:inline-flex;align-items:center;gap:10px}

.eyebrow::before{content:"";width:26px;height:1px;background:var(--marigold)}

h2.sec-title{font-family:var(--disp);font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;margin:.55rem 0 .8rem}

.sec-lead{color:var(--muted);max-width:640px;font-size:1.02rem}

section{padding:64px 0}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(247,245,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}

header.scrolled{box-shadow:0 6px 24px rgba(1,45,96,.08)}

.navwrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}

.logo{display:flex;align-items:center;gap:11px;font-family:var(--disp);font-weight:800;font-size:1.12rem;letter-spacing:-.01em}

.brand{display:block;height:46px;width:auto}

.brand-sm{display:block;height:44px;width:auto}

.brand-plate{background:#fff;border-radius:13px;padding:12px 18px;display:inline-block;line-height:0}

.brand-plate .brand{height:54px}

.logo small{display:block;font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}

.navrow{border-top:1px solid var(--line);background:rgba(255,255,255,.6)}

.navrow>.container{display:flex;align-items:center;justify-content:space-between;gap:20px}

nav.mainnav{display:flex;gap:0;align-items:center;justify-content:flex-start;flex-wrap:wrap;margin-right:auto;margin-left:-14px;position:relative}

/* the two wide dropdowns anchor to the menu row,so they open flush left and never overflow */
#megaWrap,#indWrap{position:static}

nav.mainnav>a,nav.mainnav .mega-toggle{font-size:.86rem;font-weight:600;color:var(--ink-2);position:relative;padding:12px 14px;border-radius:0;letter-spacing:-.01em;transition:background .18s,color .18s;white-space:nowrap}

nav.mainnav>a:hover,nav.mainnav .mega-toggle:hover{background:var(--paper);color:var(--marigold-deep)}

nav.mainnav>a+a,nav.mainnav .has-mega+a,nav.mainnav a+.has-mega>.mega-toggle,nav.mainnav .has-mega+.has-mega>.mega-toggle{box-shadow:inset 1px 0 0 var(--line)}

nav.mainnav>a::after,nav.mainnav .mega-toggle::after{content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;background:var(--marigold);transform:scaleX(0);transform-origin:left;transition:transform .25s}

nav.mainnav>a:hover::after,nav.mainnav .mega-toggle:hover::after{transform:scaleX(1)}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;padding:12px 22px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;font-family:var(--body)}

.btn:active{transform:scale(.97)}

.btn-primary{background:var(--marigold);color:#fff;box-shadow:0 6px 18px rgba(250,109,4,.35)}

.btn-primary:hover{background:var(--marigold-deep)}

.btn-ghost{border-color:var(--ink);color:var(--ink)}

.btn-ghost:hover{background:var(--ink);color:#fff}

.btn-light{background:#fff;color:var(--ink)}

.hamburger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink)}

/* ---------- Hero ---------- */
.hero{background:var(--ink);color:#fff;padding:52px 0 0;position:relative;overflow:hidden}

.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(700px 340px at 85% 8%,rgba(250,109,4,.14),transparent 60%),
  radial-gradient(560px 300px at 8% 90%,rgba(8,126,43,.16),transparent 60%)}

.hero .container{position:relative;z-index:2}

.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:center;padding-bottom:44px}

.hero .eyebrow{color:var(--marigold)}

.hero .eyebrow::before{background:var(--teal)}

.hero h1{font-family:var(--disp);font-size:clamp(1.8rem,3.9vw,2.7rem);font-weight:800;line-height:1.1;letter-spacing:-.025em;margin:.55rem 0 .8rem}

.hero h1 .hl{color:var(--marigold);position:relative;white-space:nowrap}

.hero p.lead{color:var(--muted-ivory);font-size:.95rem;max-width:530px;margin-bottom:1.3rem}

.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

.hero-meta{margin-top:1.4rem;display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--muted-ivory)}

.hero-meta b{color:#fff}

/* waybill card */
.waybill{background:#fff;color:var(--ink);border-radius:16px;padding:20px 20px 18px;box-shadow:0 30px 70px rgba(0,0,0,.35);position:relative;transform:rotate(1.4deg)}

.waybill::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;border-radius:18px 18px 0 0;background:linear-gradient(90deg,var(--marigold) 33%,#eee 33% 66%,var(--teal) 66%)}

.wb-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px dashed var(--line);padding:6px 0 14px;margin-bottom:14px}

.wb-head .mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;color:var(--muted)}

.wb-badge{font-family:var(--mono);font-size:.66rem;background:var(--teal);color:#fff;padding:4px 10px;border-radius:5px;letter-spacing:.1em}

.wb-route{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}

.wb-port{text-align:center}

.wb-port .code{font-family:var(--disp);font-weight:800;font-size:1.55rem;letter-spacing:.02em;line-height:1}

.wb-port .city{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:4px}

.wb-line{flex:1;margin:0 16px;border-top:2px dashed var(--marigold);position:relative;top:-8px}

.wb-line::after{content:"▸";position:absolute;right:-4px;top:-14px;color:var(--marigold);font-size:1.05rem}

.wb-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:.82rem}

.wb-rows .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.wb-rows .v{font-weight:700}

.wb-stamp{position:absolute;bottom:16px;right:20px;border:2px solid var(--teal);color:var(--teal);font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;padding:5px 10px;border-radius:6px;transform:rotate(-7deg);opacity:.85}

/* stats strip */
.stats{background:var(--ink-2);border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:2}

.stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding-top:16px;padding-bottom:16px}

.stat{text-align:center;padding:8px 6px;border-left:1px dashed rgba(255,255,255,.15)}

.stat:first-child{border-left:none}

.stat .num{font-family:var(--disp);font-size:1.5rem;font-weight:800;color:var(--marigold)}

.stat .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-ivory)}

.point{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}

.point .ico{width:38px;height:38px;flex:none;border-radius:9px;background:rgba(250,109,4,.12);color:var(--marigold-deep);display:grid;place-items:center;font-size:1.05rem}

.point b{display:block;font-size:.95rem}

.point span{font-size:.85rem;color:var(--muted)}

/* ---------- Services ---------- */
#services{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:none}

/* ---------- Why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}

.why-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;text-align:left}

.why-card .n{font-family:var(--mono);color:var(--marigold);font-size:.72rem;letter-spacing:.14em}

.why-card h4{font-family:var(--disp);font-weight:700;margin:.6rem 0 .4rem;font-size:1.05rem}

.why-card p{font-size:.85rem;color:var(--muted)}

/* ---------- Industries ---------- */
#industries{background:var(--ink);color:#fff}

#industries .eyebrow{color:var(--marigold)}

#industries .sec-lead{color:var(--muted-ivory)}

/* ---------- Contracts ---------- */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px;align-items:stretch}

.pkg{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 28px;display:flex;flex-direction:column;position:relative;transition:transform .22s,box-shadow .22s}

.pkg:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(1,45,96,.12)}

.pkg .name{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}

.pkg .price{font-family:var(--disp);font-size:2.2rem;font-weight:800;margin:.5rem 0 0;letter-spacing:-.02em}

.pkg .taxnote{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.08em}

.pkg p.desc{font-size:.88rem;color:var(--muted);margin:1rem 0 1.2rem}

.pkg ul{list-style:none;display:grid;gap:10px;margin-bottom:1.6rem}

.pkg ul li{font-size:.9rem;font-weight:600;display:flex;gap:10px;align-items:flex-start}

.pkg ul li::before{content:"✓";color:var(--teal);font-weight:800;flex:none}

.pkg .btn{margin-top:auto;justify-content:center}

.pkg-more{background:none;border:none;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--marigold-deep);font-weight:600;cursor:pointer;margin-top:10px;padding:0;text-align:center;width:100%}

.pkg-more:hover{text-decoration:underline}

.pkg.featured .pkg-more{color:var(--marigold)}

.pkg.featured{background:var(--ink);color:#fff;border-color:var(--ink)}

.pkg.featured .price{color:var(--marigold)}

.pkg.featured p.desc{color:var(--muted-ivory)}

.pkg.featured .taxnote{color:var(--muted-ivory)}

.pkg.featured ul li::before{color:var(--marigold)}

.pkg .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--marigold);color:#fff;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;padding:6px 16px;border-radius:999px;text-transform:uppercase;white-space:nowrap}

/* ---------- Testimonials ---------- */
#testimonials{background:#fff;border-top:1px solid var(--line)}

.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px}

.tst{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative}

.tst .q{font-family:var(--disp);font-size:2.4rem;color:var(--marigold);line-height:0;position:relative;top:12px}

.tst p{font-size:.92rem;margin:14px 0 18px;color:var(--ink-2)}

.tst .who{display:flex;align-items:center;gap:12px;border-top:2px dashed var(--line);padding-top:14px}

.tst .avatar{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:.9rem}

.tst .who b{display:block;font-size:.9rem}

.tst .who span{font-size:.76rem;color:var(--muted)}

.tst .stars{color:var(--marigold);font-size:.8rem;letter-spacing:2px}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:800px;margin:34px auto 0}

.faq{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin-bottom:12px;overflow:hidden}

/* ---------- Contact ---------- */
#contact{background:var(--ink);color:#fff}

#contact .eyebrow{color:var(--marigold)}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-top:36px}

.office{border:1px dashed rgba(255,255,255,.25);border-radius:var(--radius);padding:22px;margin-bottom:16px}

.office .code{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;color:var(--marigold);text-transform:uppercase}

.office h4{font-family:var(--disp);font-weight:700;margin:.4rem 0 .3rem}

.office p{font-size:.88rem;color:var(--muted-ivory)}

.clinks{display:grid;gap:12px;margin-top:8px}

.clink{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:16px 18px;transition:border-color .2s,background .2s}

.clink:hover{border-color:var(--marigold);background:rgba(250,109,4,.08)}

.clink .ico{width:40px;height:40px;flex:none;border-radius:10px;background:rgba(250,109,4,.16);display:grid;place-items:center;font-size:1.1rem}

.clink b{display:block;font-size:.94rem}

.clink span{font-family:var(--mono);font-size:.72rem;color:var(--muted-ivory);letter-spacing:.05em}

.contact-form{background:#fff;color:var(--ink);border-radius:18px;padding:30px}

.contact-form h3{font-family:var(--disp);font-weight:800;font-size:1.3rem;margin-bottom:1.2rem}

.fld{margin-bottom:14px}

.fld label{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}

.fld input,.fld select,.fld textarea{width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:10px;font-family:var(--body);font-size:.92rem;background:var(--paper);color:var(--ink);outline:none;transition:border-color .2s}

.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--marigold)}

.fld textarea{resize:vertical;min-height:100px}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.form-note{font-size:.76rem;color:var(--muted);margin-top:10px;text-align:center}

/* ---------- Footer ---------- */
footer{background:#011C3D;color:var(--muted-ivory);padding:60px 0 0}

.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:44px}

.foot-grid h5{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px}

.foot-grid a{display:block;font-size:.86rem;padding:5px 0;transition:color .2s}

.foot-grid a:hover{color:var(--marigold)}

.foot-grid p{font-size:.86rem}

.socials{display:flex;gap:10px;margin-top:16px}

.socials a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);border-radius:9px;display:grid;place-items:center;font-size:.85rem;padding:0}

.socials a:hover{border-color:var(--marigold);color:var(--marigold)}

.foot-bottom{border-top:1px dashed rgba(255,255,255,.15);padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;flex-wrap:wrap;gap:10px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}