@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:wght@400;700&display=swap');

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  scroll-behavior: smooth; /* For smooth scrolling between sections if you add nav links */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  font-family: 'Atkinson Hyperlegible Mono', monospace; /* Updated font stack to MONO */
  line-height: 1.6;
  background-color: #333; /* Darker base background for contrast with sections */
  color: #fff; /* Default text color, can be overridden per section */
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* General Margin Reset for common block elements */
h1, h2, h3, h4, h5, h6,
p,
ul, ol, /* Note: list-style and padding-left might still need adjustment per design */
figure,
blockquote,
dl, dd {
    margin: 0;
}

/* Main stylesheet for Your Organization's website */

.video-splash {
    height: 100vh;
    width: 100vw;
    position: relative;
    overflow: visible; /* Changed from hidden to allow shadows to extend beyond bounds */
    background: linear-gradient(
        to bottom,
        #1a1a1a 0%,     /* Dark gray at top */
        #1a1a1a 60%,    /* Stay dark for 60% */
        #d0d0d0 100%    /* Light gray at bottom - matches About section start */
    );
    background-image: url('../assets/splashback.png'); /* Temporarily disabled to test fallback */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bg-video-loop {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover; /* Cover the area, might crop video */
}

.video-overlay {
    position: relative; /* Changed from absolute to be part of flex flow if needed, or keep absolute if preferred */
    z-index: 1;
    text-align: center;
    width: 100%; /* Fill container width */
    max-width: 100vw; /* Ensure it doesn't exceed viewport width */
    height: 100%; /* Fill container height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Align content to top */
    padding-top: 10vh; /* Push content down from very top - adjust this value to taste */
    gap: 20px; /* Space between logos */
    box-sizing: border-box; /* Include padding in height calculation */
    /* background-color: rgba(0,0,0,0.3); Optional: slight dark overlay for text readability */
    /* padding: 20px; */
}

.company-logo {
    width: 90%; /* Nearly full width */
    max-width: 1200px; /* Prevent it from getting too large on ultra-wide screens */
    height: auto; /* Maintain aspect ratio */
    color: #fff;
    opacity: 0;
    animation: fadeInCompanyName 3s ease-out 0s forwards; /* Fade in after 3 seconds */
    filter: 
        drop-shadow(0 0 20px rgba(0,0,0,0.8))     /* Larger, softer shadow */
        drop-shadow(0 0 10px rgba(0,0,0,0.9))     /* Medium shadow for depth */
        drop-shadow(0 0 3px rgba(255,255,255,0.5)); /* Subtle white glow for contrast */
    padding: 40px; /* Increased padding to accommodate larger shadows */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow: visible; /* Allow shadow to extend beyond bounds */
    will-change: filter, opacity; /* Maintain rendering context */
    transform: translateZ(0); /* Force hardware acceleration */
}

.secondary-logo {
    width: 25%; /* About 1/4 the width */
    max-width: 300px; /* Prevent it from getting too large */
    height: auto; /* Maintain aspect ratio */
    opacity: 0;
    animation: fadeInCompanyName 3s ease-out 0s forwards; /* Fade in slightly after the main logo */
    filter: 
        drop-shadow(0 0 20px rgba(0,0,0,0.8))     /* Larger, softer shadow */
        drop-shadow(0 0 10px rgba(0,0,0,0.9))     /* Medium shadow for depth */
        drop-shadow(0 0 3px rgba(255,255,255,0.5)); /* Subtle white glow for contrast */
    padding: 40px; /* Increased padding to accommodate larger shadows */
    box-sizing: border-box; /* Include padding in width calculation */
    overflow: visible; /* Allow shadow to extend beyond bounds */
    will-change: filter, opacity; /* Maintain rendering context */
    transform: translateZ(0); /* Force hardware acceleration */
}

@keyframes fadeInCompanyName {
    to {
        opacity: 1;
    }
}

.fullscreen-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    text-align: center;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    position: relative; /* For potential overlay children */
}

#about {
    background: 
        linear-gradient(
            to right,
            rgba(255, 0, 0, 0.05),      /* Red */
            rgba(255, 127, 0, 0.05),    /* Orange */
            rgba(255, 255, 0, 0.05),    /* Yellow */
            rgba(0, 255, 0, 0.05),      /* Green */
            rgba(0, 0, 255, 0.05),      /* Blue */
            rgba(75, 0, 130, 0.05),     /* Indigo */
            rgba(148, 0, 211, 0.05)     /* Violet */
        ),
        linear-gradient(
            to bottom, 
            #d0d0d0 0%, 
            #777777 50%, 
            #4a4a4a 100%
        ); /* Horizontal rainbow on top, vertical gray gradient underneath */
    color: #000; /* Black text */
    justify-content: center; /* Center the content vertically */
    align-items: center; /* Horizontally center the content blocks (h2, p, etc.) */
    gap: 40px; /* Cozy spacing between h2 and p */
    /* text-align: left; This will be set on children individually or via a common rule */
    overflow: hidden; /* To contain the ::before pseudo-element */
    /* Inherits display: flex; flex-direction: column; from .fullscreen-section */
}

/* Common styles for #about children that are direct flex items */
#about h2,
#about p {
    width: 80%; /* Common width for these elements */
    text-align: left; /* Common text alignment */
    position: relative; /* Necessary for z-index to take effect and be above ::before */
    box-sizing: border-box; /* Ensure padding doesn't expand width if added later */
    margin: 0; /* Reset margins */
}

#about h2 {
    font-size: 10vh;
    z-index: 1; /* Above ::before */
    /* Margins (top/bottom) removed as flex parent handles spacing */
}

#about p {
  
    font-size: 4vh;
    z-index: 1; /* Above ::before */
    /* Removed absolute positioning, width/text-align now common, internal flex removed */
    /* If p needs to grow to fill space, add flex-grow: 1; here.
       With justify-content: space-between on parent and three children,
       it will be spaced evenly */
}

/* Previous specific rules for #about h2 (including the one with margin-top and the larger one),
   #about p (with absolute positioning), and the old #about h2, #about p combined rule
   have been replaced/consolidated into the structure above.
*/
footer {
    text-align: center;
    padding: 1.5rem 1rem; /* Slightly more padding */
    background: #1a1a1a; /* Darkest gray */
    color: #aaa;
    /* position: fixed; // Removed fixed positioning */
    /* bottom: 0; */
    /* width: 100%; */
}

/* Subtle link styling */
.subtle-link {
    color: inherit; /* Inherit the color from parent (black in this case) */
    text-decoration: underline; /* Add underline */
    font-weight: inherit; /* Keep the same font weight as surrounding text */
    transition: opacity 0.2s ease; /* Smooth hover effect */
}

.subtle-link:hover {
    opacity: 0.7; /* Slight transparency on hover for feedback */
}

/* Prevent horizontal scroll on body and html */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    /* Adjust logo container padding for mobile */
    .video-overlay {
        padding-top: 5vh; /* Reduced from 10vh */
    }
    
    /* Scale down logos for mobile */
    .company-logo {
        width: 95%; /* Slightly wider on mobile */
        padding: 20px; /* Reduced from 40px */
    }
    
    .secondary-logo {
        width: 40%; /* Increased from 25% for better visibility */
        padding: 20px; /* Reduced from 40px */
    }
    
    /* Fix font sizes for mobile */
    #about h2 {
        font-size: clamp(2.5rem, 8vw, 4rem); /* Responsive sizing with min/max */
    }
    
    #about p {
        font-size: clamp(1rem, 4vw, 1.5rem); /* Responsive sizing with min/max */
    }
    
    /* Adjust section padding */
    .fullscreen-section {
        padding: 20px 15px; /* Reduced from 40px 20px */
    }
    
    /* Ensure About content fits well */
    #about h2,
    #about p {
        width: 90%; /* Increased from 80% for mobile */
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .video-overlay {
        padding-top: 3vh; /* Even less padding on very small screens */
    }
    
    .secondary-logo {
        width: 50%; /* Make it more visible on tiny screens */
    }
}

/* Handle landscape mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .video-overlay {
        padding-top: 2vh; /* Minimal padding in landscape */
    }
    
    #about h2 {
        font-size: clamp(2rem, 6vw, 3rem); /* Smaller in landscape */
    }
}

/* Previous specific rules for #about h2 (including the one with margin-top and the larger one),
   #about p (with absolute positioning), and the old #about h2, #about p combined rule
   have been replaced/consolidated into the structure above.
*/
footer {
    text-align: center;
    padding: 1.5rem 1rem; /* Slightly more padding */
    background: #1a1a1a; /* Darkest gray */
    color: #aaa;
    /* position: fixed; // Removed fixed positioning */
    /* bottom: 0; */
    /* width: 100%; */
}