/* Fracktal Works homepage — clean, Elementor-free reconstruction. */

:root{
  /* Aligned to the site design system — same token names/values as assets/site.css */
  --canvas:#ffffff;
  --red:#f25e50;                 /* brand red (design system) — was brick #c0322a */
  --coral:#f25e50;               /* one accent: coral collapsed onto --red */
  --ink:#3c3c3c; --head-ink:#1a1a1a; --muted:#5a5a5a;
  --border:#e6e6e6; --hair:#e6e6e6;   /* --hair kept as an alias for existing rules */
  --dark:#111111; --surface-soft:rgba(17,17,17,0.035);
  --grey:#f2f2f2; --pcard:#e9e9e9;
  --green:#2fa84f;               /* consult button — no design-system equivalent, kept */
  --radius:6px;
  --font:'Montserrat',system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --head:var(--font);
  --body:'Work Sans',var(--font);
  --maxw:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
/* height:auto — see the note in site.css. */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3,h4{font-family:var(--head);line-height:1.15;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--red);color:#fff;padding:8px 14px;z-index:100}
.skip-link:focus{left:8px}
/* Read by screen readers and by the document outline, painted for nobody.
   The hero carousel cannot hold the page's h1 — it rotates — so the h1 sits
   here instead. Clipped rather than `display:none`, which would take it out
   of the accessibility tree along with the layout. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.schema{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;font-size:14px;letter-spacing:.02em;padding:13px 24px;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:filter .15s,background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{filter:brightness(.92)}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{filter:brightness(.92)}
/* Takes the band's own text colour — see the note in landing.css. A hard-coded
   #fff here is invisible the moment the button lands on a light band. */
.btn-outline{background:transparent;color:inherit;border-color:currentColor;
  border-color:color-mix(in srgb, currentColor 40%, transparent)}
.btn-outline:hover{border-color:currentColor}
.btn-sm{padding:10px 18px;font-size:13px}

/* ============================ NAV ============================ */
.nav{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-inner{max-width:1320px;margin:0 auto;padding:10px clamp(16px,3vw,34px);display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:34px;height:34px;flex:0 0 auto;background:
  conic-gradient(from 0deg,var(--red),#7a1d17);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:3px}
.brand-name{font-family:var(--head);font-weight:800;font-size:12px;line-height:1.05;letter-spacing:.02em;color:var(--head-ink)}
.nav-menu{display:flex;gap:20px;margin-left:8px;flex:1;flex-wrap:wrap}
.nav-menu a{font-family:var(--head);font-weight:600;font-size:15px;color:var(--head-ink)}
.nav-menu a:hover{color:var(--red)}
.nav-cta{display:flex;align-items:center;gap:12px}
.phone{font-family:var(--head);font-weight:700;font-size:14px;color:var(--head-ink);border:1px solid var(--hair);border-radius:var(--radius);padding:10px 14px}

/* ============================ HERO ============================ */
.hero{position:relative;background:#0e0e0e;height:clamp(420px,56vw,640px);overflow:hidden}
.hero-track{position:absolute;inset:0}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;pointer-events:none;transition:opacity .8s ease;display:flex;align-items:center}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.15))}
.slide.is-active{opacity:1;pointer-events:auto;z-index:1}
.slide-body{position:relative;max-width:var(--maxw);width:100%;margin:0 auto;padding:0 clamp(18px,4vw,40px);color:#fff}
/* A slide caption, styled as the banner's big word. It used to be an <h2>;
   see blk_hhero for why it is not a heading. Beats `.slide-body p` on
   specificity, so the small-tagline rule below still applies to the tagline. */
.slide-body .slide-title{font-size:clamp(40px,7vw,88px);font-weight:900;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.4);margin:0}
.slide-body p{font-family:var(--head);font-weight:600;font-size:clamp(16px,2.2vw,24px);margin:10px 0 26px;color:#f0f0f0}
.hero-dots{position:absolute;left:0;right:0;bottom:22px;display:flex;gap:10px;justify-content:center;z-index:2}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0}
.dot.is-active{background:#fff}

/* ==================== PRODUCT HIGHLIGHTS ==================== */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.products{padding:clamp(40px,6vw,72px) 0;background:#fff}
/* Two up, not four. Four across leaves each card 244px even at the 1440px
   design width — too narrow for the titles (three lines for "MDS-1 Material
   Dryer" against one for its neighbours) and it pins every product photo at
   its floor. Two up roughly doubles the card, so the photos carry the section
   instead of the whitespace. Deliberately NOT .grid-4: the materials rows
   below still want four across, and they carry no photo and no long title. */
.prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,452px));gap:22px;justify-content:center}
.prod-grid .pcard{padding:30px 26px 32px}
.prod-grid .pcard-img{min-height:190px;padding:18px 0 24px}
/* Two of the four photos are portrait, so height is what limits them, not the
   card. Left at 180px they float in the middle of a card twice their width. */
.prod-grid .pcard-img img{max-height:265px;max-width:100%}
.pcard{background:var(--pcard);border-radius:var(--radius);padding:26px 22px 28px;text-align:center;display:flex;flex-direction:column;align-items:center}
.pcard-kicker{font-family:var(--head);font-weight:600;font-size:12.5px;color:#6a6a6a;letter-spacing:.02em}
.pcard h2{font-size:clamp(20px,2vw,27px);font-weight:800;color:var(--head-ink);margin:6px 0 4px}
.pcard-img{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 0 20px;min-height:150px}
.pcard-img img{max-height:180px;width:auto;object-fit:contain}

/* ======================= PRESS STRIP ======================= */
.press{background:#ececec;border-top:1px solid #e0e0e0}
.press-inner{display:flex;align-items:center;gap:22px;padding:14px 0}
.press-tab{font-family:var(--head);font-weight:800;font-size:13px;color:#111;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.1em}
/* `space-between` is right for a row that fits and wrong for one that wraps:
   eight mastheads break 6 + 2 at desktop width, and the two stragglers were
   pushed to opposite ends of an empty line. Centred, a wrap reads as a second
   row rather than as a mistake. */
.press-logos{flex:1;display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,34px);row-gap:clamp(10px,1.6vw,18px);flex-wrap:wrap}
/* Height AND width, for the reason `.logo-mark` in landing.css carries both:
   these mastheads were trimmed of their dead margin, and trimmed, The Economic
   Times is 10.7:1 — at a shared height it runs 363px wide and swallows the
   strip. A wordmark should sit shorter than a roundel; equal height is not
   equal weight. */
.press-logos img{height:34px;max-width:clamp(112px,13vw,168px);width:auto;
  object-fit:contain;opacity:.85}

/* ======================== ONE-STOP ======================== */
.onestop{background:var(--dark);color:#fff;padding:clamp(52px,7vw,88px) 0}
.onestop-title{font-size:clamp(28px,4vw,44px);font-weight:900}
.onestop-lede{color:#c7c7c7;max-width:720px;margin:14px 0 22px;font-size:16px}
.onestop-cards{margin-top:40px}
.ocard{background:#202020;color:#fff;border:1px solid #2c2c2c;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.ocard:hover{transform:translateY(-3px);border-color:var(--red)}
.ocard-img{aspect-ratio:16/10;background-size:cover;background-position:center}
.ocard-body{padding:22px 22px 26px}
.ocard-body h3{font-size:20px;font-weight:700;margin-bottom:8px}
.ocard-body p{color:#b8b8b8;font-size:14px}
.ocard-link{display:inline-block;margin-top:14px;color:var(--coral);font-family:var(--head);font-weight:700;font-size:14px}

/* dark/red band shared heading */
.band-title{font-size:clamp(26px,3.6vw,40px);font-weight:900;color:#fff}
.band-title b{font-weight:900}
.band-title-2{margin-top:56px}
.band-lede{color:rgba(255,255,255,.9);font-family:var(--head);font-weight:600;margin-top:8px}

/* ======================== MATERIALS ======================== */
.materials{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:clamp(52px,7vw,88px) 0}
.materials::before{content:'';position:absolute;inset:0;background:url('img/home/lineart-machine.jpg') center/150% auto no-repeat;opacity:.07;mix-blend-mode:soft-light;pointer-events:none}
.materials>.wrap{position:relative;z-index:1}
.mat-grid{margin-top:28px}
.mcard{background:#fff;border-radius:var(--radius);padding:16px 16px 20px;color:var(--ink);display:flex;flex-direction:column}
.mcard-img{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.mcard-img img{max-height:150px;width:auto;object-fit:contain}
.mcard h3{font-size:19px;font-weight:800;color:var(--head-ink)}
/* A card that names a material and goes nowhere is a dead end on the page
   with the most authority to pass. `.is-link` is the same card as an <a>, so
   it needs the affordance the <article> never had — and it must keep its own
   ink, because a bare <a> inside a white card inherits the band's colour. */
.mcard.is-link,.scard.is-link{color:var(--ink);text-decoration:none;
  transition:transform .15s,box-shadow .15s}
.mcard.is-link:hover,.scard.is-link:hover{transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
.mcard.is-link:focus-visible,.scard.is-link:focus-visible{
  outline:2px solid var(--coral);outline-offset:3px}
.mcard.is-link h3::after{content:" \2192";color:var(--coral);opacity:0;
  transition:opacity .15s}
.mcard.is-link:hover h3::after{opacity:1}
.mtag{color:var(--coral);font-family:var(--head);font-weight:700;font-size:12.5px;margin:2px 0 8px}
.mcard ul,.scard ul{list-style:none}
.mcard li,.scard li{font-size:13px;color:#555;padding:1px 0}
.mcard li::before,.scard li::before{content:"– "}

/* ===================== GET HELP DESIGN ===================== */
.design{background:var(--grey);padding:clamp(44px,6vw,80px) 0}
.design-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.kicker-dark{font-family:var(--head);font-weight:700;font-size:14px;color:#333}
.design-text h2{font-size:clamp(28px,3.6vw,42px);font-weight:900;margin:8px 0 14px;color:var(--head-ink)}
.design-text p{color:#555;max-width:520px;margin-bottom:22px}
.design-photo img{border-radius:var(--radius);width:100%}

/* ======================== SERVICES ======================== */
/* line art formatted like the OEM landing page's stat band: a subtle,
   overlay-blended blueprint scaled to 180%, framed by an edge-fade vignette */
.services{position:relative;overflow:hidden;background:var(--red);color:#fff;padding:clamp(52px,7vw,88px) 0}
.services::before{content:'';position:absolute;inset:0;background:url('img/home/lineart-machine.jpg') center/150% auto no-repeat;opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.services::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--red) 0%,transparent 8%,transparent 92%,var(--red) 100%);pointer-events:none}
.services>.wrap{position:relative;z-index:1}
.band-title-light{color:#fff}
/* auto-fit: cards reflow into as many rows as needed — 3-up (two rows) on
   desktop, 2-up on tablet, 1-up on mobile, each card comfortably wide */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:18px;margin-top:26px}
.scard{background:#fff;border-radius:var(--radius);overflow:hidden;color:var(--ink);display:flex;flex-direction:column}
/* each part shown in full, centered on white with consistent padding, so the
   cards read as a uniform catalogue rather than mismatched crops */
.scard-img{height:186px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:18px 20px 2px;overflow:hidden}
.scard-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;transform:scale(var(--imgscale,1))}
.scard-body{padding:14px 14px 18px}
.scard h3{font-size:17px;font-weight:800;color:var(--head-ink)}
/* consult card — dark voronoi-lattice photo, Lucide icon, flush green CTA */
.scard-cta{position:relative;color:#fff;text-align:left;overflow:hidden;background:#141414 url('img/home/svc-consult-bg.jpg') center/cover}
.scard-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(12,12,12,.9),rgba(12,12,12,.5));z-index:0}
.scard-cta-top{position:relative;z-index:1;padding:20px 20px 16px}
.scard-cta-ico{display:block;color:#fff;margin-bottom:14px}
.scard-cta-ico svg{width:30px;height:30px}
.scard-cta p{font-family:var(--head);font-weight:700;font-size:14px;margin:0;color:#f2f2f2}
.scard-cta .btn{position:relative;z-index:1;width:100%;margin-top:auto;border-radius:0;padding:16px}

/* ========================= IMPACT ========================= */
.impact{background:#fff;padding:clamp(52px,7vw,90px) 0}
.impact-inner{display:grid;grid-template-columns:0.7fr 2.3fr;gap:clamp(24px,4vw,50px);align-items:start}
.impact-title{font-size:clamp(34px,4.4vw,54px);font-weight:900;color:var(--head-ink)}
.impact-cards{gap:0}
.icard{padding:0 18px}
.icard-feature{background:var(--grey);border-radius:var(--radius);padding:8px 18px 22px}
.icard-cat{display:block;font-family:var(--head);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--red);padding:0 0 10px}
.icard-img{aspect-ratio:16/10;border-radius:var(--radius);background-size:cover;background-position:center;margin-bottom:14px}
.icard-logo{height:40px;width:auto;object-fit:contain;margin-bottom:12px}
.icard p{color:#555;font-size:14px}

/* ========================= REVIEWS ========================= */
.reviews{position:relative;overflow:hidden;background:#0c0c0c;padding:clamp(56px,8vw,104px) 0;color:#fff}
/* the lattice sphere, zoomed out and anchored right — the whole part is visible */
.reviews::before{content:"";position:absolute;inset:0;background:url('img/home/svc-consult-bg.jpg') no-repeat right center;background-size:auto 118%;opacity:.9;pointer-events:none}
.reviews .wrap{position:relative;z-index:1}
.review-card{background:#fff;color:var(--ink);border-radius:var(--radius);max-width:1060px;margin:0 auto;padding:clamp(24px,4vw,40px)}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.review-head h2{font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--head-ink)}
.review-ratings{display:flex;align-items:center;gap:26px;margin:12px 0 20px;flex-wrap:wrap;color:#333}
.rate{font-size:15px}.rate b{font-family:var(--head)} .rate em{font-style:normal;color:#666}
.review-all{margin-left:auto;color:var(--red);font-family:var(--head);font-weight:600;font-size:14px;white-space:nowrap}
.review-all:hover{text-decoration:underline}
.review-stars{color:#f5a623;letter-spacing:2px}
/* multi-card sliding carousel */
.rev-carousel{position:relative}
.rev-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.rev-viewport::-webkit-scrollbar{display:none}
.rev-track{display:flex;gap:16px;padding:2px}
.rcard{flex:0 0 calc(25% - 12px);scroll-snap-align:start;background:#fff;border:1px solid #ececec;border-radius:var(--radius);padding:16px 16px 18px;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.rcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.rcard-name{font-family:var(--head);font-weight:700;font-size:16px;color:var(--head-ink);line-height:1.25}
.rcard-src{flex:0 0 auto}
.rcard-src svg{width:18px;height:18px;display:block}
.rcard p{font-size:14px;color:#555;line-height:1.5;margin-top:8px}
/* SVG chevron, not a text glyph — see `_CHEV_R` in chrome.py. */
.rev-arrow{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid #d8dade;background:#fff;color:var(--head-ink);cursor:pointer;display:grid;place-items:center;padding:0;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:color .15s,background .15s,border-color .15s}
.rev-arrow .ui-chev{width:19px;height:19px;display:block}
.rev-prev{left:-17px}.rev-next{right:-17px}
.rev-arrow:hover{color:#fff;background:var(--red);border-color:var(--red)}
.review-dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.rdot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:#d2d2d2;cursor:pointer;transition:background .15s}
.rdot.is-active{background:var(--red)}
@media(max-width:1000px){.rcard{flex-basis:calc(50% - 8px)}}
@media(max-width:640px){.rcard{flex-basis:calc(100% - 4px)}.rev-arrow{display:none}}

/* ====================== MADE IN INDIA ====================== */
.mii{background:#fff;padding:clamp(44px,6vw,80px) 0;text-align:center}
.mii-band{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap}
.mii-word{font-family:var(--head);font-weight:900;font-size:clamp(22px,3vw,36px);color:var(--head-ink)}
.mii-lion{height:clamp(80px,10vw,120px);width:auto}
.mii-support{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,50px);flex-wrap:wrap;margin-top:34px}
.mii-support-label{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--head);font-weight:700;font-size:11px;letter-spacing:.12em;color:#999}
.mii-support img{height:52px;width:auto;object-fit:contain}

/* ========================= FOOTER ========================= */
.foot{background:var(--red);color:#fff;padding-top:clamp(40px,5vw,64px)}
.foot-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;padding-bottom:40px}
.foot-col h4{font-family:var(--head);font-weight:800;font-size:16px;margin-bottom:14px}
.foot-col a{display:block;color:rgba(255,255,255,.9);font-size:14px;padding:4px 0}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-base{border-top:1px solid rgba(255,255,255,.2);padding:16px 0;font-size:13px;color:rgba(255,255,255,.8)}

/* ========================= RESPONSIVE ========================= */
@media(max-width:1000px){
  .nav-menu{display:none}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .impact-inner{grid-template-columns:1fr}
  .impact-cards{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:860px){
  .onestop-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .grid-3,.impact-cards,.onestop-cards{grid-template-columns:1fr}
  .design-inner{grid-template-columns:1fr}
  .design-photo{order:-1}
  .press-tab{display:none}
  .press-logos{justify-content:center;gap:clamp(18px,6vw,34px)}
}
@media(max-width:640px){
  .prod-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr}
}

/* ---------------------------------------------- the phone floor
 * See the note in site.css. The two carousel controls here were the smallest
 * things on the whole site: the hero dots 12x12 and the review dots 9x9. A dot
 * is meant to LOOK small, so the dot keeps its size and the button around it
 * grows — the hit area is the control, not the ink. */
@media (max-width: 640px) {
  .dot, .rdot {
    width: 44px; height: 44px; border: 0; background: none; padding: 0;
    display: inline-grid; place-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  .dot::before, .rdot::before {
    content: ""; display: block; border-radius: 50%;
  }
  .dot::before { width: 12px; height: 12px; border: 2px solid #fff; }
  .dot.is-active::before { background: #fff; }
  .rdot::before { width: 9px; height: 9px; background: #d2d2d2; }
  .rdot.is-active::before { background: var(--red); }
  .hero-dots, .rev-dots { gap: 0; }

  .review-all { min-height: 44px; display: inline-flex; align-items: center; }
  .skip-link { min-height: 44px; display: flex; align-items: center; }
  .btn { min-height: 44px; box-sizing: border-box; }
  .mii-support-label { font-size: 12px; }
}
/* A dot in a flex row with no basis collapses to its content width; these came
   out 31px wide inside a 44px-tall button. The hit area must be square. */
@media (max-width: 640px) {
  .dot, .rdot { min-width: 44px; flex: 0 0 44px; }
}