/* ==========================================================================
Card-flow sections: About / Services / Pipeline / Showcase / Why / Contact
========================================================================== */

.section__head{
max-width: 74ch;
margin-bottom: var(--sp-5);
}

/*--- About: photo + copy ---*/
.about__grid{
display: grid;
gap:var(--sp-5);
grid-template-columns:1fr;
align-items:center;
}

.about__media{
position: relative;
border-radius: var(--r-lg);
overflow:hidden;
border:1px solid var(--c-line);
/*Fallback if the photo is missing */
background: linear-gradient(135deg, var(--c-violet), var(--c-surface) 62%,var(--c-cyan));
}

.about__media
img{
width:100%;
aspect-ratio:4 /3;
object-fit: cover;
}

.about__badge{
position:absolute;
left:var(--sp-2);
bottom:var(--sp-2);
padding: 0.5rem 1rem;
background:var(--c-lime);
color: var(--c-on-lime);
border-radius:var(--r-pill);
font-family: var(--f-mono);
font-size: var(--fs-micro);
font-weight: 700;
letter-spacing: 0.14em;
text-transform:uppercase;
}

.about__facts{
display: grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:var(--sp-3);
margin-top:var(--sp-4);
padding-top: var(--sp-4);
border-top:1px solid var(--c-line);
}

.fact__k {
display:block;
font-family: var(--f-mono);
font-size:var(--fs-micro);
letter-spacing:0.16em;
text-transform: uppercase;
color:var(--c-cyan);
margin-bottom: 0.3rem;
}

.fact__v{ font-size: var(--fs-small);color: var(--c-ink-soft); }

/*--- Card flow (the primary layout factor) ---*/
.cards{
display: grid;
gap:var(--sp-3);
grid-template-columns:1fr;
}

.card {
position: relative;
padding: var(--sp-4) var(--sp-3);
background: var(--c-surface);
border: 1px solid var(--c-line);
border-radius:var(--r-lg);
overflow: hidden;
transition:transform var(--t-base) var(--e-out),
border-color var(--t-base) linear,
box-shadow var(--t-base) var(--e-out);
}

/*Geometric abstract accent: a clipped corner wedge per card*/
.card::after{
content: "";
position:absolute;
top: -34px;
right: -34px;
width:96px;
height:96px;
background: var(--card-accent, var(--c-violet));
clip-path: polygon(0% 0%, 100% 0%,100% 100%);
opacity: 0.35;
transition:opacity var(--t-base) linear,transform var(--t-base) var(--e-out);
}

.card:hover {
transform: translateY(-6px);
border-color: color-mix(in srgb, var(--card-accent, var(--c-violet)) 60%, var(--c-line));
box-shadow:var(--shadow-lift);
}

.card:hover::after{ opacity: 0.6;transform:scale(1.12);}

.card__icon {
display: grid;
place-content: center;
width: 48px;
height:48px;
margin-bottom:var(--sp-3);
border-radius: var(--r-md);
background: color-mix(in srgb,var(--card-accent,var(--c-violet)) 22%,transparent);
border: 1px solid color-mix(in srgb,var(--card-accent, var(--c-violet)) 55%, transparent);
font-size:1.35rem;
line-height:1;
}

.card
h3{ margin-bottom: var(--sp-1);}

.card
p {
margin: 0;
color: var(--c-ink-soft);
font-size:var(--fs-small);
line-height:1.65;
}

.card__tags{
display:flex;
flex-wrap:wrap;
gap:0.4rem;
margin-top:var(--sp-3);
}

.tag {
padding:0.25rem 0.7rem;
border:1px solid var(--c-line);
border-radius:var(--r-pill);
font-family: var(--f-mono);
font-size:var(--fs-micro);
letter-spacing:0.08em;
color:var(--c-ink-mute);
}

/* Accent rotation for the card flow */
.card:nth-child(6 n+ 1) {--card-accent: var(--c-violet-lift); }
.card:nth-child(6 n +2){--card-accent:var(--c-lime);}
.card:nth-child(6 n+3){ --card-accent:var(--c-magenta); }
.card:nth-child(6 n +4){--card-accent:var(--c-cyan); }
.card:nth-child(6 n +5) {--card-accent:var(--c-violet); }
.card:nth-child(6 n) { --card-accent: var(--c-lime);}

/* --- Wide feature card with image ---*/
.section--alt{background: var(--c-surface); }

.feature{
display: grid;
gap: var(--sp-4);
grid-template-columns: 1fr;
align-items:center;
padding:var(--sp-4);
background: var(--c-void);
border: 1px solid var(--c-line);
border-radius:var(--r-lg);
}

.feature__media{
border-radius:var(--r-md);
overflow:hidden;
border: 1px solid var(--c-line);
background: linear-gradient(140deg, var(--c-magenta), var(--c-violet) 70%);
}

.feature__media
img{
width:100%;
aspect-ratio: 3 /2;
object-fit:cover;
}

.feature__list{
margin-top:var(--sp-3);
display: grid;
gap: var(--sp-2);
}

.feature__list
li{
position:relative;
padding-left:1.75rem;
font-size:var(--fs-small);
color:var(--c-ink-soft);
}

.feature__list
li::before {
content: "";
position:absolute;
left:0;
top:0.55em;
width:10px;
height:10px;
background:var(--c-lime);
clip-path:polygon(50% 0%,100% 50%, 50% 100%,0% 50%);
}

/* --- Pipeline steps --- */
.steps{
display:grid;
gap:var(--sp-3);
grid-template-columns: 1fr;
counter-reset:step;
}

.step{
position: relative;
padding: var(--sp-3);
padding-top:var(--sp-4);
border-top:2px solid var(--c-line);
transition: border-color var(--t-base) linear;
}

.step:hover{border-top-color:var(--c-lime); }

.step::before {
counter-increment:step;
content: "0" counter(step);
position: absolute;
top:var(--sp-2);
left: var(--sp-3);
font-family:var(--f-mono);
font-size: var(--fs-micro);
letter-spacing:0.18em;
color:var(--c-lime);
}

.step
h3{ font-size:1.05rem;margin:var(--sp-2) 0 0.4rem; }

.step
p {
margin:0;
font-size: var(--fs-small);
color: var(--c-ink-soft);
}

/*--- Showcase gallery ---*/
.gallery{
display:grid;
gap:var(--sp-3);
grid-template-columns: 1fr;
}

.shot{
position: relative;
border-radius:var(--r-lg);
overflow:hidden;
border:1px solid var(--c-line);
background: linear-gradient(135deg, var(--c-violet), var(--c-cyan));
}

.shot
img{
width: 100%;
aspect-ratio:4/ 3;
object-fit: cover;
transition: transform var(--t-slow) var(--e-out);
}

.shot:hover
img{transform:scale(1.05); }

.shot__meta {
position:absolute;
inset: auto 0 0 0;
padding:var(--sp-3) var(--sp-2) var(--sp-2);
background: linear-gradient(to top,rgba(11,11,18, 0.95),rgba(11,11,18, 0));
}

.shot__title{
display: block;
font-family: var(--f-display);
font-weight:700;
font-size:0.98rem;
color: var(--c-ink);
}

.shot__sub{
font-family: var(--f-mono);
font-size:var(--fs-micro);
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--c-lime);
}

/* --- Contact --- */
.contact__grid{
display:grid;
gap: var(--sp-5);
grid-template-columns:1fr;
align-items:start;
}

.contact__card {
padding: var(--sp-4);
background:var(--c-surface);
border:1px solid var(--c-line);
border-radius:var(--r-lg);
}

.contact__list{display: grid; gap: var(--sp-3); margin-top:var(--sp-3);}

.contact__row {
display: grid;
gap:0.2rem;
padding-bottom:var(--sp-3);
border-bottom: 1px solid var(--c-line);
}

.contact__row:last-child{ padding-bottom: 0; border-bottom:0; }

.contact__k{
font-family:var(--f-mono);
font-size:var(--fs-micro);
letter-spacing:0.18em;
text-transform: uppercase;
color: var(--c-cyan);
}

.contact__v{
font-size:var(--fs-body);
color:var(--c-ink);
line-height:1.6;
word-break:break-word;
}

.contact__v
a{ color: var(--c-lime);}

/*--- Footer ---*/
.footer{
padding-block: var(--sp-5) var(--sp-4);
background: var(--c-surface);
border-top:1px solid var(--c-line);
}

.footer__top{
display:grid;
gap: var(--sp-4);
grid-template-columns: 1fr;
padding-bottom:var(--sp-4);
border-bottom:1px solid var(--c-line);
}

.footer__blurb{
margin-top:var(--sp-2);
font-size:var(--fs-small);
color:var(--c-ink-soft);
max-width:46ch;
}

.footer__title{
font-family:var(--f-mono);
font-size:var(--fs-micro);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-lime);
margin-bottom: var(--sp-2);
}

.footer__links{ display:grid; gap: 0.55rem; }

.footer__links
a{ color:var(--c-ink-soft); font-size: var(--fs-small); }
.footer__links
a:hover{color:var(--c-lime);}

.footer__legal {
margin-top:var(--sp-4);
display:flex;
flex-wrap: wrap;
gap:var(--sp-1) var(--sp-3);
align-items:center;
justify-content:space-between;
font-size:var(--fs-small);
color:var(--c-ink-soft);
}

.footer__legal
p{margin: 0;}

@media
(prefers-reduced-motion:reduce){
.card:hover,
.shot:hover
img{transform:none; }
}