/* Base */
:root{
  --bg:#fefddf; /* fond doux beige-jaune */
  --surface:#faf9e0;
  --ink:#1a3d2e;
  --muted:#5a6d64;
  --brand:#2f8f5a;
  --brand-2:#95c93d;
  --accent:#1f6b45;
  --card:#ffffff;
  --alt:#f5f4e5;
  --shadow:0 4px 20px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  /* earthy nuances */
  --earth:#a6896d;   /* warm brown */
  --bark:#8b7057;    /* darker trunk */
  --sand:#c7b39a;    /* sandy beige */
  --bronze:#9d7a5e;  /* bronze */
  --terracotta:#b8856f; /* terre cuite */
  /* green nuances */
  --forest:#1a5f3a;  /* vert forêt */
  --sage:#87a96b;    /* vert sauge */
  --olive:#6b7f47;   /* vert olive */
  --mint:#a8d5a8;    /* vert menthe */
  --lime:#b8d479;    /* vert citron vert */
  --emerald:#3d8b5f; /* émeraude */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(168,213,168,.12), rgba(135,169,107,.08), transparent),
    radial-gradient(900px 600px at -10% 110%, color-mix(in oklab, var(--sand) 30%, transparent), color-mix(in oklab, var(--terracotta) 15%, transparent), transparent 70%),
    radial-gradient(800px 500px at 50% 50%, rgba(182,212,121,.05), transparent),
    var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
img{max-width:100%; display:block}

.container{width:min(1100px, calc(100% - 2rem)); margin-inline:auto}
.section{position:relative; padding:6rem 0}
.section.alt{background:linear-gradient(180deg, rgba(168,213,168,.08), rgba(255,255,255,.4), rgba(255,255,255,.2));}
.section::before{content:""; position:absolute; left:2rem; top:3rem; width:40px; height:40px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="%2387a96b" fill-opacity="0.15" d="M20 35 q-12 -15 -10 -22 q2 -7 8 -9 q6 -2 12 0 q6 2 8 9 q2 7 -10 22Z"/></svg>') no-repeat center/contain; opacity:.4; pointer-events:none; z-index:0}
.section::after{content:""; position:absolute; right:3rem; bottom:4rem; width:35px; height:35px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><path fill="%233d8b5f" fill-opacity="0.12" d="M20 32 q-10 -12 -8 -18 q2 -6 7 -8 q5 -2 10 0 q5 2 7 8 q2 6 -8 18Z"/></svg>') no-repeat center/contain; opacity:.35; pointer-events:none; z-index:0}
h1,h2,h3{line-height:1.2; margin:0 0 1rem}
h1{font-size:clamp(2.2rem, 4vw + 1rem, 4rem)}
h2{font-size:clamp(1.6rem, 2vw + .8rem, 2.4rem)}
h3{font-size:1.2rem}
p{margin:0 0 1rem}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.6rem 1rem; background:#fff; color:#000; border-radius:.4rem}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(12px); background:linear-gradient(180deg, rgba(254,253,223,.95), rgba(254,253,223,.85)); border-bottom:1px solid rgba(0,0,0,.06); box-shadow:0 2px 12px rgba(0,0,0,.04)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; align-items:center; gap:.6rem}
.brand-logo{width:36px; height:36px; object-fit:cover; border-radius:.4rem; box-shadow:0 2px 8px rgba(0,0,0,.1)}
.brand-name{font-weight:700; letter-spacing:.2px}
.nav{display:flex; gap:1rem}
.nav a{padding:.5rem .8rem; border-radius:.5rem; text-decoration:none; color:var(--muted)}
 .nav a:hover,.nav a:focus{background:linear-gradient(135deg, rgba(135,169,107,.12), rgba(61,139,95,.1)); color:var(--emerald); transition:.2s; border-radius:.5rem}

.nav-toggle{display:none; background:none; border:0; cursor:pointer}
.nav-toggle span{display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; transition:.2s}

/* Hero */
.hero{position:relative; isolation:isolate; overflow:hidden; min-height:70vh; display:flex; align-items:center}
.hero-inner{padding:7rem 0 6rem; text-align:center; position:relative; z-index:1}
/* Lianes décoratives intégrées aux accents marron du hero */
.lianes-bg{position:absolute; inset:auto 0 6%; height:110px; z-index:0; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 110"><defs><linearGradient id="b1" x1="0" x2="1"><stop offset="0" stop-color="%239d7a5e" stop-opacity="0.65"/><stop offset="1" stop-color="%23c7b39a" stop-opacity="0.45"/></linearGradient></defs><path d="M40 35 Q160 95 280 35T520 35T760 85T1000 40T1180 90" fill="none" stroke="url(%23b1)" stroke-width="5" stroke-linecap="round"/><path d="M120 55 Q260 20 400 90T680 60T920 100T1120 60" fill="none" stroke="%238b7057" stroke-width="3.5" stroke-opacity="0.5"/><path d="M300 30 Q480 95 720 55T1080 105" fill="none" stroke="%23a6896d" stroke-width="4" stroke-opacity="0.5"/></svg>') no-repeat center/1200px 110px; opacity:.6; pointer-events:none}
.hero-inner h1 { position:relative; z-index:1; }
.logo-badge{position:absolute; right:max(2rem, 6vw); top:2.2rem; opacity:.18; filter:drop-shadow(0 4px 16px rgba(47,143,90,.25)) drop-shadow(0 0 20px rgba(149,201,61,.15)); transform:rotate(-6deg); animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(-4deg) translateY(-8px)}}
.logo-badge img{filter:brightness(1.05)}
.logo-badge img{width:86px; height:86px; object-fit:cover; border-radius:18%}
.lead{color:var(--muted); font-size:1.125rem}
.cta-group{display:flex; gap:.8rem; justify-content:center; margin-top:1.2rem; flex-wrap:wrap}

.btn{display:inline-block; padding:.8rem 1.1rem; border-radius:.7rem; text-decoration:none; border:1px solid rgba(0,0,0,.12); transition:.2s; cursor:pointer}
.btn.primary{background:linear-gradient(135deg, var(--emerald), var(--brand), #1f5f3a); color:#fff; border-color:transparent; box-shadow:0 8px 24px rgba(47,143,90,.25), 0 0 30px rgba(61,139,95,.15)}
.btn.primary:hover{filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 12px 32px rgba(47,143,90,.3)}
.btn.ghost{background:transparent; color:var(--ink); border-color:rgba(0,0,0,.12)}
.btn.ghost:hover{background:linear-gradient(135deg, rgba(168,213,168,.1), rgba(135,169,107,.08)); border-color:var(--sage); color:var(--emerald)}

.hero-bg{position:absolute; inset:0; z-index:-1}
.blob{position:absolute; filter:blur(60px); opacity:.25}
.blob-1{width:44vw; height:44vw; left:-10vw; top:-12vw; background:
  radial-gradient(circle at 30% 30%, rgba(184,212,121,.28), transparent 50%),
  radial-gradient(circle at 50% 50%, rgba(149,201,61,.25), transparent 60%),
  radial-gradient(circle at 70% 70%, rgba(61,139,95,.2), rgba(47,143,90,.18), transparent 65%);}
.blob-2{width:36vw; height:36vw; right:-8vw; bottom:-8vw; background:
  radial-gradient(circle at 38% 42%, rgba(95,191,122,.25), rgba(135,169,107,.18), transparent 60%),
  radial-gradient(circle at 60% 60%, rgba(107,127,71,.14), rgba(31,95,58,.12), transparent 60%),
  radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--bronze) 22%, transparent), color-mix(in oklab, var(--sand) 35%, transparent), transparent 60%);
}
.grain{position:absolute; inset:-50%; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>'); mix-blend-mode:overlay; pointer-events:none}
.foliage{position:absolute; inset:0; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" preserveAspectRatio="none"><g fill="none" stroke="%235a6d64" stroke-opacity="0.12" stroke-width="1.2"><path d="M10 160 C 40 120, 60 120, 90 160"/><path d="M60 150 C 90 110, 110 110, 140 150"/><path d="M120 170 C 150 130, 170 130, 200 170"/><path d="M180 150 C 210 110, 230 110, 260 150"/></g><g fill="%2395c93d" fill-opacity="0.10"><path d="M88 156 q6 -10 14 0 q-8 8 -14 0Z"/><path d="M138 146 q6 -10 14 0 q-8 8 -14 0Z"/><path d="M198 166 q6 -10 14 0 q-8 8 -14 0Z"/></g><g fill="%23a6896d" fill-opacity="0.10"><path d="M36 172 q7 -10 15 0 q-8 8 -15 0Z"/><path d="M236 158 q7 -10 15 0 q-8 8 -15 0Z"/></g><g stroke="%238b7057" stroke-opacity="0.10" stroke-width="1"><path d="M48 168 C 60 150, 70 150, 82 168"/><path d="M228 164 C 240 146, 250 146, 262 164"/></g></svg>'); background-repeat:repeat; background-size:700px 320px; mix-blend-mode:multiply; opacity:.5; pointer-events:none}

/* Palmiers décoratifs */
.palm-deco{position:absolute; pointer-events:none; z-index:0; opacity:.75}
.palm-left{left:-6vw; top:8%; width:160px; height:200px; transform:rotate(-15deg)}
.palm-right{right:-4vw; bottom:12%; width:140px; height:180px; transform:rotate(12deg)}
.palm-bottom-left{left:-3vw; bottom:5%; width:130px; height:170px; transform:rotate(-8deg)}
.palm-top-right{right:-3vw; top:3%; width:150px; height:190px; transform:rotate(10deg)}
.palm-contact{left:3%; bottom:-1rem; width:120px; height:160px; transform:rotate(-5deg)}
.palm-deco::before{content:""; position:absolute; width:100%; height:100%; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 180"><g fill="none" stroke="%238b7057" stroke-width="2.5" stroke-linecap="round"><path d="M60 160 L 60 100" opacity="0.4"/></g><g fill="%233d8b5f" fill-opacity="0.35"><path d="M60 100 q-25 -30 -20 -45 q5 -15 15 -20 q10 -5 20 0 q10 5 15 20 q5 15 -20 45Z"/><path d="M40 90 q-15 -20 -10 -30 q5 -10 10 -12 q5 -3 10 0 q5 3 10 12 q5 10 -10 30Z"/><path d="M80 90 q15 -20 10 -30 q-5 -10 -10 -12 q-5 -3 -10 0 q-5 3 -10 12 q-5 10 10 30Z"/><path d="M60 75 q-18 -22 -15 -35 q3 -12 10 -15 q7 -3 15 0 q7 3 10 15 q3 12 -15 35Z"/></g><g fill="%236b7f47" fill-opacity="0.25"><path d="M55 105 q-20 -25 -18 -38 q2 -12 8 -14 q6 -2 13 0 q6 2 8 14 q2 12 -18 38Z"/><path d="M65 105 q20 -25 18 -38 q-2 -12 -8 -14 q-6 -2 -13 0 q-6 2 -8 14 q-2 12 18 38Z"/></g></svg>'); background-repeat:no-repeat; background-size:contain; background-position:center; animation:sway 8s ease-in-out infinite}
.palm-deco::after{content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:8px; height:60px; background:linear-gradient(180deg, transparent, rgba(139,112,87,.3)); border-radius:4px}
@keyframes sway{0%,100%{transform:rotate(-2deg)} 25%{transform:rotate(3deg)} 50%{transform:rotate(-1deg)} 75%{transform:rotate(2deg)}}

/* Expertises */
#expertises{position:relative; overflow:hidden}
#expertises .container{position:relative; z-index:2}
.exp-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:1rem; margin-top:2rem; position:relative; z-index:1}
.card{background:var(--card); border:1px solid rgba(0,0,0,.06); padding:1.2rem; border-radius:1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; min-height:100%; position:relative; overflow:hidden; transition:.2s}
.card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06); transform:translateY(-2px)}
.card::before{content:""; position:absolute; left:0; top:0; right:0; height:3px; background:linear-gradient(90deg, color-mix(in oklab, var(--terracotta) 40%, transparent), color-mix(in oklab, var(--sage) 30%, transparent), color-mix(in oklab, var(--brand) 28%, transparent), color-mix(in oklab, var(--emerald) 25%, transparent)); opacity:.5}
.card::after{content:""; position:absolute; right:.6rem; bottom:.6rem; width:26px; height:26px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%233d8b5f" fill-opacity="0.6" d="M12 3c3 4 6 5 6 9c0 3.314-2.686 6-6 6s-6-2.686-6-6c0-4 3-5 6-9z"/></svg>') no-repeat center/contain; opacity:.5}
.card h3{margin-top:0}
.card p{margin-bottom:0; flex:1; color:var(--muted)}

/* Réalisations */
#realisations{position:relative; overflow:hidden}
#realisations .container{position:relative; z-index:2}
.masonry{columns:3 280px; column-gap:1rem; margin-top:2rem; position:relative; z-index:1}
.with-foliage{position:relative}
.with-foliage::before{content:""; position:absolute; inset:0; pointer-events:none; opacity:.4; background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 120" preserveAspectRatio="none"><g fill="none" stroke="%235a6d64" stroke-opacity="0.1" stroke-width="1.2"><path d="M0 40 C 40 10, 80 10, 120 40 S 200 70, 240 40 S 320 10, 360 40"/><path d="M20 50 C 50 25, 90 25, 120 50"/></g><g fill="%232f8f5a" fill-opacity="0.1"><circle cx="60" cy="36" r="6"/><circle cx="180" cy="46" r="5"/><circle cx="300" cy="34" r="7"/><circle cx="240" cy="50" r="4"/></g><g fill="%23a6896d" fill-opacity="0.08"><rect x="110" y="30" width="8" height="18" rx="2"/><path d="M114 30 q12 -10 22 0 q-10 10 -22 0Z"/><rect x="280" y="28" width="7" height="16" rx="1.5"/></g></svg>'); background-repeat:repeat; background-size:800px 200px; mix-blend-mode:multiply}
.tile{break-inside:avoid; margin:0 0 1rem; background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow); transition:.2s}
.tile:hover{box-shadow:0 6px 24px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.08)}
.tile-media{aspect-ratio:16/10; width:100%; height:auto; background-size:cover; background-position:center}
.t1 .tile-media{background-image:linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)), url('cailloux.png')}
.t2 .tile-media{background-image:linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)), url('soin.jpg')}
.t3 .tile-media{background-image:linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)), url('exterieur.jpg')}
.t4 .tile-media{background-image:linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)), url('terrasse.jpg')}
.t5 .tile-media{background-image:linear-gradient(rgba(0,0,0,.05), rgba(0,0,0,.05)), url('clean.jpg')}
.tile figcaption{padding:.8rem 1rem; color:var(--muted)}

/* Témoignages */
.quotes{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2rem}
blockquote{margin:0; padding:1.2rem 1.2rem 1rem; background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:1rem; position:relative; box-shadow:var(--shadow)}
blockquote footer{color:var(--muted); margin-top:.6rem}

/* Contact */
#contact{position:relative; overflow:hidden}
#contact .container{position:relative; z-index:2}
.contact-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start; position:relative; z-index:1}
.inline-logo{width:32px; height:32px; object-fit:cover; border-radius:.4rem; box-shadow:0 4px 12px rgba(0,0,0,.25)}
.contact-list{list-style:none; padding:0; margin:1rem 0 0}
.contact-list li{margin:.4rem 0; color:var(--muted)}
.contact-form{display:grid; gap:.8rem}
.contact-form label{display:grid; gap:.4rem}
.contact-form input,.contact-form textarea{background:var(--alt); color:var(--ink); border:1px solid rgba(0,0,0,.1); border-radius:.6rem; padding:.75rem .9rem; transition:.2s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--emerald); background:#fff; box-shadow:0 0 0 3px rgba(61,139,95,.08)}
.form-note{min-height:1.2rem; color:var(--accent)}

/* Footer */
.site-footer{border-top:1px solid rgba(0,0,0,.08); padding:2rem 0; background:linear-gradient(180deg, rgba(240,245,243,.8), rgba(232,240,237,.6))}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.footer-left{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
.footer-brand{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit; opacity:.9}
.footer-brand:hover{opacity:1}
.footer-logo{width:28px; height:28px; object-fit:cover; border-radius:.5rem; box-shadow:0 2px 8px rgba(0,0,0,.1); border:1px solid rgba(0,0,0,.08)}
.footer-name{font-weight:600; letter-spacing:.2px}
.footer-sep{opacity:.35}
.footer-copy{margin:0; color:var(--muted)}

/* Footer social: Instagram */
.footer-social{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--muted); padding:.35rem .6rem; border-radius:.6rem; transition:background-color .2s, color .2s}
.footer-social:hover,.footer-social:focus{background:linear-gradient(135deg, rgba(135,169,107,.12), rgba(61,139,95,.1)); color:var(--emerald)}
.footer-social .ig-icon{width:18px; height:18px; border-radius:4px; background:
  radial-gradient(circle at 30% 110%, #fdf497 0%, rgba(253,244,151,.9) 10%, transparent 11%),
  linear-gradient(210deg, #f58529, #feda77, #dd2a7b, #8134af, #515bd4);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.75);
}
.footer-social .ig-text{font-size:.95rem; font-weight:600}
.footer-social .ig-icon-img{width:18px; height:18px; object-fit:contain; border-radius:4px; display:inline-block}
/* Assure un bon wrapping si étroit */
.footer-left{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}

/* Decorative leaf divider before contact */
.section-leaf{height:56px; margin: -2rem auto 0; max-width:1100px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 56"><g fill="none" stroke="%235a6d64" stroke-opacity="0.18" stroke-width="1.3"><path d="M0 28 C 80 6, 120 50, 200 28 S 320 6, 400 28 S 520 50, 600 28"/></g><g fill="%233d8b5f" fill-opacity="0.12"><path d="M190 28 q12 -18 24 0 q-12 14 -24 0Z"/><path d="M390 28 q12 -18 24 0 q-12 14 -24 0Z"/><path d="M290 26 q10 -14 20 0 q-10 12 -20 0Z"/></g><g fill="%2387a96b" fill-opacity="0.10"><path d="M150 30 q10 -14 20 0 q-10 12 -20 0Z"/><path d="M450 30 q10 -14 20 0 q-10 12 -20 0Z"/></g><g fill="%23b8856f" fill-opacity="0.1"><path d="M95 30 q8 -12 16 0 q-8 10 -16 0Z"/><path d="M495 30 q8 -12 16 0 q-8 10 -16 0Z"/></g></svg>') center/contain no-repeat; opacity:.75}
.back-to-top{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:.5rem; text-decoration:none; border:1px solid rgba(0,0,0,.12); background:#fff}
.back-to-top:hover{background:var(--brand); color:#fff; border-color:var(--brand)}

/* Responsive */
@media (max-width: 1100px){
  .palm-deco{opacity:.5}
  .palm-left{left:-10vw; width:110px; height:140px}
  .palm-right{right:-8vw; width:100px; height:130px}
}
@media (max-width: 900px){
  .exp-grid{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .masonry{columns:2 240px}
  .palm-deco{opacity:.4; transform:scale(0.8)}
  .palm-left{left:-12vw; width:90px; height:120px}
  .palm-right{right:-10vw; width:80px; height:110px}
  .palm-bottom-left{left:-8vw; width:85px; height:115px}
  .palm-top-right{right:-8vw; width:95px; height:125px}
  .palm-contact{left:2%; width:75px; height:105px}
  .section{padding:4rem 0}
  .container{width:min(calc(100% - 1.5rem), 900px)}
}
@media (max-width: 680px){
  .hero{min-height:auto}
  .nav{display:none; position:absolute; right:1rem; top:60px; background:#fff; padding:.6rem; border-radius:.8rem; flex-direction:column; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.08); z-index:100}
  .nav.open{display:flex}
  .nav-toggle{display:block}
  .hero-inner{padding:4rem 0 3.5rem}
  .exp-grid{grid-template-columns:1fr}
  .masonry{columns:1 280px}
  .palm-deco{display:none}
  .section::before,.section::after{display:none}
  .section{padding:3rem 0}
  .logo-badge{display:none}
  .btn{padding:.7rem 1rem; font-size:0.9rem; width:100%; text-align:center}
  .cta-group{flex-direction:column; gap:.6rem; width:100%}
  .brand-name{font-size:0.85rem}
  h1{font-size:clamp(1.8rem, 6vw, 2.5rem); margin-bottom:1rem}
  h2{font-size:clamp(1.4rem, 5vw, 2rem); margin-bottom:.8rem}
  .tile-media{aspect-ratio:4/3}
  .card{padding:1rem}
  .footer-inner{flex-direction:column; text-align:center; gap:.8rem}
  .footer-left{justify-content:center}
  .contact-form input,.contact-form textarea{width:100%; box-sizing:border-box}
}
@media (max-width: 480px){
  .section{padding:2.5rem 0}
  .hero-inner{padding:4rem 0 3rem}
  .container{width:calc(100% - 1rem)}
  .contact-form input,.contact-form textarea{padding:.6rem .8rem}
}

/* Reveal animation */
.will-reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal{opacity:1; transform:none}