/* Jagdamb Group of Companies — stylesheet */

  /* base reset the hosted page needs on its own */
  html{-webkit-text-size-adjust:100%}
  body{margin:0}
  img{max-width:100%}
  [hidden]{display:none!important}

/* Layout concept: daylight white and warm cream, large soft-radius cards in a bento rhythm,
   centered section intros with two-tone headings, orange as solid fills rather than thin rules. */
:root{
  --paper:#FFFFFF; --cream:#FBF8F3; --cream-2:#F4EFE7;
  --ink:#1C1A1A; --body:#6F6D70; --muted:#9C9A9C; --line:#EAE4DB;
  /* Brand: the crimson disc eclipsing a marigold ring, taken from the Jagdamb mark */
  --o:#D91821; --o-deep:#B0121A; --o-soft:#FDF1F0; --on-o:#FFFFFF;
  --y:#FFB413; --y-deep:#B9820C; --y-soft:#FFF6E4; --on-y:#3A2800;
  --ph-ink:#A07E2A;
  --sans:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --wrap:1280px; --gut:clamp(18px,4vw,52px);
  --r:18px; --r-lg:24px;
  --sh:0 1px 2px rgba(28,26,26,.04), 0 12px 32px -18px rgba(28,26,26,.2);
  /* Light only, by design — the page stays daylight white whatever the viewer's system is set to. */
  color-scheme:light only;
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{color:var(--ink);font-family:var(--sans);margin:0;text-wrap:balance;font-weight:700;letter-spacing:-.028em;line-height:1.1}
h1{font-size:clamp(2.5rem,5.6vw,4.3rem);font-weight:800;letter-spacing:-.038em;line-height:1.05}
h2{font-size:clamp(1.85rem,3.6vw,3rem);font-weight:700;letter-spacing:-.032em}
h3{font-size:clamp(1.15rem,1.8vw,1.42rem);letter-spacing:-.018em}
p{margin:0}
.ac{color:var(--o)}
::selection{background:var(--o);color:#fff}
:focus-visible{outline:2px solid var(--o);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(60px,8vw,112px)}
.sec--t{padding-block:clamp(40px,5vw,70px)}
.cream{background:var(--cream)}
.stack{display:flex;flex-direction:column}

/* progress */
.prog{position:fixed;top:0;left:0;height:3px;background:var(--o);width:0;z-index:99;transition:width .12s linear}

/* eyebrow — the bullet is the brand eclipse in miniature */
.eb{display:inline-flex;align-items:center;gap:10px;font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--ink)}
.eb::before{content:"";width:15px;height:15px;flex:none;
  background:
    radial-gradient(circle at 66% 34%, var(--o) 0 43%, transparent 44%),
    radial-gradient(circle at 40% 60%, var(--y) 0 46%, transparent 47%);
  transform:scale(0) rotate(-25deg);transition:transform .55s cubic-bezier(.3,1.5,.5,1) .15s}
.in .eb::before,.eb.in::before{transform:scale(1) rotate(0)}

/* the eclipse, used large and faint as a watermark */
.wm{position:absolute;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 66% 34%, var(--o) 0 43%, transparent 44%),
    radial-gradient(circle at 40% 60%, var(--y) 0 46%, transparent 47%);
  opacity:.06}
.wm--band{opacity:.16;background:
    radial-gradient(circle at 66% 34%, #fff 0 43%, transparent 44%),
    radial-gradient(circle at 40% 60%, var(--y) 0 46%, transparent 47%)}

/* centered section intro */
.intro{text-align:center;max-width:720px;margin:0 auto clamp(38px,5vw,62px)}
.intro h2{margin-top:16px}
.intro p{margin-top:18px;color:var(--body);font-size:1.02rem}
.intro--l{text-align:left;margin-inline:0}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:70;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(18px) saturate(1.4);transition:box-shadow .35s ease}
.nav.is-stuck{box-shadow:0 1px 0 var(--line),0 8px 24px -20px rgba(23,21,20,.5)}
.nav__in{display:flex;align-items:center;gap:20px;padding-block:17px;transition:padding .3s ease}
.nav.is-stuck .nav__in{padding-block:11px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.brand .mk{height:36px;width:auto;flex:none;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.brand:hover .mk{transform:rotate(-8deg) scale(1.05)}
.brand b{font-size:1.2rem;letter-spacing:-.035em;color:var(--ink);font-weight:800;line-height:1.05;display:block}
.brand i{display:block;font-style:normal;font-size:.55rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;font-weight:600;margin-top:2px}
.foot .logo{width:clamp(130px,13vw,164px);height:auto;margin-bottom:4px}
.nav__links{display:flex;gap:2px;align-items:center}
.nav__links a{text-decoration:none;font-size:.88rem;font-weight:600;color:var(--body);padding:9px 15px;border-radius:999px;transition:color .25s,background .25s}
.nav__links a:hover{color:var(--ink);background:var(--cream)}
.nav__links a[aria-current="page"]{color:var(--o)}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:16px;height:1.8px;background:currentColor;border-radius:2px;margin:3.6px 0;transition:transform .3s,opacity .2s}
.nav.is-open .burger span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){opacity:0}
.nav.is-open .burger span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
@media (max-width:1000px){
  .burger{display:block}
  .nav__cta{display:none}
  .nav__links{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gut) 22px;display:none}
  .nav.is-open .nav__links{display:flex}
  .nav__links a{padding:14px 16px;font-size:1rem;border-radius:12px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 25px;border-radius:999px;font-size:.88rem;font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:var(--sans);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.btn .arw{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .arw{transform:translateX(4px)}
.btn--p{background:var(--o);color:var(--on-o);box-shadow:0 8px 22px -12px rgba(217,24,33,.85)}
.btn--p:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(217,24,33,.8)}
.btn--y{background:var(--y);color:var(--on-y);box-shadow:0 8px 22px -12px rgba(255,180,19,.95)}
.btn--y:hover{transform:translateY(-2px)}
.btn--g{border-color:var(--line);color:var(--ink);background:var(--paper)}
.btn--g:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--w{background:var(--paper);color:var(--ink)}
.btn--w:hover{transform:translateY(-2px)}
.btn--sm{padding:11px 20px;font-size:.84rem}

/* hero */
.hero{background:var(--cream);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10%;top:-34%;width:62%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,180,19,.20) 0%,rgba(217,24,33,.07) 42%,transparent 68%);pointer-events:none}
.hero .wm{right:-7%;top:-16%;width:min(46%,480px);aspect-ratio:1}
.hero__in{position:relative;z-index:1;padding-top:clamp(52px,7vw,88px);padding-bottom:clamp(30px,4vw,46px);text-align:center}
.hero h1{margin-top:20px;max-width:17ch;margin-inline:auto}
.hero__lede{margin:22px auto 0;max-width:58ch;font-size:clamp(1rem,1.35vw,1.13rem)}
.hero__cta{display:flex;gap:13px;flex-wrap:wrap;margin-top:32px;justify-content:center}
.hero__shot{position:relative;z-index:1;padding-bottom:clamp(44px,6vw,76px)}
/* on crimson and marigold surfaces the eclipse flips to white over marigold */
.card--o .eb::before,.band .eb::before,.tile--o .eb::before{
  background:
    radial-gradient(circle at 66% 34%, #fff 0 43%, transparent 44%),
    radial-gradient(circle at 40% 60%, var(--y) 0 46%, transparent 47%)}
.stat--y .eb::before{background:
    radial-gradient(circle at 66% 34%, var(--o) 0 43%, transparent 44%),
    radial-gradient(circle at 40% 60%, #fff 0 46%, transparent 47%)}
.hero--s .hero__in{padding-top:clamp(42px,5.5vw,70px);padding-bottom:clamp(26px,3.5vw,40px)}
.hero--s h1{font-size:clamp(2.1rem,4.2vw,3.3rem)}

/* line mask */
.lm{display:block;overflow:hidden;padding-bottom:.08em}
.lm>i{display:block;font-style:normal;transform:translateY(106%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.lm.in>i{transform:none}
.fu{opacity:0;transform:translateY(20px)}
.fu.in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}

/* marquee */
.mq{overflow:hidden;padding-block:20px;border-block:1px solid var(--line);background:var(--paper)}
.mq__t{display:flex;gap:40px;width:max-content;animation:mv 52s linear infinite;align-items:center}
.mq:hover .mq__t{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.mq__t span{font-size:.92rem;font-weight:600;color:var(--muted);white-space:nowrap;letter-spacing:-.01em}
.mq__t b{color:var(--o)}

/* stats */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
.stat{background:var(--cream);border-radius:var(--r);padding:clamp(22px,2.6vw,32px)}
.stat b{display:block;font-size:clamp(2.1rem,4vw,3.1rem);color:var(--ink);line-height:1;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.045em}
.stat span{display:block;margin-top:11px;font-size:.84rem;color:var(--body);line-height:1.5}
.stat--o{background:var(--o);color:var(--on-o)}
.stat--o b,.stat--o span{color:var(--on-o)}
.stat--y{background:var(--y)}
.stat--y b,.stat--y span{color:var(--on-y)}
@media (max-width:820px){.statrow{grid-template-columns:repeat(2,1fr)}}

/* grids */
.grid{display:grid;gap:clamp(13px,1.5vw,20px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,64px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* media placeholder frame */
.mf{position:relative;overflow:hidden;border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;
  text-align:center;padding:22px;
  background:
   radial-gradient(72% 92% at 28% 18%,rgba(255,180,19,.16) 0%,transparent 62%),
   repeating-linear-gradient(135deg,transparent,transparent 13px,color-mix(in srgb,var(--y) 22%,transparent) 13px,color-mix(in srgb,var(--y) 22%,transparent) 14px),
   var(--y-soft);
  border:1px solid color-mix(in srgb,var(--y) 42%,transparent);transition:border-color .4s,transform .7s cubic-bezier(.16,1,.3,1)}
.mf__lb{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ph-ink);max-width:30ch;line-height:1.85}
/* the eclipse, small, marks every image slot */
.mf::before{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-50%);margin-top:-42px;
  background:
    radial-gradient(circle at 66% 34%, color-mix(in srgb,var(--o) 38%,transparent) 0 43%, transparent 44%),
    radial-gradient(circle at 40% 60%, color-mix(in srgb,var(--y) 62%,transparent) 0 46%, transparent 47%)}
.mf--img{padding:0;background:var(--y-soft)}
.mf--img::before{display:none}
.mf--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;display:block}
.mf--16{aspect-ratio:16/9}
.mf--43{aspect-ratio:4/3}
.mf--11{aspect-ratio:1/1}
.mf--32{aspect-ratio:3/2}
.mf--21{aspect-ratio:21/9}
.mf--tall{aspect-ratio:4/5}
.mf--sm .mf__lb{font-size:.58rem;letter-spacing:.1em;line-height:1.7}
.mf--sm::before{width:28px;height:28px;margin-top:-32px}
.mf__tag{position:absolute;left:16px;top:16px;z-index:2}
.hero__shot .mf{border-radius:var(--r-lg)}

/* cards */
.card{background:var(--cream);border-radius:var(--r);padding:clamp(22px,2.5vw,30px);display:flex;flex-direction:column;gap:11px;min-width:0}
.card p{font-size:.95rem}
.card--o{background:var(--o);color:var(--on-o)}
.card--o h2,.card--o h3,.card--o h4{color:var(--on-o)}
.card--o p{color:color-mix(in srgb,var(--on-o) 88%,transparent)}
.card--line{background:var(--paper);border:1px solid var(--line)}

/* tile */
.tile{display:flex;flex-direction:column;text-decoration:none;min-width:0;background:var(--cream);border-radius:var(--r);overflow:hidden;transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease}
.tile:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.tile:hover .mf{transform:scale(1.03)}
.tile .mf{border-radius:0;border-left:0;border-right:0;border-top:0}
.tile__b{padding:clamp(20px,2.3vw,27px);display:flex;flex-direction:column;gap:10px;flex:1}
.kmeta{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:700}
.tile--o{background:var(--o)}
.tile--o h3{color:var(--on-o)}
.tile--o p,.tile--o .kmeta{color:color-mix(in srgb,var(--on-o) 85%,transparent)}
.tile--o .more{color:var(--on-o)}
.more{margin-top:auto;padding-top:10px;font-size:.8rem;font-weight:700;color:var(--o);display:inline-flex;gap:8px;align-items:center}
.more .arw{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.tile:hover .more .arw{transform:translateX(6px)}
.bignum{font-size:1.5rem;font-weight:800;color:var(--o);letter-spacing:-.04em;line-height:1}
.tile--o .bignum{color:var(--on-o)}

/* note */
.note{background:var(--o-soft);border-radius:var(--r);padding:17px 21px}
.note b{display:block;font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--o-deep);margin-bottom:6px;font-weight:800}
.note p{font-size:.89rem;color:var(--body)}

/* numbered bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.5vw,20px)}
.bento>*{grid-column:span 2}
.bento>*.w1{grid-column:span 1}
.bento>*.w3{grid-column:span 3}
@media (max-width:860px){.bento{grid-template-columns:repeat(2,1fr)}.bento>*,.bento>*.w1,.bento>*.w3{grid-column:span 2}}
@media (max-width:560px){.bento{grid-template-columns:1fr}.bento>*,.bento>*.w1,.bento>*.w3{grid-column:span 1}}

/* facts */
.facts{display:grid;border-top:1px solid var(--line)}
.facts>div{display:grid;grid-template-columns:minmax(112px,32%) 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:.94rem;align-items:baseline}
.facts b{color:var(--muted);font-weight:700;font-size:.69rem;letter-spacing:.12em;text-transform:uppercase}
.facts i{font-style:normal;color:var(--o-deep)}

/* timeline */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tl li{display:grid;grid-template-columns:92px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.tl li:first-child{border-top:1px solid var(--line)}
.tl b{font-size:1.3rem;color:var(--o);font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.035em}
.tl p{font-size:.97rem;color:var(--ink);font-weight:500}

/* chips */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px;justify-content:center}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--body);border-radius:999px;padding:10px 20px;font-size:.84rem;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .25s}
.chip:hover{border-color:var(--o);color:var(--o)}
.chip[aria-pressed="true"]{background:var(--o);border-color:var(--o);color:var(--on-o)}

/* tag */
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:7px 13px;border-radius:999px;background:var(--paper);color:var(--ink);box-shadow:0 2px 10px -4px rgba(28,26,26,.3)}
.tag--up{background:var(--y);color:var(--on-y)}

/* cta band */
.band{border-radius:var(--r-lg);background:var(--o);color:var(--on-o);position:relative;overflow:hidden}
.band .wm{right:-4%;bottom:-54%;width:min(42%,360px);aspect-ratio:1}
.band__in{position:relative;z-index:1;padding:clamp(34px,5vw,64px);display:flex;gap:28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{color:var(--on-o);max-width:16ch}
.band p{color:color-mix(in srgb,var(--on-o) 88%,transparent);margin-top:12px;max-width:40ch}

/* form */
.form{display:grid;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.field input,.field textarea,.field select{font-family:var(--sans);font-size:.95rem;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);transition:border-color .25s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--o);outline:none}
.field textarea{min-height:122px;resize:vertical}
.ok{background:var(--o-soft);border-radius:12px;padding:15px 18px;font-size:.9rem;color:var(--o-deep);font-weight:500}

/* footer */
.foot{background:var(--cream);color:var(--body)}
.foot__t{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:36px;padding-block:clamp(48px,6vw,78px)}
@media (max-width:900px){.foot__t{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.foot__t{grid-template-columns:1fr}}
.foot h5{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;font-weight:800}
.foot a{color:var(--body);text-decoration:none;font-size:.92rem;display:block;padding-block:5px;transition:color .25s,transform .25s}
.foot a:hover{color:var(--o);transform:translateX(3px)}
.foot__b{border-top:1px solid var(--line);padding-block:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}

.viewfade{animation:vf .45s cubic-bezier(.16,1,.3,1) both}
@keyframes vf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .lm>i{transform:none}.fu{opacity:1;transform:none}.eb::before{transform:scale(1)}
}

/* google map — contact page */
.map{display:grid;gap:12px}
.map__frame{position:relative;aspect-ratio:16/10;border-radius:var(--r-lg);overflow:hidden;border:1px solid color-mix(in srgb,var(--y) 42%,transparent);background:var(--y-soft)}
.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map__link{justify-self:start;color:var(--o);font-weight:700;font-size:.9rem;text-decoration:none}
.map__link:hover{text-decoration:underline}