/* ============================================================
   Isomalt India, phone layout (loaded only at <= 640px)
   Desktop and tablet styles are untouched; this file only
   re-flows and compacts the page for narrow touch screens.
   ============================================================ */

/* ---------- Global rhythm ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
section { padding-top: 56px !important; padding-bottom: 56px !important; padding-left: 18px !important; padding-right: 18px !important; }
section h2 { font-size: clamp(34px, 9.6vw, 44px) !important; line-height: 1 !important; letter-spacing: -0.02em !important; }
section > p:first-child, section p[style*="color:#C75B3A"][style*="font-size:14px"] { margin-bottom: 14px !important; font-size: 12px !important; }
img, video, canvas { max-width: 100%; }
a, button { -webkit-tap-highlight-color: rgba(199,91,58,0.15); }
.cin-btn:hover, .cin-why-card:hover, .cin-blog-card:hover, .cin-perf-card:hover { transform: none !important; }

/* ---------- Hero ---------- */
#cin-hero { min-height: 100svh !important; }
#cin-hero > div[style*="z-index:10"] { min-height: 100svh !important; }
#cin-hero > div[style*="z-index:10"] > div { padding: 88px 18px 40px !important; justify-content: center !important; }
#cin-hero h1 { font-size: clamp(28px, 8.6vw, 40px) !important; max-width: none !important; letter-spacing: -0.015em !important; }
#cin-hero h1 + p { font-size: 15px !important; line-height: 1.5 !important; margin-top: 16px !important; }
#cin-hero-bg img { animation: none !important; object-position: 50% 45% !important; }
#cin-hero-cta { width: 100%; gap: 10px !important; margin-top: 22px !important; }
#cin-hero-cta a { width: 100%; justify-content: center; padding: 14px 20px !important; font-size: 15px !important; }
#cin-hero-grains { display: none !important; }

/* ---------- Industry explorer: horizontal chip tabs ---------- */
#cin-indx-grid { gap: 18px !important; margin-top: 22px !important; }
#cin-indx-grid > div:first-child { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 18px 10px; margin: 0 -18px; scroll-snap-type: x proximity; }
#cin-indx-grid > div:first-child::-webkit-scrollbar { display: none; }
#cin-indx [data-indtab] { width: auto !important; flex: none; align-items: center !important; gap: 8px !important; border: 1px solid rgba(46,42,39,0.18) !important; border-radius: 9999px !important; padding: 9px 14px !important; font-size: 17px !important; background: rgba(255,253,249,0.7) !important; white-space: nowrap; scroll-snap-align: start; }
#cin-indx [data-indtab].on { background: #C75B3A !important; color: #F8F1E8 !important; border-color: #C75B3A !important; }
#cin-indx [data-indtab] > span:first-child { font-size: 10px !important; }
#cin-indx [data-indtab]:hover { padding-left: 14px !important; }
.cin-indx-media { aspect-ratio: 4/3 !important; max-height: none !important; border-radius: 18px !important; }
[data-indpane] .lgs { margin: -24px 10px 0 !important; padding: 18px 16px 18px !important; border-radius: 16px !important; }
[data-indpane] .lgs p { font-size: 14px !important; line-height: 1.55 !important; }

/* ---------- Performance (No Amber / Stick / Spike) ---------- */
#cin-caps { min-height: auto !important; }
#cin-caps > div:last-child { padding: 0 18px 32px !important; }
#cin-caps-bg { display: none !important; }
#cin-flute { display: none !important; }
#cin-cards { gap: 14px !important; margin-top: 28px !important; }
.cin-perf-card { padding: 18px !important; }
.cin-perf-card > div:first-child > span:last-child { max-width: 100% !important; justify-content: flex-start !important; }
.cin-perf-card h3 { font-size: 28px !important; }
.cin-perf-card p { font-size: 14px !important; }
#cin-hth { margin-top: 28px !important; }

/* ---------- Understanding isomalt ---------- */
#cin-mat-stage { min-height: 220px !important; margin-bottom: 4px; }
#cin-mat-stage img { width: 180px !important; }

/* ---------- Why isomalt: compact icon + text rows ---------- */
#cin-why-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 26px !important; }
.cin-why-card { min-height: 0 !important; padding: 14px !important; display: grid !important; grid-template-rows: auto auto; justify-content: start !important; gap: 10px; border-radius: 14px !important; }
.cin-why-card > span { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
.cin-why-card > span svg { width: 18px; height: 18px; }
.cin-why-card p:first-child { font-size: 18px !important; }
.cin-why-card p:last-child { font-size: 12.5px !important; margin-top: 4px !important; }

/* ---------- How we work ---------- */
#cin-proc { gap: 0 !important; margin-top: 8px !important; }
.cin-proc-step { padding-top: 16px !important; padding-bottom: 6px; }
.cin-proc-step p { font-size: 14px !important; }

/* ---------- Grades ---------- */
#cin-cut-grid { gap: 12px !important; margin-top: 24px !important; }
#cin-cut-grid > div { padding: 20px !important; }

/* ---------- Partner / About ---------- */
#cin-partner h2 { white-space: normal !important; }
#cin-partner > div { gap: 28px !important; }
#cin-partner img[alt="JJD Group"] { width: min(52vw, 200px) !important; }
#cin-partner img[alt="NewTrend Group"] { width: min(56vw, 220px) !important; }
#cin-partner [aria-hidden="true"][style*="font-size:clamp(40px"] { font-size: 30px !important; }
#cin-stats { gap: 18px 28px !important; }
[data-fstat] p:first-child { font-size: 30px !important; }

/* ---------- FAQ ---------- */
#cin-faq details summary { font-size: 15px !important; padding: 12px 0 !important; }

/* ---------- Contact ---------- */
#cin-enq-grid { gap: 22px !important; }
#cin-enq .lgs { padding: 20px 16px !important; border-radius: 18px !important; }
#cin-offices { grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 20px !important; }
#cin-enq input, #cin-enq select, #cin-enq textarea { font-size: 16px !important; } /* prevents iOS zoom on focus */
#cin-enq button[type="submit"] { padding: 15px 18px !important; }

/* ---------- Insights ---------- */
#cin-blog-grid { gap: 14px !important; margin-top: 22px !important; }
.cin-blog-card > div:first-child { aspect-ratio: 16/9 !important; }
.cin-blog-card h3 { font-size: 22px !important; }

/* ---------- Closing band ---------- */
#cin-close { min-height: auto !important; padding-top: 48px !important; }
#cin-close > div[style*="z-index:10"] { justify-content: flex-start !important; gap: 20px 28px !important; padding: 8px 18px 28px !important; }
#cin-close > div[style*="z-index:10"] > div { text-align: left !important; }
#cin-close h2 span span { font-size: clamp(36px, 11vw, 56px) !important; }
#cin-torch { display: none !important; }

/* ---------- Footer ---------- */
footer { padding: 32px 18px 28px !important; }
#cin-foot-grid { grid-template-columns: 1fr 1fr !important; row-gap: 26px !important; column-gap: 18px !important; }
#cin-foot-grid > div:first-child { grid-column: 1 / -1; }
.cin-foot-link { padding: 6px 0 !important; font-size: 13.5px !important; }
#cin-wm { height: 72px !important; }

/* ---------- Motion budget: fewer decorative animations on phones ---------- */
#cin-hero-blob1, #cin-hero-blob2, #cin-hero-blob3 { animation: none !important; }

/* ---------- Technical specification ---------- */
#cin-tds { padding: 18px 16px !important; }
#cin-tds-grid { grid-template-columns: 1fr !important; }
#cin-tds-grid dd { font-size: 13.5px !important; max-width: 58%; }
#cin-cut-grid { grid-template-columns: 1fr !important; }