/* ============================================================================
   Gau Tatwa — responsive refinements layered over the ported design.
   Kept in its own file so a future re-export from Claude Design overwrites the
   template without taking these with it.

   The design is inline-styled throughout, so these hook onto the inline values
   with attribute selectors. That is deliberate: it means no markup surgery, and
   nothing here fights a class the designer might rename.
   ============================================================================ */

/* ---------- 1. Capability counters ---------------------------------------
   auto-fit collapsed to a single column under ~760px, giving four tall stacked
   rows that ate most of a phone screen. Two-up keeps all four figures visible
   at once without shrinking the numbers to nothing. */
@media (max-width: 700px) {
  [style*="minmax(190px,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="minmax(190px,1fr)"] > div { padding: 24px 16px !important; border-right: 0 !important; }
  [style*="minmax(190px,1fr)"] > div:nth-child(odd) { border-right: 1px solid #ece6d6 !important; }
  [style*="minmax(190px,1fr)"] > div:nth-child(-n+2) { border-bottom: 1px solid #ece6d6; }
  [style*="minmax(190px,1fr)"] [data-count] { font-size: 32px !important; }
  [style*="minmax(190px,1fr)"] [data-count] + span { font-size: 19px !important; }
}

/* ---------- 2. Background line pattern -----------------------------------
   Drawn at 3200px and positioned by percentage. On a 390px screen almost all of
   it sits outside the viewport, so what shows is an arbitrary crop. Scale it to
   the screen and centre it so the lines read as a texture again. */
@media (max-width: 900px) {
  section[style*="pattern-lines"] { background-size: 1600px auto !important; background-position: center 42% !important; }
}
@media (max-width: 560px) {
  section[style*="pattern-lines"] { background-size: 1150px auto !important; background-position: center 48% !important; }
}

/* ---------- 4. Products: smaller, and a swipeable auto-slider ------------- */
@media (min-width: 901px) {
  #products [style*="minmax(300px,1fr)"] > div img,
  #products [style*="minmax(300px,1fr)"] > div [style*="height:230px"] { height: 190px !important; }
}
@media (max-width: 900px) {
  #products [style*="minmax(300px,1fr)"] {
    display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none;
  }
  #products [style*="minmax(300px,1fr)"]::-webkit-scrollbar { display: none; }
  #products [style*="minmax(300px,1fr)"] > * { flex: 0 0 84%; scroll-snap-align: center; }
}
.gt-dots { display: none; gap: 8px; justify-content: center; margin-top: 18px; }
@media (max-width: 900px) { .gt-dots { display: flex; } }
.gt-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: #c6dab6; cursor: pointer; transition: width .25s ease, background .25s ease;
}
.gt-dots button[aria-current="true"] { width: 22px; border-radius: 999px; background: #0d5a2c; }

/* ---------- 8. Contact / sample CTA on small screens --------------------- */
@media (max-width: 900px) {
  #contact [style*="1.15fr 1fr"] { grid-template-columns: 1fr !important; gap: 34px !important; }
  #contact [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  #contact form button,
  #contact a[href^="#"], #contact button[onclick*="Enquiry"] { width: 100%; justify-content: center; }
  #contact input, #contact select, #contact textarea { font-size: 16px !important; } /* stops iOS zooming on focus */
}

/* ---------- 9 + 10. Brochure button -------------------------------------
   It sat over the footer at full width. Past halfway it collapses to a disc,
   which frees the corner and reads as a persistent affordance rather than a
   banner. The nudge is one short pulse per cycle, not a constant animation. */
[data-gt-brochure] { transition: padding .3s ease, width .3s ease, height .3s ease, border-radius .3s ease; }
[data-gt-brochure].gt-compact {
  padding: 0 !important; width: 58px; height: 58px; gap: 0 !important; justify-content: center;
}
[data-gt-brochure].gt-compact .gt-brochure-label { display: none; }
[data-gt-brochure].gt-compact svg { width: 21px; height: 21px; }

@keyframes gt-nudge {
  0%, 86%, 100% { transform: scale(1); box-shadow: 0 14px 34px rgba(0, 0, 0, .28); }
  91%           { transform: scale(1.06); box-shadow: 0 18px 40px rgba(140, 198, 63, .55); }
  95%           { transform: scale(.995); }
}
[data-gt-brochure] { animation: gt-nudge 4.5s ease-in-out infinite; }
[data-gt-brochure]:hover, [data-gt-brochure]:focus-visible { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { [data-gt-brochure] { animation: none; } }

@media (max-width: 560px) {
  [data-gt-brochure] { right: 16px !important; bottom: 16px !important; }
}

/* ---------- Capability figures: no card, sit on the page ground -----------
   Was a white rounded panel with a heavy shadow overlapping the hero. Abhi
   wants it flat on the base colour with even breathing room top and bottom. */
section:has(> div > [style*="minmax(190px,1fr)"]) { padding: 64px 0 !important; }
[style*="minmax(190px,1fr)"] {
  background: transparent !important; box-shadow: none !important;
  border-radius: 0 !important; overflow: visible !important;
  column-gap: 26px !important; row-gap: 34px !important;
}
[style*="minmax(190px,1fr)"] > div {
  border-right: 0 !important; border-bottom: 0 !important; padding: 0 !important;
}
@media (max-width: 700px) {
  section:has(> div > [style*="minmax(190px,1fr)"]) { padding: 48px 0 !important; }
  [style*="minmax(190px,1fr)"] > div:nth-child(odd),
  [style*="minmax(190px,1fr)"] > div:nth-child(-n+2) { border: 0 !important; }
  [style*="minmax(190px,1fr)"] { row-gap: 30px !important; }
}
/* label above the figure, as in the reference */
[style*="minmax(190px,1fr)"] > div { display: flex; flex-direction: column-reverse; gap: 6px; }
[style*="minmax(190px,1fr)"] > div > div:last-child { margin-top: 0 !important; }

/* ---------- Applications: smaller, and readable without hover ------------- */
@media (max-width: 900px) {
  [data-app-row] { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)) !important; gap: 8px !important; }
  [data-app-pill] { padding: 11px 11px 10px !important; border-radius: 13px !important; font-size: 11.5px !important; gap: 7px !important; }
  [data-app-badge] { width: 26px !important; height: 26px !important; }
  [data-app-badge] svg, [data-app-badge] img { width: 14px !important; height: 14px !important; }
  [data-app-card] > span:nth-child(3) { font-size: 10.6px !important; line-height: 1.5 !important; }
}
/* Desktop: the hover card sat behind later pills because only the hovered item
   was lifted. Raise the whole row's stacking context so it always reads. */
/* The row isolates so a raised tile cannot escape its section. Only the hovered tile lifts —
   a blanket z-index on every card put closed ones above their neighbours. */
[data-app-row] { isolation: isolate; }
[data-app]:hover, [data-app]:focus-within { z-index: 60 !important; }

/* ---------- Products: trimmed card + read-more on small screens ---------- */
/* Sized to its content, not stretched across the card. Sage micro-caps so it sits below the
   description without competing with the pack line beneath it or the solid Enquire button. */
.gt-more {
  display: none; width: auto; align-self: flex-start;
  align-items: center; gap: 9px; margin: 9px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: 'Jost', 'Poppins', sans-serif; font-size: 10px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: #7d8a76; line-height: 1;
  transition: color .2s ease;
}
.gt-more-ico {
  width: 21px; height: 21px; border-radius: 50%; background: #ebf4e2; color: #0d5a2c;
  display: grid; place-items: center; flex: none;
  transition: background .2s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.gt-more:hover, .gt-more:focus-visible { color: #0d5a2c; }
.gt-more:hover .gt-more-ico { background: #c6dab6; }
/* Attribute-selector version lost to the base rule despite matching and being last — the
   open state is driven by a class instead, which is unambiguous. */
.gt-more.gt-is-open .gt-more-ico { transform: rotate(180deg) !important; background: #8cc63f !important; }
.gt-more.gt-is-open { color: #0d5a2c; }
@media (max-width: 900px) {
  .gt-more { display: inline-flex; }
  .gt-clamp {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; transition: none;
  }
  .gt-clamp.gt-open { -webkit-line-clamp: unset; overflow: visible; }
  #products [style*="minmax(300px,1fr)"] > * { flex-basis: 78%; }
}

/* ---------- Footer: left aligned, credit last on mobile ------------------ */
footer [style*="grid-template-columns:1.4fr 1fr 1fr"] > span,
footer [style*="grid-template-columns:1.4fr 1fr 1fr"] { text-align: left !important; }
@media (max-width: 700px) {
  footer [style*="grid-template-columns:1.4fr 1fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 10px !important; text-align: left !important;
  }
  /* the Websolvers credit goes last on a phone */
  footer [style*="grid-template-columns:1.4fr 1fr 1fr"] > span:nth-child(2) { order: 3; }
  footer [style*="grid-template-columns:1.4fr 1fr 1fr"] > span { text-align: left !important; }
  }

/* ---------- Blends: heading larger, details as points ------------------- */
@media (max-width: 900px) {
  [style*="grid-template-columns:1fr 1.9fr"] { grid-template-columns: 1fr !important; gap: 22px !important; }
}

/* ---------- Footer credit bar -------------------------------------------
   The class is applied by gt.js, not the template — a template class does not
   survive a design import.

   DESKTOP: left alone. The design spreads these across 1fr auto 1fr and it
   reads correctly; overriding it once already cost a round.

   MOBILE: three columns cannot fit at 375px, so they stack — left aligned and
   flush with the footer's left content edge, Websolvers credit last. */
@media (max-width: 900px) {
  .gt-credit {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    gap: 8px !important;
  }
  .gt-credit > * {
    text-align: left !important;
    width: 100% !important;
    padding-right: 0 !important;
  }
  .gt-credit > *:nth-child(2) { order: 3; }   /* Websolvers credit last on phones */
}

/* ---------- Contact: card padding on small screens -----------------------
   The panel carries 60px of side padding from the desktop design. On a 375px
   screen that is 120px of the width, which pushed the cards off centre and
   made the inner grid column (242px) overflow its 191px box. */
@media (max-width: 900px) {
  #contact [style*="padding:64px 60px"] { padding: 44px 26px 48px !important; }
}
@media (max-width: 560px) {
  #contact [style*="padding:64px 60px"] { padding: 38px 18px 42px !important; }
}

/* ---------- Fortified and custom blends ---------------------------------
   REGRESSION FIX: this grid carries the same inline minmax(190px,1fr) as the
   capability figures, so the flat-figures rules above captured it too — its
   items flipped to column-reverse (description above title) and squeezed to
   two ~98px columns. Scoped back here, and rebuilt as the point list asked
   for: heading large, details stacked underneath with a marker each. */
#products [style*="minmax(190px,1fr)"] {
  display: grid !important; grid-template-columns: 1fr !important;
  column-gap: 0 !important; row-gap: 15px !important; margin-top: 22px !important;
}
#products [style*="minmax(190px,1fr)"] > div {
  display: block !important; padding: 0 0 0 20px !important; position: relative;
}
#products [style*="minmax(190px,1fr)"] > div::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: #8cc63f;
}
#products [style*="minmax(190px,1fr)"] > div > div:first-child { margin-bottom: 3px !important; }
#products [style*="minmax(190px,1fr)"] > div > div:last-child { margin-top: 0 !important; }

@media (min-width: 901px) {
  /* two columns of points on a wide screen, still stacked title-over-detail */
  #products [style*="minmax(190px,1fr)"] { grid-template-columns: 1fr 1fr !important; column-gap: 30px !important; }
}

/* Logo sizing now lives in gt.js — see onScroll(). Keeping it there means it survives a
   design re-import AND keeps the shrink-on-scroll, which an !important rule would freeze. */


/* ---------- Background motif: quieter ------------------------------------
   The cow-calf watermark sits behind five sections at .09-.13. Knocked back to roughly 40% of
   the design values (two passes), matched per value so the deliberate variation between
   sections survives rather than being flattened to one number.

   ORDER IS LOAD-BEARING. [style*="opacity:.1"] is a SUBSTRING match, so it
   also captures .11, .12 and .13 — listing it first lets the longer, more
   exact values override it. Reversed, every layer collapses to one opacity,
   which is precisely what happened on the first attempt.

   Matching on the design's inline opacity means these no-op safely if the
   design changes those values. */
img[src*="cow-calf"][style*="opacity:.1"]  { opacity: .042 !important; }
img[src*="cow-calf"][style*="opacity:.11"] { opacity: .047 !important; }
img[src*="cow-calf"][style*="opacity:.12"] { opacity: .052 !important; }
img[src*="cow-calf"][style*="opacity:.13"] { opacity: .055 !important; }
img[src*="cow-calf"][style*="opacity:.09"] { opacity: .038 !important; }

/* ---------- Contact: centre the pill row on small screens ----------------
   The cards fill the panel (18px each side, symmetric). The pills are sized to
   their content and sat left, leaving 33px of slack beside the email and 68px
   beside the phone — that lopsidedness is what reads as "not centred", not the
   panel itself, which measures 32/32. */
@media (max-width: 900px) {
  #contact a[href^="mailto:"], #contact a[href^="tel:"] { align-self: center !important; }
  #contact a[href^="mailto:"] { margin-inline: auto !important; }
  #contact a[href^="tel:"]    { margin-inline: auto !important; }
}

/* ---------- Footer: keep clear of the floating brochure button -----------
   The button is position:fixed bottom-right, so at the end of the page it sits
   ON TOP of the credit lines — which is why the right-aligned text looked
   truncated and off-centre. Reserve the space instead of moving the button,
   which would cost it its position everywhere else. */
@media (max-width: 900px) {
  footer { padding-bottom: 96px !important; }
}
@media (min-width: 901px) {
  footer { padding-bottom: 110px !important; }
}
/* No inset. 26 other footer blocks sit at a 32px right gap; an arbitrary 4px of padding here
   held these three lines 4px short of that edge, which is what stopped them reading as right
   aligned even though text-align was already right. */
.gt-credit > * { padding-right: 0 !important; }
.gt-credit { justify-items: stretch; }

/* ---------- Footer social icons -----------------------------------------
   The design styles these itself (40px, 50% radius, hairline border) and needs
   no help. Two things only: stop them shrinking in a tight flex row, which
   squashed the circles into ovals on narrow screens, and keep the tap target
   honest. Everything else is left to the design.

   An earlier rule here — footer [style*="align-items:center"] — was written
   for the credit bar and was silently overriding this row's alignment too. */
footer a[href*="linkedin"], footer a[href*="instagram"], footer a[href*="facebook"] {
  flex: none !important;
  aspect-ratio: 1 / 1;
}

/* ---------- Enquiry dialog: the injected email field ---------------------
   Cloned from the phone block, which lives in a two-column row — so on its own
   it filled one column and left the other empty. Span it across instead. */
[data-gt-email-block] { grid-column: 1 / -1 !important; }

/* ---------- Anchor targets clear the sticky header -----------------------
   The header is fixed and about 104px tall on a phone, so a jump to #about
   used to land with the heading hidden underneath it. */
#top, #about, #advantage, #products, #process, #quality, #applications, #contact {
  scroll-margin-top: 92px;
}
@media (max-width: 700px) { 
  #top, #about, #advantage, #products, #process, #quality, #applications, #contact {
    scroll-margin-top: 78px;
  }
}

/* ---------- Mail fallback toast -----------------------------------------
   Only appears when a mailto click did NOT hand off to a mail app, which is
   the common case on desktops with no client configured. */
.gt-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px);
  background: #0d5a2c; color: #dcead2; border-radius: 999px;
  padding: 11px 12px 11px 20px; box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
  font-family: 'Poppins', system-ui, sans-serif; font-size: 12.5px; line-height: 1.4;
  animation: gt-rise-sm .35s cubic-bezier(.16, 1, .3, 1) both;
}
.gt-toast-msg b { color: #fff; font-weight: 600; }
.gt-toast-btn {
  flex: none; background: #8cc63f; color: #0b3f1f; text-decoration: none;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}
.gt-toast-x {
  flex: none; background: none; border: 0; color: #8fa87e; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 0 6px 0 0;
}
@media (max-width: 560px) {
  .gt-toast { flex-wrap: wrap; border-radius: 18px; padding: 14px 16px; justify-content: center; text-align: center; }
}

/* ---------- Trademark on the wordmark ------------------------------------
   Sized in em so it tracks the wordmark at every breakpoint, and given no
   letter-spacing of its own — the wordmark carries .02em, which on a two-glyph
   superscript would push the mark visibly away from the W. */
.gt-tm {
  font-size: .46em;   /* was .34em — too faint against the MorePro wordmark */
  letter-spacing: 0 !important;
  vertical-align: super;
  line-height: 0;
  margin-left: .14em;
  font-family: 'Jost', 'Poppins', system-ui, sans-serif;
  font-weight: 500;
  opacity: .85;
}