/* ui.css — loaded last on every page.
   1. self-hosted fonts   2. one radius scale   3. services section   4. motion polish (reduced-motion safe) */

/* ---------- 1. fonts (self-hosted, no third-party request) ---------- */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Tiro Devanagari Sanskrit";src:url(/assets/fonts/tiro-sphota-subset.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- 2. one radius scale, used everywhere ----------
   xs: tags, marks, small chips   s: inputs, small panels   m: images, inner cards
   l: cards and containers        pill: buttons, nav, chips, badges */
:root{--r-xs:8px;--r-s:14px;--r-m:20px;--r-l:28px;--r-pill:999px}
main img:not(.logo-nav):not(.logo-giant),.page-shot img,.manu img,figure img{border-radius:var(--r-m)}
.input,textarea,select{border-radius:var(--r-s)}
.btn,.nav .btn,.tab,.chipbtn,.pill,.badge{border-radius:var(--r-pill)}
.brand img.logo-nav{height:40px;width:auto}
.nav .brand img.logo-nav{height:40px}
@media(max-width:520px){.brand img.logo-nav{height:34px}}
.giant img.logo-giant{width:100%;max-width:1040px;height:auto}
.brand img{height:36px;width:auto}

/* ---------- 3. services ---------- */
.svc{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;gap:14px}
.svc li{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(16px,3vw,40px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,2.6vw,32px) clamp(22px,3vw,40px)}
.svc h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.svc p{margin:0;color:var(--muted);font-size:1rem;max-width:58ch}
.svc-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 18px}
.svc-tag{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font:700 .78rem/1 var(--f-body);letter-spacing:.02em}
.svc-tag.free{background:var(--saffron);color:var(--ink)}
.svc-go{display:inline-flex;align-items:center;gap:8px;font:700 .95rem/1 var(--f-body);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--saffron);padding-bottom:3px}
.svc-go svg,.svc-foot svg{width:16px;height:16px;flex:none}
.svc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:clamp(24px,3vw,36px) 0 0}
.svc-lede{max-width:60ch}
@media(max-width:820px){.svc li{grid-template-columns:1fr}.svc-a{justify-content:flex-start}}

/* ---------- 3b. evidence strip ---------- */
.why-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:clamp(28px,4vw,48px) 0 0;padding:0;list-style:none}
.why-stats li{background:rgba(243,242,238,.06);border:1px solid var(--line-d);border-radius:var(--r-l);padding:clamp(22px,2.6vw,32px)}
.why-stats b{display:block;font:700 clamp(2.4rem,5vw,4rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--on-ink);font-variation-settings:"opsz" 144}
.why-stats p{margin:10px 0 0;color:var(--on-ink-muted);font-size:1rem}
.why-stats a{color:var(--haldi);font-size:.85rem;text-underline-offset:3px}
@media(max-width:820px){.why-stats{grid-template-columns:1fr}}

/* ---------- 4. motion polish ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .25s var(--ease-expo,cubic-bezier(.16,1,.3,1)),box-shadow .25s,background-color .2s,color .2s,border-color .2s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.98)}
  .svc li,.tq,.offer,.guar,.fit-c,.card,.side,.seal{transition:transform .35s var(--ease-expo,cubic-bezier(.16,1,.3,1)),box-shadow .35s,border-color .25s}
  @media (hover:hover){
    .svc li:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(14,26,43,.35);border-color:rgba(14,26,43,.3)}
    .svc-go{transition:border-color .2s,color .2s,letter-spacing .2s}
    .svc li:hover .svc-go{border-bottom-color:var(--ink)}
    .why-stats li{transition:transform .35s var(--ease-expo,cubic-bezier(.16,1,.3,1)),background .25s}
    .why-stats li:hover{transform:translateY(-4px);background:rgba(243,242,238,.1)}
    main img:not(.logo-nav):not(.logo-giant){transition:transform .6s var(--ease-expo,cubic-bezier(.16,1,.3,1))}
  }
  .input{transition:border-color .2s,box-shadow .2s,transform .2s}
  .input:focus{transform:translateY(-1px)}
  details>summary{transition:color .2s}
  /* sections without script-driven entrance still rise in once */
  .why-stats li,.svc li{animation:ui-rise .7s var(--ease-expo,cubic-bezier(.16,1,.3,1)) both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes ui-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports not (animation-timeline:view()){.why-stats li,.svc li{animation:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.btn:hover,.svc li:hover{transform:none}}