/* ==========================================================================
   Page sections — Jinisha Software Solutions (bright saffron)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:clamp(600px,88vh,860px);display:flex;align-items:center;
  padding-top:var(--nav-h);overflow:hidden;
  background:
    radial-gradient(900px 620px at 88% 10%, #FFEBD6 0%, rgba(255,235,214,0) 62%),
    radial-gradient(760px 520px at 6% 0%, #FFF3E4 0%, rgba(255,243,228,0) 60%),
    linear-gradient(180deg,#FFFCF8 0%,#FFFFFF 72%);
}
.hero__canvas{position:absolute;inset:0;z-index:0}
.hero__canvas canvas{width:100%;height:100%;display:block}
.hero__inner{position:relative;z-index:2;width:100%;padding-block:clamp(44px,7vh,84px)}
.hero__content{max-width:730px}
.hero h1{margin-top:22px}
.hero .lede{margin-top:24px;max-width:54ch}
.hero .btn-row{margin-top:34px}

/* Fades the canvas out behind the copy so text always wins */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,#FFFCF8 4%,rgba(255,252,248,.94) 26%,rgba(255,252,248,.4) 44%,rgba(255,252,248,0) 60%);
}

/* On narrow screens the globe sits behind the headline — keep it as texture only */
@media (max-width:760px){
  .hero__canvas{opacity:.45}
  .hero__scrim{
    background:linear-gradient(180deg,rgba(255,252,248,.55) 0%,rgba(255,252,248,.9) 34%,#FFFCF8 62%);
  }
  .hero{min-height:auto;padding-bottom:8px}
}

/* Technical grid — signature */
.gridlines{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.85;
  background-image:
    linear-gradient(rgba(28,25,23,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,25,23,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 85% 70% at 55% 42%,#000 12%,transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 55% 42%,#000 12%,transparent 76%);
}

/* Hero trust row */
.hero__row{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:44px;
  padding-top:26px;border-top:1px solid var(--line);max-width:640px;
}

/* ---------- Page header (interior pages) ---------- */
.phead{
  position:relative;overflow:hidden;
  padding-top:calc(var(--nav-h) + clamp(52px,8vw,100px));
  padding-bottom:clamp(38px,5.5vw,66px);
  background:
    radial-gradient(760px 420px at 82% 0%, #FFEBD6 0%, rgba(255,235,214,0) 64%),
    linear-gradient(180deg,#FFFCF8,#FFFFFF);
  border-bottom:1px solid var(--line);
}
.phead__canvas{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* fade it out over the headline so text always wins */
  mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 64%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 34%,#000 64%);
}
.phead__canvas canvas{width:100%;height:100%;display:block}
@media (max-width:860px){.phead__canvas{opacity:.4}}
.phead__inner{position:relative;z-index:1}
.phead h1{margin-top:18px;max-width:19ch}
.phead .lede{margin-top:22px}
.crumbs{display:flex;gap:9px;align-items:center;font-size:.8125rem;color:var(--ink-4);margin-bottom:22px;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs svg{width:13px;height:13px;opacity:.6}

/* ---------- Marquee ---------- */
.marquee{
  position:relative;overflow:hidden;padding-block:26px;
  background:var(--bg-warm);border-block:1px solid var(--line);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.marquee__track{display:flex;gap:56px;width:max-content;animation:slide 42s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee__item{
  white-space:nowrap;font-family:var(--ff-display);font-weight:600;font-size:1rem;
  letter-spacing:-.01em;color:var(--ink-4);transition:color .3s var(--ease);
}
.marquee__item:hover{color:var(--accent-ink)}

/* ---------- Bento ---------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.bento>*{grid-column:span 2}
.bento .b-lg{grid-column:span 3}
@media (max-width:960px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento>*,.bento .b-lg{grid-column:span 1}
}
@media (max-width:620px){.bento{grid-template-columns:1fr}}

.feature{display:flex;flex-direction:column;position:relative;overflow:hidden;padding:30px;min-height:100%}
.feature .h4{margin-bottom:10px}
.feature p{font-size:.9375rem;color:var(--ink-3);line-height:1.65}
.feature__foot{margin-top:auto;padding-top:22px}
.feature__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.feature__tags span{
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.03em;
  padding:4px 9px;border-radius:5px;background:var(--bg-2);color:var(--ink-3);
}
/* saffron sweep on the large cards */
.feature--hero{
  background:linear-gradient(160deg,#FFF6EC 0%,#FFFFFF 58%);
  border-color:rgba(234,88,12,.18);
}
.feature--hero .card__icon{width:54px;height:54px}
.feature--hero .card__icon svg{width:26px;height:26px}

/* Numbered capability rail */
.numrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.numrow>div{background:var(--bg);padding:30px 26px}
.numrow b{
  display:block;font-family:var(--ff-mono);font-size:.75rem;color:var(--accent);
  letter-spacing:.14em;margin-bottom:16px;
}
.numrow p{font-size:.9375rem;color:var(--ink-3);margin-top:9px;line-height:1.6}
@media (max-width:860px){.numrow{grid-template-columns:1fr}}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5.5vw,72px);align-items:center}
.split--wide{grid-template-columns:1.05fr .95fr}
@media (max-width:920px){.split,.split--wide{grid-template-columns:1fr;gap:36px}}

.checks{margin-top:26px}
.checks li{display:flex;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:3px}
.checks strong{display:block;font-family:var(--ff-display);font-weight:600;font-size:.9375rem;color:var(--ink);letter-spacing:-.01em}
.checks span{display:block;font-size:.875rem;color:var(--ink-3);margin-top:3px;line-height:1.6}

/* ---------- Process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps::before{
  content:'';position:absolute;top:25px;left:6%;right:6%;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--tint),rgba(255,153,51,.55),var(--tint));
}
.step{position:relative}
.step__no{
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:2px solid var(--saffron);position:relative;z-index:1;
  font-family:var(--ff-mono);font-size:.8125rem;font-weight:500;color:var(--accent-ink);margin-bottom:20px;
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease);
}
.step:hover .step__no{background:var(--saffron);color:var(--on-accent);box-shadow:0 0 0 6px var(--tint)}
.step p{font-size:.9375rem;color:var(--ink-3);margin-top:10px;line-height:1.65}
@media (max-width:920px){.steps{grid-template-columns:1fr 1fr}.steps::before{display:none}}
@media (max-width:540px){.steps{grid-template-columns:1fr}}

/* ---------- Industry tiles ---------- */
.industries{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.industry{background:var(--bg);padding:30px 26px;transition:background-color .3s var(--ease)}
.industry:hover{background:var(--bg-warm)}
.industry svg{width:26px;height:26px;color:var(--accent);margin-bottom:16px}
.industry p{font-size:.875rem;color:var(--ink-3);margin-top:9px;line-height:1.6}
@media (max-width:880px){.industries{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.industries{grid-template-columns:1fr}}

/* ---------- Big CTA band ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:clamp(40px,6.5vw,76px);
  background:linear-gradient(135deg,#FFB865 0%,#FF9933 42%,#F97316 100%);
  box-shadow:var(--sh-3);
}
.cta__grid{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 80% 100% at 88% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 100% at 88% 0%,#000,transparent 70%);
}
.cta__inner{position:relative;z-index:1;max-width:660px}
.cta .eyebrow{color:var(--on-accent)}
.cta .eyebrow::before{background:var(--on-accent)}
.cta .h2{color:var(--on-accent)}
.cta .lede{margin-top:16px;color:#4A2A10}
.cta .btn-row{margin-top:30px}
.cta .btn--dark{background:var(--on-accent);color:#FFF3E4}
.cta .btn--ghost{border-color:rgba(42,22,8,.35);color:var(--on-accent);background:rgba(255,255,255,.35)}
.cta .btn--ghost:hover{background:rgba(255,255,255,.7);border-color:var(--on-accent);color:var(--on-accent)}

/* ---------- Service rows ---------- */
.srow{
  display:grid;grid-template-columns:60px 1fr 190px;gap:26px;align-items:start;
  padding:32px 0;border-bottom:1px solid var(--line);scroll-margin-top:100px;
}
.srow:first-of-type{border-top:1px solid var(--line)}
.srow__ico{
  width:54px;height:54px;border-radius:var(--r-md);display:grid;place-items:center;
  background:linear-gradient(145deg,var(--saffron-lt),var(--saffron));color:var(--on-accent);
  box-shadow:0 8px 16px -8px rgba(234,88,12,.55);
}
.srow__ico svg{width:25px;height:25px}
.srow p{color:var(--ink-3);font-size:.9375rem;margin-top:8px;max-width:62ch;line-height:1.7}
.srow__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.srow__tags span{font-family:var(--ff-mono);font-size:.6875rem;padding:4px 9px;border-radius:5px;background:var(--bg-2);color:var(--ink-3)}
.srow__aside{font-size:.8125rem;color:var(--ink-3);line-height:1.6}
.srow__aside .link{display:flex;width:fit-content;margin-top:12px}
.srow__aside b{display:block;font-family:var(--ff-mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px;font-weight:500}
@media (max-width:820px){
  .srow{grid-template-columns:1fr;gap:16px}
}

/* ---------- Spec table ---------- */
.spec{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--bg)}
.spec table{font-size:.9375rem}
.spec th,.spec td{padding:16px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.spec thead th{
  background:var(--bg-warm);font-family:var(--ff-mono);font-size:.6875rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:500;
}
.spec tbody th{font-weight:600;color:var(--ink);width:32%;font-family:var(--ff-display);letter-spacing:-.01em}
.spec td{color:var(--ink-3)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec-scroll{overflow-x:auto}

/* ---------- Accordion ---------- */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;gap:20px;justify-content:space-between;
  padding:22px 4px;text-align:left;
  font-family:var(--ff-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.015em;color:var(--ink);
  transition:color .22s var(--ease);
}
.acc__btn:hover{color:var(--accent-ink)}
.acc__btn svg{width:20px;height:20px;flex:none;color:var(--accent);transition:transform .35s var(--ease)}
.acc__item.is-open .acc__btn svg{transform:rotate(45deg)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.acc__item.is-open .acc__body{grid-template-rows:1fr}
.acc__body>div{overflow:hidden}
.acc__body p{padding:0 4px 24px;color:var(--ink-3);font-size:.9375rem;line-height:1.75;max-width:74ch}

/* ---------- Forms ---------- */
.field{display:block;margin-bottom:18px}
.field>span{
  display:block;font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-4);margin-bottom:9px;
}
.field input,.field select,.field textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--bg);border:1.5px solid var(--line-2);color:var(--ink);font-size:.9375rem;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.field textarea{resize:vertical;min-height:140px;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,153,51,.22);
}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;padding-right:44px;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:620px){.field-row{grid-template-columns:1fr}}
.form-note{font-size:.8125rem;color:var(--ink-4);margin-top:16px;line-height:1.6}
.form-ok{
  display:none;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:#DCFCE7;border:1px solid #86EFAC;color:#14532D;font-size:.9375rem;margin-bottom:18px;
}
.form-ok.is-on{display:flex}
.form-err{
  display:none;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-md);
  background:#FEE2E2;border:1px solid #FCA5A5;color:#7F1D1D;font-size:.9375rem;margin-bottom:18px;
}
.form-err.is-on{display:flex}
.form-err svg{width:20px;height:20px;flex:none;color:#B91C1C;margin-top:2px}
.form-ok svg{width:20px;height:20px;flex:none;color:#15803D;margin-top:2px}

/* ---------- Contact info ---------- */
.cinfo li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.cinfo li:first-child{border-top:1px solid var(--line)}
.cinfo__ico{
  width:44px;height:44px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:var(--tint);border:1px solid rgba(234,88,12,.2);color:var(--accent);
}
.cinfo__ico svg{width:20px;height:20px}
.cinfo h5{font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);font-weight:500;margin:0 0 5px}
.cinfo a,.cinfo p{color:var(--ink);font-size:1rem;line-height:1.55;font-weight:500}
.cinfo a:hover{color:var(--accent-ink)}
.cinfo small{display:block;font-size:.8125rem;color:var(--ink-3);font-weight:400;margin-top:3px}

/* ---------- Team / leadership ---------- */
.leader{
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding:30px;border-radius:var(--r-lg);background:var(--bg-warm);border:1px solid var(--line);
}
.leader__av{
  width:92px;height:92px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,var(--saffron-lt),var(--accent));
  font-family:var(--ff-display);font-weight:700;font-size:1.75rem;color:#fff;letter-spacing:-.02em;
  box-shadow:0 10px 22px -10px rgba(234,88,12,.6);
}
.leader h3{font-family:var(--ff-display);font-weight:700;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em}
.leader .role{color:var(--accent-ink);font-size:.875rem;font-weight:600;margin-top:3px}
.leader p{color:var(--ink-3);font-size:.9375rem;margin-top:12px;line-height:1.7}
@media (max-width:620px){.leader{grid-template-columns:1fr;text-align:center;justify-items:center}}

/* ---------- Value cards ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.value{padding:28px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line)}
.value b{
  display:block;font-family:var(--ff-display);font-weight:700;font-size:1.0625rem;
  color:var(--ink);letter-spacing:-.015em;margin-bottom:9px;
}
.value p{font-size:.9375rem;color:var(--ink-3);line-height:1.65}

/* ---------- Prose ---------- */
.prose{max-width:72ch}
.prose h2{font-family:var(--ff-display);font-weight:700;font-size:1.4rem;letter-spacing:-.025em;color:var(--ink);margin:40px 0 14px}
.prose h3{font-family:var(--ff-display);font-weight:600;font-size:1.0625rem;color:var(--ink);margin:26px 0 10px}
.prose p{color:var(--ink-2);margin-bottom:16px;line-height:1.75}
.prose ul{margin:0 0 18px;padding-left:22px;list-style:disc;color:var(--ink-2)}
.prose li{margin-bottom:9px;line-height:1.7}
.prose a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- 404 ---------- */
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding-top:var(--nav-h)}
.notfound__code{
  font-family:var(--ff-display);font-weight:800;font-size:clamp(5rem,18vw,11rem);
  line-height:1;letter-spacing:-.06em;
  background:linear-gradient(135deg,var(--saffron),var(--accent-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}