/* =========================================================
   Aura E Luce
   Fine Art Dog Photography
   style.css
========================================================= */

:root{

--background:#f8f6f2;
--white:#ffffff;
--beige:#ede8df;
--sand:#d9cfbf;

--text:#4b4742;
--heading:#1f1d1a;

--accent:#9d8662;

--border:#e2ddd5;

--max-width:1200px;

--transition:.3s ease;

}

*{

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

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Lato",sans-serif;

background:var(--background);

color:var(--text);

line-height:1.8;

font-size:17px;

-webkit-font-smoothing:antialiased;

}

img{

display:block;

width:100%;

height:auto;

}

a{

text-decoration:none;

color:inherit;

}

ul{

list-style:none;

}

.container{

width:min(var(--max-width),92%);

margin:auto;

}

section{

padding:60px 0;

}

h1,
h2,
h3,
h4{

font-family:"Cormorant Garamond",serif;

color:var(--heading);

font-weight:500;

line-height:1.15;

}

h1{

font-size:76px;

max-width:700px;

margin-bottom:30px;

}

h2{

font-size:54px;

margin-bottom:30px;

}

h3{

font-size:30px;

margin-bottom:15px;

}

p{

margin-bottom:20px;

}

.eyebrow{

display:inline-block;

font-size:13px;

letter-spacing:.35em;

text-transform:uppercase;

color:var(--accent);

margin-bottom:20px;

}

.button{
  display:inline-block;
  padding:16px 38px;
  border:1px solid var(--accent);
  color:var(--accent);
  background: rgba(0,0,0,0.25); /* 👈 alleen dit toevoegen */
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:12px;
  transition:var(--transition);
  margin-right:15px;
}
.button:hover{

background:var(--accent);

color:white;

}

.button.secondary{
  background:var(--accent);
  color:white;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.button.secondary:hover{

background:#7b684d;

}

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

header{

position:fixed;

top:0;

left:0;

right:0;

background:rgba(248,246,242,.97);

border-bottom:1px solid var(--border);

z-index:999;

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

.logo img{

height:58px;

width:auto;

}

nav ul{

display:flex;

gap:42px;

}

nav a{

font-size:13px;

letter-spacing:.15em;

text-transform:uppercase;

transition:var(--transition);

}

nav a:hover{

color:var(--accent);

}

nav a.active{

color:var(--accent);

}

body.nav-open{

overflow:hidden;

}

/* ================= HERO ================= */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}
.hero{

position:relative;

height:100vh;

display:flex;

align-items:stretch;

overflow:hidden;

padding:0;

margin-top:90px;

}

.hero img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}

.hero-overlay{

position:relative;

width:100%;

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

display:flex;

align-items:center;

}

.hero-content{

width:min(700px,90%);

margin-left:8%;

color:white;

}

.hero-content h1{

color:white;

}

.hero-content p{

font-size:20px;

max-width:600px;

margin-bottom:40px;

}

/* ================= INTRO ================= */

.intro-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.intro img{

border-radius:2px;

}

/* ================= FEATURED ================= */

.featured{

background:white;

}

.section-intro{

max-width:700px;

margin-bottom:70px;

}

.gallery{

display:grid;

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

gap:35px;

}

.gallery-item img{

aspect-ratio:4/5;

object-fit:cover;

margin-bottom:22px;

}

.gallery-item h3{

margin-bottom:8px;

font-size:28px;

}

.gallery-item p{

color:#777;

margin:0;

}

/* ================= EXPERIENCE ================= */

.experience-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:100px;

align-items:center;

}

.experience img{

aspect-ratio:4/5;

object-fit:cover;

}

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

.process{

background:white;

}

.steps{

display:grid;

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

gap:45px;

margin-top:70px;

}

.step{

padding:35px;

border:1px solid var(--border);

background:white;

}

.number{

font-size:52px;

font-family:"Cormorant Garamond",serif;

color:var(--accent);

display:block;

margin-bottom:15px;

}

.step h3{

margin-bottom:20px;

}
/* ================= QUOTE ================= */

.quote{

padding:160px 0;

background:var(--beige);

text-align:center;

}

.quote blockquote{

max-width:900px;

margin:auto;

font-family:"Cormorant Garamond",serif;

font-size:48px;

font-weight:400;

line-height:1.4;

color:var(--heading);

}

/* ================= CTA ================= */

.cta{

text-align:center;

background:white;

}

.cta h2{

max-width:800px;

margin:0 auto 25px;

}

.cta p{

max-width:700px;

margin:0 auto 45px;

font-size:19px;

}

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

footer{

background:#1f1d1a;

color:#dad6cf;

padding-top:90px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:80px;

padding-bottom:60px;

}

footer img{

height:70px;

width:auto;

margin-bottom:25px;

}

footer h4{

font-size:24px;

color:white;

margin-bottom:25px;

}

footer li{

margin-bottom:14px;

}

footer a{

transition:.3s;

}

footer a:hover{

color:white;

}

.copyright{

border-top:1px solid rgba(255,255,255,.08);

padding:25px;

text-align:center;

font-size:14px;

}

/* ================= PORTFOLIO ================= */

.portfolio-hero{

height:49vh;

display:flex;

align-items:flex-start;

justify-content:center;

text-align:center;

background:var(--beige);

padding-top:150px;

}

.portfolio-grid{

display:grid;

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

gap:30px;

}

.portfolio-item{

overflow:hidden;

background:white;

}

.portfolio-item img{

aspect-ratio:4/5;

object-fit:cover;

transition:.4s;

}

.portfolio-item:hover img{

transform:scale(1.03);

}

.portfolio-content{

padding:24px;

}

.portfolio-content h3{

margin-bottom:8px;

}

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

.about-intro{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

align-items:center;

}

.about-intro img{

aspect-ratio:4/5;

object-fit:cover;

}

.values{

margin-top:120px;

display:grid;

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

gap:35px;

}

.value{

background:white;

padding:40px;

border:1px solid var(--border);

}

.value h3{

margin-bottom:18px;

}

/* ================= PRICING ================= */

.pricing{

background:white;

}

.price-grid{

display:grid;

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

gap:40px;

margin-top:60px;

}

.price-card{

padding:55px;

border:1px solid var(--border);

background:white;

text-align:center;

}

.price{

font-size:58px;

font-family:"Cormorant Garamond",serif;

color:var(--accent);

margin:25px 0;

}

.price-card ul{

margin:35px 0;

}

.price-card li{

padding:10px 0;

border-bottom:1px solid var(--border);

}

/* ================= FAQ ================= */

.faq{

max-width:900px;

margin:auto;

}

.faq-item{

padding:35px 0;

border-bottom:1px solid var(--border);

}

.faq-item h3{

margin-bottom:15px;

}

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

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:90px;

}

form{

display:flex;

flex-direction:column;

gap:20px;

}

input,

textarea{

padding:18px;

font-family:"Lato",sans-serif;

font-size:16px;

border:1px solid var(--border);

background:white;

outline:none;

}

textarea{

min-height:180px;

resize:vertical;

}

input:focus,

textarea:focus{

border-color:var(--accent);

}

label{

font-size:14px;

letter-spacing:.08em;

text-transform:uppercase;

color:var(--heading);

}

button{

cursor:pointer;

font-family:"Lato",sans-serif;

}

/* ================= UTILITIES ================= */

.center{

text-align:center;

}

.mt-0{

margin-top:0;

}

.mb-0{

margin-bottom:0;

}

.mb-30{

margin-bottom:30px;

}

.mb-60{

margin-bottom:60px;

}

.mb-100{

margin-bottom:100px;

}

.pt-0{

padding-top:0;

}

.pb-0{

padding-bottom:0;

}

/* ================= MOBILE NAV TOGGLE ================= */

.nav-toggle{

display:none;

flex-direction:column;

justify-content:center;

gap:6px;

width:44px;

height:44px;

border:none;

background:none;

cursor:pointer;

padding:0;

z-index:1001;

}

.nav-toggle span{

display:block;

width:26px;

height:2px;

background:var(--heading);

transition:var(--transition);

}

.nav-toggle.active span:nth-child(1){

transform:translateY(8px) rotate(45deg);

}

.nav-toggle.active span:nth-child(2){

opacity:0;

}

.nav-toggle.active span:nth-child(3){

transform:translateY(-8px) rotate(-45deg);

}

/* ================= RESPONSIVE ================= */

@media (max-width:1100px){

h1{

font-size:60px;

}

h2{

font-size:46px;

}

.gallery{

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

}

.portfolio-grid{

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

}

.steps{

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

}

.values{

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

}

.price-grid{

grid-template-columns:1fr;

}

}

/* ================= TABLET ================= */

@media (max-width:900px){

section{

padding:90px 0;

}

.portfolio-hero{

padding-top:112px;

}

.nav{

height:80px;

}

.nav-toggle{

display:flex;

}

nav{

position:fixed;

top:80px;

left:0;

right:0;

bottom:0;

background:var(--background);

transform:translateX(100%);

transition:transform .35s ease;

overflow-y:auto;

}

nav.open{

transform:translateX(0);

}

nav ul{

flex-direction:column;

gap:0;

padding:20px 0;

}

nav ul li{

border-bottom:1px solid var(--border);

}

nav ul li a{

display:block;

padding:20px 6%;

font-size:15px;

}

.hero{

margin-top:80px;

height:auto;

min-height:85vh;

}

.hero-content{

margin:auto;

width:90%;

text-align:center;

}

.hero-content p{

margin-left:auto;

margin-right:auto;

}

.buttons{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}

.buttons .button{

margin-right:0;

}

.intro-grid,

.experience-grid,

.about-intro,

.contact-grid{

grid-template-columns:1fr;

gap:60px;

}

.footer-grid{

grid-template-columns:1fr;

gap:50px;

}

.quote blockquote{

font-size:38px;

}

}

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

@media (max-width:768px){

body{

font-size:16px;

}

.portfolio-hero{

padding-top:97px;

}

.container{

width:92%;

}

h1{

font-size:46px;

}

h2{

font-size:38px;

}

h3{

font-size:26px;

}

.hero{

height:auto;

min-height:80vh;

}

.hero-content{

padding-top:20px;

}

.hero-content p{

font-size:18px;

}

.gallery,

.portfolio-grid,

.steps,

.values{

grid-template-columns:1fr;

}

.step{

padding:28px;

}

.button{

display:inline-block;

width:auto;

text-align:center;

padding:14px 22px;

font-size:11px;

margin:0;

}

.price-card{

padding:35px;

}

.quote{

padding:100px 0;

}

.quote blockquote{

font-size:32px;

}

}

/* ================= SMALL MOBILE ================= */

@media (max-width:480px){

header{

padding:0;

}

.nav{

height:70px;

}

.logo img{

height:46px;

}

nav{

top:70px;

}

.hero{

margin-top:70px;

height:auto;

min-height:75vh;

}

.hero-content{

width:92%;

padding-bottom:30px;

}

h1{

font-size:38px;

}

h2{

font-size:32px;

}

.hero-content p{

font-size:17px;

}

section{

padding:70px 0;

}

.gallery{

gap:20px;

}

.portfolio-grid{

gap:20px;

}

.footer-grid{

text-align:center;

}

footer img{

margin:auto auto 20px;

}

}

/* ================= IMAGE HELPERS ================= */

.hero img,
.gallery img,
.portfolio-item img,
.intro img,
.experience img,
.about-intro img{

border-radius:2px;

}

.gallery-item,
.portfolio-item{

background:white;

}

.gallery-item img:hover,
.portfolio-item img:hover{

opacity:.96;

}

::selection{

background:var(--accent);

color:white;

}

html{

scroll-padding-top:100px;

}

body{

overflow-x:hidden;

}

img{

max-width:100%;

}

iframe{

max-width:100%;

border:0;

}

table{

width:100%;

border-collapse:collapse;

}

td,
th{

padding:12px;

border:1px solid var(--border);

}

hr{

border:none;

height:1px;

background:var(--border);

margin:60px 0;

}

/* ================= END ================= */