/*
Theme Name: Webrobi
Theme URI: https://webrobi.com
Author: Webrobi
Author URI: https://webrobi.com
Description: The Webrobi agency homepage theme — a Nordic-based digital agency site for Web Design & Development, AI Automation, B2B Lead Generation, Web Scraping & Data Solutions, SEO & SEM, and Business Process Automation. Every homepage section (Hero, Services, Why Choose Us, Process, Portfolio, Results, Testimonials, CTA, Contact) can be edited via the Customizer, or rebuilt with unlimited, drag-and-drop Elementor widgets.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: orixy
Tags: e-commerce, blog, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, elementor

Webrobi WordPress Theme, Copyright 2026
Webrobi is distributed under the terms of the GNU GPL v2 or later.
*/

/* ============================================
   WEBROBI — Digital Agency WordPress Theme
   (internal function/class prefixes remain "orixy_" /
   "Orixy_" for code stability — this is invisible to visitors)
   ============================================ */

:root {
  --primary: #5b4fe0;
  --primary-dark: #453adb;
  --accent: #12c9c9;
  --accent-2: #00d9c0;
  --pink: #ff3d9a;
  --green: #2ecc71;
  --ink: #16112e;
  --ink-soft: #5c5878;
  --bg-soft: #f5f6fb;
  --bg-blue: #eaf3fb;
  --white: #ffffff;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 45px -20px rgba(60, 50, 130, 0.25);
  --shadow-card: 0 15px 35px -15px rgba(30, 20, 90, 0.15);
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  /* No CSS scroll-behavior:smooth here: it was redundant with the JS-driven
     smooth scroll already used for anchor-menu clicks below (window.scrollTo
     with behavior:'smooth'), and having it on <html> is a well-documented
     trigger for position:sticky rendering in the wrong place/size on the
     very first paint in Chromium — exactly the load-then-snap-into-place
     symptom this fixes. JS still handles the actual smooth-scroll UX. */
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  /* No overflow-x here: overflow set on a non-root element (unlike on
     html, which the UA propagates to the viewport) makes that element
     its own scroll container. .site-header is a direct child of body,
     and position:sticky resolves against the NEAREST scrolling
     ancestor — so overflow-x:hidden here was silently turning body
     into that ancestor and breaking the header's sticky positioning.
     html's overflow-x:hidden below already fully guards against
     horizontal overflow without this side effect. */
}

img { max-width: 100%; display: block; height: auto; }

/* Any embedded/replaced element (video, generic iframe embeds pasted into
   post content, object/embed) must never force horizontal overflow —
   img is covered above; this covers the rest. */
svg, video, iframe, embed, object { max-width: 100%; }

a { text-decoration: none; color: inherit; }

ul { list-style: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ---------- Overflow safety net ----------
   A long unbroken word or URL (in a post, a footer tagline, a form
   value, a menu label, etc.) must wrap instead of forcing the page to
   scroll horizontally or being clipped by html's overflow-x. */
body, h1, h2, h3, h4, p, a, span, li, blockquote, label, input, textarea, button {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Flex/grid children don't shrink below their content's intrinsic
   width unless told to — this is what actually causes narrow-viewport
   overflow in rows like .value-strip-item, .office-info, .testi-person,
   .review-item, .skills-footer, .btn-play, .logo, .footer-info-row. */
.value-strip-item, .office-info > div, .testi-person, .testi-person div,
.review-item, .skills-footer, .footer-info-row, .footer-info-row span,
.header-inner, .logo { min-width: 0; }

.container {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}

.text-accent { color: var(--primary); }

.eyebrow {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.5px;
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 10px;
}

/* Screen-reader only helper (WordPress standard) */
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0;
  position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link {
  position: absolute; top: -60px; left: 10px; background: var(--primary);
  color: #fff; padding: 12px 20px; z-index: 10000; border-radius: 8px;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 10px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 15px 30px -10px rgba(91, 79, 224, 0.55);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--primary-dark);
  transform: translateY(-3px);
  box-shadow: 0 20px 35px -10px rgba(91, 79, 224, 0.65);
  color: #fff;
}
.btn-outline {
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
}
.btn-outline:hover { background: rgba(255,255,255,0.12); transform: translateY(-3px); }
.btn-outline-accent {
  border: 2px solid var(--accent);
  color: var(--accent);
  border-radius: 50px;
  padding: 13px 28px;
}
.btn-outline-accent:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }
.btn-accent {
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
}
.btn-accent:hover { background: var(--accent-2); }
.btn-sm { padding: 11px 24px; font-size: 0.85rem; }
.btn.full { width: 100%; justify-content: center; }

.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  color: var(--ink);
}
.play-circle {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  transition: all 0.3s ease;
}
.btn-play:hover .play-circle { background: var(--accent); color: #fff; transform: scale(1.08); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  /* Promotes the header to its own compositor layer from the very first
     frame. Without this, a sticky element carrying backdrop-filter can
     paint at its in-flow size/position on first load and only snap to
     its correct composited state on the next repaint (e.g. the first
     scroll or mousemove) — which is exactly the "larger until I move
     the mouse" symptom this fixes. No visual effect of its own. */
  transform: translateZ(0);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 20px;
}
.logo {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
}
.logo img { max-height: var(--logo-max-height, 40px); width: auto; }
.logo-mark { color: var(--primary); font-size: 1.1rem; }
.logo-dot { color: var(--accent); }

.main-nav ul { display: flex; gap: 28px; }
.main-nav ul ul {
  position: absolute;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  padding: 12px;
  min-width: 200px;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  gap: 4px;
}
.main-nav li { position: relative; }
.main-nav li:hover > ul { opacity: 1; visibility: visible; transform: translateY(0); }
/* A dropdown on one of the last two top-level items would otherwise open
   left-aligned to its parent and can run past the right edge of the
   viewport on laptop/desktop widths, where html's overflow-x:hidden would
   silently clip it. Right-align those instead. */
.main-nav > ul > li:nth-last-child(-n+2) > ul { left: auto; right: 0; }
.main-nav ul ul a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 0.9rem; }
.main-nav ul ul a:hover { background: var(--bg-soft); color: var(--primary); }

.nav-link, .main-nav a {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ink-soft);
  position: relative;
  padding: 6px 0;
  transition: color 0.25s;
}
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a {
  color: var(--primary);
}
.main-nav .current-menu-item > a::after, .main-nav .current_page_item > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
}
.hamburger span {
  width: 24px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 90px 0 70px;
  background: linear-gradient(180deg, #f7f7fd 0%, #ffffff 100%);
  overflow: hidden;
}
.hero-bg-shape {
  position: absolute;
  top: -100px; right: -160px;
  width: 620px; height: 620px;
  background: radial-gradient(circle at 30% 30%, rgba(91,79,224,0.10), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(18,201,201,0.12), transparent 60%);
  border-radius: 50%;
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero-text h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  margin-bottom: 22px;
}
.hero-subhead {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--primary);
  font-size: 1.05rem;
  margin: -10px 0 16px;
}
.hero-desc {
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 32px;
  font-size: 1.02rem;
}
.hero-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.hero-visual { position: relative; height: 460px; }
.visual-photo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 6px solid #fff;
}
.visual-photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-main { width: 190px; height: 190px; top: 0; right: 90px; }
.photo-small { width: 130px; height: 130px; top: 195px; right: 0; }
.photo-bottom { width: 175px; height: 175px; bottom: 0; right: 130px; }

.badge-icon {
  position: absolute;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 0.9rem;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.3);
}
.badge-top { top: -6px; left: -6px; background: var(--accent); }
.badge-social.fb { top: -8px; right: -8px; background: #3b5998; }
.badge-social.tw { top: -8px; right: -8px; background: #1da1f2; }

.visual-card {
  position: absolute;
  top: 150px; left: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 230px;
}
.visual-card strong { display: block; font-size: 0.85rem; margin-bottom: 4px; }
.visual-card span { font-size: 0.78rem; color: var(--primary); font-weight: 600; }
.avatar-stack { display: flex; }
.avatar-stack img {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  object-fit: cover;
}
.avatar-stack img:first-child { margin-left: 0; }

/* ---------- Trusted ---------- */
.trusted { margin-top: -40px; position: relative; z-index: 5; }
.trusted-card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 32px 40px;
  text-align: center;
}
.trusted-title { font-weight: 600; font-size: 1.05rem; margin-bottom: 22px; }
.trusted-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 1rem;
}
.trusted-logos span, .trusted-logos a { display: flex; align-items: center; gap: 8px; opacity: 0.75; transition: opacity 0.25s; color: inherit; }
.trusted-logos span:hover, .trusted-logos a:hover { opacity: 1; color: var(--primary); }
.trusted-logos i { font-size: 1.3rem; }
.trusted-logos img { max-height: 26px; width: auto; filter: grayscale(1); opacity: 0.7; transition: all 0.25s; }
.trusted-logos img:hover { filter: none; opacity: 1; }

/* ---------- About ---------- */
.about { padding: 120px 0 90px; }
.about-inner {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-visual { position: relative; }
.about-photo-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  position: relative;
  z-index: 2;
}
.about-photo-wrap img { width: 100%; height: 420px; object-fit: cover; }
.about-ring {
  position: absolute;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, var(--primary), var(--accent), var(--primary));
  bottom: -40px; left: -40px;
  z-index: 1;
  opacity: 0.85;
}
.about-content h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 18px; }
.about-content p { color: var(--ink-soft); margin-bottom: 14px; }
.about-content .btn { margin-top: 14px; }

/* ---------- Services ---------- */
.services { padding: 90px 0 110px; background: var(--bg-soft); }
.section-head.center { text-align: center; max-width: 640px; margin: 0 auto 55px; }
.section-head.center h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.service-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 40px 28px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-top: 4px solid var(--accent, var(--primary));
  display: block;
}
.service-card:hover { transform: translateY(-10px); box-shadow: 0 25px 45px -20px rgba(30,20,90,0.25); }
.service-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  font-size: 1.5rem;
  margin-bottom: 22px;
}
.service-card h3 { font-size: 1.15rem; margin-bottom: 10px; }
.service-card p { color: var(--ink-soft); font-size: 0.92rem; }
.service-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; font-size: 0.85rem; font-weight: 600;
  color: var(--accent, var(--primary));
}
.service-card:hover .service-link { gap: 12px; }

/* ---------- Trust / Value Strip ---------- */
.value-strip { padding: 34px 0; background: var(--bg-soft); border-bottom: 1px solid rgba(0,0,0,0.05); }
.value-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.value-strip-item {
  display: flex; align-items: center; gap: 14px;
  font-weight: 600; font-size: 0.95rem; color: var(--ink);
}
.value-strip-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 10%, #fff);
  color: var(--primary); font-size: 1.15rem;
}

/* ---------- Global Reach / Nordic Focus ---------- */
.nordic { padding: 100px 0; }
.nordic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-top: 10px; }
.nordic-card {
  text-align: center; background: #fff; border-radius: var(--radius-md);
  padding: 30px 16px; box-shadow: var(--shadow-card); transition: transform 0.3s ease;
}
.nordic-card:hover { transform: translateY(-6px); }
.nordic-flag { display: block; font-size: 2.4rem; margin-bottom: 12px; line-height: 1; }
.nordic-card h3 { font-size: 1rem; }

/* ---------- Video / Our Approach ---------- */
.approach-video { padding: 100px 0; background: var(--bg-soft); }
.approach-video-inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.approach-video-thumb {
  margin-top: 30px; width: 92px; height: 92px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; transition: transform 0.3s ease;
}
.approach-video-thumb:hover { transform: scale(1.08); }
.approach-video-thumb .play-circle {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary); font-size: 1.4rem;
}

/* ---------- Skills / Video ---------- */
.skills { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.skills-left { position: relative; background: linear-gradient(135deg, rgba(91,79,224,0.85), rgba(18,201,201,0.85)); }
.skills-left img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: luminosity; opacity: 0.7; }
.play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78px; height: 78px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 1.4rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
  border: 2px solid rgba(255,255,255,0.6);
}
.play-btn:hover { transform: translate(-50%, -50%) scale(1.1); }

.skills-right { background: var(--bg-blue); display: flex; align-items: center; }
.skills-right-inner { padding: 70px 60px; max-width: 560px; }
.skills-right-inner h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 16px; }
.skills-right-inner p { color: var(--ink-soft); margin-bottom: 30px; }

.skill-bar { margin-bottom: 20px; }
.skill-bar-head { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; font-size: 0.9rem; }
.bar { height: 8px; background: #dfe4f5; border-radius: 10px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 10px; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 1.4s cubic-bezier(.2,.8,.2,1); }
.bar-fill.animate { width: var(--w); }

.skills-footer { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-weight: 600; font-size: 0.9rem; }
.skills-footer a { color: var(--primary); }

/* ---------- Stats ---------- */
.stats { padding: 110px 0; }
.stats-inner { display: grid; grid-template-columns: 1fr 0.9fr; gap: 60px; align-items: center; }
.stats-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 4px 0 16px; }
.stats-text > p { color: var(--ink-soft); margin-bottom: 30px; max-width: 480px; }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin-bottom: 30px; }
.stats-grid strong { display: block; font-size: 2rem; font-family: var(--font-heading); color: var(--ink); }
.stats-grid span { color: var(--ink-soft); font-size: 0.9rem; }

.want-contact { font-weight: 600; margin-bottom: 14px; }

.stats-visual { position: relative; }
.stats-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); position: relative; }
.stats-photo img { width: 100%; height: 460px; object-fit: cover; }
.consult-tag {
  position: absolute; left: 24px; bottom: 24px;
  background: linear-gradient(120deg, var(--primary), var(--accent));
  color: #fff; padding: 14px 22px; border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 14px;
}
.consult-tag span { display: block; font-weight: 700; }
.consult-tag small { display: block; font-size: 0.75rem; opacity: 0.85; }

/* ---------- Testimonials ---------- */
.testimonials { padding: 100px 0; background: var(--bg-blue); }
.testi-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.testi-text h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 4px 0 16px; }
.testi-text p { color: var(--ink-soft); margin-bottom: 28px; max-width: 460px; }

.testi-card-wrap { position: relative; }
.testi-slider { position: relative; min-height: 260px; }
.testi-card {
  position: absolute; inset: 0; background: #fff; border-radius: var(--radius-md);
  padding: 36px; box-shadow: var(--shadow-card); opacity: 0; transform: translateX(30px);
  transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none;
}
.testi-card.active { opacity: 1; transform: translateX(0); pointer-events: auto; position: relative; }
.testi-stars { color: #ffb400; letter-spacing: 3px; margin-bottom: 16px; }
.testi-person { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.testi-person img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.testi-person span { color: var(--ink-soft); font-size: 0.85rem; }
.quote-icon { color: var(--primary); opacity: 0.15; font-size: 1.8rem; margin-bottom: 6px; }
.testi-card p { color: var(--ink-soft); }

.testi-dots { display: flex; gap: 8px; margin-top: 22px; }
.testi-dots button { width: 10px; height: 10px; border-radius: 50%; background: #cfd3ec; transition: all 0.25s ease; }
.testi-dots button.active { background: var(--primary); width: 26px; border-radius: 6px; }

.testi-empty-state {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  min-height: 260px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 40px; gap: 14px;
}
.testi-empty-state i { font-size: 2rem; color: var(--primary); opacity: 0.4; }
.testi-empty-state p { color: var(--ink-soft); font-weight: 500; }

/* ---------- FAQ ---------- */
.faq { padding: 100px 0; }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
.faq-question {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; text-align: left; font-weight: 600; font-size: 1rem; color: var(--ink);
  background: transparent; border: 0; cursor: pointer;
}
.faq-icon { transition: transform 0.3s ease; color: var(--primary); flex-shrink: 0; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(180deg); }
.faq-answer { padding: 0 26px 22px; }
.faq-answer p { color: var(--ink-soft); }

/* ---------- Why choose ---------- */
.why { padding: 60px 0; }
.why-inner { background: linear-gradient(120deg, var(--primary), #7b6ff0); border-radius: var(--radius-lg); padding: 46px 50px; color: #fff; }
.why-inner h3 { font-size: 1.4rem; margin-bottom: 26px; color: #fff; }
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.why-item { display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 0.95rem; }
.why-item i { color: var(--accent-2); font-size: 1.2rem; flex-shrink: 0; }

/* ---------- Blog ---------- */
.blog { padding: 100px 0; }
.blog .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.blog .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.section-desc { color: var(--ink-soft); max-width: 360px; }

.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.blog-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.3s ease; background: #fff; }
.blog-card:hover { transform: translateY(-8px); }
.blog-thumb { position: relative; height: 220px; overflow: hidden; background: var(--bg-soft); }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.blog-card:hover .blog-thumb img { transform: scale(1.08); }
.blog-tag { position: absolute; top: 16px; left: 16px; background: var(--primary); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 6px 14px; border-radius: 30px; }
.blog-card h3 { font-size: 1.05rem; padding: 20px 20px 8px; }
.blog-card h3 a { color: inherit; }
.blog-card h3 a:hover { color: var(--primary); }
.blog-meta { display: block; padding: 0 20px 22px; color: var(--ink-soft); font-size: 0.82rem; }

/* Single post & pages */
.entry-content { max-width: 780px; margin: 0 auto; padding: 60px 0 100px; }
.entry-content img { border-radius: var(--radius-md); margin: 20px 0; }
.entry-content h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 18px; }
.entry-content .entry-meta { color: var(--ink-soft); margin-bottom: 26px; font-size: 0.9rem; }
.entry-content p { margin-bottom: 18px; color: var(--ink-soft); }
.entry-content a { color: var(--primary); text-decoration: underline; }

/* Content from the editor can include elements with their own intrinsic
   width (tables, code blocks, embedded iframes) that don't shrink the
   way text does. Scope them so they scroll within themselves on narrow
   viewports instead of being clipped by html's overflow-x:hidden
   or forcing the whole page to scroll sideways. */
.entry-content table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  margin-bottom: 18px;
}
.entry-content table th, .entry-content table td {
  padding: 10px 14px;
  border: 1px solid #e3e5f2;
  text-align: left;
  white-space: nowrap;
}
.entry-content pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.entry-content code { overflow-wrap: break-word; }
.entry-content pre code { overflow-wrap: normal; }
.entry-content iframe, .entry-content embed, .entry-content object {
  max-width: 100%;
}
.entry-content blockquote {
  border-left: 3px solid var(--primary);
  padding: 4px 0 4px 20px;
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-style: italic;
}
.page-header-band { background: var(--bg-soft); padding: 60px 0; text-align: center; }
.page-header-band h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.pagination-nav { display: flex; justify-content: center; gap: 10px; padding-bottom: 80px; }
.pagination-nav a, .pagination-nav span { padding: 10px 18px; border-radius: 8px; border: 1px solid #e3e5f2; font-weight: 600; font-size: 0.9rem; }
.pagination-nav .current { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ---------- Comments (single.php / page.php via comments.php) ---------- */
.comments-area { max-width: 780px; margin: 0 auto; padding-top: 20px; }
.comments-title { font-size: 1.3rem; margin-bottom: 24px; }
.comment-list { list-style: none; margin: 0 0 30px; padding: 0; }
.comment-list .children { list-style: none; margin: 0; padding-left: 24px; }
.comment-list article {
  display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid #e3e5f2;
}
.comment-list .avatar {
  border-radius: 50%; width: 48px; height: 48px; flex-shrink: 0;
}
.comment-list .comment-author { display: block; font-weight: 600; margin-bottom: 4px; }
.comment-list .comment-author .says { display: none; }
.comment-list .comment-metadata { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 10px; }
.comment-list .comment-metadata a { color: inherit; }
.comment-list .comment-content p { color: var(--ink-soft); margin-bottom: 10px; word-break: break-word; }
.comment-list .reply { margin-top: 8px; }
.comment-list .comment-reply-link {
  display: inline-block; font-size: 0.82rem; font-weight: 600; color: var(--primary);
}
.comment-list .pingback, .comment-list .trackback { padding: 12px 0; border-bottom: 1px solid #e3e5f2; }
.comment-respond { background: var(--bg-soft); border-radius: var(--radius-md); padding: 30px; }
.comment-reply-title { font-size: 1.1rem; margin-bottom: 18px; }
.comment-form p { margin-bottom: 16px; }
.comment-form label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; min-width: 0; max-width: 100%; padding: 13px 16px;
  border: 1.5px solid #e3e5f2; border-radius: var(--radius-sm);
  font-size: 0.92rem; font-family: inherit; transition: border-color 0.25s;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--primary); }
.comment-form textarea { resize: vertical; min-height: 120px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--ink-soft); }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.comment-notes, .logged-in-as { color: var(--ink-soft); font-size: 0.88rem; margin-bottom: 16px; }
.form-submit { margin-top: 4px; }
.no-comments { color: var(--ink-soft); padding: 20px 0; }
.comment-navigation { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .comment-list article { flex-direction: column; gap: 10px; }
  .comment-list .children { padding-left: 14px; }
  .comment-respond { padding: 22px 18px; }
}

/* ---------- Contact / Map ---------- */
.contact { padding: 100px 0; background: var(--bg-soft); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.map-wrap { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; }
.map-wrap iframe { width: 100%; flex: 1; min-height: 320px; border: 0; filter: grayscale(0.2); }
.map-wrap .map-fallback-link { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 320px; background: var(--bg-soft); color: var(--primary); font-weight: 600; text-align: center; padding: 20px; text-decoration: none; }
.map-wrap .map-fallback-link:hover { text-decoration: underline; }

/* ---------- Reusable responsive embeds (Google Maps / YouTube) ----------
   .orixy-map-wrapper / .orixy-video-wrapper: a self-contained,
   aspect-ratio-based box for any Google Maps or YouTube URL coming from
   a Customizer or Elementor field (see orixy_map_embed_html() and
   orixy_youtube_embed_url() in inc/template-tags.php). Width is always
   100% of the parent and height follows the aspect ratio, so these can
   never force horizontal overflow at any viewport. */
.orixy-map-wrapper, .orixy-video-wrapper {
  position: relative; width: 100%; max-width: 100%; overflow: hidden;
  border-radius: var(--radius-md);
}
.orixy-video-wrapper { aspect-ratio: 16 / 9; background: #000; }
.orixy-map-wrapper { aspect-ratio: 16 / 9; min-height: 220px; background: var(--bg-soft); }
.orixy-map-wrapper iframe, .orixy-video-wrapper iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.orixy-map-wrapper .orixy-map-fallback-link {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 20px; color: var(--primary); font-weight: 600; text-decoration: none;
}
.orixy-map-wrapper .orixy-map-fallback-link:hover { text-decoration: underline; }
.office-info { display: flex; flex-wrap: wrap; gap: 18px 24px; padding: 26px 30px; }
.office-info strong { display: block; font-size: 0.85rem; margin-bottom: 4px; }
.office-info span { color: var(--ink-soft); font-size: 0.85rem; }

.contact-card { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 40px; display: flex; flex-direction: column; }
.contact-card h3 { margin-bottom: 8px; }
.contact-card > p { color: var(--ink-soft); margin-bottom: 24px; font-size: 0.92rem; }

.form-group { margin-bottom: 18px; position: relative; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group textarea {
  width: 100%; min-width: 0; padding: 13px 16px; border: 1.5px solid #e3e5f2; border-radius: var(--radius-sm);
  font-size: 0.92rem; font-family: inherit; transition: border-color 0.25s;
}
.form-group textarea { resize: vertical; min-height: 110px; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); }
.error-msg { display: none; color: #ff4d6d; font-size: 0.78rem; margin-top: 6px; }
.form-group.invalid input, .form-group.invalid textarea { border-color: #ff4d6d; }
.form-group.invalid .error-msg { display: block; }

.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.82rem; color: var(--ink-soft); margin-top: 16px; cursor: pointer; }
.check-row input { margin-top: 3px; }
.check-row a { color: var(--primary); font-weight: 600; }
.check-row.invalid .error-msg { display: block; margin-left: 24px; }

.form-notice { margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.85rem; }
.form-notice.success { color: #1a9e5c; background: #e8fbf1; }
.form-notice.error { color: #c0263f; background: #fde9ec; }
.form-success { display: none; }
.form-success.show { display: block; }
/* honeypot field – hidden from real users */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ---------- Reviews strip ---------- */
.reviews { padding: 50px 0; }
.reviews-inner { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 30px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 34px 0; }
.review-item { display: flex; align-items: center; gap: 14px; font-size: 0.85rem; color: var(--ink-soft); }
.review-item i { font-size: 1.7rem; color: var(--ink); }
.review-item strong { color: var(--ink); font-family: var(--font-heading); }
.stars { color: #ffb400; font-size: 0.85rem; letter-spacing: 2px; }

/* ---------- CTA ---------- */
.cta { padding: 30px 0 80px; }
.cta-inner { background: #0e0b26; border-radius: var(--radius-lg); padding: 60px 70px; display: flex; align-items: center; justify-content: space-between; gap: 40px; color: #fff; flex-wrap: wrap; }
.cta-inner h3 { color: #fff; font-size: 1.4rem; margin-bottom: 20px; }
.cta-divider { width: 1px; height: 90px; background: rgba(255,255,255,0.15); }

/* ---------- Footer ---------- */
.site-footer { background: #0e0b26; color: #cfcbe5; padding-top: 60px; }
.footer-top { padding-bottom: 10px; }
.footer-tagline { color: #cfcbe5; font-size: 0.92rem; margin: 18px 0 20px; max-width: 320px; line-height: 1.6; }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 46px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer-col ul li { margin-bottom: 10px; font-size: 0.88rem; }
.footer-col a { color: #cfcbe5; }
.footer-col a:hover { color: var(--accent-2); }

.footer-col-company .footer-logo { color: #fff; margin-bottom: 4px; }
.footer-info-list { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.footer-info-row { display: flex; align-items: flex-start; gap: 10px; font-size: 0.85rem; color: #cfcbe5; line-height: 1.5; }
.footer-info-row i { color: var(--accent-2); width: 16px; flex-shrink: 0; margin-top: 3px; }
.footer-info-row a { color: #cfcbe5; }
.footer-info-row a:hover { color: var(--accent-2); }

.footer-col-social .social-links { flex-wrap: wrap; }
.footer-social-placeholder { font-size: 0.82rem; color: rgba(207,203,229,0.6); }

/* Footer Google Map (Section 4 of the footer — see orixy_map_embed_html()
   in inc/template-tags.php, shared with the Contact section's map so
   there's a single source of truth for resolving the embed URL). */
.footer-map { padding: 6px 0 44px; }
.footer-map .orixy-map-wrapper { max-width: 100%; }

/* Legacy widget-area footer columns (Appearance > Widgets), unrelated to the grid above */
.footer-widgets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 30px 0 46px; }
.footer-widgets .widget-title { color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer-widgets ul li { margin-bottom: 10px; font-size: 0.88rem; }
.footer-widgets a { color: #cfcbe5; }
.footer-widgets a:hover { color: var(--accent-2); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; flex-wrap: wrap; gap: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.copyright { font-size: 0.82rem; margin: 0; padding: 0; border: 0; text-align: left; }
.copyright a { color: var(--accent-2); }
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: #cfcbe5; font-size: 0.82rem; }
.footer-legal a:hover { color: var(--accent-2); }

.social-links { display: flex; gap: 12px; }
.social-links a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; flex-shrink: 0; }
.social-links a:hover { background: var(--primary); border-color: var(--primary); transform: translateY(-3px); }

/* ---------- Video Modal ---------- */
.video-modal { position: fixed; inset: 0; background: rgba(10, 8, 30, 0.85); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.video-modal.open { display: flex; }
.video-modal-inner { width: 100%; max-width: 860px; aspect-ratio: 16/9; position: relative; background: #000; border-radius: 14px; overflow: hidden; }
.video-close { position: absolute; top: -44px; right: 0; color: #fff; font-size: 2rem; line-height: 1; }

/* ---------- Scroll animations ---------- */
[data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
[data-animate="fade-right"] { transform: translateX(-30px); }
[data-animate="fade-left"] { transform: translateX(30px); }
[data-animate="fade-in"] { transform: none; }
[data-animate].in-view { opacity: 1; transform: translate(0, 0); }

/* ---------- WP core alignment helpers ---------- */
.alignwide { max-width: 1220px; margin-left: auto; margin-right: auto; }
.alignfull { max-width: none; }
.wp-caption-text { color: var(--ink-soft); font-size: 0.8rem; text-align: center; margin-top: 8px; }
.no-results { text-align: center; padding: 100px 0; color: var(--ink-soft); }

/* ---------- Search form (searchform.php, and the 404 / no-results fallback) ---------- */
.search-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 420px; margin: 0 auto;
}
.search-form-input {
  flex: 1 1 180px; min-width: 0; padding: 13px 16px;
  border: 1.5px solid #e3e5f2; border-radius: var(--radius-sm); font-family: inherit; font-size: 0.92rem;
}
.search-form-input:focus { outline: none; border-color: var(--primary); }
.search-form-submit { flex-shrink: 0; }
@media (max-width: 360px) {
  .search-form { flex-direction: column; }
  .search-form-submit { width: 100%; justify-content: center; }
}

/* ---------- Hero illustration (default, no-photo state) ---------- */
.hero-illustration { max-width: 480px; margin: 0 auto; }
.hero-illustration-svg { width: 100%; height: auto; display: block; overflow: visible; }
.hero-illustration .orixy-card-shadow { filter: drop-shadow(0 20px 40px rgba(30,20,90,0.18)); }
.hero-illustration .orixy-connector { stroke: #d9dbee; stroke-width: 2; stroke-dasharray: 4 6; }
.hero-illustration .orixy-satellite {
  transform-box: fill-box;
  transform-origin: center;
  animation: orixyFloat 4.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes orixyFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-illustration .orixy-satellite { animation: none; }
}

/* ---------- Why Choose Webrobi ---------- */
.whyus { padding: 100px 0; background: var(--bg-soft); }
.whyus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 10px; }
.whyus-card { background: #fff; border-radius: var(--radius-md); padding: 36px 26px; box-shadow: var(--shadow-card); transition: transform 0.3s ease; }
.whyus-card:hover { transform: translateY(-8px); }
.whyus-icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 12%, #fff);
  color: var(--primary); font-size: 1.35rem; margin-bottom: 18px;
}
.whyus-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.whyus-card p { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Our Process ---------- */
.process { padding: 100px 0; }
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 30px; margin-top: 20px; }
.process-step { position: relative; text-align: center; padding: 0 8px; }
.process-num {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(120deg, var(--primary), var(--accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem;
  margin: 0 auto 20px; box-shadow: var(--shadow-card); position: relative; z-index: 1;
}
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { color: var(--ink-soft); font-size: 0.9rem; }
.process-step::after {
  content: ''; position: absolute; top: 32px; left: calc(50% + 46px);
  width: calc(100% - 72px); height: 2px;
  background: repeating-linear-gradient(90deg, #d9dbee 0 8px, transparent 8px 16px);
}
.process-step:last-child::after { display: none; }

/* ---------- Portfolio / Case Studies ---------- */
.portfolio { padding: 100px 0; background: var(--bg-soft); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 20px; }
.portfolio-card { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; transition: transform 0.3s ease; }
.portfolio-card:hover { transform: translateY(-8px); }
.portfolio-thumb { height: 220px; overflow: hidden; position: relative; background: #e7e9f5; }
.portfolio-thumb img { width: 100%; height: 100%; object-fit: cover; }
.portfolio-tag { position: absolute; top: 16px; left: 16px; background: var(--primary); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 5px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.03em; }
.portfolio-body { padding: 26px 24px; }
.portfolio-body h3 { font-size: 1.1rem; margin-bottom: 8px; }
.portfolio-body p { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 14px; }
.portfolio-body a { color: var(--primary); font-weight: 600; font-size: 0.9rem; }
.portfolio-body a i { margin-left: 4px; }
.portfolio-empty-state {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  min-height: 200px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 40px; gap: 14px; margin-top: 20px;
}
.portfolio-empty-state i { font-size: 2rem; color: var(--primary); opacity: 0.4; }
.portfolio-empty-state p { color: var(--ink-soft); font-weight: 500; }

/* ---------- Results / Metrics ---------- */
.metrics { padding: 80px 0; background: #0e0b26; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.metrics-item strong {
  display: block; font-family: var(--font-heading); font-size: 2.4rem; font-weight: 700;
  background: linear-gradient(120deg, var(--accent), var(--primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.metrics-item span { color: rgba(255,255,255,0.7); font-size: 0.9rem; }

/* ============================================
   Responsive
   Desktop: 1200px+   Tablet: 768–1199px   Mobile: 320–767px
   ============================================ */

/* ---- Large tablet / small desktop transition ---- */
@media (max-width: 1199px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .whyus-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step::after { display: none; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .value-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .nordic-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 30px; }
  .footer-widgets { grid-template-columns: repeat(2, 1fr); }
  .container { padding: 0 20px; }
  .header-inner { padding: 16px 20px; gap: 14px; }
  .main-nav ul { gap: 22px; }
}

/* ---- Tablet: header switches to the mobile drawer nav to avoid
   the primary menu colliding with the logo/CTA at narrower widths.
   The CTA stays reachable inside the drawer (.mobile-nav-cta). ---- */
@media (max-width: 1080px) {
  .main-nav { position: fixed; top: 0; right: -300px; height: 100vh; width: min(300px, 82vw); background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,0.1); padding: 100px 30px 40px; transition: right 0.35s ease; z-index: 400; overflow-y: auto; }
  .main-nav.open { right: 0; }
  .main-nav ul { flex-direction: column; gap: 20px; }
  .main-nav ul ul { position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none; display: none; padding-left: 12px; }
  .main-nav li.submenu-open > ul { display: flex; }
  .hamburger { display: flex; }
  .header-cta { display: none; }
  .mobile-nav-cta { display: inline-flex; width: 100%; justify-content: center; margin-top: 30px; }
}

@media (max-width: 960px) {
  .hero-inner, .about-inner, .stats-inner, .testi-inner, .contact-inner { grid-template-columns: 1fr; }
  .hero-visual { height: 380px; margin-top: 40px; max-width: 420px; margin-left: auto; margin-right: auto; }
  .hero-illustration { margin-top: 40px; max-width: 340px; }
  .about-visual { order: 2; }
  .about-content { order: 1; }
  .skills { grid-template-columns: 1fr; }
  .skills-left { height: 320px; }
  .skills-right-inner { padding: 50px 30px; }
  .contact-inner { gap: 30px; }
  .map-wrap iframe, .map-wrap .map-fallback-link { min-height: 260px; }
}

/* ---- Mobile: 320–767px ---- */
@media (max-width: 767px) {
  .services-grid, .why-grid, .whyus-grid, .process-grid, .portfolio-grid, .metrics-grid, .blog-grid, .footer-widgets, .footer-grid { grid-template-columns: 1fr; }
  .value-strip-grid { grid-template-columns: 1fr; }
  .nordic-grid { grid-template-columns: repeat(2, 1fr); }
  .trusted-card { padding: 26px 22px; }
  .trusted-logos { gap: 22px; }
  .cta-inner { flex-direction: column; text-align: center; padding: 40px 26px; }
  .cta-divider { width: 100%; height: 1px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  .why-inner { padding: 34px 26px; }
  .stats-grid { gap: 18px 24px; }
  .contact-card { padding: 28px; }

  .container { padding: 0 18px; }
  .hero { padding: 60px 0 50px; }
  .hero-text h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .hero-desc { max-width: 100%; }
  .hero-actions { gap: 18px; }
  .about, .services, .whyus, .nordic, .process, .approach-video, .portfolio, .testimonials, .faq, .contact { padding-top: 60px; padding-bottom: 60px; }
  .section-head.center { margin-bottom: 34px; }

  .about-photo-wrap img { height: 280px; }
  .about-ring { width: 90px; height: 90px; bottom: -24px; left: -20px; }

  .service-card, .whyus-card { padding: 30px 22px; }
  .process-step { padding: 0; }

  .office-info { padding: 20px; gap: 14px 20px; }
  .form-group input, .form-group textarea { padding: 12px 14px; }

  .metrics-item strong { font-size: 1.9rem; }
  .why-grid { gap: 18px; }
}

/* ---- Small mobile: keep the hero photo cluster inside the viewport
   at narrow widths (320–479px) instead of overflowing horizontally. ---- */
@media (max-width: 479px) {
  .hero-visual { height: 300px; max-width: 260px; }
  .photo-main { width: 140px; height: 140px; right: 60px; top: 0; }
  .photo-small { width: 96px; height: 96px; right: 0; top: 148px; }
  .photo-bottom { width: 128px; height: 128px; right: 90px; bottom: 0; }
  .visual-card { max-width: 190px; padding: 10px 14px; left: 0; top: 110px; }
  .badge-icon { width: 32px; height: 32px; font-size: 0.75rem; }

  .cta-inner h3 { font-size: 1.2rem; }
  .nordic-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .nordic-card { padding: 22px 12px; }
  .header-inner { padding: 14px 16px; }
  .logo { font-size: 1.1rem; }
}

/* Every in-page section target gets breathing room under the sticky
   header, so both same-page smooth scroll and a direct #hash page
   load (e.g. clicking "Reviews" from another page) land the section
   heading clear of the header instead of underneath it. */
section[id], div[id].map-wrap {
  scroll-margin-top: 100px;
}
@media (max-width: 960px) {
  section[id] { scroll-margin-top: 84px; }
}