/* Royal Engineering Consultancy — IT Infrastructure & Project Solutions
   Implemented from the Royal Engineering Consultancy Website Prototype design. */

:root { --gutter: 40px; }
html, body { margin: 0; padding: 0; background: #121214; }
html { overflow-x: hidden; }
* { box-sizing: border-box; }
body { font-family: 'IBM Plex Sans', sans-serif; color: #B3B6BC; font-size: 16px; line-height: 1.6; background: #0B0B0D; }
a { color: #EC4453; text-decoration: none; }
a:hover { color: #F7F7F8; }
input, select, textarea, button { font-family: 'IBM Plex Sans', sans-serif; }
img { max-width: 100%; }
button { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }

@keyframes fvPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(0.86); } }
@keyframes fvKenBurns { 0% { transform: scale(1.06); } 100% { transform: scale(1.14); } }

/* ---------- Intro splash ---------- */
#intro-stage {
  position: fixed; inset: 0; z-index: 60; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 50% 34%, #1C1C21, #08080A 68%);
  transition: background .9s ease;
}
#intro-stage[data-intro="done"] {
  position: static; z-index: auto; cursor: auto; background: #0B0B0D; display: block; overflow: visible;
}
#site-frame {
  flex: none; width: 100vw; height: 100vh; background: #0B0B0D; overflow: hidden;
  outline: 14px solid #232327; outline-offset: -1px; border-radius: 18px;
  box-shadow: 0 60px 120px -42px rgba(11, 11, 13, 0.55);
  transform: scale(0.52) translateY(-4%);
  transition: transform 2.8s cubic-bezier(.68,0,.16,1), border-radius 1.4s ease .9s, outline-width 1.4s ease 1s, box-shadow 1.8s ease;
}
[data-intro="zoom"] #site-frame, [data-intro="done"] #site-frame {
  outline-width: 0; border-radius: 0; box-shadow: none; transform: scale(1) translateY(0);
}
[data-intro="done"] #site-frame {
  width: auto; height: auto; overflow: visible; outline: 0; border-radius: 0; box-shadow: none; transition: none;
  /* A non-"none" transform (even a no-op scale(1)) establishes a containing
     block for descendant position:fixed elements per spec — the header bar
     and the WhatsApp button would then pin to THIS box instead of the
     viewport and scroll away. Drop the transform once the zoom animation
     that needed it is over; visually it's already an identity transform. */
  transform: none;
}
#intro-stand {
  position: absolute; left: 50%; top: calc(50% + 22vh); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  opacity: 1; transition: opacity .9s ease;
}
[data-intro="zoom"] #intro-stand { opacity: 0; }
[data-intro="done"] #intro-stand { display: none; }

/* ---------- Hover utility classes (source used inline per-element hover styles;
   these classes reproduce each distinct pattern found in the design) ---------- */
.hv-accent:hover { color: #EC4453; }
.hv-lighten:hover { color: #F7F7F8; }
.btn-primary { transition: background .18s ease; }
.btn-primary:hover { background: #C81E2E; }
.btn-primary-lift { transition: background .22s ease, transform .22s ease, box-shadow .22s ease; }
.btn-primary-lift:hover { background: #C81E2E; transform: translateY(-2px); }
.btn-outline { transition: border-color .22s ease; }
.btn-outline:hover { border: 1.5px solid #FFFFFF; }
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { border: 1px solid #E62E3E; transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(11,11,13,0.3); }
.lift-hover { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.lift-hover:hover { border: 1px solid #E62E3E; transform: translateY(-2px); }
.dropdown-item { transition: background .15s ease, border-color .15s ease; }
.dropdown-item:hover { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14) !important; }
.row-hover { transition: background .15s ease; }
.row-hover:hover { background: rgba(255,255,255,0.05); }
.chip-off { transition: border-color .15s ease, color .15s ease; }
.chip-off:hover { border: 1.5px solid #A8A4A0; color: #F7F7F8; }
.related-chip { transition: border-color .15s ease, color .15s ease; }
.related-chip:hover { border: 1px solid #E62E3E; color: #EC4453; }

/* ---------- Forms ---------- */
.fv-field { border: 1.5px solid #232327; border-radius: 3px; padding: 12px; font-size: 15px; color: #F7F7F8; background: #0B0B0D; width: 100%; }
.fv-field:focus { outline: none; border-color: #EC4453; }
.fv-field option { background: #0B0B0D; }

/* ---------- Responsive ---------- */
@media (min-width: 981px) {
  #cases .cases-intro {
    width: 100%; max-width: none !important;
    flex-direction: row !important; align-items: center !important;
    justify-content: space-between; gap: 32px !important;
  }
  #cases .cases-intro > div {
    max-width: 600px; text-align: left !important;
  }
}
@media (max-width: 980px) {
  :root { --gutter: 24px; }
  header nav .nav-links { display: none !important; }
  header .header-inner { width: auto !important; height: auto !important; }
  #mobile-menu-btn { display: flex !important; }
  h1 { font-size: 44px !important; }
  section h2 { font-size: 28px !important; }
  /* Capabilities is a menu of 6 options, not a photo feed — 2 columns keeps
     it scannable as a grid instead of either a 6-row wall or a swipe list. */
  .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  /* The six-pillars title/description just repeats text already baked
     into the photo above it — real estate worth reclaiming once the
     grid narrows to 2 columns. Alt text on the image carries the same
     info for screen readers. */
  .pillar-text { display: none !important; }
  .pillar-body { padding: 14px 16px !important; }
  .grid-4, .grid-2 { grid-template-columns: 1fr !important; }
  .split-2 { grid-template-columns: 1fr !important; }
  .oem-grid { grid-template-columns: repeat(4, 1fr) !important; }
  #nav-caps-list { grid-template-columns: 1fr !important; max-height: 60vh; overflow-y: auto; }
  /* The hamburger and the desktop "Capabilities" toggle share one panel.
     On mobile the full nav (Projects, Case studies, etc.) has nowhere
     else to live once .nav-links is hidden above, so it moves in here. */
  .mobile-nav-links { display: flex !important; }
  /* On mobile, Capabilities is one row in the list that expands into the
     6-item grid on tap, rather than always showing all 6 immediately. */
  #nav-caps-list { display: none !important; }
  #nav-caps-list.mobile-caps-open { display: grid !important; }
  #mobile-caps-chevron.open { transform: rotate(180deg); }
  /* The expanded list carries desktop's icon+name+description card; on a
     phone that's too much per row, so drop the description and tighten
     the row down to just the number and name. */
  #nav-caps-list .dropdown-item { padding: 10px 12px !important; }
  #nav-caps-list .cap-item-desc { display: none !important; }
  /* Full case-studies / blog listing pages: a real "browse everything"
     grid, not a carousel — visitors here are scanning the whole set. */
  .cs-page-grid, .blog-page-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hero: the contact/GST strip above the header is skippable on a phone —
     free up the vertical space and pull the hero content up to match. */
  .topbar { display: none !important; }
  #hero-content { padding-top: 150px !important; }
  /* Every subpage (capability, blog, blog post, case studies) has its own
     fixed top-padding sized to clear the topbar + header combined; with
     the topbar hidden above, that padding needs to shrink to match or it
     leaves a blank strip under the header. */
  .page-top-pad-sm { padding-top: 76px !important; }
  .page-top-pad-lg { padding-top: 66px !important; }
  /* The long-form hero paragraph and the 4-pill feature row are useful on
     a wide screen with room to spare; on a phone they push the actual CTA
     below the fold. Swap in a one-line version and drop the pills. */
  .hero-desc-full { display: none !important; }
  .hero-desc-mobile { display: block !important; }
  .hero-chips { display: none !important; }
  .hero-cta { padding: 12px 20px !important; font-size: 14px !important; }
  /* The stat row's border-right dividers only make sense side-by-side;
     stacked to 1 column they read as a stray line next to each number.
     2x2 real cards fix that instead of just re-flowing the same layout. */
  #hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
  #hero-stats .hero-stat {
    border-right: none !important; padding: 16px 18px !important;
    background: rgba(255,255,255,0.04) !important; border: 1px solid #232327 !important;
    border-radius: 6px !important;
  }
}
@media (max-width: 768px) {
  /* Photo-card rows (projects, case studies, blog) turn into a wall of
     near-identical boxes once stacked to one column on a phone. A
     horizontally-swipeable, snap-scrolling row reads as one browsable
     set instead — the same pattern App Store / news-app card feeds use. */
  .carousel-row, .cases-grid {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: calc(var(--gutter) + 12px);
  }
  .carousel-row::-webkit-scrollbar, .cases-grid::-webkit-scrollbar { display: none; height: 0; }
  .carousel-row > *, .cases-grid > * {
    flex: 0 0 auto;
    width: 78vw;
    max-width: 320px;
    scroll-snap-align: start;
  }
}
@media (max-width: 560px) {
  :root { --gutter: 16px; }
  .oem-grid { grid-template-columns: repeat(3, 1fr) !important; }
  /* 28 logos over 3 columns leaves one orphaned tile alone in the last
     row. Hiding it visually (it stays in the DOM for SEO/screen readers)
     keeps the grid a clean rectangle on phone-width screens. */
  #oem-grid > *:last-child { display: none !important; }
  .cs-page-grid, .blog-page-grid { grid-template-columns: 1fr !important; }
  h1 { font-size: 34px !important; }
  /* The desktop header packs a wordmark, a "Request a quote" pill and the
     menu button in one row — on a phone-width screen there just isn't
     room for all three without wrapping or overflowing. Drop the header's
     quote pill here; the hero's own quote CTA and the WhatsApp button
     both remain reachable within one scroll. */
  header nav > .nav-go.btn-primary { display: none !important; }
}
#mobile-menu-btn { display: none; }

/* ---------- Photo / logo placeholder panels ----------
   The source design's photography and brand-logo assets could not be
   retrieved in full (the asset API truncates any file over 256KB, which
   corrupts real photos and larger logo PNGs) — these panels are a
   deliberate, cohesive stand-in styled to the brand, not a broken image.
   Swap the background/content for a real <img> once assets are available. */
.photo-panel {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  background:
    radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(155deg, #1A1A1F 0%, #0B0B0D 72%);
  background-size: 18px 18px, 100% 100%;
  display: flex; align-items: flex-end;
}
.photo-panel::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(480px 260px at 82% 8%, rgba(230,46,62,0.16), transparent 65%);
}
.photo-panel-tag {
  position: relative; z-index: 1; margin: 14px; font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.08em; color: #B3B6BC;
  background: rgba(11,11,13,0.6); padding: 5px 9px; border: 1px solid rgba(255,255,255,0.10);
}
.photo-panel-icon { position: absolute; top: 14px; right: 14px; z-index: 1; opacity: 0.55; }

.logo-tile {
  border: 1px solid #232327; background: #FFFFFF; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 8px 10px; text-align: center;
}
.logo-tile span {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em; color: #1A1A1F; line-height: 1.15;
}

/* ---------- Accessibility: focus visibility & motion ---------- */
:focus-visible { outline: 2px solid #E62E3E; outline-offset: 2px; border-radius: 2px; }
.fv-field:focus-visible { outline: 2px solid #E62E3E; outline-offset: 1px; }
#skip-intro-btn:hover, #skip-intro-btn:focus-visible { border-color: #EC4453; color: #F7F7F8; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* ---------- WhatsApp floating action button ---------- */
#whatsapp-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 45;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform .18s ease, background .18s ease;
}
#whatsapp-fab:hover, #whatsapp-fab:focus-visible { background: #1EBE5A; transform: translateY(-2px); outline: 2px solid #F7F7F8; outline-offset: 3px; }
@media (max-width: 560px) {
  #whatsapp-fab { right: 14px; bottom: 14px; width: 50px; height: 50px; }
}