/* ============================================================
   INDY APPAREL PROS — DESIGN SYSTEM
   Signature: "Ink & Thread" — editorial split layout built around
   the physical materials of the trade (ink, thread, cotton canvas)
   rather than a generic SaaS look. Rust-ink accent + gold thread
   secondary against alternating near-black / warm-paper sections.
   ============================================================ */

:root{
  /* --- color: sampled directly from the Indy Custom Apparel logo --- */
  --ink-black: #041428;      /* deep navy-black, darker than logo navy for section bg depth */
  --ink-black-soft: #0a2148; /* logo navy #012246, lifted slightly for card surfaces */
  --paper: #f7f5f2;
  --paper-warm: #efe9e0;
  --rust: #bf1511;        /* logo red — monument bar / APPAREL wordmark */
  --rust-dim: #931009;
  --gold: #8a95a6;        /* skyline steel-grey, used as the quiet secondary accent */
  --navy: #012246;        /* exact logo navy */
  --charcoal: #0a2148;
  --line: rgba(247,245,242,0.12);
  --line-dark: rgba(1,34,70,0.10);
  --cream-text: #f7f5f2;
  --ink-text: #0a1930;
  --muted-on-ink: rgba(247,245,242,0.64);
  --muted-on-paper: rgba(10,25,48,0.60);

  /* --- type --- */
  --display: 'Clash Display', 'DM Sans', sans-serif;
  --body: 'DM Sans', sans-serif;

  /* --- motion --- */
  --ease: cubic-bezier(0.32,0.72,0,1);

  /* --- spacing --- */
  --section-y: clamp(5rem, 10vw, 9rem);
}

@font-face{
  font-family:'Clash Display';
  src:url('https://fonts.cdnfonts.com/s/tag/clash-display');
  font-weight:400 700;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink-text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{max-width:1320px;margin:0 auto;padding:0 1.5rem;}
@media(min-width:768px){.container{padding:0 3rem;}}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-0.02em;
  margin:0;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  border-radius:999px;padding:.4rem .9rem;
  font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;
  font-weight:600;
}
.eyebrow.on-ink{background:rgba(246,241,231,0.08);border:1px solid var(--line);color:var(--paper);}
.eyebrow.on-paper{background:rgba(23,21,18,0.05);border:1px solid var(--line-dark);color:var(--ink-text);}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--rust);}

section{padding:var(--section-y) 0;position:relative;}
.section-ink{background:var(--ink-black);color:var(--cream-text);}
.section-paper{background:var(--paper);color:var(--ink-text);}
.section-paper-warm{background:var(--paper-warm);color:var(--ink-text);}

/* --- nav --- */
.nav-wrap{position:fixed;top:1.1rem;left:0;right:0;z-index:60;display:flex;justify-content:center;pointer-events:none;}
.nav-pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:2.2rem;
  background:rgba(12,11,10,0.72);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(246,241,231,0.14);
  border-radius:999px;
  padding:.65rem .7rem .65rem 1.4rem;
  transition:transform .5s var(--ease);
}
.nav-logo{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--paper);white-space:nowrap;display:flex;align-items:center;}
.nav-logo span{color:var(--rust);}
.nav-logo img{height:34px;width:auto;display:block;}
.footer-logo img{height:52px;width:auto;display:block;}
.mobile-menu-logo img{height:40px;width:auto;display:block;margin-bottom:.5rem;}
.nav-links{display:none;gap:1.7rem;font-size:.86rem;color:var(--muted-on-ink);}
@media(min-width:900px){.nav-links{display:flex;}}
.nav-links a{transition:color .3s var(--ease);}
.nav-links a:hover{color:var(--paper);}
.nav-cta{
  background:var(--rust);color:var(--paper);
  font-size:.82rem;font-weight:600;
  padding:.62rem 1.15rem;border-radius:999px;
  display:flex;align-items:center;gap:.5rem;
  transition:transform .5s var(--ease), background .3s var(--ease);
}
.nav-cta:hover{background:var(--rust-dim);}
.nav-cta:active{transform:scale(0.97);}
.nav-cta .icon-circ{width:22px;height:22px;border-radius:50%;background:rgba(246,241,231,0.18);display:flex;align-items:center;justify-content:center;font-size:.7rem;transition:transform .5s var(--ease);}
.nav-cta:hover .icon-circ{transform:translate(2px,-1px) scale(1.06);}

/* --- buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  border-radius:999px;padding:.95rem 1.6rem;
  font-weight:600;font-size:.95rem;
  transition:transform .5s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--rust);color:var(--paper);}
.btn-primary:hover{background:var(--rust-dim);}
.btn-primary .icon-circ{width:26px;height:26px;border-radius:50%;background:rgba(246,241,231,0.2);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease);}
.btn-primary:hover .icon-circ{transform:translate(2px,-1px) scale(1.06);}
.btn-ghost-ink{border:1px solid rgba(246,241,231,0.28);color:var(--paper);}
.btn-ghost-ink:hover{border-color:var(--paper);}
.btn-ghost-paper{border:1px solid rgba(23,21,18,0.22);color:var(--ink-text);}
.btn-ghost-paper:hover{border-color:var(--ink-text);}

/* --- double-bezel card --- */
.bezel{padding:.4rem;border-radius:1.75rem;background:rgba(246,241,231,0.06);border:1px solid var(--line);}
.section-paper .bezel,.section-paper-warm .bezel{background:rgba(23,21,18,0.04);border:1px solid var(--line-dark);}
.bezel-core{
  border-radius:1.5rem;overflow:hidden;position:relative;
  box-shadow:inset 0 1px 1px rgba(246,241,231,0.08);
}
.section-paper .bezel-core,.section-paper-warm .bezel-core{box-shadow:inset 0 1px 1px rgba(255,255,255,0.6);}

/* --- hero --- */
.hero{padding-top:clamp(8rem,16vw,11rem);padding-bottom:var(--section-y);background:var(--ink-black);color:var(--cream-text);position:relative;overflow:hidden;}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 50% at 85% 20%, rgba(191,21,17,0.16), transparent 60%),
             radial-gradient(ellipse 50% 40% at 10% 90%, rgba(138,149,166,0.14), transparent 60%);
  pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:end;position:relative;z-index:1;}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:2rem;}}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);max-width:15ch;}
.hero h1 em{font-style:normal;color:var(--rust);}
.hero-sub{margin-top:1.6rem;font-size:1.1rem;line-height:1.6;color:var(--muted-on-ink);max-width:46ch;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;}
.hero-stats{display:flex;gap:2.2rem;margin-top:3rem;flex-wrap:wrap;}
.hero-stat b{font-family:var(--display);font-size:1.6rem;display:block;color:var(--paper);}
.hero-stat span{font-size:.78rem;color:var(--muted-on-ink);text-transform:uppercase;letter-spacing:.08em;}
.hero-visual{position:relative;}
.hero-visual img{width:100%;height:clamp(360px,42vw,560px);object-fit:cover;}
.hero-visual-tag{
  position:absolute;bottom:1.1rem;left:1.1rem;right:1.1rem;
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(12,11,10,0.6);backdrop-filter:blur(12px);
  border-radius:1rem;padding:.85rem 1.1rem;
  border:1px solid rgba(246,241,231,0.14);
}
.hero-visual-tag span{font-size:.78rem;color:var(--muted-on-ink);}
.hero-visual-tag b{font-family:var(--display);font-size:.95rem;color:var(--paper);}

/* --- reveal --- */
.reveal{opacity:0;transform:translateY(48px);filter:blur(6px);}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}

/* --- section heads --- */
.head{max-width:44rem;margin-bottom:3.2rem;}
.head h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:1rem;}
.head p{margin-top:1.1rem;font-size:1.05rem;line-height:1.6;}
.section-ink .head p{color:var(--muted-on-ink);}
.section-paper .head p,.section-paper-warm .head p{color:var(--muted-on-paper);}

/* --- service cards grid (gapless bento, grid-flow-dense equivalent) --- */
.services-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem;grid-auto-flow:dense;}
@media(max-width:900px){.services-grid{grid-template-columns:1fr;}}
.svc-card{grid-column:span 2;border-radius:1.4rem;padding:1.9rem;background:var(--ink-black-soft);border:1px solid var(--line);min-height:220px;display:flex;flex-direction:column;justify-content:space-between;transition:transform .6s var(--ease),border-color .4s var(--ease);}
.svc-card:hover{transform:translateY(-6px);border-color:rgba(191,21,17,0.5);}
.svc-card.wide{grid-column:span 3;}
@media(max-width:900px){.svc-card,.svc-card.wide{grid-column:span 1;}}
.svc-icon{width:44px;height:44px;border-radius:12px;background:rgba(191,21,17,0.14);color:var(--rust);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.1rem;}
.svc-card h3{font-size:1.25rem;margin-top:1.2rem;color:var(--paper);}
.svc-card p{font-size:.92rem;color:var(--muted-on-ink);margin-top:.6rem;line-height:1.55;}
.svc-card a.svc-link{margin-top:1.2rem;font-size:.85rem;color:var(--paper);display:inline-flex;align-items:center;gap:.4rem;}

/* --- split feature (t-shirt / embroidery sections) --- */
.split{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center;}
@media(min-width:960px){.split{grid-template-columns:1fr 1fr;gap:4rem;}}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.split-img img{width:100%;height:clamp(320px,32vw,460px);object-fit:cover;}
.split-body .eyebrow{margin-bottom:1.2rem;}
.split-body h2{font-size:clamp(1.9rem,3.2vw,2.6rem);margin-bottom:1.1rem;}
.split-body p{font-size:1.02rem;line-height:1.65;margin-bottom:1.6rem;}
.split-list{list-style:none;padding:0;margin:0 0 1.8rem;display:flex;flex-direction:column;gap:.8rem;}
.split-list li{display:flex;gap:.7rem;font-size:.95rem;align-items:flex-start;}
.split-list li .m{color:var(--rust);font-weight:700;flex-shrink:0;}

/* --- why-choose bento --- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.why-grid{grid-template-columns:1fr;}}
.why-card{border-radius:1.3rem;padding:1.7rem;background:#fff;border:1px solid var(--line-dark);box-shadow:0 30px 60px -40px rgba(23,21,18,0.25);}
.why-card b{font-family:var(--display);font-size:1.6rem;display:block;color:var(--rust);}
.why-card p{font-size:.9rem;color:var(--muted-on-paper);margin-top:.5rem;line-height:1.5;}

/* --- process steps --- */
.steps{display:grid;grid-template-columns:1fr;gap:1.4rem;}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr);}}
.step{position:relative;padding:1.8rem 1.6rem;border-radius:1.3rem;background:var(--ink-black-soft);border:1px solid var(--line);}
.step .num{font-family:var(--display);font-size:2.2rem;color:var(--rust);}
.step h4{font-size:1.05rem;color:var(--paper);margin-top:.9rem;}
.step p{font-size:.88rem;color:var(--muted-on-ink);margin-top:.5rem;line-height:1.5;}

/* --- industries marquee-ish grid --- */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
@media(max-width:820px){.ind-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.ind-grid{grid-template-columns:1fr;}}
.ind-chip{padding:1.3rem 1.4rem;border-radius:1rem;background:#fff;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:space-between;font-size:.98rem;font-weight:600;transition:transform .5s var(--ease),border-color .3s var(--ease);}
.ind-chip:hover{transform:translateY(-4px);border-color:var(--rust);}
.ind-chip span.arrow{color:var(--rust);}

/* --- locations --- */
.loc-grid{display:flex;flex-wrap:wrap;gap:.7rem;}
.loc-chip{padding:.7rem 1.1rem;border-radius:999px;border:1px solid var(--line);font-size:.86rem;color:var(--muted-on-ink);transition:border-color .3s var(--ease),color .3s var(--ease);}
.loc-chip:hover{border-color:var(--rust);color:var(--paper);}

/* --- gallery --- */
.gallery{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:.9rem;grid-auto-flow:dense;}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px;}}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:1.1rem;transition:transform .7s var(--ease);}
.gallery a{overflow:hidden;border-radius:1.1rem;display:block;}
.gallery a:hover img{transform:scale(1.06);}
.g1{grid-column:span 3;grid-row:span 2;}
.g2{grid-column:span 3;grid-row:span 1;}
.g3{grid-column:span 3;grid-row:span 1;}
@media(max-width:900px){.g1,.g2,.g3{grid-column:span 1;grid-row:span 1;}}

/* --- guides --- */
.guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
@media(max-width:820px){.guides-grid{grid-template-columns:1fr;}}
.guide-card{padding:1.6rem;border-radius:1.2rem;background:var(--ink-black-soft);border:1px solid var(--line);}
.guide-card .eyebrow{margin-bottom:1rem;}
.guide-card h4{font-size:1.08rem;color:var(--paper);line-height:1.35;}
.guide-card a{margin-top:1rem;font-size:.85rem;color:var(--rust);display:inline-flex;align-items:center;gap:.4rem;}

/* --- faq --- */
.faq{max-width:52rem;}
.faq-item{border-top:1px solid var(--line-dark);padding:1.5rem 0;}
.faq-item:last-child{border-bottom:1px solid var(--line-dark);}
.faq-q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-family:var(--display);font-size:1.08rem;gap:1rem;}
.faq-q .plus{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;transition:transform .5s var(--ease);font-size:.9rem;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease);}
.faq-a p{padding-top:1rem;font-size:.96rem;line-height:1.6;color:var(--muted-on-paper);}

/* --- final cta --- */
.final-cta{background:var(--ink-black);color:var(--cream-text);text-align:left;position:relative;overflow:hidden;}
.final-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 20% 30%, rgba(191,21,17,0.18), transparent 60%);}
.final-cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:center;}
@media(min-width:900px){.final-cta-inner{grid-template-columns:1.3fr 1fr;}}
.final-cta h2{font-size:clamp(2.2rem,4vw,3.2rem);max-width:16ch;}

/* --- lead form --- */
.lead-form{display:flex;flex-direction:column;gap:.9rem;}
.lead-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
@media(max-width:520px){.lead-form .row2{grid-template-columns:1fr;}}
.lead-form input,.lead-form select,.lead-form textarea{
  width:100%;padding:.9rem 1.05rem;border-radius:.9rem;
  border:1px solid rgba(246,241,231,0.2);background:rgba(246,241,231,0.05);
  color:var(--paper);font-family:var(--body);font-size:.95rem;
}
.lead-form ::placeholder{color:rgba(246,241,231,0.4);}
.lead-form label{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-on-ink);margin-bottom:.35rem;display:block;}
.lead-form textarea{min-height:100px;resize:vertical;}
.form-status{font-size:.86rem;margin-top:.4rem;min-height:1.2em;}
.form-status.ok{color:#8fd19e;}
.form-status.err{color:#e5897a;}

/* --- footer --- */
footer{background:var(--ink-black-soft);color:var(--muted-on-ink);padding:4.5rem 0 2rem;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h5{color:var(--paper);font-family:var(--display);font-size:.9rem;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.08em;}
.footer-grid a{display:block;font-size:.88rem;padding:.28rem 0;transition:color .3s var(--ease);}
.footer-grid a:hover{color:var(--paper);}
.footer-bottom{margin-top:3.5rem;padding-top:1.8rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.82rem;}
.footer-bottom a{color:var(--rust);font-weight:600;}

/* --- disclaimer strip --- */
.disclaimer-strip{background:var(--paper-warm);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:1.1rem 0;}
.disclaimer-strip p{font-size:.82rem;color:var(--muted-on-paper);text-align:center;max-width:60rem;margin:0 auto;line-height:1.5;}

/* --- mobile hamburger --- */
.hamburger{display:none;width:38px;height:38px;border-radius:50%;background:rgba(246,241,231,0.08);align-items:center;justify-content:center;position:relative;flex-shrink:0;}
@media(max-width:899px){.hamburger{display:flex;}.nav-links{display:none;}}
.hamburger span{position:absolute;width:14px;height:1.5px;background:var(--paper);transition:transform .4s var(--ease),opacity .3s var(--ease);}
.hamburger span:first-child{transform:translateY(-4px);}
.hamburger span:last-child{transform:translateY(4px);}
.hamburger.open span:first-child{transform:rotate(45deg);}
.hamburger.open span:last-child{transform:rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;background:rgba(12,11,10,0.97);backdrop-filter:blur(24px);z-index:55;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;padding:2.5rem;transform:translateY(-16px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease),transform .5s var(--ease);}
.mobile-menu.open{opacity:1;transform:translateY(0);pointer-events:auto;}
.mobile-menu a{font-family:var(--display);font-size:2rem;color:var(--paper);opacity:0;transform:translateY(20px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.mobile-menu.open a{opacity:1;transform:translateY(0);}

/* ============================================================
   SPLASH INTRO — 3-second brand reveal, homepage only, plays
   once per session (sessionStorage-gated in main.js).
   ============================================================ */
#splash{
  position:fixed;inset:0;z-index:200;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#splash::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 40%, rgba(191,21,17,0.20), transparent 65%);
}
#splash::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(247,245,242,0.035) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(247,245,242,0.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 40%, transparent 75%);
}
.splash-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.splash-logo{width:min(58vw, 300px);}
.splash-logo img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 60px rgba(0,0,0,0.45));}
.splash-underline{margin-top:1.3rem;width:0;height:2px;background:var(--rust);border-radius:2px;}
.splash-tagline{
  margin-top:1.5rem;font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted-on-ink);opacity:0;
}
.splash-bar{
  margin-top:2.1rem;width:min(46vw,220px);height:2px;background:rgba(247,245,242,0.14);
  border-radius:2px;overflow:hidden;
}
.splash-bar-fill{width:0%;height:100%;background:var(--rust);border-radius:2px;}
body.splash-active{overflow:hidden;}