/* ===========================================================
   Malerei Frangu — styles.css
   Editorial / craft aesthetic · warm neutrals · terracotta accent
   =========================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Colour — warm limewash / plaster neutrals */
  --paper:        #FBFAF6;
  --bg:           #F4F1EA;
  --bg-plaster:   #ECE7DC;
  --bg-deep:      #211F1C;   /* graphite for dark sections */
  --ink:          #232220;
  --ink-soft:     #5C564D;
  --ink-faint:    #8A8377;
  --line:         rgba(35,34,32,.14);
  --line-soft:    rgba(35,34,32,.08);

  /* One accent — terracotta clay, drawn from the logo's warm petals */
  --accent:       #B4543C;
  --accent-deep:  #8E3D2B;
  --accent-tint:  #E9D9CF;

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:    "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Spacing scale */
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem;  --s-6:4.5rem; --s-7:7rem; --s-8:10rem;

  --shell: 1240px;
  --radius: 4px;
  --radius-lg: 10px;

  --shadow: 0 18px 40px -28px rgba(35,30,24,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.08;letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
::selection{background:var(--accent);color:#fff;}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:.6rem 1rem;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* ---------- Layout shell ---------- */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem);}
.section{padding-block:clamp(4rem,9vw,var(--s-8));}

/* ---------- Typography helpers ---------- */
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent);margin:0 0 1.1rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.6;}
.section-title{
  font-family:var(--display);
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.1rem);
  font-weight:400;letter-spacing:-.02em;line-height:1.04;max-width:18ch;
}
.section-intro{
  margin-top:1.25rem;color:var(--ink-soft);max-width:54ch;
  font-size:clamp(1.02rem,1rem + .25vw,1.18rem);
}
.section-head{margin-bottom:clamp(2.5rem,5vw,4rem);max-width:760px;}
em{font-style:italic;color:var(--accent);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;font-size:.95rem;letter-spacing:.01em;
  padding:.95rem 1.6rem;border-radius:var(--radius);
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;border:1px solid transparent;
}
.btn-sm{padding:.6rem 1.1rem;font-size:.85rem;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px);}
.btn-line{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;}
.btn-line:hover{background:rgba(255,255,255,.08);}

/* ===========================================================
   HEADER
   =========================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.15rem;transition:padding .4s var(--ease);}
.brand-logo{height:clamp(40px,3.4vw,52px);width:auto;transition:height .4s var(--ease);}
.site-header.scrolled{
  background:rgba(248,246,240,.86);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-color:var(--line-soft);
  box-shadow:0 10px 30px -26px rgba(35,30,24,.5);
}
.site-header.scrolled .header-inner{padding-block:.7rem;}
.site-header.scrolled .brand-logo{height:clamp(34px,2.8vw,42px);}

.nav-list{display:flex;gap:2rem;}
.nav-list a{
  position:relative;font-size:.95rem;font-weight:500;color:var(--ink);padding-block:.3rem;
}
.nav-list a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav-list a:hover::after{transform:scaleX(1);transform-origin:left;}

.header-actions{display:flex;align-items:center;gap:1.25rem;}
.header-phone{font-weight:600;font-size:.95rem;letter-spacing:.01em;}
.header-phone:hover{color:var(--accent);}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:30px;height:30px;justify-content:center;align-items:center;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .35s var(--ease),opacity .25s var(--ease);}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile nav panel */
.mobile-nav{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  padding:6.5rem clamp(1.5rem,7vw,3rem) 2.5rem;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-100%);opacity:0;visibility:hidden;
  transition:transform .55s var(--ease),opacity .4s var(--ease),visibility .4s;
}
.mobile-nav.open{transform:translateY(0);opacity:1;visibility:visible;}
.mobile-nav nav{display:flex;flex-direction:column;gap:.4rem;}
.mobile-nav nav a{
  font-family:var(--display);font-size:clamp(2rem,11vw,2.8rem);font-weight:400;
  letter-spacing:-.02em;padding-block:.4rem;border-bottom:1px solid var(--line-soft);
}
.mobile-nav nav a:active{color:var(--accent);}
.mobile-nav-foot{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem;}
.mobile-nav-foot .btn{width:100%;}
.mobile-nav-foot .btn-line{border-color:var(--line);color:var(--ink);}

/* ===========================================================
   HERO
   =========================================================== */
.hero{padding-top:clamp(7rem,14vh,9.5rem);padding-bottom:clamp(2.5rem,6vw,4rem);position:relative;}
.hero-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.4rem;border-bottom:1px solid var(--line);margin-bottom:clamp(1.8rem,4vw,3rem);
}
.hero-top .eyebrow{margin:0;}
.hero-loc{font-size:.85rem;letter-spacing:.04em;color:var(--ink-soft);font-weight:500;}
.hero-loc span{color:var(--ink-faint);margin:0 .35rem;}

.hero-headline{
  font-family:var(--display);font-weight:400;letter-spacing:-.03em;
  font-size:clamp(2.9rem,1.2rem + 8vw,7rem);line-height:.98;
  display:flex;flex-direction:column;gap:.05em;
}
.hero-headline .u{position:relative;white-space:nowrap;}
.hero-headline .u::after{
  content:"";position:absolute;left:0;right:0;bottom:.07em;height:.08em;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 1s var(--ease) .5s;
}
.js .hero-headline .u.lined::after{transform:scaleX(1);}
.no-js .hero-headline .u::after{transform:scaleX(1);}
.hero-line{display:inline-flex;align-items:center;gap:.28em;flex-wrap:wrap;}
.hero-chip{
  display:inline-block;vertical-align:middle;height:.78em;width:1.6em;border-radius:100px;
  overflow:hidden;box-shadow:var(--shadow);transform:translateY(.02em) rotate(-2deg);
  flex:none;
}
.hero-chip img{width:100%;height:100%;object-fit:cover;}

.hero-foot{
  display:grid;grid-template-columns:1fr auto;gap:1.5rem 3rem;align-items:end;
  margin-top:clamp(1.8rem,4vw,2.8rem);
}
.hero-lead{color:var(--ink-soft);max-width:48ch;font-size:clamp(1.05rem,1rem + .35vw,1.2rem);}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;}

/* full-bleed stage image with overlapping meta */
.hero-stage{position:relative;margin-top:clamp(2rem,5vw,3.5rem);}
.hero-stage-img{
  margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  aspect-ratio:16/9;
}
.hero-stage-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.06);}
.hero-meta{
  position:absolute;left:clamp(1rem,3vw,2.2rem);bottom:clamp(-1rem,-1vw,-1.2rem);
  display:flex;background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
}
.hero-meta>div{
  display:flex;flex-direction:column;gap:.15rem;padding:1rem 1.5rem;
  border-right:1px solid var(--line);
}
.hero-meta>div:last-child{border-right:none;}
.hero-meta-num{font-family:var(--display);font-size:clamp(1.2rem,1rem + .9vw,1.7rem);line-height:1;}
.hero-meta-lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-faint);}
.hero-vtag{
  position:absolute;right:clamp(.6rem,2vw,1.4rem);top:clamp(.8rem,3vw,1.6rem);
  writing-mode:vertical-rl;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:#fff;mix-blend-mode:difference;font-weight:600;
}

/* ---------- Local strip ---------- */
.strip{
  border-block:1px solid var(--line);background:var(--bg-plaster);
  overflow:hidden;padding-block:1.05rem;
}
.strip-track{
  display:flex;gap:1.6rem;align-items:center;white-space:nowrap;width:max-content;
  animation:marquee 42s linear infinite;
}
.strip-track span{font-family:var(--display);font-size:1.15rem;color:var(--ink-soft);}
.strip-track span:nth-child(even){color:var(--accent);}
@keyframes marquee{to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none;}}

/* ===========================================================
   ABOUT
   =========================================================== */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
.about-media{position:relative;}
.about-media figure{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;}
.about-media img{width:100%;height:100%;object-fit:cover;}
.about-since{
  position:absolute;top:-1.6rem;right:-.8rem;font-family:var(--display);font-style:italic;
  font-size:clamp(3rem,8vw,5rem);color:var(--accent);opacity:.9;margin:0;line-height:1;
  pointer-events:none;
}
.about-text{margin-top:1.6rem;display:grid;gap:1.1rem;color:var(--ink-soft);max-width:54ch;}
.about-points{
  display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.5rem;margin-top:2rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.about-points li{position:relative;padding-left:1.4rem;font-weight:500;}
.about-points li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--accent);border-radius:1px;transform:rotate(45deg);}

/* ===========================================================
   SERVICES — editorial rows
   =========================================================== */
.services{background:var(--bg-plaster);}
.svc-list{display:flex;flex-direction:column;gap:clamp(.9rem,1.8vw,1.4rem);padding-bottom:14vh;}
/* Scroll-stacking cards: each pins under the header and the next stacks over it */
.svc{
  position:sticky;top:96px;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,4vw,3rem);
  padding:clamp(1.5rem,3vw,2.4rem) clamp(1.4rem,3.5vw,2.6rem);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:0 6px 22px -18px rgba(35,30,24,.20);
  transition:box-shadow .5s var(--ease),transform .5s var(--ease);
}
.svc:nth-child(1){top:90px}
.svc:nth-child(2){top:102px}
.svc:nth-child(3){top:114px}
.svc:nth-child(4){top:126px}
.svc:nth-child(5){top:138px}
.svc:nth-child(6){top:150px}
.svc:nth-child(7){top:162px}
.svc:nth-child(8){top:174px}
.svc:hover{box-shadow:0 10px 28px -20px rgba(35,30,24,.24);}
.svc-num{font-family:var(--display);font-size:1.05rem;color:var(--accent);font-variant-numeric:tabular-nums;}
.svc-body h3{font-family:var(--display);font-size:clamp(1.4rem,1rem + 1.8vw,2.1rem);font-weight:400;letter-spacing:-.02em;}
.svc-body p{margin-top:.55rem;color:var(--ink-soft);max-width:60ch;}
.svc-tag{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--ink-faint);
  border:1px solid var(--line);padding:.3rem .7rem;border-radius:40px;white-space:nowrap;
}

/* ===========================================================
   PROCESS
   =========================================================== */
.process{background:var(--bg-deep);color:var(--paper);}
.process .eyebrow{color:#d98a72;}
.process .eyebrow::before{background:#d98a72;}
.process-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;}
.process .section-intro{color:rgba(251,250,246,.7);}
.process .section-title{color:var(--paper);}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(251,250,246,.14);border:1px solid rgba(251,250,246,.14);border-radius:var(--radius-lg);overflow:hidden;}
.step{background:var(--bg-deep);padding:clamp(1.5rem,3vw,2.2rem);transition:background .4s var(--ease);}
.step:hover{background:#2b2825;}
.step-no{font-family:var(--display);font-size:1.4rem;color:#d98a72;display:block;margin-bottom:1.2rem;}
.step h3{font-size:1.18rem;font-weight:600;margin-bottom:.5rem;}
.step p{color:rgba(251,250,246,.66);font-size:.96rem;}

/* ===========================================================
   QUALITY
   =========================================================== */
.quality-head{display:flex;flex-direction:column;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.quality-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
}
.q-item{background:var(--bg);padding:clamp(1.6rem,3vw,2.4rem);transition:background .4s var(--ease);}
.q-item:hover{background:var(--paper);}
.q-item h3{font-family:var(--display);font-size:1.3rem;font-weight:400;margin-bottom:.65rem;}
.q-item h3::before{content:"";display:block;width:22px;height:2px;background:var(--accent);margin-bottom:1rem;}
.q-item p{color:var(--ink-soft);font-size:.97rem;}

/* ===========================================================
   GALLERY
   =========================================================== */
.ac{background:var(--paper);overflow:hidden;}
.ac-head{max-width:760px;margin-bottom:clamp(1.8rem,4vw,2.6rem);}

.ac-viewport{
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;
  scroll-padding-left:clamp(1.25rem,5vw,3rem);padding-block:1rem;touch-action:pan-x pan-y;
}
.ac-viewport::-webkit-scrollbar{display:none;}
.ac-viewport.dragging{cursor:grabbing;scroll-snap-type:none;}
.ac-track{display:flex;gap:clamp(1rem,1.6vw,1.4rem);width:max-content;padding-inline:clamp(1.25rem,5vw,3rem);}
.ac-card{
  position:relative;flex:0 0 auto;scroll-snap-align:start;
  width:clamp(250px,74vw,340px);height:clamp(400px,58vh,520px);
  border-radius:22px;overflow:hidden;background:var(--bg-plaster);cursor:pointer;
  box-shadow:0 14px 40px -26px rgba(35,30,24,.4);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);-webkit-tap-highlight-color:transparent;
}
.ac-card:hover{transform:translateY(-6px);box-shadow:0 26px 56px -28px rgba(35,30,24,.5);}
.ac-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.ac-img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;transition:transform .7s var(--ease);}
.ac-card:hover .ac-img{transform:scale(1.06);}
.ac-grad{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(20,16,12,.62) 0%,rgba(20,16,12,.12) 34%,rgba(20,16,12,0) 55%);}
.ac-caption{position:absolute;top:0;left:0;right:0;z-index:2;padding:clamp(1.1rem,2.4vw,1.6rem);
  display:flex;flex-direction:column;gap:.35rem;text-align:left;pointer-events:none;}
.ac-cat{color:rgba(255,255,255,.9);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;}
.ac-title{color:#fff;font-family:var(--display);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.35rem,1rem + 1vw,1.9rem);line-height:1.05;max-width:11ch;text-shadow:0 1px 20px rgba(0,0,0,.25);}
.ac-card::after{content:"";position:absolute;right:1rem;bottom:1rem;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 4h4M4 4v4M12 12H8M12 12v-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;opacity:0;transform:scale(.8);
  transition:opacity .4s var(--ease),transform .4s var(--ease);}
.ac-card:hover::after,.ac-card:focus-visible::after{opacity:1;transform:none;}

.ac-controls{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;margin-top:clamp(1.4rem,3vw,2rem);}
.ac-dots{display:flex;gap:.5rem;flex-wrap:wrap;}
.ac-dots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s var(--ease),width .3s var(--ease);}
.ac-dots button.active{background:var(--accent);width:22px;border-radius:6px;}
.ac-nav{display:flex;gap:.6rem;flex:none;}
.ac-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);font-size:1.15rem;line-height:1;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:var(--paper);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);}
.ac-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.ac-btn:active{background:var(--accent-deep);}
.ac-btn[disabled]{opacity:.3;cursor:default;}
.ac-btn[disabled]:hover{background:var(--paper);color:var(--ink);border-color:var(--line);}

/* Lightbox */
.aclb{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(18,15,12,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:clamp(1rem,5vw,3rem);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;}
.aclb.open{opacity:1;visibility:visible;}
.aclb-figure{margin:0;max-width:min(1100px,94vw);max-height:88vh;display:flex;flex-direction:column;gap:.9rem;
  transform:scale(.96);transition:transform .45s var(--ease);}
.aclb.open .aclb-figure{transform:none;}
.aclb-figure img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px -30px rgba(0,0,0,.7);}
.aclb-figure figcaption{color:rgba(255,255,255,.85);font-size:.95rem;text-align:center;letter-spacing:.02em;}
.aclb-close,.aclb-arrow{position:absolute;background:rgba(255,255,255,.12);color:#fff;border-radius:50%;
  width:52px;height:52px;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),transform .3s var(--ease);}
.aclb-close:hover,.aclb-arrow:hover{background:rgba(255,255,255,.24);}
.aclb-close{top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem);}
.aclb-arrow{top:50%;transform:translateY(-50%);}
.aclb-arrow:hover{transform:translateY(-50%) scale(1.08);}
.aclb-prev{left:clamp(.8rem,3vw,2rem);}
.aclb-next{right:clamp(.8rem,3vw,2rem);}
@media (max-width:680px){
  .aclb-arrow{top:auto;bottom:1.1rem;transform:none;width:46px;height:46px;}
  .aclb-prev{left:28%;} .aclb-next{right:28%;}
  .aclb-close{top:1rem;right:1rem;}
}

/* ===========================================================
   REVIEWS
   =========================================================== */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);}
.review{
  margin:0;background:var(--paper);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:1.4rem;
}
.review p{font-family:var(--display);font-size:clamp(1.1rem,1rem + .6vw,1.32rem);line-height:1.35;letter-spacing:-.01em;}
.review p::first-letter{color:var(--accent);}
.review footer{margin-top:auto;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);}
.review-note{margin-top:1.8rem;font-size:.85rem;color:var(--ink-faint);}

/* ===========================================================
   CONTACT
   =========================================================== */
.contact{background:var(--bg-deep);color:var(--paper);}
.contact .eyebrow{color:#d98a72;}
.contact .eyebrow::before{background:#d98a72;}
.contact-head{max-width:760px;margin-bottom:clamp(2.5rem,5vw,3.5rem);}
.contact-title{color:var(--paper);max-width:16ch;}
.contact .section-intro{color:rgba(251,250,246,.72);}
.contact-body{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:start;}

/* Form */
.contact-form{display:grid;gap:1.1rem;}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.field label{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:#d98a72;font-weight:600;}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:inherit;font-size:1rem;color:var(--paper);background:rgba(255,255,255,.04);
  border:1px solid rgba(251,250,246,.16);border-radius:var(--radius);padding:.85rem 1rem;
  transition:border-color .3s var(--ease),background .3s var(--ease);width:100%;
}
.contact-form textarea{resize:vertical;min-height:120px;}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(251,250,246,.4);}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.07);
}
.contact-form input:invalid:not(:placeholder-shown){border-color:#c2705c;}
.contact-form select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23d98a72' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem;}
.contact-form select option{color:#222;}
.form-foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.3rem;}
.form-note{font-size:.9rem;color:#9fd6a6;margin:0;}
.form-note.error{color:#e8a78f;}
.form-fineprint{font-size:.78rem;color:rgba(251,250,246,.45);line-height:1.5;margin-top:.2rem;}

.contact-card{
  background:#2a2723;border:1px solid rgba(251,250,246,.12);border-radius:var(--radius-lg);
  padding:clamp(1.8rem,4vw,2.6rem);
}
.contact-lines{display:grid;gap:1.3rem;padding-bottom:1.5rem;border-bottom:1px solid rgba(251,250,246,.12);}
.contact-lines li{display:flex;flex-direction:column;gap:.25rem;}
.c-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:#d98a72;}
.contact-lines a,.contact-lines span{font-family:var(--display);font-size:1.2rem;color:var(--paper);}
.contact-lines a:hover{color:#e8a78f;}
.contact-hours{margin-top:1.5rem;}
.contact-hours p{margin-top:.5rem;color:rgba(251,250,246,.78);line-height:1.9;font-size:.95rem;}
.contact-hours em{color:#d98a72;font-style:italic;}
.contact-call{margin-top:1.5rem;width:100%;border-color:rgba(251,250,246,.3);color:var(--paper);}
.contact-call:hover{background:rgba(251,250,246,.07);}

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{background:#1b1916;color:rgba(251,250,246,.75);padding-top:clamp(3rem,6vw,5rem);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,3rem);padding-bottom:3rem;}
.footer-logo{height:48px;width:auto;margin-bottom:1.2rem;}
.footer-brand p{max-width:34ch;font-size:.95rem;line-height:1.7;}
.footer-col h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.18em;color:#d98a72;margin-bottom:1.1rem;font-weight:600;}
.footer-col ul{display:grid;gap:.6rem;}
.footer-col a:hover{color:var(--paper);}
.footer-col li{font-size:.95rem;line-height:1.55;}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  padding-block:1.6rem;border-top:1px solid rgba(251,250,246,.1);
  font-size:.82rem;color:rgba(251,250,246,.5);
}
.footer-meta{letter-spacing:.04em;}

/* ===========================================================
   REVEAL ANIMATION
   =========================================================== */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity .75s var(--ease),transform .75s var(--ease);will-change:opacity,transform;}
.js .reveal.in{opacity:1;transform:none;}
.js .reveal[data-anim="left"]{transform:translateX(-52px);}
.js .reveal[data-anim="right"]{transform:translateX(52px);}
.js .reveal[data-anim="scale"]{transform:scale(.93);}
.js .reveal[data-anim="left"].in,.js .reveal[data-anim="right"].in,.js .reveal[data-anim="scale"].in{transform:none;}

/* extra hover motion across sections */
.q-item{transition:background .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease);}
.q-item:hover{background:var(--paper);transform:translateY(-6px);box-shadow:0 20px 44px -34px rgba(35,30,24,.6);}
.review{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);}
.review:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--line);}
.step{transition:background .4s var(--ease),transform .4s var(--ease);}
.step:hover{transform:translateY(-4px);}
.about-points li{transition:transform .3s var(--ease),color .3s var(--ease);}
.about-points li:hover{transform:translateX(6px);color:var(--ink);}
.hero-meta>div{transition:transform .45s var(--ease),background .3s var(--ease);}
.hero-meta>div:hover{transform:translateY(-3px);background:var(--bg-plaster);}
.footer-col a{transition:color .3s var(--ease);}

/* animated accent line under eyebrow labels */
.eyebrow::before{transition:width .6s var(--ease) .1s;}
.js .reveal .eyebrow::before,.js .eyebrow.reveal::before{width:0;}
.js .reveal.in .eyebrow::before,.js .eyebrow.reveal.in::before{width:26px;}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important;transform:none !important;transition:none;}
  .ac-img,.hero-stage-img img{transition:none;}
  .svc{position:static;}
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px){
  .about-grid,.process-grid,.contact-body{grid-template-columns:1fr;}
  .hero-stage-img{aspect-ratio:16/10;}
  .about-media{max-width:440px;}
  .quality-grid{grid-template-columns:repeat(2,1fr);}
  .review-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:680px){
  .nav,.header-phone{display:none;}
  .nav-toggle{display:flex;}
  .header-actions .btn-primary{display:none;}
  .hero-foot{grid-template-columns:1fr;align-items:start;}
  .hero-stage-img{aspect-ratio:4/5;}
  .hero-meta{position:static;margin-top:1rem;width:100%;}
  .hero-meta>div{flex:1;padding:.9rem 1rem;}
  .gallery-head{flex-direction:column;align-items:flex-start;gap:1.5rem;}
  .svc{grid-template-columns:auto 1fr;}
  .svc-tag{display:none;}
  .steps{grid-template-columns:1fr;}
  .quality-grid{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .about-points{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ===========================================================
   HERO LOOP ANIMATIONS (subtle)
   =========================================================== */
.hero-stage-img{position:relative;}
.hero-stage-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:heroSheen 9s ease-in-out 1.2s infinite;
}
@keyframes heroSheen{0%{transform:translateX(-120%);}45%,100%{transform:translateX(120%);}}

.hero-chip img{animation:chipBob 6s ease-in-out infinite;}
@keyframes chipBob{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-9%) rotate(2deg);}}

.hero-vtag{animation:vtagFade 5s ease-in-out infinite;}
@keyframes vtagFade{0%,100%{opacity:.85;}50%{opacity:.45;}}

@media (prefers-reduced-motion:reduce){
  .hero-stage-img::after,.hero-chip img,.hero-vtag{animation:none;}
}

/* ===========================================================
   CONTACT WHATSAPP BUTTON + FLOATING + COOKIE
   =========================================================== */
.btn-wa{background:#25D366;color:#0b3d24;border-color:#25D366;}
.btn-wa:hover{background:#1ebe5a;border-color:#1ebe5a;transform:translateY(-2px);}
.btn-wa svg{flex:none;}
.contact-card-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.5rem;}
.contact-card-cta .btn{flex:1;min-width:140px;margin-top:0;}
.contact-call{margin-top:0;width:auto;}

/* Floating buttons */
.to-top,.cookie-reopen{
  position:fixed;bottom:1.5rem;z-index:80;display:flex;align-items:center;justify-content:center;
  border-radius:50%;box-shadow:0 10px 26px -8px rgba(20,17,14,.5);
  transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s var(--ease),bottom .4s var(--ease),color .3s var(--ease);
}
/* scroll-to-top — right side, appears after scrolling */
.to-top{
  right:1.5rem;width:48px;height:48px;background:var(--ink);color:var(--paper);
  opacity:0;visibility:hidden;transform:translateY(12px);
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{background:var(--accent);transform:translateY(-3px);}
/* cookie settings — left side, always pinned */
.cookie-reopen{
  left:1.5rem;width:44px;height:44px;background:var(--paper);color:var(--ink-soft);
  border:1px solid var(--line);
}
.cookie-reopen:hover{background:var(--ink);color:var(--paper);transform:translateY(-3px);}

/* lift floating buttons when cookie banner is visible */
body.has-cookie .to-top,body.has-cookie .cookie-reopen{bottom:6.5rem;}

/* Cookie banner */
.cookie{
  position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%) translateY(160%);
  width:min(680px,calc(100vw - 2rem));z-index:120;
  background:var(--bg-deep);color:var(--paper);border:1px solid rgba(251,250,246,.14);
  border-radius:var(--radius-lg);box-shadow:0 20px 50px -20px rgba(0,0,0,.55);
  padding:1.1rem 1.3rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .5s var(--ease),opacity .4s var(--ease),visibility .4s;
}
.cookie[hidden]{display:flex;}          /* keep it in flow so it can animate */
.cookie.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto;}
.cookie-text{font-size:.88rem;line-height:1.55;color:rgba(251,250,246,.82);flex:1;min-width:230px;margin:0;}
.cookie-text a{color:#d98a72;text-decoration:underline;}
.cookie-actions{display:flex;gap:.6rem;flex-shrink:0;}
.cookie .btn-ghost{color:var(--paper);border-color:rgba(251,250,246,.35);}
.cookie .btn-ghost:hover{border-color:var(--paper);background:rgba(251,250,246,.06);}

@media (max-width:680px){
  .contact-card-cta{flex-direction:column;}
  .cookie{
    left:0;right:0;bottom:0;width:100%;max-width:none;
    border-radius:16px 16px 0 0;transform:translateY(115%);visibility:hidden;
    flex-direction:column;align-items:stretch;text-align:left;gap:.9rem;padding:1.15rem 1.15rem 1.35rem;
  }
  .cookie.show{transform:translateY(0);visibility:visible;}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;}
  .cookie-actions .btn{width:100%;}
  .to-top{width:46px;height:46px;right:1rem;bottom:1rem;}
  .cookie-reopen{width:44px;height:44px;left:1rem;bottom:1rem;}
  body.has-cookie .to-top,body.has-cookie .cookie-reopen{bottom:12.5rem;}
}