/* ==========================================================================
   Al Aman Equipment Rental LLC - shared styles
   ========================================================================== */

:root{ --gold:#D4AF37; --gold-lt:#F0D98C; --navy:#0B142B; }

body{ font-family:'Poppins','Inter',sans-serif; overflow-x:clip; }
h1,h2,h3,h4,h5,.head{ font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-.015em; }
/* editorial serif used for the hero and the about lockup */
.display{ font-family:'Playfair Display',Georgia,serif; font-weight:800; letter-spacing:.005em; }
.script{ font-family:'Dancing Script',cursive; }

/* ---------- gold treatments ---------- */
.gold-text{
  background:linear-gradient(100deg,#8F6F1F 0%,#D4AF37 25%,#F7E7A8 45%,#D4AF37 65%,#B8912A 100%);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gold-bg{ background:linear-gradient(100deg,#C9A233 0%,#E2C24D 20%,#F7E9B4 50%,#E2C24D 80%,#C9A233 100%); background-size:200% auto; }
.gold-bg:hover{ animation:shine 3s linear infinite; }
.gold-line{ background:linear-gradient(90deg,transparent,#D4AF37,#F3E1A0,#D4AF37,transparent); }

/* ---------- shapes ---------- */
.logo-plate{ border-bottom-right-radius:74px; }
.curve-top{ border-top-left-radius:260px 62px; border-top-right-radius:260px 62px; }
.curve-bottom{ border-bottom-left-radius:260px 62px; border-bottom-right-radius:260px 62px; }
.pattern-gold{ background-image:repeating-linear-gradient(115deg, rgba(212,175,55,.12) 0 1px, transparent 1px 12px); }

/* ---------- horizontal rails ---------- */
.rail{ display:flex; gap:1rem; min-width:0; max-width:100%; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -ms-overflow-style:none; scrollbar-width:none; padding-bottom:.5rem; }
.rail::-webkit-scrollbar{ display:none; }
.rail > *{ scroll-snap-align:start; flex:0 0 auto; }

.arrow-btn{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; border:1px solid rgba(212,175,55,.55); transition:.25s; }
.arrow-btn:hover{ background:var(--gold); color:#0B142B; border-color:var(--gold); }

/* ---------- motion ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

.slide{ opacity:0; transition:opacity 1.1s ease; }
.slide.active{ opacity:1; }
.slide img{ transform:scale(1); transition:transform 8s linear; }
.slide.active img{ transform:scale(1.09); }

/* ---------- client logo strip ---------- */
.client-logo{ opacity:.92; transition:.3s; }
.client-logo:hover{ opacity:1; transform:scale(1.06); }
.dark .client-logo{ mix-blend-mode:normal; background:#fff; padding:.3rem .55rem; border-radius:.4rem; opacity:.85; }
.dark .client-logo:hover{ opacity:1; }

/* ---------- product shots sit on light tiles in both themes ---------- */
.shot{ mix-blend-mode:multiply; }
.dark .shot{ mix-blend-mode:normal; }

/* ---------- accordion ---------- */
.acc-body{ max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.acc-item.open .acc-body{ max-height:420px; }
.acc-item.open .acc-icon{ transform:rotate(45deg); background:var(--gold); color:#0B142B; }
.acc-icon{ transition:.3s; }

/* ---------- header dropdown ---------- */
.has-drop > .drop{ opacity:0; visibility:hidden; transform:translateY(10px); transition:.25s; }
.has-drop:hover > .drop, .has-drop:focus-within > .drop{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- misc ---------- */
.no-scroll{ overflow:hidden; }
.step-line::after{
  content:''; position:absolute; top:2.25rem; left:calc(50% + 2.75rem); right:calc(-50% + 2.75rem); height:2px;
  background:repeating-linear-gradient(90deg, rgba(212,175,55,.6) 0 8px, transparent 8px 16px);
}
@media (max-width:1023px){ .step-line::after{ display:none; } }

/* ---------- reference-matched details ---------- */

/* hero script line sits dark on the bright sky, with a soft halo */
.hero-script{ text-shadow:0 2px 18px rgba(255,255,255,.55), 0 1px 3px rgba(255,255,255,.7); }

/* soft gold disc used behind the advantage icons */
.gold-soft{
  background:radial-gradient(120% 120% at 30% 25%, #FBF0CC 0%, #EBD388 45%, #D9B948 100%);
  box-shadow:0 6px 16px -10px rgba(212,175,55,.9);
}

/* gold band framing the bottom-left of the CTA panel */
.cta-gold-edge::after{
  content:''; position:absolute; inset:auto 0 0 0; height:6px;
  background:linear-gradient(90deg,#B8912A,#F3E1A0 45%,#D4AF37);
  border-bottom-left-radius:26px; border-bottom-right-radius:26px;
}
.cta-gold-edge::before{
  content:''; position:absolute; inset:0 auto 0 0; width:6px;
  background:linear-gradient(180deg,#D4AF37,#F3E1A0 55%,#B8912A);
  border-top-left-radius:26px; border-bottom-left-radius:26px; z-index:1;
}

/* ---------- long-form article body ---------- */
.post{ font-size:15px; line-height:1.85; color:#3d4558; }
.dark .post{ color:#c3ccdd; }
.post .lead{ font-size:17px; line-height:1.8; color:#1d2739; font-weight:500; }
.dark .post .lead{ color:#e6ecf7; }
.post h2{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:26px; line-height:1.25;
  margin:2.2rem 0 .85rem; color:#0B142B; position:relative; padding-left:1rem;
}
.dark .post h2{ color:#fff; }
.post h2::before{
  content:''; position:absolute; left:0; top:.28em; bottom:.28em; width:4px; border-radius:2px;
  background:linear-gradient(180deg,#F3E1A0,#D4AF37);
}
.post p{ margin:0 0 1.05rem; }
.post ul, .post ol{ margin:0 0 1.2rem 0; padding-left:1.25rem; }
.post ul{ list-style:none; padding-left:0; }
.post ul li{ position:relative; padding-left:1.6rem; margin-bottom:.55rem; }
.post ul li::before{
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.72em;
  position:absolute; left:0; top:.35em; color:#D4AF37;
}
.post ol{ list-style:decimal; }
.post ol li{ margin-bottom:.55rem; padding-left:.35rem; }
.post ol li::marker{ color:#D4AF37; font-weight:700; }
.post blockquote{
  margin:1.6rem 0; padding:1.1rem 1.3rem; border-left:4px solid #D4AF37; border-radius:0 .9rem .9rem 0;
  background:rgba(212,175,55,.09); font-weight:600; color:#1d2739;
}
.dark .post blockquote{ color:#f0f4fb; background:rgba(212,175,55,.12); }
.post .spec-table{ overflow-x:auto; margin:1.5rem 0; }
.post table{ width:100%; min-width:520px; border-collapse:collapse; font-size:13.5px; }
.post thead th{
  font-family:'Montserrat',sans-serif; font-weight:700; text-align:left; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; padding:.7rem .8rem; background:rgba(212,175,55,.16);
}
.post tbody td{ padding:.7rem .8rem; border-top:1px solid rgba(11,20,43,.09); }
.dark .post tbody td{ border-top-color:rgba(255,255,255,.1); }
.post tbody tr:nth-child(even){ background:rgba(11,20,43,.025); }
.dark .post tbody tr:nth-child(even){ background:rgba(255,255,255,.03); }