@import url('./00-settings/variables.css?v=3.1.10');
@import url('./20-elements/typography.css?v=3.1.10');
@import url('./30-components/1vs2.css?v=3.3.128');
@import url('./30-components/tech-platforms.css?v=3.3.112');
@import url('./30-components/button.css?v=3.3.52');
@import url('./30-components/hero.css?v=3.3.88');
@import url('./30-components/frontpage-hero-banner.css?v=3.3.182');
@import url('./30-components/card.css?v=3.1.10');
@import url('./30-components/services.css?v=3.1.10');
@import url('./30-components/pricing.css?v=3.1.10');
@import url('./30-components/roll-process.css?v=3.3.106');
@import url('./30-components/cta.css?v=3.1.11');
@import url('./30-components/contact-form.css?v=3.3.143');
@import url('./30-components/case-study.css?v=3.1.10');
@import url('./30-components/case-story.css?v=3.3.95');
@import url('./30-components/accordion.css?v=3.3.17');
@import url('./30-components/closed-accordion.css?v=3.3.52');
@import url('./30-components/comparison-table.css?v=3.3.133');
@import url('./30-components/faq.css?v=3.3.132');
@import url('./30-components/testimonials.css?v=3.3.113');
@import url('./30-components/why-us.css?v=3.3.82');
@import url('./30-components/why-that.css?v=3.3.65');
@import url('./30-components/why-sharks.css?v=3.1.10');
@import url('./30-components/why-sharks-2.css?v=3.1.10');
@import url('./30-components/why-we.css?v=3.1.10');
@import url('./30-components/sharks-headings.css?v=3.3.70');
@import url('./30-components/content-grey.css?v=3.3.0');
@import url('./30-components/service-cards.css?v=3.3.66');
@import url('./30-components/specialist.css?v=3.1.19');
@import url('./30-components/team.css?v=3.3.116');
@import url('./30-components/label-bar.css?v=3.1.10');
@import url('./30-components/sharks-heading-2.css?v=3.3.25');
@import url('./30-components/heading-half.css?v=3.1.12');
@import url('./30-components/inquiry.css?v=3.3.179');
@import url('./30-components/inquiry-2.css?v=3.3.177');
@import url('./30-components/inquiry-3.css?v=3.3.181');
@import url('./30-components/consultation.css?v=3.1.10');
@import url('./30-components/ten-steps.css?v=3.3.102');
@import url('./30-components/select-text.css?v=3.1.11');
@import url('./30-components/spacer.css?v=3.1.10');
@import url('./30-components/wide-picture.css?v=3.1.10');
@import url('./30-components/content-highlighted.css?v=3.1.10');
@import url('./30-components/how-to-start.css?v=3.3.105');
@import url('./30-components/four-steps.css?v=3.3.183');
@import url('./30-components/experience.css?v=3.1.10');
@import url('./30-components/certificates.css?v=3.1.10');
@import url('./30-components/table-2.css?v=3.3.114');
@import url('./30-components/two-box-cta.css?v=3.3.80');
@import url('./30-components/what-includes.css?v=3.2.6');
@import url('./30-components/two-tab-right.css?v=3.3.168');
@import url('./30-components/who-we-are.css?v=3.1.10');
@import url('./30-components/our-facts.css?v=3.3.164');
@import url('./30-components/max-accordion.css?v=3.3.166');
@import url('./30-components/portfolio.css?v=3.1.10');
@import url('./30-components/works5.css?v=3.3.100');
@import url('./30-components/works3.css?v=3.1.10');
@import url('./30-components/works1.css?v=3.2.6');
@import url('./30-components/blog-posts.css?v=3.3.170');
@import url('./30-components/single-post.css?v=3.3.184');
@import url('./30-components/author-page.css?v=3.3.40');
@import url('./30-components/block-styles.css?v=3.1.10');
@import url('./30-components/mouse-trail.css?v=3.1.12');
@import url('./30-components/modal.css?v=3.1.10');
@import url('./30-components/modal-legacy.css?v=3.1.10');
@import url('./30-components/big-form.css?v=3.3.173');
@import url('./30-components/icon-cards.css?v=3.1.10');
@import url('./30-components/two-column-grey.css?v=3.3.78');
@import url('./30-components/h1-text-cta.css?v=3.3.4');
@import url('./30-components/hero-portfolio.css?v=3.3.185');
@import url('./30-components/two-column-pictures-cta.css?v=3.3.110');
@import url('./40-layout/grid.css?v=3.1.10');
@import url('./40-layout/header.css?v=3.3.118');
/* megamenu.css is enqueued separately in inc/theme.php with filemtime() versioning */
@import url('./40-layout/footer.css?v=3.3.154');
@import url('./40-layout/blog.css?v=3.1.10');

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overflow-x: clip;
  max-width: 100%;
  /* Black root background so the overscroll / rubber-band bounce at the very top
     (revealed through the transparent header) shows black, not the white body —
     fixes the brief white strip when scrolling all the way up. */
  background-color: #000000;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

#page,
.site {
  margin: 0;
  padding: 0;
}

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

/* Container */
.container {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.container--narrow {
  width: min(800px, 92vw);
}

.container--wide {
  width: min(1400px, 92vw);
}

/* Section spacing */
.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
  margin: 0;
}

.section--sm {
  padding: clamp(2rem, 5vw, 4rem) 0;
  margin: 0;
}

.section--lg {
  padding: clamp(4rem, 10vw, 8rem) 0;
  margin: 0;
}

/* Remove all spacing between blocks */
.entry-content {
  margin: 0 !important;
  padding: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* Stray empty paragraph blocks (the editor keeps re-adding one at the very top of
   the page content) create a ~16px gap that shows the white body above dark
   sections — looks like a white strip under the header. Hide any empty paragraph
   so the gap can never reappear, regardless of content edits. */
.site-main > p:empty,
.entry-content > p:empty,
.site-main .wp-block-paragraph:empty {
  display: none !important;
}

/* Remove spacing from ACF blocks */
.entry-content>[data-type^="acf/"],
.entry-content>.block-cta,
.entry-content>.block-content-grey,
.entry-content>.block-content-highlighted,
.entry-content>.block-table-2,
.entry-content>.block-two-box-cta,
.entry-content>.block-what-includes,
.entry-content>.block-service-cards,
.entry-content>.block-specialist,
.entry-content>.block-team,
.entry-content>.block-label-bar,
.entry-content>.block-testimonials,
.entry-content>.block-hero,
.entry-content>.sharks-headings,
.entry-content>.block-case-story,
.entry-content>.block-works5,
.entry-content>.block-works3,
.entry-content>.block-works1,
.entry-content>.block-wide-picture,
.entry-content>.block-four-steps,
.entry-content>.block-roll-process,
.entry-content>.block-h1-text-cta,
.entry-content>.block-two-column-grey,
.entry-content>.block-hero-portfolio {
  margin: 0 !important;
}




/* Entry Content - add spacing to Gutenberg blocks (but not ACF blocks) */
.entry-content .wp-block-columns:not(:has([data-type^="acf/"])),
.entry-content .wp-block-group:not(:has([data-type^="acf/"])),
.entry-content .wp-block-cover,
.entry-content>p,
.entry-content>h1,
.entry-content>h2,
.entry-content>h3,
.entry-content>h4,
.entry-content>h5,
.entry-content>h6,
.entry-content>ul,
.entry-content>ol {
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Ensure ACF blocks have no extra padding from entry-content */
.entry-content>.sharks-headings,
.entry-content>.block-cta,
.entry-content>.block-content-grey,
.entry-content>.block-content-highlighted,
.entry-content>.block-table-2,
.entry-content>.block-two-box-cta,
.entry-content>.block-what-includes,
.entry-content>.block-service-cards,
.entry-content>.block-specialist,
.entry-content>.block-team,
.entry-content>.block-label-bar,
.entry-content>.block-testimonials,
.entry-content>.block-hero,
.entry-content>.block-case-story,
.entry-content>.block-works5,
.entry-content>.block-works3,
.entry-content>.block-works1,
.entry-content>.block-wide-picture,
.entry-content>.block-four-steps,
.entry-content>.block-roll-process,
.entry-content>.block-h1-text-cta,
.entry-content>.block-two-column-grey,
.entry-content>.block-hero-portfolio {
  padding-inline: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove spacing before footer */
.site-main,
#main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-footer {
  margin-top: 0 !important;
}

/* Remove padding for columns that contain heading-half */
.entry-content .wp-block-columns:has(.heading-half) {
  padding: 0 !important;
  margin: 0 !important;
  margin-inline: auto !important;
  gap: 0 !important;
  max-width: 1440px !important;
}

.entry-content .wp-block-column:has(.heading-half) {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  position: relative;
  overflow: visible;
}

/* Extend heading-half gray bg to left viewport edge */
.wp-block-column:has(.heading-half)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background-color: #F7F7F5;
}

/* Also remove gap from wp-block-columns itself */
.wp-block-columns:has(.heading-half) {
  gap: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  --wp--style--block-gap: 0 !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* Remove any block gap/spacing */
.wp-block-columns:has(.heading-half)>* {
  margin: 0 !important;
}

/* Remove margin-top after heading-half */
.entry-content .heading-half+*,
.entry-content .wp-block-columns:has(.heading-half)+* {
  margin-top: 0 !important;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link for accessibility (WCAG 2.1 AA) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Screen reader text - same as visually-hidden but with alias */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.screen-reader-text:focus {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #000;
  color: #fff;
  z-index: 100000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Override container max-width to 1440px */
:root {
  --container-max: 1440px !important;
}

/* Update container--wide to match 1440px */
.container--wide {
  width: min(1440px, 92vw);
}

/* Mobile visibility utility */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}
/* ===== IMPROVED RESPONSIVE BREAKPOINTS ===== */

/* Small mobile devices */
@media (max-width: 576px) {
  :root {
    --container-padding: 1rem;
  }

  body {
    font-size: 14px;
  }

  .container {
    padding-inline: 1rem;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
  :root {
    --container-padding: 1.5rem;
  }

  .container {
    padding-inline: 1.5rem;
  }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 992px) {
  :root {
    --container-padding: 2rem;
  }

  .container {
    padding-inline: 2rem;
  }
}

/* Desktop */
@media (min-width: 993px) and (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

/* Large desktop */
@media (min-width: 1201px) {
  .container {
    max-width: var(--container-max, 1440px);
  }
}

/* BEGIN HERMES BLOG ALTERNATING ROW LAYOUT 2026-06-08
   Blog archive: 2 posts left, next 2 posts shifted right, matching sharks.pw reference. */
@media (min-width: 1024px) {
  body.blog .blog-posts-grid,
  body.archive.category .blog-posts-grid {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
  }

  body.blog .blog-posts-grid .blog-posts-row,
  body.archive.category .blog-posts-grid .blog-posts-row {
    display: flex;
    gap: 20px;
    width: 754px;
    margin-bottom: 20px;
  }

  body.blog .blog-posts-grid .blog-posts-row:nth-child(odd),
  body.archive.category .blog-posts-grid .blog-posts-row:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
  }

  body.blog .blog-posts-grid .blog-posts-row:nth-child(even),
  body.archive.category .blog-posts-grid .blog-posts-row:nth-child(even) {
    margin-left: 388px;
    margin-right: 0;
  }

  body.blog .blog-posts-grid .blog-posts-row .blog-post-card,
  body.archive.category .blog-posts-grid .blog-posts-row .blog-post-card {
    width: 367px;
    flex: 0 0 367px;
  }
}

@media (max-width: 1023px) {
  body.blog .blog-posts-grid .blog-posts-row,
  body.archive.category .blog-posts-grid .blog-posts-row {
    margin-left: 0;
    width: auto;
  }
}
/* END HERMES BLOG ALTERNATING ROW LAYOUT 2026-06-08 */