/* ==========================================================================
   Realloy India — responsive layer
   Desktop (>=1240px) renders identically to the original design.
   Everything below adapts the same markup down to 320px.
   ========================================================================== */

:root{
  --green:#7cb928;
  --green-dk:#5a8f1e;
  --green-dkr:#456f13;
  --ink:#14171a;
  --muted:#5a616a;
  --pad:clamp(16px, 4vw, 24px);
  --nav-h:62px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

html,body{
  margin:0; padding:0;
  background:#fff;
  overflow-x:hidden;          /* nothing may cause a sideways scroll */
}

body{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--green-dk); text-decoration:none; }
a:hover{ color:var(--green); }

img,svg,video{ max-width:100%; }

/* Visible keyboard focus everywhere */
a:focus-visible,button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--green-dk);
  outline-offset:3px;
  border-radius:6px;
}

/* Long words / codes must never push the layout wide */
h1,h2,h3,p,li,span,div{ overflow-wrap:break-word; }


/* ==========================================================================
   1. Header
   ========================================================================== */

.nv{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid rgba(0,0,0,.08);
}

.nv-bar{
  max-width:1240px; margin:0 auto;
  min-height:var(--nav-h);
  display:flex; align-items:center; gap:clamp(8px,1.2vw,28px);
  padding:0 20px;
}

.nv-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nv-brand img{ height:30px; width:auto; display:block; }
@media (max-width:560px){ .nv-brand img{ height:24px; } }
@media (max-width:380px){ .nv-brand img{ height:22px; } }
.nv-region{
  font-size:11px; letter-spacing:2.4px; text-transform:uppercase;
  color:#8b9199; padding-left:6px; border-left:1px solid #d9dde1;
  padding-top:2px; white-space:nowrap;
}

.nv-links{ flex:0 1 auto; min-width:0; }
.nv-links-inner{
  display:flex; align-items:center; gap:clamp(2px,.45vw,8px);
  font-size:12.5px; color:#3d444b; letter-spacing:.1px; white-space:nowrap;
}
.nv-link{
  color:#3d444c;
  padding:7px clamp(8px, .85vw, 13px);
  border-radius:999px;
  transition:background .16s ease, color .16s ease;
}

/* hovering shows a soft tint of the hero green, so the target is obvious */
.nv-link:hover{ color:var(--green-dkr); background:#eaf5d8; }

/* the page you are on is filled with the hero banner green */
.nv-link.active{
  color:#ffffff; font-weight:700;
  background:linear-gradient(150deg,#8ecb46 0%,#7cb928 55%,#5a8f1e 100%);
}
.nv-link.active:hover{ color:#ffffff; }

.nv-cta{ display:flex; align-items:center; gap:14px; flex:0 0 auto; margin-left:auto; }
.nv-login{ font-size:12.5px; color:#5f6771; white-space:nowrap; }
.nv-enquire{
  font-size:12.5px; font-weight:500; color:#fff; background:var(--green);
  padding:8px 16px; border-radius:999px; white-space:nowrap;
}
.nv-enquire:hover{ color:#fff; background:var(--green-dk); }

.nv-cta-mobile{ display:none; }

/* hamburger */
.nv-toggle{
  display:none;
  margin-left:auto;
  width:44px; height:44px; padding:10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px;
}
.nv-toggle span{
  display:block; height:2px; width:100%; background:var(--ink);
  border-radius:2px; transition:transform .25s ease, opacity .2s ease;
}
.nv-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nv-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nv-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nv-scrim{
  position:fixed; inset:var(--nav-h) 0 0; z-index:55;
  background:rgba(12,18,6,.42);
  opacity:0; transition:opacity .25s ease;
}
.nv-scrim.show{ opacity:1; }

/* --- header below 1080px: drawer --------------------------------------- */
@media (max-width:1080px){
  .nv-toggle{ display:flex; }
  .nv-cta{ display:none; }
  .nv-cta-mobile{ display:flex; align-items:center; gap:14px; padding-top:8px; }

  .nv-links{
    position:fixed; left:0; right:0; top:var(--nav-h);
    max-height:calc(100dvh - var(--nav-h));
    overflow-y:auto;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.1);
    box-shadow:0 20px 40px rgba(20,40,5,.14);
    z-index:58;
    transform:translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nv-links.open{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  }
  .nv-links-inner{
    flex-direction:column; align-items:stretch;
    white-space:normal; gap:0;
    padding:8px clamp(16px,4vw,24px) 22px;
    font-size:16px;
  }
  .nv-link{
    padding:15px 2px;
    border-bottom:1px solid rgba(0,0,0,.07);
    font-size:16px;
  }
  /* the drawer item is filled with the same green, so the label must be white */
  .nv-link.active{
    color:#ffffff;
    background:linear-gradient(150deg,#8ecb46 0%,#7cb928 55%,#5a8f1e 100%);
    border-radius:10px;
  }
  .nv-link.active:hover{ color:#ffffff; }
  .nv-cta-mobile{ padding-top:18px; }
  .nv-cta-mobile .nv-login{ font-size:15px; padding:10px 0; }
  .nv-cta-mobile .nv-enquire{ font-size:14px; padding:11px 20px; }
}

@media (max-width:380px){
  .nv-region{ display:none; }
}


/* ==========================================================================
   2. Grid collapse
   Inline grid-template-columns needs !important to be overridden.
   ========================================================================== */

@media (max-width:1024px){
  .rg4{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* A child spanning 2 columns would force the browser to invent an implicit
   second column once the grid collapses. 1/-1 spans whatever exists. */
@media (max-width:1024px){
  .rg4 > [style*="grid-column:span"]{ grid-column:1 / -1 !important; }
}
@media (max-width:980px){
  .rg3 > [style*="grid-column:span"]{ grid-column:1 / -1 !important; }
}
@media (max-width:860px){
  .rg2 > [style*="grid-column:span"]{ grid-column:1 / -1 !important; }
}
@media (max-width:640px){
  [style*="grid-column:span"]{ grid-column:1 / -1 !important; }
}
@media (max-width:980px){
  .rg3{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width:860px){
  .rg2{ grid-template-columns:minmax(0,1fr) !important; }
}
@media (max-width:640px){
  .rg2,.rg3,.rg4{ grid-template-columns:minmax(0,1fr) !important; }
}

/* Flex rows that were designed to sit side by side */
@media (max-width:860px){
  [style*="display:flex"]:not(.nv-bar):not(.nv-links-inner):not(.nv-cta):not(.nv-brand){ flex-wrap:wrap; }
  /* a percentage flex-basis pins a column narrow even after the row wraps */
  [style*="flex:0 0"][style*="%"]{ flex:1 1 100% !important; }
}


/* ==========================================================================
   3. Home hero
   ========================================================================== */

.hero{ height:720px; }
.hero-slide{
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.hero-slide.active{
  opacity:1; visibility:visible;
  transition:opacity .7s ease, visibility 0s linear 0s;
}
.hero-dot,.hero-nav{ cursor:pointer; }
.hero-nav{ z-index:4; }

/* The slide photos are studio shots on white. Cutting a white product off a
   white background never looks clean, so they sit on a white card instead -
   the photo stays untouched and the card reads as deliberate. */
.hero-art{
  z-index:2;
  background:#fff;
  border-radius:26px;
  padding:20px;
  box-shadow:0 26px 60px rgba(18,42,4,.30), 0 2px 6px rgba(18,42,4,.14);
}

@media (max-width:1180px){
  .hero-art{ width:470px !important; height:390px !important; right:24px !important; }
}
@media (max-width:1080px){
  .hero{ height:auto !important; min-height:620px; }
  .hero-art{ width:390px !important; height:325px !important; right:-30px !important; }
}
@media (max-width:900px){
  .hero-art{ width:320px !important; height:270px !important; right:-70px !important; opacity:.96; }
}

/* Below this the card would crowd the headline, so the hero goes text-only
   rather than showing a cramped, half-hidden photo. Copy stays centred, which
   is the layout the slides were built around. */
@media (max-width:760px){
  .hero{ height:auto !important; min-height:540px; }
  .hero-art{ display:none !important; }
}
@media (max-width:420px){
  .hero{ min-height:500px; }
}

/* ==========================================================================
   4. Products page
   ========================================================================== */

.cat{ scroll-margin-top:calc(var(--nav-h) + 12px); }

.cat-head{ cursor:pointer; transition:background .2s ease; }

.cat-panel{ display:none; }
.cat.open .cat-panel{ display:block; }

/* open state has to beat the inline closed-state colours */
.cat.open .cat-head{ background:var(--green) !important; }
.cat.open .cat-head div,
.cat.open .cat-head span{ color:#fff !important; }
.cat.open .cat-head .cat-blurb,
.cat.open .cat-head .cat-count{ color:rgba(255,255,255,.88) !important; }
.cat.open .cat-head .cat-icon{ background:rgba(255,255,255,.2) !important; color:#fff !important; }

.prod-card,.rel-card{ cursor:pointer; transition:border-color .18s ease, transform .18s ease; }
.prod-card:hover,.rel-card:hover{ border-color:rgba(90,143,30,.45) !important; }

.detail-view[hidden]{ display:none; }
.back-link{ cursor:pointer; }

@media (max-width:640px){
  .cat-head{ padding:20px 18px !important; gap:14px !important; }
  .cat-panel{ padding:8px 14px 20px !important; }
}


/* ==========================================================================
   4b. Contact form chips
   Enquiry type picks one; process chips allow any combination.
   ========================================================================== */

.chip{
  cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(0,0,0,.16);
  color:#3d444c; background:transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover{ border-color:rgba(90,143,30,.55); }

/* selected state is the same solid green for both groups */
.chip.on{ background:var(--green); color:#fff; border-color:transparent; font-weight:500; }
.chip.on:hover{ background:var(--green-dk); border-color:transparent; }

/* the tick box that makes multi-select obvious on the process chips */
.chip-process .chip-box{
  width:15px; height:15px; flex:0 0 15px;
  border:1.5px solid rgba(0,0,0,.28); border-radius:4px;
  background:#fff; position:relative;
  transition:border-color .15s ease, background .15s ease;
}
.chip-process.on .chip-box{ background:#fff; border-color:#fff; }
.chip-process.on .chip-box::after{
  content:""; position:absolute; left:4.5px; top:1px;
  width:4px; height:8px;
  border:solid var(--green-dk); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

@media (pointer:coarse){ .chip{ min-height:40px; display:inline-flex; align-items:center; } }


/* ==========================================================================
   5. Small-screen spacing polish
   ========================================================================== */

@media (max-width:640px){
  /* generous desktop side padding gets tightened */
  [style*="max-width:1240px"]{ padding-left:var(--pad) !important; padding-right:var(--pad) !important; }

  /* pill buttons stretch a little so they are comfortable to tap */
  [style*="border-radius:999px"]{ }
}

/* every tappable thing clears the 44px target guidance */
@media (pointer:coarse){
  a,button,[role="button"]{ }
  .nv-link,.nv-enquire,.nv-login{ min-height:44px; display:flex; align-items:center; }
  .nv-enquire{ justify-content:center; }
}


/* ==========================================================================
   6. Motion preference
   ========================================================================== */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .hero-slide{ transition:none !important; }
}

/* Real form controls (phase 2): 16px stops iOS zooming on focus */
@media (max-width:760px){
  input,select,textarea{ font-size:16px !important; }
}

@media print{
  .nv,.nv-scrim,.hero-nav,.hero-dot{ display:none !important; }
}


/* ==========================================================================
   7. Inner-page hero
   Same shape as the home hero: copy on the left, image card on the right.
   The headline that was printed into each artwork has been cropped off, so
   the live <h1> is the only headline on the page.
   ========================================================================== */

.hero-split{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr);
  gap:clamp(26px,3.4vw,52px);
  align-items:center;
}

.hero-figure img{
  display:block;
  width:100%; height:auto;
  border-radius:22px;
  box-shadow:0 22px 48px rgba(14,34,3,.28), 0 2px 6px rgba(14,34,3,.16);
}

/* stack below the copy on narrow screens */
@media (max-width:900px){
  .hero-split{ grid-template-columns:minmax(0,1fr); gap:clamp(22px,5vw,34px); }
  .hero-figure{ order:2; }
  .hero-copy{ order:1; }
}
@media (max-width:520px){
  .hero-figure img{ border-radius:16px; }
}

/* the headline now shares the row with the image, so it needs a smaller
   ceiling than it had when it spanned the full width */
@media (min-width:901px){
  .hero-copy h1{
    font-size:clamp(32px, 3.35vw, 50px) !important;
    line-height:1.04 !important;
    letter-spacing:-1.4px !important;
    max-width:none !important;
  }
  .hero-copy p{ max-width:none !important; }
}


/* ==========================================================================
   8. Live form controls (Laravel-backed pages)
   ========================================================================== */

.btn-submit{
  display:inline-block; border:0; cursor:pointer;
  background:var(--green); color:#fff;
  font-size:15px; font-weight:600; letter-spacing:.4px;
  padding:16px clamp(22px,3.23vw,40px);
  border-radius:999px; text-decoration:none;
  font-family:inherit;
  transition:background .18s ease;
}
.btn-submit:hover{ background:var(--green-dk); color:#fff; }

.btn-ghost{
  display:inline-block;
  border:1px solid rgba(0,0,0,.18); color:#3d444c;
  font-size:15px; font-weight:500;
  padding:15px clamp(20px,2.8vw,32px);
  border-radius:999px; text-decoration:none;
  transition:border-color .18s ease, color .18s ease;
}
.btn-ghost:hover{ border-color:var(--green-dk); color:var(--green-dk); }

input:focus, select:focus, textarea:focus{
  border-color:var(--green-dk) !important;
  box-shadow:0 0 0 3px rgba(124,185,40,.18);
}

.fld-err{ margin-top:7px; font-size:13px; color:#c0392b; }

.flash{
  max-width:1240px; margin:clamp(18px,2.4vw,28px) auto 0;
  padding:14px clamp(18px,2.4vw,24px);
  border-radius:12px; font-size:15px;
  border-left:3px solid;
}
.flash-error{ background:#fdecea; border-color:#c0392b; color:#8e2a1e; }
.flash-ok{ background:#f4faec; border-color:var(--green); color:var(--green-dkr); }

.badge-authentic{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--green-dkr);
  font-size:14px; font-weight:600;
  padding:9px 18px; border-radius:999px;
}
.badge-authentic::before{
  content:""; width:8px; height:8px; border-radius:999px; background:var(--green);
}

.auth-table{ width:100%; border-collapse:collapse; margin-top:clamp(20px,2.6vw,30px); }
.auth-table th,
.auth-table td{
  text-align:left; padding:13px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:15px; vertical-align:top;
}
.auth-table th{ width:44%; color:#5a616a; font-weight:500; padding-right:16px; }
.auth-table td{ color:#14171a; font-weight:500; }
.auth-table td.mono{ font-family:'JetBrains Mono',monospace; font-size:14px; letter-spacing:.4px; }
.auth-table tr:last-child th,
.auth-table tr:last-child td{ border-bottom:0; }

@media (max-width:560px){
  .auth-table th, .auth-table td{ display:block; width:100%; padding:6px 0; border-bottom:0; }
  .auth-table th{ color:#8b9199; font-size:13px; padding-top:14px; }
  .auth-table tr{ display:block; border-bottom:1px solid rgba(0,0,0,.08); padding-bottom:10px; }
}

/* case-authentication result: details card + explainer side by side */
.auth-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(26px,3.87vw,48px);
  align-items:start;
}
@media (max-width:900px){
  .auth-grid{ grid-template-columns:minmax(0,1fr) !important; }
}

/* FAQ accordion (contact page) */
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item[open] .faq-mark{ transform:rotate(45deg); }
.faq-mark{ transition:transform .18s ease; display:inline-block; }

/* ==========================================================================
   9. Case authentication entry popup
   ========================================================================== */

.ca-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,32px);
  background:rgba(12,26,4,.55);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  overflow-y:auto;
}
.ca-modal[hidden]{ display:none; }

.ca-modal-box{
  background:#fff;
  border-radius:24px;
  padding:clamp(24px,3.6vw,44px) clamp(22px,3.4vw,42px);
  width:100%; max-width:620px;
  max-height:calc(100dvh - clamp(32px,8vw,64px));
  overflow-y:auto;
  box-shadow:0 30px 70px rgba(10,26,2,.34);
}

.ca-modal .btn-submit[disabled]{
  opacity:.45; cursor:not-allowed;
}
.ca-modal .btn-submit[disabled]:hover{ background:var(--green); }

body.ca-locked{ overflow:hidden; }

/* ==========================================================================
   10. Product detail slideshow
   ========================================================================== */

.pgal{ position:relative; }
.pgal-img{ transition:opacity .5s ease; }
.pgal-img:not(.on){ opacity:0; pointer-events:none; }
.pgal-img.on{ opacity:1; }

.pgal-dot{
  width:8px; height:8px; border-radius:999px;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
  cursor:pointer; display:block;
}
.pgal-dot.on{ background:#7cb928; box-shadow:0 0 0 1px rgba(255,255,255,.7); }

/* ==========================================================================
   11. Product image zoom
   ========================================================================== */

.pgal-zoomable{ cursor:zoom-in; }
.pgal-zoomable.is-zoomed{ cursor:zoom-out; }

.pgal-zoomable .pgal-img{
  transition:transform .18s ease, opacity .5s ease;
  transform-origin:center center;
  will-change:transform;
}
.pgal-zoomable.is-zoomed .pgal-img.on{ transform:scale(2.4); }

/* a quiet hint, hidden once the reader is already zooming */
.pgal-hint{
  position:absolute; right:12px; top:12px; z-index:3;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px; letter-spacing:1.4px; text-transform:uppercase;
  color:#fff; background:rgba(20,23,26,.55);
  padding:6px 10px; border-radius:999px;
  opacity:0; transition:opacity .18s ease; pointer-events:none;
}
.pgal-zoomable:hover .pgal-hint{ opacity:1; }
.pgal-zoomable.is-zoomed .pgal-hint{ opacity:0; }

/* the dots must stay clickable above a zoomed image */
.pgal-dots{ z-index:4; }

/* no hover on touch, so the hint would only mislead */
@media (hover:none){
  .pgal-hint{ display:none; }
  .pgal-zoomable{ cursor:default; }
}

@media (prefers-reduced-motion:reduce){
  .pgal-zoomable .pgal-img{ transition:opacity .5s ease; }
}

/* ==========================================================================
   12. Hero arrows — one each side, solid so they read on any slide
   ========================================================================== */

.hero-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:6;
  width:clamp(50px, 4.6vw, 66px);
  height:clamp(50px, 4.6vw, 66px);
  border-radius:999px;
  background:#ffffff;
  color:var(--green-dkr);
  border:0;
  box-shadow:0 6px 20px rgba(10,26,2,.22);
  font-size:clamp(30px, 3vw, 40px);
  font-weight:700;
  line-height:1;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.hero-nav:hover{
  background:var(--green);
  color:#ffffff;
  box-shadow:0 8px 26px rgba(10,26,2,.32);
}
.hero-nav:active{ transform:translateY(-50%) scale(.94); }

/* the chevron sits slightly off centre in most fonts */
.hero-nav-prev{ left:clamp(12px, 2vw, 34px); padding-right:4px; }
.hero-nav-next{ right:clamp(12px, 2vw, 34px); padding-left:4px; }

@media (max-width:640px){
  .hero-nav{ width:44px; height:44px; font-size:26px; }
  .hero-nav-prev{ left:8px; }
  .hero-nav-next{ right:8px; }
}