:root{
  --green:#02413e;
  --orange:#e16a4a;
  --cream:#fcf5ed;
  --ink:#1d2b28;
  --muted:#6e655e;
  --instagram-gradient:linear-gradient(45deg,#feda75 0%,#fa7e1e 25%,#d62976 55%,#962fbf 78%,#4f5bd5 100%);
  --page-max:1320px;
  --page-pad:clamp(28px,5vw,86px);
  --section-space:76px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
}

h1,h2,h3,p{
  margin-top:0;
}

h1,h2,h3{
  font-family:"Playfair Display",Georgia,serif;
  font-weight:500;
}

em{
  color:var(--orange);
  font-family:"Playfair Display",Georgia,serif;
}

a{
  color:inherit;
  text-decoration:none;
}

section[id]{
  scroll-margin-top:0;
}

.hero-stage,
.intro-section,
.expertises,
.contact-section,
.project-section{
  width:100%;
  margin:0;
}

.section-pad{
  padding:var(--section-space) 0;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:0;
  border-radius:999px;
  background:var(--green);
  color:#fffaf4;
  cursor:pointer;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:800;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.button:hover{
  transform:translateY(-2px);
}

/* Header and Navigation */
.site-header{
  position:fixed;
  top:0;
  left:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  width:100%;
  height:84px;
  padding:8px clamp(28px,4vw,58px);
  background:#fcf5ed;
  border-bottom:1px solid rgba(2,65,62,.08);
}

.brand{
  position:relative;
  z-index:0;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  color:var(--green);
  line-height:.85;
  transform:none;
}

.brand img{
  display:block;
  width:200px;
  height:auto;
  max-height:68px;
  object-fit:contain;
  filter:
    drop-shadow(0 1px 1px rgba(255,250,244,.9))
    drop-shadow(0 4px 12px rgba(255,250,244,.58))
    drop-shadow(0 8px 18px rgba(10,22,20,.14));
}

.main-nav{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:6px 8px 6px 12px;
  border:1px solid rgba(255,250,244,.26);
  border-radius:999px;
  background:#993e29;
  box-shadow:0 8px 18px rgba(153,62,41,.16);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:800;
}

.main-nav a{
  position:relative;
  white-space:nowrap;
}

.main-nav a:not(.button){
  padding:10px 12px;
  border-radius:999px;
  color:#fffaf4;
  transition:background .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease;
}

.main-nav a:not(.button):hover,
.main-nav a:not(.button).active{
  color:#993e29;
  background:#ffe3bf;
  box-shadow:0 8px 18px rgba(153,62,41,.14);
  transform:translateY(-1px);
}

.button-small{
  padding:13px 22px;
  border:1px solid rgba(255,250,244,.22);
  background:#733b23;
  color:#fffaf4;
  box-shadow:0 8px 18px rgba(32,54,34,.14);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:800;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-social{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid transparent;
  background:transparent;
  color:#fff;
}

.nav-social:hover,
.nav-social:focus-visible{
  background:#ffe3bf;
  color:#993e29;
}

.menu-toggle{
  display:none;
  border:0;
  background:transparent;
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:#fffaf4;
  box-shadow:0 1px 8px rgba(37,29,22,.25);
  transition:transform .25s ease,opacity .2s ease;
}

.menu-toggle[aria-expanded="true"] span:first-child{
  transform:translateY(3.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child{
  transform:translateY(-3.5px) rotate(-45deg);
}

/* Hero */
.hero-stage{
  position:relative;
  min-height:720px;
  padding-top:84px;
  overflow:hidden;
  background-image:url("../../Images/hero-01.webp");
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 24px 54px rgba(55,40,25,.12);
}

.hero-stage::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse at 12% 9%,rgba(255,250,244,.54) 0%,rgba(255,250,244,.28) 24%,rgba(255,250,244,0) 46%),
    linear-gradient(90deg,rgba(12,35,31,.58) 0%,rgba(12,35,31,.42) 25%,rgba(12,35,31,.16) 48%,rgba(12,35,31,0) 70%),
    linear-gradient(180deg,rgba(12,35,31,.18) 0%,rgba(12,35,31,0) 32%);
  pointer-events:none;
}

.hero{
  position:relative;
}

.hero{
  z-index:2;
}

.hero{
  min-height:622px;
  padding:168px clamp(34px,5vw,76px) 88px;
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:800px;
}

.hero h1{
  position:relative;
  max-width:800px;
  margin:0 0 14px;
  color:#fffaf4;
  font-size:clamp(34px,3.45vw,52px);
  font-weight:700;
  letter-spacing:0;
  line-height:1.03;
  text-shadow:0 4px 16px rgba(10,22,20,.72),0 1px 2px rgba(10,22,20,.56);
}

.hero-kickers{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin:0 0 16px;
  color:#fffaf4;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  line-height:1;
  text-shadow:0 3px 12px rgba(10,22,20,.68);
  text-transform:uppercase;
}

.hero-kickers span{
  display:inline-flex;
  align-items:center;
  gap:14px;
}

.hero-kickers span:not(:last-child)::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fffaf4;
  box-shadow:0 2px 8px rgba(23,18,14,.35);
}

.section-butterflies .wing{
  fill:rgba(225,106,74,.035);
  transform-box:fill-box;
  transform-origin:center;
  animation:butterflyWing 2.8s ease-in-out infinite;
}

.section-butterflies .wing-left-top,
.section-butterflies .wing-left-bottom{
  transform-origin:right center;
}

.section-butterflies .wing-right-top,
.section-butterflies .wing-right-bottom{
  transform-origin:left center;
  animation-delay:.18s;
}

.section-butterflies .wing-detail,
.section-butterflies .butterfly-body{
  fill:none;
  stroke-width:1.45;
}

.section-butterflies .wing-detail{
  opacity:.78;
}

.hero-intro{
  max-width:540px;
  margin:0 0 44px;
  color:#fffaf4;
  font-family:"Grand Hotel",cursive;
  font-size:clamp(18px,1.45vw,22px);
  font-weight:400;
  line-height:1;
  transform:rotate(-1deg);
  text-shadow:0 4px 16px rgba(10,22,20,.74),0 1px 2px rgba(10,22,20,.55);
}

.hero-button{
  position:relative;
  min-width:236px;
  padding:13px 22px;
  border:1px solid rgba(255,250,244,.2);
  border-radius:999px;
  background:rgba(2,65,62,.88);
  box-shadow:0 8px 18px rgba(30,22,14,.1);
  overflow:hidden;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:14px;
  letter-spacing:.2px;
}

.button-butterfly{
  width:34px;
  height:28px;
  margin-left:8px;
  fill:none;
  stroke:#fffaf4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:3;
  opacity:.86;
  transition:stroke .25s ease,transform .25s ease,opacity .25s ease;
}

.button-butterfly .wing{
  fill:rgba(255,250,244,.04);
  transform-box:fill-box;
  animation:butterflyWing 2.8s ease-in-out infinite;
}

.button-butterfly .wing-left-top,
.button-butterfly .wing-left-bottom{
  transform-origin:right center;
}

.button-butterfly .wing-right-top,
.button-butterfly .wing-right-bottom{
  transform-origin:left center;
  animation-delay:.18s;
}

.button-butterfly .wing-detail,
.button-butterfly .butterfly-body{
  fill:none;
  stroke-width:1.5;
}

.hero-button:hover{
  background:#c5d6b0;
  color:var(--green);
  box-shadow:0 8px 18px rgba(32,54,34,.14);
}

.hero-button:hover .button-butterfly{
  stroke:var(--green);
  opacity:1;
  transform:translateX(3px) rotate(3deg);
}

/* About */
.intro-section{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(320px,400px) minmax(460px,600px);
  gap:clamp(40px,4vw,64px);
  align-items:center;
  align-content:start;
  justify-content:center;
  min-height:600px;
  padding:78px clamp(44px,7vw,110px);
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 18%,rgba(225,106,74,.1) 0 120px,transparent 280px),
    radial-gradient(circle at 88% 20%,rgba(2,65,62,.11) 0 140px,transparent 290px),
    linear-gradient(135deg,rgba(255,250,244,.97),rgba(248,238,227,.82));
  box-shadow:0 24px 54px rgba(55,40,25,.08);
}

.intro-section::before,
.intro-section::after{
  content:"";
  position:absolute;
  z-index:0;
  border-radius:50%;
  pointer-events:none;
}

.intro-section::before{
  left:-230px;
  bottom:-310px;
  width:620px;
  height:620px;
  background:radial-gradient(circle,rgba(225,106,74,.12),transparent 68%);
}

.intro-section::after{
  top:0;
  right:0;
  width:48%;
  height:78%;
  border-radius:0;
  background:url("../../Images/olive-leaf-shadow.png") top right / contain no-repeat;
  opacity:.22;
}

.intro-section>.notebook-card,
.intro-section>.intro-copy,
.intro-section>.method-strip{
  position:relative;
  z-index:1;
}

.section-butterflies{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.section-butterflies svg{
  position:absolute;
  width:58px;
  height:48px;
  fill:none;
  stroke:var(--orange);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.2;
  opacity:.34;
  filter:drop-shadow(0 8px 10px rgba(225,106,74,.08));
  animation:butterflyFloat 6s ease-in-out infinite;
}

.section-butterflies svg:nth-child(1){
  top:74px;
  left:29%;
  rotate:-18deg;
}

.notebook-card{
  position:relative;
  top:-20px;
  justify-self:center;
  width:min(100%,400px);
  aspect-ratio:auto;
  margin:0;
  overflow:visible;
  background:transparent;
  filter:drop-shadow(0 18px 26px rgba(87,55,35,.13));
  transition:transform .35s ease,filter .35s ease;
}

.notebook-card:hover{
  transform:translateY(-6px);
  filter:drop-shadow(0 24px 30px rgba(87,55,35,.17));
}

.notebook-card img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  transform:none;
}

.intro-copy{
  max-width:600px;
  padding:0;
  transform:translateY(-22px);
}

.intro-copy h2{
  max-width:460px;
  margin-bottom:28px;
  color:var(--green);
  font-size:clamp(40px,3.7vw,56px);
  font-weight:400;
  line-height:.98;
}

.intro-copy h2 span{
  display:block;
  margin-bottom:0;
  color:#02413e;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1em;
  font-weight:400;
  letter-spacing:0;
  line-height:.88;
  text-transform:none;
}

.intro-copy h2 em{
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-size:1.26em;
  font-weight:400;
  font-style:normal;
}

.intro-copy p{
  max-width:485px;
  color:#000;
  font-size:14px;
  font-weight:400;
  line-height:1.8;
}

.intro-lead{
  margin:30px 0 24px;
  color:#7e9480 !important;
  font-family:"Grand Hotel",cursive;
  font-size:18px !important;
  font-weight:400;
  line-height:1.3 !important;
  white-space:nowrap;
}

.intro-button{
  display:flex;
  width:max-content;
  margin-top:16px;
  padding:10px 17px;
  border-radius:5px;
  background:var(--green);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:11px;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.method-strip{
  grid-column:1 / -1;
  justify-self:center;
  width:calc(100% + clamp(40px,6vw,112px));
  margin-top:-88px;
  padding:34px 25px 24px;
  border-top:1px solid rgba(153,62,41,.18);
  border-radius:22px 22px 10px 10px;
  background:rgba(255,250,244,.5);
  text-align:center;
}

.method-heading p{
  margin:0 0 5px;
  color:var(--green);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

.method-heading h3{
  margin:0 0 45px;
  color:var(--green);
  font-size:clamp(40px,3.7vw,56px);
  font-weight:400;
  line-height:1;
}

.method-heading h3 em{
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-size:1.26em;
  font-style:normal;
}

.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.method-card{
  min-width:0;
  padding:0 clamp(20px,3vw,48px) 8px;
  text-align:left;
}

.method-card + .method-card{
  border-left:1px solid rgba(2,65,62,.14);
}

.method-card-top{
  display:flex;
  align-items:center;
  gap:24px;
  min-height:54px;
  margin-bottom:19px;
}

.method-number{
  color:rgba(153,62,41,.45);
  font-family:"Playfair Display",Georgia,serif;
  font-size:48px;
  font-weight:400;
  line-height:1;
}

.method-card-top img{
  margin-left:6px;
  width:31px;
  height:31px;
  object-fit:contain;
}

.method-card h4{
  margin:0 0 16px;
  color:var(--green);
  font-family:"Playfair Display",Georgia,serif;
  font-size:25px;
  font-weight:500;
  line-height:1;
}

.method-card p{
  max-width:270px;
  margin:0;
  color:var(--green);
  font-size:12px;
  font-weight:400;
  line-height:1.85;
}

.method-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:42px;
  color:#7e9480;
  font-family:"Grand Hotel",cursive;
  font-size:19px;
  line-height:1;
  transition:color .25s ease,transform .25s ease;
}

.method-link:hover{
  color:var(--green);
  transform:translateX(4px);
}

/* Services */
.expertises{
  overflow:hidden;
  background:#fbf5ee;
}

.services-intro{
  position:relative;
  overflow:hidden;
  min-height:178px;
  background:#fbf5ee;
}

.services-intro::before{
  content:"";
  position:absolute;
  top:-105px;
  left:-55px;
  width:520px;
  height:390px;
  background:url("../../Images/olive-leaf-shadow.png") right top / cover no-repeat;
  opacity:.3;
  transform:scaleX(-1) rotate(8deg);
}

.services-intro-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(330px,500px);
  align-items:center;
  gap:clamp(36px,8vw,150px);
  width:min(calc(100% - (var(--page-pad) * 2)),var(--page-max));
  min-height:178px;
  margin:0 auto;
  padding:30px 0;
}

.services-title,
.services-summary{
  position:relative;
  z-index:1;
}

.services-title p{
  margin:0 0 5px;
  color:var(--green);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

.services-title h2{
  margin:0;
  color:var(--green);
  font-size:clamp(40px,3.7vw,56px);
  font-weight:400;
  line-height:1;
}

.services-title h2 em{
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-size:1.26em;
  font-style:normal;
}

.services-summary p{
  margin:0 0 12px;
  color:var(--green);
  font-size:12px;
  font-weight:400;
  line-height:1.7;
}

.services-project-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  padding:9px 18px;
  border:1px solid rgba(153,62,41,.55);
  color:var(--green);
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}

.services-project-link:hover{
  background:var(--green);
  color:#fffaf4;
}

.services-panels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  min-height:390px;
}

.service-panel{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:390px;
  padding:clamp(26px,4vw,64px);
  overflow:hidden;
  isolation:isolate;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  color:#fffaf4;
}

.service-panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(10,22,20,.1) 0%,rgba(10,22,20,.66) 100%);
}

.service-panel-strategy{
  background-image:url("../../Images/01-cactus.webp");
}

.service-panel-identity{
  background-image:url("../../Images/02-pots.webp");
}

.service-panel-creation{
  background-image:url("../../Images/03-ordi.webp");
}

.service-panel>div{
  max-width:310px;
}

.service-panel p{
  margin:0 0 12px;
  color:#fffaf4;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:1px;
  line-height:1.35;
  text-transform:uppercase;
}

.service-panel h3{
  min-height:2.08em;
  margin:0 0 26px;
  color:#fffaf4;
  font-size:clamp(28px,2.25vw,36px);
  font-weight:400;
  line-height:1.3;
  white-space:nowrap;
}

.service-panel a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fffaf4;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:.5px;
  transition:transform .25s ease;
}

.service-panel a:hover{
  transform:translateX(5px);
}

.service-panel a span{
  font-size:18px;
  line-height:.7;
}

.services-marquee{
  overflow:hidden;
  background:#993e29;
  color:#fffaf4;
}

.services-marquee-track{
  display:flex;
  width:max-content;
  animation:servicesMarquee 28s linear infinite;
}

.services-marquee span{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:.45px;
  text-transform:uppercase;
  white-space:nowrap;
}

.services-marquee span::before{
  content:"•";
  margin-right:18px;
  color:#c5d6b0;
}

@keyframes servicesMarquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-33.333%);
  }
}

/* Services detail */
.services-detail{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:88px clamp(24px,3vw,56px) 80px;
  background:
    radial-gradient(ellipse at 8% 16%,rgba(153,62,41,.09) 0%,rgba(153,62,41,.035) 23%,transparent 46%),
    radial-gradient(ellipse at 93% 84%,rgba(153,62,41,.07) 0%,rgba(153,62,41,.02) 20%,transparent 43%),
    #fffaf5;
}

.services-detail-butterfly{
  position:absolute;
  top:98px;
  right:clamp(72px,11vw,220px);
  z-index:0;
  width:78px;
  height:64px;
  fill:none;
  stroke:var(--orange);
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2.2;
  opacity:.34;
  filter:drop-shadow(0 8px 10px rgba(225,106,74,.08));
  rotate:14deg;
  animation:butterflyFloat 6s ease-in-out infinite;
}

.services-detail-butterfly .wing{
  fill:rgba(225,106,74,.035);
  transform-box:fill-box;
  transform-origin:center;
  animation:butterflyWing 2.8s ease-in-out infinite;
}

.services-detail-butterfly .wing-left-top,
.services-detail-butterfly .wing-left-bottom{
  transform-origin:right center;
}

.services-detail-butterfly .wing-right-top,
.services-detail-butterfly .wing-right-bottom{
  transform-origin:left center;
  animation-delay:.18s;
}

.services-detail-butterfly .wing-detail,
.services-detail-butterfly .butterfly-body{
  fill:none;
  stroke-width:1.45;
}

.services-detail-butterfly .wing-detail{
  opacity:.78;
}

.services-detail-heading{
  position:relative;
  z-index:1;
  max-width:860px;
  margin:0 auto 70px;
  text-align:center;
}

.services-detail-heading h2{
  margin:0;
  color:var(--green);
  font-size:clamp(40px,3.7vw,56px);
  font-weight:400;
  line-height:1.02;
}

.services-detail-heading h2 span{
  display:block;
  color:#993e29;
}

.services-detail-heading h2 em{
  color:#993E29;
  font-family:"Grand Hotel",cursive;
  font-size:1.26em;
  font-style:normal;
}

.services-detail-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(34px,3.1vw,58px);
  width:min(100%,1720px);
  margin:0 auto;
}

.services-detail-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  color:#6c8177;
}

.services-detail-card>img{
  width:44px;
  height:44px;
  margin-bottom:16px;
  object-fit:contain;
}

.services-detail-kicker{
  min-height:32px;
  margin:0 0 7px;
  color:#7e9480;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:12px;
  font-weight:400;
  line-height:1.45;
}

.services-detail-card h3{
  min-height:64px;
  margin:0 0 23px;
  color:var(--green);
  font-size:clamp(25px,2.05vw,33px);
  font-weight:500;
  line-height:1.02;
}

.services-detail-card>p:not(.services-detail-kicker){
  flex:1;
  margin:0;
  color:#7e9480;
  font-size:13px;
  font-weight:400;
  line-height:1.8;
}

.services-detail-card strong{
  color:var(--green);
  font-weight:700;
}

.services-detail-card a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:36px;
  color:#993e29;
  font-family:"Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  transition:color .25s ease,transform .25s ease;
}

.services-detail-card a span{
  font-size:18px;
  line-height:.7;
}

.services-detail-card a:hover{
  color:var(--green);
  transform:translateX(4px);
}

/* Your project */
.project-section{
  position:relative;
  display:grid;
  grid-template-columns:40% 60%;
  min-height:560px;
  overflow:hidden;
  background:#fdf4ee;
}

.project-image{
  min-width:0;
}

.project-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:560px;
  object-fit:cover;
}

.project-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-self:center;
  justify-content:space-between;
  min-width:0;
  height:70%;
  padding:0 clamp(48px,5.4vw,108px);
}

.project-copy h2{
  margin:0;
  color:var(--green);
  font-size:clamp(40px,3.7vw,56px);
  font-weight:500;
  line-height:1.2;
}

.project-copy h2 em{
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-size:1.26em;
  font-style:normal;
  font-weight:400;
  white-space:nowrap;
}

.project-divider{
  display:block;
  width:60px;
  height:2px;
  margin:29px 0 42px;
  background:#993e29;
}

.project-text{
  max-width:500px;
  color:#52736f;
  font-size:19px;
  font-weight:600;
  line-height:1.6;
}

.project-text p{
  margin:0 0 30px;
}

.project-text p:last-child{
  margin-bottom:0;
}

.project-button{
  align-self:flex-start;
  margin-top:36px;
  padding:15px 28px;
  border-radius:4px;
  background:#a9452d;
  color:#fffaf4;
  font-size:12px;
}

.project-button:hover{
  background:#733b23;
}

.project-butterfly{
  position:absolute;
  top:255px;
  right:40px;
  z-index:0;
  width:600px;
  height:auto;
  opacity:.4;
  filter:none;
  pointer-events:none;
}

/* Contact */
.contact-section{
  position:relative;
  display:grid;
  place-items:center;
  min-height:clamp(230px,18vw,340px);
  padding:28px var(--page-pad);
  background:url("../../Images/contact.webp") center / cover no-repeat;
  text-align:center;
}

.contact-content{
  position:relative;
  z-index:1;
}

.contact-butterfly{
  display:block;
  width:82px;
  height:auto;
  margin:0 auto 17px;
}

.contact-content h2{
  margin:0;
  color:#fffaf4;
  font-family:"Grand Hotel",cursive;
  font-size:clamp(44px,5vw,70px);
  font-weight:400;
  line-height:1.1;
  text-shadow:0 2px 12px rgba(43,18,12,.26);
}

.contact-cta{
  margin-top:26px;
  padding:16px 32px;
  border-radius:5px;
  background:#fffaf4;
  color:#52736f;
  font-size:14px;
  font-weight:800;
  letter-spacing:.35px;
}

.contact-cta:hover{
  background:#ffe3bf;
  color:#733b23;
}

/* Contact modal */
body.modal-open{
  overflow:hidden;
}

.contact-modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(20,32,29,.56);
  backdrop-filter:blur(5px);
}

.contact-modal[hidden]{
  display:none;
}

.contact-modal-panel{
  position:relative;
  width:min(100%,760px);
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:44px 52px 42px;
  border:1px solid rgba(153,62,41,.12);
  border-radius:22px;
  background:#fffaf5;
  box-shadow:0 24px 60px rgba(16,21,18,.3);
}

.contact-modal-heading{
  max-width:590px;
  margin-bottom:30px;
}

.contact-modal-icon{
  display:grid;
  width:42px;
  height:42px;
  margin-bottom:18px;
  place-items:center;
  border-radius:50%;
  background:#f6e5d8;
  color:#a9452d;
  font-size:28px;
  line-height:1;
}

.contact-modal-heading>p:first-of-type{
  margin:0 0 7px;
  color:#993e29;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.contact-modal-panel h2{
  margin:0 0 11px;
  color:var(--green);
  font-size:clamp(32px,4vw,44px);
  line-height:1.12;
}

.contact-modal-panel h2 em{
  color:#a9452d;
  font-family:"Grand Hotel",cursive;
  font-size:.85em;
  font-style:normal;
}

.contact-modal-intro{
  margin:0;
  color:#6c8177;
  font-size:13px;
  line-height:1.65;
}

.contact-modal-close{
  position:absolute;
  top:20px;
  right:20px;
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f6e9df;
  color:#733b23;
  cursor:pointer;
  font-size:26px;
  line-height:1;
}

.contact-modal-form label{
  display:block;
  margin-bottom:19px;
  color:var(--green);
  font-size:12px;
  font-weight:700;
}

.contact-modal-form label span,
.contact-modal-actions p span{
  color:#a9452d;
}

.contact-modal-form label small{
  color:#8a968a;
  font-size:11px;
  font-weight:400;
}

.contact-modal-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.contact-modal-form input,
.contact-modal-form textarea{
  display:block;
  width:100%;
  margin-top:8px;
  padding:13px 15px;
  border:1px solid #e2d9cf;
  border-radius:9px;
  outline:0;
  background:#fff;
  color:var(--ink);
  font:14px "Be Vietnam Pro","Nunito Sans",Arial,sans-serif;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.contact-modal-form input::placeholder,
.contact-modal-form textarea::placeholder{
  color:#a5ada7;
}

.contact-modal-form input:focus,
.contact-modal-form textarea:focus{
  border-color:#52736f;
  box-shadow:0 0 0 3px rgba(82,115,111,.13);
}

.contact-modal-form textarea{
  min-height:124px;
  resize:vertical;
}

.contact-modal-anti-spam{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.contact-modal-challenge{
  max-width:220px;
}

.contact-modal-challenge input{
  max-width:110px;
}

.contact-form-status{
  min-height:0;
  margin:0 0 12px;
  font-size:13px;
  font-weight:600;
}

.contact-form-status:empty{
  display:none;
}

.contact-form-status[data-state="error"]{
  color:#a23e2b;
}

.contact-form-status[data-state="success"]{
  color:var(--green);
}

.contact-modal-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:18px;
  border-top:1px solid #e9e1d8;
}

.contact-modal-actions p{
  margin:0;
  color:#889489;
  font-size:11px;
  line-height:1.65;
}

.contact-modal-actions p a,
.footer-links a{
  color:var(--green);
  text-decoration:underline;
  text-underline-offset:3px;
}

.contact-modal-actions p a:hover,
.footer-links a:hover{
  color:#993e29;
}

.contact-modal-form .button{
  flex-shrink:0;
  padding:14px 20px;
  background:#a9452d;
}

.contact-modal-form .button:hover{
  background:#733b23;
}

.contact-modal-form .button:disabled{
  opacity:.55;
  cursor:wait;
  transform:none;
}

.contact-success-panel{
  width:min(100%,520px);
  padding:64px 50px 52px;
  text-align:center;
}

.contact-success-icon{
  display:block;
  width:82px;
  height:82px;
  margin:0 auto 26px;
  color:var(--green);
}

.contact-success-icon svg{
  display:block;
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.contact-success-icon circle{
  fill:#eaf1e5;
  stroke:#c5d6b0;
  stroke-width:1.5;
}

.contact-success-icon path{
  stroke-width:3.5;
}

.contact-success-kicker{
  margin:0 0 12px;
  color:#a9452d;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;
}

.contact-success-panel h2{
  margin-bottom:17px;
}

.contact-success-panel>p:last-of-type{
  max-width:390px;
  margin:0 auto 30px;
  color:#6c8177;
  font-size:14px;
  line-height:1.7;
}

.contact-success-action{
  min-width:180px;
  padding:14px 24px;
  background:#a9452d;
}

.contact-success-action:hover{
  background:#733b23;
}

/* Footer */
.site-footer{
  padding:0 var(--page-pad);
  background:#f7efe6;
  color:var(--muted);
}

.footer-main,
.footer-bottom{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  max-width:var(--page-max);
  margin:0 auto;
}

.footer-main{
  gap:24px;
  min-height:118px;
}

.site-footer .brand img{
  width:170px;
  height:auto;
  max-height:none;
  filter:none;
}

.site-footer .brand{
  transform:none;
}

.footer-signature{
  margin:0;
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-size:clamp(27px,2.5vw,26px);
  font-weight:400;
  line-height:1.15;
  text-align:center;
}

.footer-socials{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:end;
}

.footer-portfolio{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  transition:transform .2s ease;
}

.footer-portfolio img{
  display:block;
  flex:0 0 auto;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.1);
}

.footer-portfolio:hover,
.footer-portfolio:focus-visible{
  transform:translateY(-2px);
}

.footer-bottom{
  gap:20px;
  min-height:54px;
  border-top:1px solid #e2d4c7;
  font-size:11px;
}

.footer-copyright{
  grid-column:2;
  text-align:center;
}

.footer-links{
  display:inline-flex;
  flex-wrap:wrap;
  grid-column:3;
  justify-self:end;
  justify-content:flex-end;
  gap:8px 20px;
}

.site-footer .footer-links a{
  text-decoration:none;
}

.site-footer .footer-links a:hover,
.site-footer .footer-links a:focus-visible{
  text-decoration:underline;
}

.footer-social{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border:1px solid transparent;
  border-radius:50%;
  background:var(--instagram-gradient);
  color:#fff;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.footer-social:hover,
.footer-social:focus-visible{
  border-color:#c13584;
  background:#fffaf4;
  color:#c13584;
  transform:translateY(-2px);
}

/* Glyphes officiels du pack Instagram publié par Meta. */
.instagram-glyph{
  display:block;
  width:20px;
  height:20px;
}

.footer-social .instagram-glyph{
  width:19px;
  height:19px;
}

.instagram-glyph-dark,
.nav-social:hover .instagram-glyph-light,
.nav-social:focus-visible .instagram-glyph-light,
.footer-social:hover .instagram-glyph-light,
.footer-social:focus-visible .instagram-glyph-light{
  display:none;
}

.nav-social:hover .instagram-glyph-dark,
.nav-social:focus-visible .instagram-glyph-dark,
.footer-social:hover .instagram-glyph-dark,
.footer-social:focus-visible .instagram-glyph-dark{
  display:block;
}

/* Privacy policy */
.privacy-page{
  background:#fcf5ed;
}

.privacy-back{
  padding:12px 20px;
  border:1px solid rgba(2,65,62,.25);
  border-radius:999px;
  color:var(--green);
  font-size:12px;
  font-weight:700;
  transition:background .2s ease,color .2s ease;
}

.privacy-back:hover{
  background:var(--green);
  color:#fffaf4;
}

.privacy-page main{
  padding-top:84px;
}

.privacy-hero{
  position:relative;
  overflow:hidden;
  padding:86px var(--page-pad) 82px;
  background:radial-gradient(circle at 90% 5%,#f5dccb 0,transparent 38%),linear-gradient(130deg,#fffaf4,#f7ebe0);
}

.privacy-hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--page-max);
  margin:auto;
}

.privacy-eyebrow{
  margin-bottom:20px;
  color:#993e29;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.privacy-hero h1{
  max-width:850px;
  margin-bottom:24px;
  color:var(--green);
  font-size:clamp(42px,5vw,70px);
  font-weight:400;
  line-height:1.08;
}

.privacy-hero h1 em{
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-style:normal;
  white-space:nowrap;
}

.privacy-hero-inner>p:not(.privacy-eyebrow){
  max-width:600px;
  margin-bottom:24px;
  color:#52736f;
  font-size:16px;
  line-height:1.7;
}

.privacy-updated{
  color:#7e9480;
  font-size:11px;
}

.privacy-butterfly{
  position:absolute;
  right:6%;
  bottom:24px;
  width:150px;
  max-width:22%;
  opacity:.65;
  transform:rotate(-12deg);
}

.privacy-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:clamp(36px,6vw,92px);
  max-width:var(--page-max);
  margin:auto;
  padding:76px var(--page-pad) 100px;
}

.privacy-toc{
  position:sticky;
  top:112px;
  align-self:start;
  display:grid;
  gap:12px;
  padding-left:20px;
  border-left:1px solid #dbcfc1;
  color:#52736f;
  font-size:12px;
}

.privacy-toc p{
  margin:0 0 6px;
  color:#993e29;
  font-size:11px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.privacy-toc a:hover{
  color:#993e29;
}

.privacy-content{
  min-width:0;
}

.privacy-card{
  scroll-margin-top:110px !important;
  margin-bottom:24px;
  padding:clamp(26px,4vw,46px);
  border:1px solid #ede0d3;
  border-radius:20px;
  background:#fffaf5;
  box-shadow:0 14px 38px rgba(55,40,25,.04);
}

.privacy-number{
  display:block;
  margin-bottom:8px;
  color:#993e29;
  font-family:"Grand Hotel",cursive;
  font-size:28px;
  line-height:1;
}

.privacy-card h2{
  margin-bottom:22px;
  color:var(--green);
  font-size:clamp(25px,2.4vw,34px);
  font-weight:400;
  line-height:1.2;
}

.privacy-card p{
  margin-bottom:15px;
  color:#506b66;
  line-height:1.8;
}

.privacy-card p:last-child{
  margin-bottom:0;
}

.privacy-card strong{
  color:var(--green);
  font-weight:700;
}

.privacy-card a{
  color:#993e29;
  text-decoration:underline;
  text-underline-offset:3px;
  overflow-wrap:anywhere;
}

.legal-details{
  display:grid;
  gap:0;
  margin:24px 0 0;
}

.legal-details>div{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:18px;
  padding:12px 0;
  border-top:1px solid #ede0d3;
}

.legal-details dt{
  color:#7e9480;
  font-size:12px;
  font-weight:700;
}

.legal-details dd{
  min-width:0;
  margin:0;
  color:var(--green);
}

.privacy-contact{
  padding:30px 36px;
  border-radius:18px;
  background:#993e29;
  color:#fffaf4;
}

.privacy-contact p{
  margin-bottom:8px;
  font-family:"Playfair Display",Georgia,serif;
  font-size:25px;
}

.privacy-contact a{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}

@media(max-width:800px){
  .privacy-layout{
    grid-template-columns:1fr;
    gap:36px;
    padding-top:48px;
  }

  .privacy-toc{
    position:static;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 18px;
  }

  .privacy-toc p{
    grid-column:1 / -1;
  }
}

@media(max-width:480px){
  .privacy-hero{
    padding:64px 28px 58px;
  }

  .privacy-hero h1 em{
    white-space:normal;
  }

  .privacy-butterfly{
    width:76px;
    right:18px;
    bottom:10px;
  }

  .privacy-toc{
    grid-template-columns:1fr;
  }

  .privacy-back{
    padding:9px 12px;
    font-size:10px;
  }

  .privacy-contact{
    padding:26px;
  }

  .legal-details>div{
    grid-template-columns:1fr;
    gap:2px;
  }
}

/* Motion */
@keyframes butterflyFloat{
  0%,100%{
    transform:translate3d(0,0,0) rotate(-3deg);
  }
  35%{
    transform:translate3d(5px,-7px,0) rotate(4deg);
  }
  70%{
    transform:translate3d(-3px,-3px,0) rotate(-1deg);
  }
}

@keyframes butterflyWing{
  0%,100%{
    transform:scaleX(1);
  }
  45%{
    transform:scaleX(.88);
  }
  70%{
    transform:scaleX(1.04);
  }
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Responsive */
@media(max-width:1180px){
  .main-nav{
    gap:10px;
    font-size:12px;
  }

  .main-nav a:not(.button){
    padding:9px 10px;
  }

  .button-small{
    padding:12px 18px;
  }

  .brand img{
    width:190px;
  }

  .intro-section{
    grid-template-columns:minmax(280px,360px) minmax(0,470px);
    gap:clamp(34px,5vw,64px);
    align-items:center;
  }

  .notebook-card{
    top:-10px;
    width:min(100%,360px);
    margin:0;
  }

  .intro-copy{
    transform:translateY(-12px);
  }

  .intro-lead{
    white-space:normal;
  }

  .service-panel{
    padding:34px;
  }

  .services-detail-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:42px;
  }

  .project-section{
    grid-template-columns:minmax(310px,42%) minmax(0,1fr);
    min-height:520px;
  }

  .project-image img{
    width:100%;
    height:100%;
    min-height:520px;
  }

  .project-copy{
    align-self:stretch;
    justify-content:center;
    height:auto;
    padding:42px clamp(40px,4vw,62px);
  }
}

@media(min-width:769px) and (max-width:1180px){
  .services-detail-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }

  .services-detail-card{
    grid-column:span 2;
  }

  .services-detail-card:nth-child(4){
    grid-column:2 / span 2;
  }
}

@media(max-width:900px){
  .hero-stage{
    min-height:680px;
    background-position:58% center;
  }

  .site-header{
    gap:18px;
  }

  .hero-copy{
    max-width:560px;
  }

  .project-copy h2{
    white-space:normal;
  }
}

@media(max-width:1040px){
  html{
    scroll-padding-top:82px;
  }

  section[id]{
    scroll-margin-top:0;
  }

  .hero-stage{
    padding-top:82px;
  }

  .site-header{
    height:82px;
    padding:14px 22px 8px;
  }

  .brand img{
    width:155px;
    max-height:60px;
  }

  .menu-toggle{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:44px;
    height:44px;
    border-radius:50%;
    background:#993e29;
    box-shadow:0 10px 22px rgba(153,62,41,.16);
    backdrop-filter:blur(6px);
    transition:background .25s ease,box-shadow .25s ease;
    z-index:22;
  }

  .menu-toggle[aria-expanded="true"]{
    background:#993e29;
    box-shadow:0 10px 22px rgba(153,62,41,.16);
  }

  .menu-toggle[aria-expanded="true"] span{
    background:#fffaf4;
    box-shadow:none;
  }

  .main-nav{
    position:absolute;
    top:72px;
    right:22px;
    left:auto;
    z-index:21;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    width:min(238px,calc(100vw - 72px));
    padding:12px;
    border:1px solid rgba(255,250,244,.26);
    border-radius:22px;
    background:#993e29;
    box-shadow:0 20px 42px rgba(153,62,41,.2);
    backdrop-filter:blur(12px);
    opacity:0;
    pointer-events:none;
    visibility:hidden;
    transform:translateY(-10px) scale(.98);
    transform-origin:top right;
    transition:opacity .25s ease,transform .25s ease,visibility .25s ease;
  }

  .main-nav.open{
    opacity:1;
    pointer-events:auto;
    visibility:visible;
    transform:translateY(0) scale(1);
  }

  .main-nav a:not(.button){
    width:100%;
    padding:8px 12px;
    color:#fffaf4;
  }

  .main-nav a:not(.button):hover,
  .main-nav a:not(.button).active{
    color:#993e29;
    background:#ffe3bf;
  }

  .button-small{
    width:100%;
    margin-top:4px;
    padding:10px 14px;
    background:#733b23;
    color:#fffaf4;
  }

  .nav-actions{
    width:100%;
    margin-top:4px;
  }

  .nav-actions .button-small{
    flex:1;
    width:auto;
    margin-top:0;
  }
}

@media(min-width:769px) and (max-width:820px){
  .intro-section{
    display:block;
    min-height:0;
    padding:64px 46px;
  }

  .notebook-card{
    top:0;
    width:min(100%,420px);
    margin:0 auto 44px;
  }

  .intro-copy{
    max-width:560px;
    margin:0 auto;
    transform:none;
  }

  .method-strip{
    width:100%;
    margin-top:46px;
  }
}

@media(max-width:768px){
  :root{
    --page-pad:28px;
    --section-space:54px;
  }

  .intro-section{
    display:block;
  }

  .contact-section{
    display:grid;
    min-height:250px;
    padding:28px var(--page-pad);
  }

  .intro-section{
    padding:58px 24px;
  }

  .method-strip{
    width:100%;
    margin-top:28px;
    padding:30px 22px 24px;
  }

  .method-heading h3{
    margin-bottom:34px;
  }

  .method-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .method-card{
    padding:20px 0;
  }

  .method-card + .method-card{
    border-top:1px solid rgba(2,65,62,.14);
    border-left:0;
  }

  .method-card p{
    max-width:420px;
  }

  .notebook-card{
    top:0;
    width:min(330px,100%);
    height:auto;
    margin:0 auto 38px;
  }

  .intro-copy{
    max-width:none;
  }

  .intro-copy{
    transform:none;
  }

  .intro-copy h2{
    margin-bottom:24px;
  }

  .intro-copy p{
    font-size:13px;
  }

  .intro-lead{
    font-size:19px !important;
  }

  .contact-content h2{
    font-size:clamp(44px,10vw,56px);
  }

  .expertises{
    margin-top:0;
  }

  .services-intro-inner{
    grid-template-columns:1fr;
    gap:22px;
    width:100%;
    min-height:0;
    padding:42px var(--page-pad);
  }

  .services-intro::before{
    top:-260px;
    left:-230px;
    width:430px;
  }

  .services-panels{
    grid-template-columns:1fr;
    min-height:0;
  }

  .service-panel{
    min-height:330px;
    padding:42px var(--page-pad);
  }

  .service-panel h3{
    min-height:2.08em;
    font-size:clamp(24px,7vw,32px);
    white-space:nowrap;
  }

  .services-marquee span{
    padding-top:9px;
    padding-bottom:9px;
  }

  .services-detail{
    padding:64px var(--page-pad) 58px;
  }

  .services-detail-heading{
    margin-bottom:46px;
  }

  .services-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:42px 30px;
  }

  .services-detail-card h3{
    font-size:26px;
  }

  .services-detail-card>p:not(.services-detail-kicker){
    font-size:13px;
  }

  .project-section{
    grid-template-columns:1fr;
    min-height:0;
  }

  .project-image img{
    width:100%;
    height:400px;
    min-height:0;
  }

  .project-image{
    padding:0;
  }

  .project-copy{
    width:100%;
    height:auto;
    padding:58px var(--page-pad) 64px;
  }

  .project-butterfly{
    display:none;
  }
}

@media(max-width:680px){
  .hero-stage{
    min-height:0;
    background-image:url("../../Images/hero-01.webp");
    background-position:58% center;
  }

  .hero{
    min-height:540px;
    padding:128px 24px 40px;
  }

  .hero-copy{
    max-width:390px;
  }

  .hero h1{
    max-width:360px;
    margin-bottom:12px;
    font-size:30px;
    line-height:1.05;
  }

  .hero-intro{
    max-width:360px;
    margin-bottom:24px;
    font-size:18px;
    line-height:1.05;
  }

  .hero-kickers{
    display:flex;
    flex-wrap:nowrap;
    justify-content:start;
    gap:8px;
    max-width:360px;
    margin-bottom:16px;
    font-size:8.5px;
    letter-spacing:.45px;
    line-height:1;
  }

  .hero-kickers span{
    gap:8px;
    white-space:nowrap;
  }

  .hero-kickers span::after{
    content:none;
  }

  .section-butterflies svg:nth-child(1){
    left:72%;
  }

  .site-footer .brand img{
    width:150px;
  }
}

@media(max-width:1000px){
  .footer-main,
  .footer-bottom{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
  }

  .footer-main{
    gap:16px;
    padding:28px 0 24px;
  }

  .footer-socials,
  .footer-links{
    justify-self:center;
  }

  .footer-bottom{
    gap:10px;
    padding:17px 0 22px;
  }

  .footer-copyright,
  .footer-links{
    grid-column:1;
  }

  .footer-links{
    justify-content:center;
  }
}

@media(min-width:681px) and (max-width:720px){
  .hero{
    min-height:540px;
    padding-top:128px;
    padding-bottom:40px;
  }
}

@media(max-width:520px){
  .contact-modal{
    padding:16px;
  }

  .contact-modal-panel{
    max-height:calc(100vh - 32px);
    padding:35px 24px 26px;
  }

  .contact-modal-panel h2{
    font-size:31px;
  }

  .contact-modal-row{
    grid-template-columns:1fr;
    gap:0;
  }

  .contact-modal-actions{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
  }

  .contact-modal-form .button{
    width:100%;
  }

  .contact-success-panel{
    padding:54px 28px 40px;
  }

  .project-image img{
    height:320px;
  }

  .project-copy{
    padding:46px 28px 52px;
  }

  .project-divider{
    margin:24px 0 30px;
  }

  .project-text{
    font-size:14px;
  }

  .hero h1{
    max-width:330px;
    font-size:28px;
  }

  .hero-kickers{
    max-width:330px;
    gap:6px;
    font-size:7.4px;
    letter-spacing:.25px;
  }

  .hero-kickers span{
    gap:6px;
  }

  .hero-button{
    min-width:0;
    width:auto;
    max-width:none;
    padding:9px 13px;
    font-size:10.5px;
    letter-spacing:.2px;
  }

  .button-butterfly{
    width:22px;
    height:18px;
    margin-left:4px;
    stroke-width:3.4;
  }

  .intro-button{
    padding:9px 14px;
    font-size:9px;
  }

  .services-summary p{
    font-size:11px;
  }

  .service-panel{
    min-height:290px;
    padding:32px 28px;
  }

  .service-panel h3{
    margin-bottom:20px;
    font-size:clamp(24px,7vw,30px);
  }

  .services-detail{
    padding:54px 28px;
  }

  .services-detail-heading{
    margin-bottom:38px;
  }

  .services-detail-grid{
    grid-template-columns:1fr;
    gap:36px;
    max-width:390px;
  }

  .services-detail-card h3{
    min-height:0;
    font-size:28px;
  }

  .services-detail-card a{
    margin-top:20px;
  }

}

@media(max-width:425px){
  .services-detail-butterfly{
    display:none;
  }

  .services-detail-heading h2 em{
    display:block;
    white-space:nowrap;
  }

  .services-detail-card h3{
    min-height:0;
    font-size:clamp(19px,6.2vw,24px);
    white-space:nowrap;
  }

  .services-detail-card h3 br{
    display:none;
  }

  .section-butterflies svg:nth-child(1){
    display:none;
  }
}

@media(max-width:768px){
  .main-nav{
    align-items:center;
    text-align:center;
  }

  .intro-copy,
  .services-title,
  .services-summary,
  .project-copy{
    text-align:center;
  }

  .intro-copy,
  .intro-copy h2,
  .intro-copy p,
  .project-text{
    margin-right:auto;
    margin-left:auto;
  }

  .intro-button{
    margin-right:auto;
    margin-left:auto;
  }

  .intro-copy h2,
  .method-heading h3,
  .services-title h2,
  .services-detail-heading h2,
  .project-copy h2{
    font-size:clamp(32px,5vw,38px);
  }

  .method-card{
    text-align:center;
  }

  .method-card-top{
    justify-content:center;
  }

  .method-card h4{
    font-size:25px;
  }

  .method-card p{
    margin-right:auto;
    margin-left:auto;
  }

  .service-panel h3{
    min-height:0;
    white-space:normal;
  }

  .services-detail-card{
    align-items:center;
    text-align:center;
  }

  .services-detail-card>p:not(.services-detail-kicker){
    max-width:36ch;
    margin-right:auto;
    margin-left:auto;
  }

  .project-copy{
    align-items:center;
  }

  .project-divider{
    margin-right:auto;
    margin-left:auto;
  }

  .project-button{
    align-self:center;
  }

  .privacy-hero-inner,
  .privacy-toc,
  .privacy-card,
  .privacy-contact{
    text-align:center;
  }

  .privacy-hero h1,
  .privacy-hero-inner>p:not(.privacy-eyebrow){
    margin-right:auto;
    margin-left:auto;
  }

  .privacy-hero h1{
    font-size:clamp(34px,5vw,40px);
  }

  .privacy-toc{
    justify-items:center;
    padding-left:0;
    border-left:0;
  }

  .legal-details>div{
    text-align:center;
  }

  .contact-content h2{
    font-size:clamp(26px,4vw,31px);
  }

  .footer-signature{
    font-size:clamp(20px,3vw,23px);
  }

  .services-detail-card>img{
    margin-bottom:6px;
  }
}