/* Richy's Fencing — responsive @media rules + ambient animations. Loaded via <link>, last. */

@media (max-width:640px) {
  /* smaller headline; blue phrase on its own single line */
  .hero h1 {
    font-size:29px;
  }
  .hero h1 .hl {
    display:block;
  }
  /* hero carousel: ~2.5 shorter cards */
  .pcard {
    width:40vw;
    height:222px;
  }
  .pcard h3 {
    font-size:16px;
  }
  .pcard .pinfo {
    padding:14px;
  }
  /* offer coupons: hide descriptions, keep claim on one line, let columns shrink */
  .offer-card {
    min-width:0;
  }
  .offer-card .oc-body p {
    display:none;
  }
  .oc-foot .claim {
    font-size:12px;
    letter-spacing:.2px;
  }
  .oc-foot .claim .material-icons-outlined {
    font-size:16px;
  }
  /* services -> edge-to-edge carousel: 1.5 cards, no descriptions */
  .svc-grid {
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-right:-20px;
    padding-right:20px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .svc-grid::-webkit-scrollbar {
    display:none;
  }
  .svc-card {
    flex:0 0 66%;
    min-height:416px;
    scroll-snap-align:start;
  }
  .svc-card.open p {
    max-height:150px;
  }
  .svc-dots {
    display:flex;
  }
  .trust-dots {
    display:flex;
  }
  /* stack paired fields + stats */
  .qrow2 {
    grid-template-columns:1fr;
  }
  .stats {
    grid-template-columns:1fr;
  }
  /* fence type -> dropdown */
  .chip-row {
    display:none;
  }
  .qtype-select {
    display:block;
  }
}
/* ---------- Responsive ---------- */
@media (max-width:640px) {
  .call-btn .cb-text {
    display:none;
  }
  .call-btn {
    gap:0;
    padding:11px 13px;
  }
  .brand small {
    display:none;
  }
  .brand-logo {
    height:56px;
  }
  header.site.shrink .brand-logo {
    height:45px;
  }
  /* menu drawer: keep the call button inside the panel */
  .menu-panel {
    overflow-x:hidden;
    overflow-y:auto;
  }
  .menu-panel .btn {
    font-size:15px;
    padding:14px 12px;
    white-space:nowrap;
    letter-spacing:.2px;
  }
  /* hero CTAs side-by-side, one line each */
  .hero-actions {
    flex-direction:row;
    flex-wrap:nowrap;
    gap:8px;
    max-width:none;
  }
  .hero-actions .btn {
    flex:1;
    min-width:0;
    padding:13px 6px;
    font-size:12px;
    min-height:48px;
    letter-spacing:.2px;
    white-space:nowrap;
    overflow:hidden;
  }
  .hero-actions .btn .material-icons-outlined {
    font-size:16px;
  }
  /* one-line hero offer */
  .ho-week {
    display:none;
  }
  /* keep every button on one line */
  .btn {
    font-size:15px;
    padding:14px 14px;
    white-space:nowrap;
    letter-spacing:.2px;
  }
  .mbar a {
    font-size:14px;
    gap:5px;
  }
  .mbar a .material-icons-outlined {
    font-size:18px;
  }
  /* trustbar items centred */
  .trust-item {
    justify-content:center;
    text-align:center;
  }
  /* smaller static service-card titles so they fit */
  .svc-card h3 {
    font-size:24px;
  }
  .svc-card:hover h3,.svc-card.open h3 {
    font-size:17px;
  }
  /* offers -> auto-scrolling slider with dots */
  .offers-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    margin-right:-20px;
    padding-right:20px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .offers-grid::-webkit-scrollbar {
    display:none;
  }
  .offer-card {
    flex:0 0 80%;
    min-width:0;
    scroll-snap-align:center;
  }
  #offersDots {
    display:flex;
  }
  /* social gallery: header stacked, tiles as a carousel */
  .sg-head {
    flex-direction:column;
    gap:4px;
    font-size:20px;
  }
  .sg-grid {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:10px;
    margin-right:-20px;
    padding-right:20px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .sg-grid::-webkit-scrollbar {
    display:none;
  }
  .sg-item {
    flex:0 0 62%;
    scroll-snap-align:center;
  }
  #galleryDots {
    display:flex;
  }
}
@media (max-width:899px) {
  .hamburger {
    display:inline-flex;
  }
}
@media (min-width:641px) {
  .section {
    padding:140px 0;
  }
  .hero {
    padding:56px 0 0;
  }
  .hero h1 {
    font-size:66px;
  }
  .hero .sub {
    font-size:19px;
  }
  .hero-actions {
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    max-width:none;
  }
  .hero-actions .btn {
    flex:0 0 auto;
  }
  .pcard {
    width:300px;
    height:440px;
  }
  .sec-head h2 {
    font-size:54px;
  }
  .form-card h2 {
    font-size:38px;
  }
  .trustbar .grid {
    grid-template-columns:repeat(5,1fr);
    text-align:center;
  }
  .trust-item {
    flex-direction:column;
    text-align:center;
    gap:6px;
  }
  .svc-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .svc-card {
    min-height:351px;
  }
  .steps {
    grid-template-columns:repeat(3,1fr);
    gap:26px;
  }
  .why-grid {
    grid-template-columns:1.05fr 1fr;
    gap:46px;
    align-items:stretch;
  }
  .why-video {
    aspect-ratio:auto;
    height:100%;
  }
  .whyus h2 {
    font-size:38px;
  }
  .step:not(:last-child)::after {
    content:"";
    position:absolute;
    top:47px;
    right:-26px;
    width:26px;
    border-top:2px dashed rgba(184,134,11,.45);
    z-index:1;
  }
  .tst-grid {
    grid-template-columns:repeat(2,1fr);
  }
  .foot-grid {
    grid-template-columns:1.4fr 1fr 1fr;
  }
  .final h2 {
    font-size:48px;
  }
  .mbar {
    display:none;
  }
  .form-card {
    padding:32px 30px;
  }
  .form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 14px;
  }
  .final-cta {
    flex-direction:row;
    justify-content:center;
  }
  .final-cta .btn {
    flex:1;
  }
}
@media (min-width:641px) {
  body {
    padding-bottom:0;
  }
}
@media (min-width:1100px) {
  .tst-grid {
    grid-template-columns:repeat(4,1fr);
  }
}
@media (min-width:1024px) {
  .offers-grid {
    grid-template-columns:repeat(4,1fr);
    gap:18px;
  }
}
@media (min-width:900px) {
  .qcard {
    grid-template-columns:1.06fr .94fr;
  }
  .qform-side {
    padding:44px 44px;
  }
  .qimg-side {
    display:block;
  }
  .qtitle {
    font-size:40px;
  }
}
/* ---- Ambient animations ---- */
/* Subtle gold vertical lines sitting BEHIND content, only on the dark sections' background */
.hero,.offers,.whyus,footer {
  position:relative;
  overflow:hidden;
}
.hero>*,.offers>*,.whyus>*,footer>* {
  position:relative;
  z-index:1;
}
.hero::before,.offers::before,.whyus::before,footer::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(184,134,11,.06) 0 1.5px,transparent 1.5px 96px);
}
.hero::after,.offers::after,.whyus::after,footer::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:45%;
  z-index:0;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(184,134,11,.22) 0 1.5px,transparent 1.5px 96px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 50%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 50%,transparent);
  transform:translateY(-100%);
  animation:vrun 7s linear infinite;
}
@keyframes vrun {
  to {
    transform:translateY(240%);
  }
}
/* Shimmering gold sweep across the hero highlight */
.hero h1 .hl {
  background:linear-gradient(90deg,#B8860B 0%,#FFD700 25%,#B8860B 50%,#FFD700 75%,#B8860B 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:hlShimmer 4.5s linear infinite;
}
@keyframes hlShimmer {
  to {
    background-position:200% center;
  }
}
/* Periodic flip on the hero-offer tag icon */
.hero-offer .material-icons-outlined {
  display:inline-block;
  backface-visibility:visible;
  animation:tagFlip 3.5s ease-in-out infinite;
}
@keyframes tagFlip {
  0%,65% {
    transform:rotateY(0);
  }
  100% {
    transform:rotateY(360deg);
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero::after,.offers::after,.whyus::after,footer::after,.hero h1 .hl,.hero-offer .material-icons-outlined,.hero-offer::before {
    animation:none;
  }
  .hero::after,.offers::after,.whyus::after,footer::after {
    display:none;
  }
  .hero h1 .hl {
    -webkit-text-fill-color:#D9A93A;
    color:#D9A93A;
  }
}