/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

* {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><line x1="8" y1="0" x2="8" y2="5" stroke="black" stroke-width="1"/><line x1="8" y1="11" x2="8" y2="16" stroke="black" stroke-width="1"/><line x1="0" y1="8" x2="5" y2="8" stroke="black" stroke-width="1"/><line x1="11" y1="8" x2="16" y2="8" stroke="black" stroke-width="1"/></svg>') 8 8, crosshair !important;
}

body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: black;
    background-color: white;
    line-height: 1.4;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><line x1="8" y1="0" x2="8" y2="5" stroke="black" stroke-width="1"/><line x1="8" y1="11" x2="8" y2="16" stroke="black" stroke-width="1"/><line x1="0" y1="8" x2="5" y2="8" stroke="black" stroke-width="1"/><line x1="11" y1="8" x2="16" y2="8" stroke="black" stroke-width="1"/></svg>') 8 8, crosshair !important;
}

/* Container with margins */
.container {
    margin: 124px 309px 0 309px;
}

/* Grid Layout */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
}

.column {
    padding: 20px 0;
}

/* Move column 3 to the left */
.column:nth-child(3) {
    margin-left: -40px;
}

/* All text should be body text - Arial 10px */
.column h1,
.column p {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: black;
    font-weight: normal;
    margin: 0;
    margin-bottom: 5px;
}

.column h1:last-child,
.column p:last-child {
    margin-bottom: 0;
}

/* Text before spaced element - no bottom margin */
.before-spaced {
    margin-bottom: 0 !important;
}

/* Spaced text with 180px margin from previous text */
.spaced-text {
    margin-top: 180px !important;
}

/* Align text with Making in first column */
.align-with-making {
    margin-top: 159px !important;
}

/* Align email with Contact in first column */
.align-with-contact {
    margin-top: 135px !important;
}

/* Keep text on one line, even if it extends beyond column */
.no-wrap {
    white-space: nowrap;
}



/* Links styling - only underline */
a {
    color: black !important;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-decoration: underline;
    font-weight: normal;
    transition: text-decoration 0.2s ease;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4" fill="black"/></svg>') 6 6, pointer;
}

a:hover {
    color: black !important;
    text-decoration: line-through;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4" fill="black"/></svg>') 6 6, pointer;
}

a:visited,
a:active {
    color: black !important;
    text-decoration: underline;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="4" fill="black"/></svg>') 6 6, pointer;
}

/* Mobile Responsive - 1 column */
@media (max-width: 768px) {
    .container {
        margin: 28px 40px 0 40px;
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
    
    /* Reset column 3 margin on mobile */
    .column:nth-child(3) {
        margin-left: 0;
    }
    
    .spaced-text {
        margin-top: 90px !important;
    }
    
    .align-with-making {
        margin-top: 80px !important;
    }
    
    .align-with-contact {
        margin-top: 72px !important;
    }
}