/* ===== GRUNDLÆGGENDE & VARIABLER ===== */
:root {
    --color-bg-dark: #08677A; /* Den mørke blå/grønne baggrund */
    --color-bg-light: #0D7388; /* Lidt lysere, brugt i kontakt-kort */
    --color-primary: #EC7B7B;   /* Pink/Rød */
    --color-secondary: #3CDBC0; /* Cyan/Turkis */
    --color-text: #FFFFFF;
    --font-primary: 'Arial', sans-serif; /* Udskift med den korrekte font, hvis du har den */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-dark);
    color: var(--color-text);
    line-height: 1.6;
}

h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 0.5em;
    font-weight: bold;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
}

/* ===== GENERELLE KLASSER ===== */
.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 0;
}

.container--small {
    max-width: 800px;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.btn {
    display: inline-block;
    background-color: var(--color-primary);
    color: var(--color-text);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #d86a6a; /* Lidt mørkere pink ved hover */
}

/* ===== HERO SEKTION ===== */
.hero {
    /* Tilføj dit baggrundsbillede (collagen) her */
    background-image: url('placeholder-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-color: #333; /* Fallback farve */
    background-blend-mode: overlay; /* Giver en fed effekt som i designet */
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    padding-top: 2rem;
    position: relative;
}

.hero .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 2rem; /* Juster padding top/bottom for hero */
    padding-top: 2rem;
}

.hero__logo {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    /* Tilføj logo styling (cirkel, etc.) */
}

.hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 1rem;
}

.hero__portrait {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 5px solid var(--color-secondary);
    margin-bottom: 1rem;
    z-index: 2;
}

.hero__title {
    font-size: 4rem; /* Stor tekst */
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    z-index: 2;
    margin: 0;
}

.hero__decorative-line {
    height: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.hero__decorative-line--1 {
    background-color: var(--color-secondary);
    width: 250px;
    top: 105px; /* Juster position */
}
.hero__decorative-line--2 {
    background-color: var(--color-primary);
    width: 300px;
    top: 120px; /* Juster position */
}
.hero__decorative-line--3 {
    background-color: var(--color-secondary);
    width: 300px;
    bottom: 25px; /* Juster position */
}
.hero__decorative-line--4 {
    background-color: var(--color-primary);
    width: 250px;
    bottom: 10px; /* Juster position */
}

/* ===== OM SEKTION ===== */
.about {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.about__text {
    font-size: 1.1rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== PROJEKT SEKTION ===== */
.projects {
    padding-top: 2rem;
}

.project-card {
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-bottom: 4rem;
    position: relative; /* Til dekorative linjer */
}

/* Linjer omkring projekt-kort (kan justeres) */
.project-card::before, .project-card::after {
    content: '';
    position: absolute;
    height: 4px;
    width: 150px; /* Længde på linje */
}
.project-card::before {
    background-color: var(--color-primary);
    top: -15px;
    left: 0;
}
.project-card::after {
    background-color: var(--color-secondary);
    bottom: -15px;
    right: 0;
}


.project-card__image-wrapper {
    flex: 1;
    position: relative;
}

.project-card__image {
    border-radius: 8px;
    border: 4px solid var(--color-secondary);
}

.project-card__content {
    flex: 1;
    position: relative;
    padding: 1rem;
    border-left: 4px solid var(--color-primary); /* Eksempel på linje */
}

.project-card__title {
    font-size: 2rem;
    color: var(--color-secondary);
}

/* Vendt layout for det andet projekt */
.project-card--reverse {
    flex-direction: row-reverse;
}

.project-card--reverse .project-card__content {
    border-left: none;
    border-right: 4px solid var(--color-primary);
}

/* ===== ACCORDION SEKTION ===== */
.accordion-item {
    margin-bottom: 1rem;
}

.accordion-header {
    background-color: transparent;
    border: 2px solid var(--color-secondary);
    color: var(--color-text);
    padding: 1rem 1.5rem;
    width: 100%;
    text-align: left;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: var(--color-bg-light);
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-content {
    background-color: var(--color-bg-light);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 1.5rem;
}

/* Aktiv state (styret af JS) */
.accordion-item.active .accordion-content {
    max-height: 500px; /* Sæt til en høj nok værdi */
    padding: 1.5rem;
}

.accordion-item.active .accordion-icon {
    transform: rotate(45deg);
}

/* ===== KONTAKT SEKTION ===== */
.contact-card {
    background-color: var(--color-bg-light);
    border-radius: 15px;
    padding: 2.5rem;
    display: flex;
    gap: 2rem;
    border: 2px solid var(--color-secondary);
}

.contact-card__form-wrapper {
    flex: 2;
}

.contact-card__title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: var(--color-text);
}

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

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: bold;
}

.form-group input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--color-secondary);
    padding: 0.5rem 0;
    color: var(--color-text);
    font-size: 1rem;
}

.form-group input:focus {
    outline: none;
    border-bottom-color: var(--color-primary);
}

.contact-card__aside {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.contact-card__portrait {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-primary);
    margin-bottom: 1rem;
}

.btn--send {
    width: 100%;
    max-width: 150px;
}

/* ===== FOOTER ===== */
.footer {
    border-top: 1px solid var(--color-secondary);
    margin-top: 4rem;
}

.footer .container {
    padding-top: 2rem;
    padding-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__logo {
    font-size: 1.5rem;
    font-weight: bold;
    /* Tilføj logo styling */
}

.footer__socials a {
    margin-left: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
}

/* ===== CUSTOM FROM index.html (migrated inline styles) ===== */
/* Contact card (new) */
.wrapper{width:80%;max-width:1100px;margin:60px auto;position:relative;}
.shadow-card{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;background:#F07167;transform:translate(-15px,-15px);}
.white-shadow{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffff;border-radius:20px;transform:translate(-8px,-8px);}
.card{position:relative;background:#4FAAB3;padding:40px 50px;border-radius:20px;color:#fff;}
.styled-input{width:100%;background:transparent;border:none;border-bottom:2px solid rgba(255,255,255,.7);padding:8px 0;font-size:1rem;color:#fff;outline:none;}
.form-layout{display:grid;grid-template-columns:1fr 250px;gap:40px;margin-top:30px;align-items:start;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.portrait-box{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;}
.portrait-box a{color:#fff;text-decoration:none;font-size:1rem;font-family:'Montserrat',sans-serif;}
.portrait-box img{border-radius:20px;}
.send-btn{margin-top:40px;display:flex;justify-content:flex-end;}
.email-field{margin-top:40px;}
.message-field{margin-top:40px;}
.styled-textarea{width:100%;height:120px;background:transparent;border:none;border-bottom:2px solid rgba(255,255,255,.7);color:#fff;resize:none;}
.contact-btn{background:#FFE3BF;border:none;padding:12px 34px;font-size:1rem;border-radius:30px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,0.25);}

/* Footer (new) */
.site-footer{background:#0C7A9A;padding:60px 0;display:flex;justify-content:center;align-items:center;border-top:1px solid rgba(255,255,255,.35);}
.footer-inner{width:90%;max-width:1400px;display:flex;justify-content:space-between;align-items:center;}
.footer-logo-stack{position:relative;display:flex;flex-direction:column;gap:10px;align-items:center;margin-left:0;}
.footer-bars{display:flex;flex-direction:column;gap:10px;align-items:center;}
.footer-bar{height:20px;border-radius:20px;}
.footer-bar.red{background:#F07167;}
.footer-bar.cyan{background:#4FC4C4;}
.footer-bar.ml-neg{margin-left:-15px;}
.footer-bar.ml-pos{margin-left:15px;}
.footer-bars .footer-bar:nth-child(1){width:200px;}
.footer-bars .footer-bar:nth-child(2){width:195px;}
.footer-bars .footer-bar:nth-child(3){width:260px;}
.footer-bars .footer-bar:nth-child(4){width:155px;}
footer .footer-bars .footer-bar:nth-child(5){width:230px;}
footer .footer-bars .footer-bar:nth-child(6){width:220px;}
.footer-title{position:absolute;top:35px;left:40px;text-align:left;}
.footer-name-line1{font-size:3rem;font-family:'Futura',sans-serif;color:#fff;line-height:1;}
.footer-name-line2{font-size:3.5rem;font-family:'Futura',sans-serif;color:#fff;line-height:1;margin-top:10px;}
.footer-logo{height:210px;width:auto;max-width:none;object-fit:contain;display:block;}
.footer-nav{display:flex;gap:80px;font-size:1.4rem;color:#fff;font-family:'Inter',sans-serif;}
.footer-nav a{color:#fff;text-decoration:none;}

/* Responsive tweaks for moved styles */
@media (max-width:768px){
  .wrapper{width:92%;margin:32px auto;}
  .card{padding:24px;}
  .form-layout{grid-template-columns:1fr;gap:24px;}
  .grid{grid-template-columns:1fr;gap:16px;}
  .portrait-box img{width:140px;height:auto;}
  .send-btn{justify-content:center;}
  .site-footer .footer-inner{flex-direction:column;gap:24px;}
  .site-footer .footer-nav{gap:24px;font-size:1.1rem;flex-wrap:wrap;justify-content:center;}
  .site-footer .footer-logo{height:140px;}
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800;900&family=Merriweather:wght@300;400;700&display=swap');
:root{
  --bg:#0081A7;
  --text:#fffbe6;
  --accent:#F07167;
  --accent-2:#00AFB9;
  --accent-3:#FED9B7;
  --cta:#FED9B7;
  --shadow:0 8px 20px rgba(0,0,0,.25);
}
html{background:var(--bg)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Merriweather', Georgia, serif; color:var(--text); background:var(--bg)}
a{text-decoration:none; color:var(--text)}
.site-header{position:sticky; top:0; z-index:100; background:rgba(0,0,0,0.05); backdrop-filter:blur(8px);}
.header-nav{display:flex; justify-content:center; align-items:center; gap:3rem; padding:1.2rem 2rem;}
.header-nav a{font-family:'Montserrat', sans-serif; font-weight:600; font-size:1rem; letter-spacing:0.03em; transition:opacity .25s}
.header-nav a:hover{opacity:.7}
.header-logo{width:120px; height:auto; display:block;}
.hero{position:relative; min-height:82vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding-block:80px; background:var(--bg)}
.hero-inner{position:relative; width:min(1100px,92vw); height:min(520px,70vh)}
.hero-stripes{position:absolute; inset:0}
.bar{position:absolute; left:50%; transform:translateX(-50%); height:36px; border-radius:999px; opacity:.95; will-change:transform}
.red{background:var(--accent)}
.cyan{background:var(--accent-2)}
.b1{top:2%;  width:72%}
.b2{top:9%;  width:58%}
.b3{top:16%; width:86%}
.b4{top:23%; width:64%}
.b5{top:30%; width:92%}
.b6{top:38%; width:70%}
.b7{top:46%; width:96%}
.b8{top:54%; width:62%}
.b9{top:62%; width:84%}
.b10{top:70%; width:48%}
.b11{top:78%; width:78%}
.b12{top:86%; width:60%}
.hero-images{position:absolute; inset:0}
.photo{position:absolute; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); z-index:4}
.photo img{width:100%; height:100%; object-fit:cover}
.img-1{left:3%; bottom:6%; width:160px; height:190px}
.img-2{left:25%; top:-10%; width:180px; height:210px; transform:translate(-50%, -10%); z-index:6}
.img-3{left:54%; top:26%; width:200px; height:300px}
.img-4{right:0%; top:60%; width:200px; height:260px}
.hero-title{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); font-size:clamp(36px,7vw,90px); font-weight:800; text-transform:uppercase; text-shadow:0 6px 18px rgba(0,0,0,.25); white-space:nowrap; z-index:5}
.scroll-arrow{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:72px; height:48px; opacity:.9; z-index:6; pointer-events:none;}
.scroll-arrow svg{width:100%; height:100%;}
.scroll-arrow path{fill:none; stroke:rgba(255,255,255,.8); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.scroll-arrow polyline{fill:none; stroke:rgba(255,255,255,.8); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion:no-preference){
  .scroll-arrow{animation:floaty 2.4s ease-in-out infinite;}
  @keyframes floaty{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
}
@media (max-width:900px){
  .header-nav{gap:2rem;}
  .header-logo{width:90px;}
  .hero-inner{height:65vh}
  .bar{height:24px}
  .img-1{width:26vw; height:30vw}
  .img-2{left:25%; top:6%; width:30vw; height:34vw}
  .img-3{width:34vw; height:46vw}
  .img-4{right:0%; width:32vw; height:40vw}
  .hero-title{font-size:clamp(28px, 9vw, 64px)}
}
@media (prefers-reduced-motion: reduce){
  .bar{transition:none !important}
}
@media (max-width: 700px){
  .site-header{position: sticky; top:0;}
  .header-nav{gap:12px; flex-wrap:wrap; padding:10px 12px;}
  .header-nav a{font-size:0.95rem}
  .header-center{order:-1; width:100%; display:flex; justify-content:center;}
  .header-logo{width:72px}
}
.about{position:relative; padding:6rem 1rem 8rem}
.about-wrap{max-width:1000px; margin:0 auto; position:relative}
.about-title{font-family:'Montserrat',sans-serif; text-align:center; font-size:0.95rem; letter-spacing:.2em; opacity:.9; margin-bottom:1rem}
.about-box{position:relative; padding:3rem 2.5rem; border-radius:28px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.about-text{font-size:clamp(1.05rem,2.2vw,1.6rem); line-height:1.6; text-align:center}
.about-svg{position:absolute; inset:-24px -24px -60px -24px; width:calc(100% + 48px); height:calc(100% + 84px); pointer-events:none}
.about-svg path{fill:none; stroke:rgba(255,255,255,.7); stroke-width:2.2; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 6px rgba(0,0,0,.15)); stroke-linecap:round; stroke-linejoin:round}
.about-tail{position:absolute; left:0; right:0; margin:auto; bottom:-220px; width:100%; height:260px; pointer-events:none}
.about-tail path{fill:none; stroke:rgba(255,255,255,.7); stroke-width:2.2; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 6px rgba(0,0,0,.15))}
@keyframes about-draw{to{stroke-dashoffset:0}}
.about-draw path{stroke-dasharray:var(--len, 2400); stroke-dashoffset:var(--len, 2400); animation:about-draw 2.2s cubic-bezier(.2,.9,.2,1) forwards}
.tail-draw path{stroke-dasharray:var(--tail, 1200); stroke-dashoffset:var(--tail, 1200); animation:about-draw 1.8s cubic-bezier(.2,.9,.2,1) .4s forwards}
@media (max-width: 720px){
  .about{padding:4rem 1rem 6rem}
  .minute .about-box{padding:2.2rem 1.4rem; border-radius:22px}
  .about-svg{inset:-18px -18px -54px -18px}
}
@media (prefers-reduced-motion:reduce){
  .about-draw path{animation:none !important; stroke-dasharray:0 !important; stroke-dashoffset:0 !important}
}
.cases{padding:4rem 1.5rem 6rem; border-top:1px solid rgba(255,255,255,.35); border-bottom:1px solid rgba(255,255,255,.35);}
.cases-wrap{max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:4rem;}
.cases-title{display:block;text-align:center; font-family:'Montserrat',sans-serif; font-size:2rem; letter-spacing:.08em; margin:-1rem auto 2.5rem;}
.case-card{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:3rem; align-items:center;}
.case-card.reverse .case-body{order:2;}
.case-card.reverse .case-media{order:1;}
.case-body{display:flex; flex-direction:column; gap:1rem;}
.case-pill{display:inline-flex; align-items:center; padding:.6rem 2.2rem; border-radius:999px; background:var(--accent-2); font-family:'Montserrat',sans-serif; font-weight:400; font-size:2.4rem; color:var(--text);}
.case-title{font-size:2.4rem; font-family:'Merriweather',serif; font-weight:400;}
.case-role{font-size:1.1rem; font-weight:700; letter-spacing:.02em;}
.case-text{line-height:1.65; font-size:1rem;}
.case-cta{margin-top:1.5rem; align-self:flex-start; display:inline-flex; width:auto; min-width:0; align-items:center; justify-content:center; padding:.65rem 1.4rem; border-radius:999px; background:var(--cta); color:#1b3a3f; font-family:'Montserrat',sans-serif; font-weight:700; letter-spacing:.05em; box-shadow:0 12px 30px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease;}
.case-cta:hover{transform:translateY(-2px); box-shadow:0 16px 32px rgba(0,0,0,.3);}
.case-media{position:relative; border-radius:32px; overflow:visible;}
.case-media img{position:relative; width:100%; height:100%; object-fit:cover; display:block; border-radius:32px; z-index:2;}
.case-media::before, .case-media::after{content:none !important; background:transparent !important; box-shadow:none !important;}
@media (max-width: 1200px){
  .hero-inner{height:68vh;}
  .case-pill{font-size:2.1rem;}
  .case-title{font-size:2.1rem;}
}

.case-detail{padding:3rem 1.5rem 6rem;}
.case-detail .container,
.case-detail .cases-wrap{max-width:1100px; margin:0 auto; display:flex; flex-direction:column; gap:2.2rem;}
.case-section-title{font-family:'Montserrat',sans-serif; letter-spacing:.08em; font-size:1.4rem; opacity:.95; margin-bottom:.75rem;}
.case-paragraph{line-height:1.75; font-size:1.05rem; opacity:.96;}
.case-paragraph.lead{font-size:1.2rem; line-height:1.9; opacity:.98;}
.accent-bars{position:relative; height:18px; width:220px; margin:4px 0 18px 0;}
.accent-bars::before,
.accent-bars::after{content:""; position:absolute; height:18px; border-radius:999px; top:0; box-shadow:0 6px 18px rgba(0,0,0,.18);}
.accent-bars::before{left:-10px; width:160px; background:var(--accent);}
.accent-bars::after{left:70px; width:200px; background:var(--accent-2);}
.section-divider{height:10px; width:min(100%, 680px); background:linear-gradient(90deg, var(--accent) 0 48%, transparent 48% 52%, var(--accent-2) 52%); border-radius:999px; margin:10px 0 24px;}
.case-meta{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem;}
.case-meta .meta-box{padding:.25rem 0;}
.case-meta .meta-title{font-family:'Montserrat',sans-serif; font-size:.95rem; letter-spacing:.08em; opacity:.85; margin-bottom:.4rem;}
.case-meta .meta-text{font-size:1rem; line-height:1.5;}
.deliverables{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem 1.5rem; padding-left:1rem;}
.deliverables li{list-style:disc; padding:.1rem 0;}
.process-steps{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem 1.5rem;}
.process-step{padding:0;}
.media-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem;}
.media-grid img{width:100%; height:220px; object-fit:cover; border-radius:16px; display:block;}
.video-embed{position:relative; width:100%; padding-top:56.25%; border-radius:18px; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.25);}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.video-embed video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; background:#000;}
blockquote{font-size:1.15rem; line-height:1.8; position:relative; padding-left:1rem; border-left:4px solid var(--accent-2);}
blockquote::before{content:"“"; position:absolute; left:-.3rem; top:-.8rem; font-size:3rem; color:rgba(255,255,255,.35);}
cite{display:block; margin-top:.6rem; font-family:'Montserrat',sans-serif; font-size:.95rem; opacity:.9; font-style:normal;}

@media (max-width: 900px){
  .case-meta{grid-template-columns:1fr;}
  .deliverables{grid-template-columns:1fr;}
  .process-steps{grid-template-columns:1fr;}
  .media-grid{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
}
.services{padding:6rem 1.5rem 8rem; background:var(--bg);}
.services-wrap{max-width:1000px; margin:0 auto; border-radius:24px; padding:3rem 3.5rem;}
.services-label{font-family:'Montserrat',sans-serif; letter-spacing:.2em; text-transform:uppercase; font-size:1rem; display:block; margin-bottom:2rem;}
.service-accordion{border-top:1px solid rgba(255,255,255,.45); border-bottom:1px solid rgba(255,255,255,.45);}
.service-item{border-bottom:1px solid rgba(255,255,255,.45);}
.service-item:last-child{border-bottom:none;}
.service-trigger{width:100%; padding:2rem 0; background:none; border:none; color:var(--text); font-family:'Merriweather',serif; font-size:clamp(1.8rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
.service-trigger span{pointer-events:none;}
.service-icon{position:relative; width:34px; height:34px; flex-shrink:0;}
.service-icon::before,
.service-icon::after{content:""; position:absolute; inset:0; margin:auto; width:2px; height:28px; background:var(--text); transition:transform .25s ease;}
.service-icon::after{transform:rotate(90deg);}
.service-item.open .service-icon::before{transform:scaleY(0);}
.service-panel{max-height:0; overflow:hidden; transition:max-height .4s ease, padding .25s ease; font-size:1rem; line-height:1.7; color:rgba(255,255,255,.9); padding-right:1rem;}
.service-item.open .service-panel{max-height:360px; padding-bottom:1.5rem;}
.service-panel p{margin-bottom:1rem;}
.service-panel p:last-child{margin-bottom:0;}
@media (max-width:720px){
  .services-wrap{padding:2rem 1.5rem;}
  .service-trigger{font-size:clamp(1.5rem,6vw,2.4rem);}
}
@media (max-width: 900px) {
    .project-card,
    .project-card--reverse {
        flex-direction: column;
    }

    .project-card__content {
        border-left: none;
        border-right: none;
        border-top: 4px solid var(--color-primary);
        text-align: center;
    }

    .btn {
        width: 100%;
        max-width: 250px;
    }
}

@media (max-width: 768px) {
    .hero__title {
        font-size: 2.5rem;
    }

    .hero__portrait {
        width: 120px;
        height: 120px;
    }
    
    .hero__decorative-line--1 { width: 180px; top: 85px; }
    .hero__decorative-line--2 { width: 220px; top: 95px; }
    .hero__decorative-line--3 { width: 220px; bottom: 20px; }
    .hero__decorative-line--4 { width: 180px; bottom: 10px; }


    .contact-card {
        flex-direction: column;
        padding: 1.5rem;
    }

    .contact-card__aside {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        margin-top: 1rem;
    }

    .contact-card__portrait {
        margin-bottom: 0;
    }

    .btn--send {
        max-width: 120px;
    }

    .footer .container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .footer__socials a {
        margin: 0 0.75rem;
    }
}