/* --------------------------------------------------------------
   VARIABLES
-------------------------------------------------------------- */

:root 
{ 
  --fonts:				"Geologica";
  --font-fallback: 		"Helvetica Neue", Helvetica, Arial, "Roboto", "Ubuntu", "Segoe UI", sans-serif, sans-sans, -apple-system;
}


/* --------------------------------------------------------------
   FONTs + TYPE FACES
-------------------------------------------------------------- */


@font-face {
  font-family: 'Geologica';
  src: url("../fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.woff2") format("woff2 supports variations"),
       url("../fonts/Geologica-VariableFont_CRSV,SHRP,slnt,wght.woff2") format("woff2-variations");
  font-weight: 100 900; /* Define the range for font-weight */
  font-display: swap;
  /* 
  
  'wght' 200, 'SHRP' 50, 'slnt' -12, 'CRSV' 0;
  
   */
}

.ff-cursive {
  font-family: 'Geologica';
  font-variation-settings: 'CRSV' 1;
}

.ff-thin {
  font-family: 'Geologica';
  font-variation-settings: 'wght' 100;
}

.ff-light {
  font-family: 'Geologica';
  font-variation-settings: 'wght' 200;
}

.ff-reg {
  font-family: 'Geologica';
  font-variation-settings: 'wght' 350,;
}

.ff-med {
  font-family: 'Geologica';
  font-variation-settings: 'wght' 450;
}

.ff-ital {
  font-family: 'Geologica';
  font-variation-settings: 'slnt' -12;
}

.ff-ital-half {
  font-family: 'Geologica';
  font-variation-settings: 'slnt' -6;
}

.ff-sharp {
  font-family: 'Geologica';
  font-variation-settings: 'SHRP' 100;
}

.ff-sharp-3qtr {
  font-family: 'Geologica';
  font-variation-settings: 'SHRP' 75;
}

.ff-sharp-half {
  font-family: 'Geologica';
  font-variation-settings: 'SHRP' 50;
}

.ff-sharp-qtr {
  font-family: 'Geologica';
  font-variation-settings: 'SHRP' 25;
}



/* --------------------------------------------------------------
   BASE ELEMENTS
-------------------------------------------------------------- */

body,html
    {background-size:var(--bg-behavior); overflow:var(--overflow-behavior); margin:0; font-family:var(--fonts); font-size:1rem; font-weight:200; line-height:1.5; color:var(--color-text); text-align:left; background:transparent; background-attachment:fixed; text-decoration:none; text-box: trim-both cap alphabetic; letter-spacing: 0.05rem; }
p
    {font-size:1rem; font-weight:400;text-decoration:none}
a
    {color:var(--color-accent);font-weight:500;text-decoration:none}
a:link,a:visited,a:hover,a:active
    {text-decoration:none}
a:hover
    {cursor:pointer}
img,video
    {border:0}
h1,h2,h3,h4
    {line-height:1.3}
hr
	{max-width: 50%; opacity:0.2}


/* --------------------------------------------------------------
   LAYOUT UTILITIES, IMAGERY AND POSITIONING
-------------------------------------------------------------- */

.all_max
    {max-height:100%;max-width:100%}
.all_min
    {min-height:100%;min-width:100%}
.bg
    {background-color:var(--color-bg)}
.clearfix::after
    {content:"";clear:both;display:table}
.contain
    {object-fit:contain}
.cover
    {object-fit:cover}
.dropshadow
    {box-shadow:0px 2px 16px var(--color-dropshadow)}
.hide
    {display:none}
.max_h
    {max-height:100%;width:auto}
.max_w
    {max-width:100%;height:auto}
.min_h
    {min-height:100%;width:auto}
.min_w
    {min-width:100%;height:auto}
.scaledown
    {object-fit:scale-down}
.wh
    {width:100%;height:100%}
.z10 
	{z-index:10;}
.z100 
	{z-index:100;}
.z10neg 
	{z-index:-10;}
.z100neg
	{z-index:-100;}

/* --------------------------------------------------------------
   BUTTONS
-------------------------------------------------------------- */

.button
    {background-color:var(--color-bg);text-box: trim-both cap alphabetic;color:var(--color-text);font-size:1rem;border:none;border-radius:4px;display:inline-block;padding:12px 24px;vertical-align:middle;overflow:hidden;text-decoration:none;text-align:center;cursor:pointer;white-space:nowrap;text-box: trim-both cap alphabetic;}
.button:hover
    {background-color:var(--color-accent);text-decoration:none;text-box: trim-both cap alphabetic;}

/* --------------------------------------------------------------
   NAVIGATION & TOP BANNER
-------------------------------------------------------------- */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 0;
    z-index: 1000;
    background: var(--color-menubar);
    -webkit-backdrop-filter: blur(var(--blur));
    backdrop-filter: blur(var(--blur));
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
}

.nav-logo .logo {
    width: 150px;
    height: auto;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 400;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--color-text-hover);
}

.nav-cta {
    background-color: var(--color-button);
    color: var(--color-button-text);
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-cta:hover {
    background-color: var(--color-button-hover);
    color: var(--color-button-text-hover);
}


.icon {
  width: 2rem;
  height: 2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  color: var(--color-text, #000); /* Default color */
  transition: color 0.2s ease;
}

.icon-p      { background-image: var(--icon-email); }

.icon:hover {
  color: var(--color-accent, #f90); /* Change color on hover */
}

.icon_p .icon
	{background:var(--icon-portfolio) center/cover no-repeat}

.icon_p:hover .icon
    {background:var(--icon-portfolio-hover) center/cover no-repeat}

.icon_p,.icon_s,.icon_r,.icon_e
    {color:var(--color-text);display:inline-flex;align-items:center;vertical-align:middle;text-decoration:none}
.icon_p .icon,.icon_s .icon,.icon_r .icon,.icon_e .icon
    {width:24px;height:24px;margin-right:4px;background-size:cover;background-repeat:no-repeat;background-position:center;vertical-align:middle}
.icon_p:hover,.icon_s:hover,.icon_r:hover,.icon_e:hover
    {color:var(--color-text-hover)}
 
.icons,.icons_hidden
    {position:fixed;top:0;height:40px;right:24px;padding-top:14px;z-index:1001}
.icons_hidden
    {visibility:hidden;z-index:-1000}
#icons_h_p
    {background:var(--icon-portfolio-hover) center/cover no-repeat}

    
.iconlabel
    {skew(0deg,16deg); letter-spacing: 0.086rem;text-box: trim-both cap alphabetic; font-weight:400; font-size:0.925rem; margin-right:4px; text-transform: uppercase; padding-left:2px; padding-right:8px;}

/* --------------------------------------------------------------
   MAIN SECTIONS
-------------------------------------------------------------- */

/* Hero Section */
.hero {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
}

.hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.hero-title {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.3;
    margin: 0;
    color: var(--color-text);
}

/* Services Section */
.services {
    padding: 2rem 0;
}

.services-container {
    max-width: 1280px;
    margin: auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: auto;
    text-align: center;
    justify-items: center;
}

.service-column {
    max-width: 390px;
}

.service-column h3 {
    font-size: 1.5rem;
    font-weight: 350;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.service-column p {
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.6;
    color: var(--color-text);
    opacity: 0.8;
}

.positioning {
    padding: 2rem 0;
}

.positioning-container {
    max-width: 1280px;
    margin: auto;
    padding: 0 2rem;
    display: grid;
    text-align: center;
    justify-items: center;
}
.positioning-column {
    max-width: 600px;
}
.positioning-column h3 {
    font-size: 1.5rem;
    font-weight: 350;
    margin-bottom: 0rem;
    color: var(--color-text);
}

.positioning-column p {
    font-size: 1rem;
    font-weight: 200;
    line-height: 1.6;
    color: var(--color-text);
    opacity: 0.8;
    margin-top: 0rem;
}

/* Testimonials Section */
.testimonials {
    padding: 3rem 0;
}

.testimonials-container {
    max-width: 1280px;
    margin: auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: auto;
    text-align: center;
    justify-items: center;
}

.testimonial {
    text-align: center;
}

.testimonial p {
    max-width: 360px;
    font-size: 1.2rem;
    font-weight: 100;
    font-variation-settings: 'slnt' -8;
    color: var(--color-text);
    margin: 0;
    line-height: 1.6;
}

/* Contact Section */
.contact {
    padding: 2rem 0;
    background: var(--color-bga);
}

.contact-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 2rem;
}

.contact-content {
    text-align: center;
    margin-bottom: 3rem;
}

.contact h2 {
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.contact p {
    font-size: 1rem;
    color: var(--color-text);
    opacity: 0.8;
    margin-bottom: 2rem;
    line-height: 1.6;
    font-weight: 150;
}

/* Contact Form Styling */
.contact-form {
    text-align: left;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    margin-bottom: 1.5rem;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 150;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-family: var(--fonts);
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.0);
    color: var(--color-text);
    font-family: var(--fonts);
    font-size: 1rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.2);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text);
    font-variation-settings: 'slnt' -6;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit {
    text-align: center;
    margin-top: 2rem;
}

.submit-btn {
    background-color: var(--color-button);
    color: var(--color-button-text);
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 40px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
}

.submit-btn:hover {
    background-color: var(--color-button-hover);
    color: var(--color-button-text-hover);
}


/* Footer */
.footer {
    padding: 1rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.footer-column h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.footer-column a:hover {
    opacity: 1;
    color: var(--color-text-hover);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3rem;
}

.footer-bottom p {
    font-size: 0.75rem;
    color: var(--color-text);
    opacity: 0.5;
    margin: 0;
}

/* --------------------------------------------------------------
   MEDIA QUERIES
-------------------------------------------------------------- */

@media screen and (max-width: 1024px) {
    .hero-title {
        font-size: 3rem;
    }
    
    .services-container {
        gap: 3rem;
    }
    
    .testimonials-container {
        gap: 2rem;
    }
    
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .nav-menu {
        gap: 1rem;
    }
    
    .nav-link {
        font-size: 0.8rem;
    }
    
    .nav-container {
        padding: 0 1rem;
    }
    
    
    .iconlabel {
        letter-spacing: 0.05rem;
        position: relative;
        top: 0;
        font-size: 0.925rem;
        display: none;
        text-box: trim-both cap alphabetic;
        text-transform: uppercase;
    }
}

@media screen and (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .nav-container {
        justify-content: space-between;
        padding: 0 1rem;
    }
    
    .nav-cta {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
    
    .hero-content,
    .services-container,
    .testimonials-container,
    .contact-container,
    .footer-container {
        grid-template-columns: 1fr;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .services {
        padding: 4rem 0;
    }
    
    .testimonials {
        padding: 3rem 0;
    }
    
    .contact {
        padding: 3rem 0;
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-container {
        max-width: 100%;
    }
    
    .footer {
        padding: 3rem 0 2rem;
    }
}