/* =========================================

TOM GROWS BRANDS
FINAL SITE-WIDE STYLESHEET

PART 1
Reset / Global / Typography / Navigation /
Hero / About Profile

========================================= */



/* =========================
RESET
========================= */


*,
*::before,
*::after {

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html {

    scroll-behavior:smooth;

}


body {

    background:#fff;
    color:#111;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    overflow-x:hidden;

}



img {

    max-width:100%;
    height:auto;
    display:block;

}



a {

    color:inherit;
    text-decoration:none;

}



p {

    line-height:1.55;

}



::selection {

    background:#111;
    color:#fff;

}





/* =========================
GLOBAL CONTAINERS
========================= */


.container {

    width:calc(100% - 80px);
    max-width:1280px;
    margin:0 auto;

}



.section {

    padding:110px 0;

}



.content-width {

    max-width:750px;

}





/* =========================
TYPOGRAPHY
========================= */


h1,
h2,
h3,
h4 {

    font-weight:700;
    letter-spacing:-0.075em;
    line-height:.95;

}



h1 {

    font-size:clamp(60px,9vw,130px);

}



h2 {

    font-size:clamp(45px,7vw,100px);

}



h3 {

    font-size:clamp(35px,5vw,65px);

}



.label,
.section-label,
.eyebrow,
.hero-label {

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#666;

}





/* =========================
HEADER / NAVIGATION
========================= */


.site-header {

    width:calc(100% - 80px);

    max-width:1280px;

    margin:0 auto;

    border-bottom:1px solid #ddd;

}



.navigation {

    height:80px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.brand {

    font-size:14px;

    font-weight:bold;

    letter-spacing:.12em;

}



.nav-links {

    display:flex;

    gap:35px;

    list-style:none;

}



.nav-links a {

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

}



.nav-links a:hover {

    text-decoration:underline;

}





/* =========================
HERO
========================= */


.hero {

    padding-top:100px;

    padding-bottom:120px;

}



.hero .eyebrow {

    margin-bottom:45px;

}



.hero h1 {

    max-width:1200px;

}





/* =========================
ABOUT PROFILE
========================= */


.about-profile {

    border-top:1px solid #111;

}



.about-profile .container {

    display:grid;

    grid-template-columns:350px 1fr;

    gap:80px;

    align-items:start;

}



.profile-image {

    position:sticky;

    top:40px;

}



.profile-image img {

    width:100%;

    aspect-ratio:4 / 5;

    object-fit:cover;

}



.profile-copy {

    max-width:750px;

}



.profile-copy p {

    font-size:22px;

    line-height:1.5;

    letter-spacing:-.02em;

    margin-bottom:35px;

}
/* =========================
STATEMENT
========================= */


.statement-large {

    width:100vw;

    margin-left:calc(50% - 50vw);

    background:#111;

    color:#fff;

    padding:120px 40px;

}



.statement-large h2 {

    max-width:1200px;

    font-size:clamp(50px,8vw,120px);

    letter-spacing:-.09em;

}





/* =========================
PROCESS / SERVICES
========================= */


.services {

    border-top:1px solid #111;

}



.service-list {

    margin-top:60px;

}



.service-item {

    display:grid;

    grid-template-columns:80px 1fr;

    gap:30px;

    padding:35px 0;

    border-bottom:1px solid #ddd;

}



.service-item span {

    font-size:12px;

    letter-spacing:.18em;

    color:#777;

}



.service-item h3 {

    margin-bottom:15px;

}



.service-item p {

    font-size:18px;

    color:#555;

    max-width:650px;

}





/* =========================
SECTION HEADERS
========================= */


.section-header {

    margin-bottom:60px;

}



.section-header h2 {

    margin-top:30px;

}





/* =========================
SKILLS GRID
========================= */


.skills-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

}



.skills-grid h3 {

    font-size:35px;

    margin-bottom:15px;

}



.skills-grid p {

    font-size:18px;

    color:#555;

}





/* =========================
TOOLS
========================= */


.tool-list {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-top:60px;

}



.tool-list div {

    border:1px solid #ddd;

    padding:25px;

    font-size:18px;

}





/* =========================
CASE STUDY PAGES
========================= */


.case-study {

    border-top:1px solid #111;

}



.case-grid {

    display:grid;

    grid-template-columns:minmax(0,1fr) 320px;

    gap:80px;

}



.case-description h4 {

    font-size:32px;

    letter-spacing:-.05em;

    margin-bottom:20px;

}



.case-description p {

    font-size:20px;

    max-width:700px;

    margin-bottom:55px;

}





/* =========================
CASE STUDY INTRO
========================= */


.intro {

    border-top:1px solid #111;

}



.intro-grid {

    display:grid;

    grid-template-columns:80px 1fr;

    gap:40px;

}



.intro-number {

    font-size:12px;

    letter-spacing:.18em;

    color:#777;

}



.intro h2 {

    margin-bottom:35px;

}



.intro p {

    font-size:22px;

    max-width:750px;

    margin-bottom:25px;

}





/* =========================
METRICS
========================= */


.metric {

    border-left:1px solid #ddd;

    padding-left:40px;

}



.metric span {

    display:block;

    font-size:110px;

    font-weight:700;

    letter-spacing:-.09em;

    line-height:.85;

}



.metric p {

    margin-top:15px;

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#666;

}

/* =========================
DIGITAL STORYTELLING VIDEOS
========================= */


.video-section {

    border-top:1px solid #111;

}



.video-section h2 {

    margin-top:30px;

}



.video-intro {

    font-size:22px;

    max-width:750px;

    margin-top:30px;

}



.video-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

    margin-top:70px;

}



.video-card {

    width:100%;

}



.video-wrapper {

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border:1px solid #111;

    background:#000;

}



.video-wrapper iframe {

    position:absolute;

    width:100%;

    height:100%;

    top:0;

    left:0;

    border:0;

}



.video-card p {

    margin-top:20px;

    font-size:14px;

    line-height:1.6;

    color:#666;

    max-width:500px;

}





/* =========================
VIDEO MOBILE
========================= */


@media(max-width:900px){


.video-grid {

    grid-template-columns:1fr;

    gap:45px;

}



.video-intro {

    font-size:18px;

}



.video-card p {

    font-size:15px;

}


}

/* =========================
DIGITAL STORYTELLING VIDEOS
========================= */


.video-section {

    border-top:1px solid #111;

}


.video-section h2 {

    margin-top:30px;

}


.video-intro {

    font-size:22px;

    max-width:750px;

    margin-top:30px;

}



.video-grid {

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

    margin-top:70px;

}



.video-card {

    width:100%;

}



.video-wrapper {

    position:relative;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border:1px solid #111;

    background:#000;

}



.video-wrapper iframe {

    position:absolute;

    width:100%;

    height:100%;

    inset:0;

    border:0;

}



.video-card p {

    margin-top:20px;

    font-size:14px;

    color:#666;

    line-height:1.6;

}



@media(max-width:900px){


.video-grid {

    grid-template-columns:1fr;

}


.video-intro {

    font-size:18px;

}


}

/* =========================
GALLERY
========================= */


.gallery-section {

    border-top:1px solid #111;

}



.gallery-section h2 {

    margin-top:30px;

}



.gallery-intro {

    font-size:22px;

    max-width:750px;

    margin-top:30px;

}



.gallery {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

    margin-top:70px;

}



.gallery-main {

    width:100%;

    max-width:850px;

    text-align:center;

}


.gallery-image {

    width:100%;

    max-height:650px;

    object-fit:contain;

    border:1px solid #111;

    cursor:pointer;

}


.gallery-caption {

    margin-top:20px;

    font-size:14px;

    color:#666;

}



.gallery-arrow {

    width:45px;

    height:45px;

    border:1px solid #111;

    background:#fff;

    cursor:pointer;

    font-size:18px;

}



.gallery-arrow:hover {

    background:#111;

    color:#fff;

}





/* =========================
LIGHTBOX
========================= */


.lightbox {

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    z-index:999;

    padding:40px;

}


.lightbox.active {

    display:flex;

}


.lightbox img {

    max-height:75vh;

    max-width:85vw;

    border:1px solid #333;

}


.lightbox-caption {

    color:#fff;

    max-width:700px;

    text-align:center;

    margin-top:25px;

    font-size:14px;

    line-height:1.5;

    letter-spacing:.02em;

    opacity:.8;

}

.close-lightbox {

    position:absolute;

    top:25px;

    right:35px;

    background:none;

    border:none;

    color:#fff;

    font-size:28px;

    font-weight:300;

    cursor:pointer;

    opacity:.7;

    line-height:1;

}


.close-lightbox:hover {

    opacity:1;

}

/* =========================
RESULTS
========================= */


.results {

    border-top:1px solid #111;

}



.results-list {

    list-style:none;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    margin-top:70px;

}



.results-list li {

    font-size:clamp(35px,5vw,75px);

    letter-spacing:-.07em;

    line-height:.95;

    padding:40px 0;

    border-bottom:1px solid #ddd;

}



.results-list li:nth-child(odd) {

    border-right:1px solid #ddd;

    padding-right:40px;

}



.results-list li:nth-child(even) {

    padding-left:40px;

}





/* =========================
BACKGROUND
========================= */


.background-details {

    display:flex;

    gap:20px;

    margin-top:40px;

}



.background-details span {

    border:1px solid #111;

    padding:15px 25px;

    font-size:12px;

    letter-spacing:.15em;

    text-transform:uppercase;

}





/* =========================
CONTACT
========================= */


.contact {

    border-top:1px solid #111;

}



.contact h2 {

    max-width:1000px;

    margin-top:30px;

}



.contact-links {

    margin-top:60px;

    display:flex;

    flex-direction:column;

    gap:20px;

}



.contact-links a {

    font-size:35px;

    letter-spacing:-.05em;

    text-decoration:underline;

}





/* =========================
FOOTER
========================= */


.footer {

    width:calc(100% - 80px);

    max-width:1280px;

    margin:0 auto;

    border-top:1px solid #ddd;

    padding:40px 0;

}



.footer-inner {

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.footer-brand {

    font-weight:bold;

    letter-spacing:.12em;

}



.footer-right {

    text-align:right;

    font-size:12px;

    letter-spacing:.15em;

    color:#666;

}
/* =========================
MOBILE RESPONSIVE
========================= */


@media(max-width:900px){



.container {

    width:calc(100% - 40px);

}



.site-header {

    width:calc(100% - 40px);

}



.navigation {

    height:auto;

    padding:25px 0;

    flex-direction:column;

    align-items:flex-start;

    gap:25px;

}



.nav-links {

    gap:20px;

}



.hero {

    padding-top:70px;

    padding-bottom:70px;

}



.hero h1 {

    font-size:clamp(45px,12vw,75px);

}



.section {

    padding:75px 0;

}





/* ABOUT */


.about-profile .container {

    grid-template-columns:1fr;

    gap:40px;

}



.profile-image {

    position:relative;

    top:auto;

}



.profile-copy p {

    font-size:18px;

}





/* PROCESS */


.service-item {

    grid-template-columns:40px 1fr;

}



.service-item h3 {

    font-size:38px;

}





/* CASE STUDIES */


.case-grid {

    grid-template-columns:1fr;

    gap:50px;

}



.metric {

    border-left:none;

    border-top:1px solid #ddd;

    padding:40px 0 0;

}



.metric span {

    font-size:75px;

}





/* INTRO */


.intro-grid {

    grid-template-columns:1fr;

}





/* GALLERY */


.gallery {

    gap:15px;

}



.gallery-arrow {

    width:35px;

    height:35px;

}





/* SKILLS */


.skills-grid {

    grid-template-columns:1fr;

}





/* RESULTS */


.results-list {

    grid-template-columns:1fr;

}



.results-list li:nth-child(odd){

    border-right:none;

    padding-right:0;

}



.results-list li:nth-child(even){

    padding-left:0;

}





/* BACKGROUND */


.background-details {

    flex-direction:column;

}





/* FOOTER */


.footer {

    width:calc(100% - 40px);

}



.footer-inner {

    flex-direction:column;

    align-items:flex-start;

    gap:20px;

}



.footer-right {

    text-align:left;

}



.contact-links a {

    font-size:28px;

}



}

.text-link {
display: inline-block;
margin-top: 2rem;
font-size: 1rem;
text-decoration: none;
color: inherit;
border-bottom: 1px solid currentColor;
padding-bottom: .25rem;
transition: opacity .3s ease;
}

.text-link:hover {
opacity: .6;
}
.service-item h3 a {
text-decoration:none;
color:inherit;
}

.service-item h3 a:hover {
opacity:.6;
}