:root{
  --ink:#161614;
  --paper:#f4f1e8;
  --orange:#f47a44;
  --font:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --body:'Barlow',Arial,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --gutter:5vw;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;overflow-x:hidden}
body{margin:0;color:var(--ink);background:var(--paper);font:19px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,blockquote,ul{margin:0;padding:0}
h1,h2,h3{font-family:var(--font);font-weight:600;line-height:1}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button,summary{cursor:pointer}
button,a,summary{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
em{font:inherit;font-style:normal}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-100px;left:15px;background:var(--paper);color:var(--ink);padding:15px;z-index:100}
.skip-link:focus{top:15px}

/* ==========================================================================
   HEADER — Transparent by Default with Smooth Blur on Scroll
   ========================================================================== */
#header{
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  background:transparent;
  color:var(--ink);
  transition:background .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
#header.docked{
  background:rgba(244, 241, 232, 0.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0, 0, 0, 0.04);
}
.nav{height:84px;padding:0 4.3%;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;max-width:1900px;margin:auto}
.wordmark{font:600 19px/.9 var(--body);letter-spacing:-.7px;color:var(--ink)}
.wordmark b{font-weight:700}
.nav-links{display:flex;gap:32px;position:absolute;left:20%;font-size:16px;font-weight:600}
.nav-links a{color:var(--ink);transition:color .18s}
.nav-links a:hover{color:var(--orange)}
.nav-cta{
  background:var(--ink);
  color:var(--paper);
  padding:11px 24px;
  font-size:15px;
  font-weight:700;
  border-radius:9999px;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}
.nav-cta:hover{
  background:var(--orange);
  color:#fff;
  transform:translateY(-1px);
}
.menu-toggle{display:none}
#mobile-menu{background:var(--paper);padding:10px 6% 25px;border-bottom:1px solid rgba(22,22,20,.1)}
#mobile-menu[hidden]{display:none}
#mobile-menu a{display:block;padding:12px 0;font-size:19px;color:var(--ink)}

/* ==========================================================================
   TRAVELLING SYMBOL — 100% GPU-Accelerated Transform (Zero Stutter/Reflows)
   ========================================================================== */
.travelling-symbol{
  position:fixed;
  z-index:45;
  top:0;
  left:0;
  width:280px;
  height:280px;
  pointer-events:none;
  will-change:transform;
  transform:translate3d(-300px, -300px, 0);
}
.travelling-symbol img{
  display:block;
  width:100%;
  height:100%;
}

/* ==========================================================================
   HERO — Warm Paper, Clean White Space, No Harsh Black Separator Lines
   ========================================================================== */
.hero{
  min-height:clamp(640px,88svh,830px);
  position:relative;
  isolation:isolate;
  background-color:var(--paper);
  color:var(--ink);
  display:flex;
  align-items:flex-end;
  padding:144px var(--gutter) 68px;
}
.hero-symbol-anchor{
  position:absolute;
  right:8%;
  top:148px;
  width:clamp(200px,18vw,280px);
  aspect-ratio:1;
  pointer-events:none;
}
.hero-top{position:absolute;right:var(--gutter);top:104px}
#motion-toggle{border:0;background:none;color:#66635c;font-size:14px;font-weight:600;min-height:32px;padding:4px 0}
#motion-toggle:hover{color:var(--ink)}
.hero-copy{width:100%;max-width:1620px;margin:0 auto;position:relative;z-index:2}
.hero-kicker{
  display:inline-block;
  font-size:14px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#c94e19;
  margin-bottom:14px;
}
.hero h1{
  font-size:clamp(92px,10.8vw,166px);
  line-height:.88;
  letter-spacing:-2.2px;
  text-transform:uppercase;
  color:var(--ink);
}
.hero h1 em{color:var(--orange)}
.hero-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:28px 56px;
  margin-top:42px;
  padding-top:28px;
  border-top:1px solid rgba(22, 22, 20, 0.1);
}
.hero-bottom p{
  max-width:540px;
  font-size:clamp(22px,1.8vw,26px);
  line-height:1.38;
  color:var(--ink);
  font-weight:500;
}
.hero-primary{
  background:var(--ink);
  color:#ffffff;
  font-size:18px;
  font-weight:700;
  padding:18px 36px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 6px 18px rgba(0, 0, 0, 0.12);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.hero-primary:hover{
  background:var(--orange);
  color:#ffffff;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(244, 122, 68, 0.35);
}

/* ==========================================================================
   BRAND GALLERY — Seamless, No Black Lines
   ========================================================================== */
.brand-gallery{padding:60px 0 72px;overflow:hidden;background:#ebe6d8}
.gallery-heading{display:flex;align-items:baseline;justify-content:space-between;gap:30px;padding:0 var(--gutter);max-width:1750px;margin:0 auto}
.gallery-heading h2{font-size:clamp(38px,3.4vw,50px);letter-spacing:-.6px}
.rail-hint{font-size:16px;font-weight:600;white-space:nowrap;color:#4a4840}
.brand-rail{display:flex;gap:24px;align-items:end;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:34px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
.brand-rail::-webkit-scrollbar{display:none}
.brand-slide{flex:0 0 260px}
.brand-slide:nth-child(2){flex-basis:250px}
.brand-slide:nth-child(3){flex-basis:290px}
.brand-slide:nth-child(4){flex-basis:220px}
.brand-slide:nth-child(5){flex-basis:270px}
.brand-item{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:30px;border-radius:8px}
.brand-item img{width:100%;height:100%;object-fit:contain;display:block}
.brand-natura{background:#e8dbc5;height:155px}
.brand-kopenhagen{background:#302b25;height:190px}
.brand-cacau{background:#eee1ca;height:170px}
.brand-jah{background:#591a4c;height:180px;padding:0}
.brand-jah>div{position:relative;width:180px;height:180px;overflow:hidden}
.brand-jah img{position:absolute;width:227.3%;height:227.3%;max-width:none;left:-65.6%;top:-55.1%}
.brand-italin{background:#d83b35;height:210px;padding:35px}

/* ==========================================================================
   SOLUTIONS — Clean Elevated Cards, Instant 120fps GPU Hover, No Black Lines
   ========================================================================== */
.solutions{
  padding:96px var(--gutter) 128px;
  background:var(--paper);
  position:relative;
  z-index:2;
}
.solutions-header{
  max-width:1620px;
  margin:0 auto 44px;
}
.solutions-header h2{
  font-size:clamp(60px,6.8vw,102px);
  line-height:.92;
  letter-spacing:-1.5px;
  text-transform:uppercase;
}

.services-grid{
  max-width:1620px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
  position:relative;
  z-index:20;
}
.service-card{
  background:#ffffff;
  border-radius:12px;
  padding:36px 32px 32px;
  display:flex;
  flex-direction:column;
  min-height:360px;
  box-shadow:0 4px 18px rgba(0, 0, 0, 0.04);
  will-change:transform;
  transition:transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, border-color .2s ease;
  border:1px solid rgba(22, 22, 20, 0.06);
}
.service-card:hover{
  transform:translate3d(0, -8px, 0);
  box-shadow:0 16px 36px rgba(0, 0, 0, 0.09);
  border-color:rgba(244, 122, 68, 0.4);
}
.card-num{
  font-family:var(--font);
  font-size:44px;
  font-weight:700;
  line-height:1;
  color:var(--orange);
  margin-bottom:24px;
  transition:transform .2s ease;
}
.service-card:hover .card-num{
  transform:scale(1.06);
}
.service-card h3{
  font-size:clamp(46px,3.8vw,60px);
  line-height:.92;
  text-transform:uppercase;
  letter-spacing:-.8px;
  color:var(--ink);
}
.service-card p{
  font-size:20px;
  line-height:1.44;
  color:#42403a;
  margin:20px 0 28px;
  font-weight:500;
}
.card-cta{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid rgba(22, 22, 20, 0.08);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-cta b{
  font-size:24px;
  color:var(--orange);
  transition:transform .2s ease;
}
.service-card:hover .card-cta b{
  transform:translate3d(6px, 0, 0);
}

/* ==========================================================================
   PAPIER-MÂCHÉ NEWSPAPER COLLAGE — Controlled Edge Bleed Without Swallowing Neighbors
   ========================================================================== */
.papier-mache-wall{
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-top:0;
  margin-bottom:0;
  padding:44px 0 52px;
  background-color:transparent;
  overflow:visible;
  z-index:10;
}

/* Layer 0: Background Newspaper Scraps with Subtle Edge Bleed */
.mache-patches{
  position:absolute;
  inset:-18px -4vw;
  z-index:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(2, 1fr);
  pointer-events:none;
  user-select:none;
}
.blank-paper{
  padding:22px 26px;
  background-color:#dfd1b4;
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 0 50px rgba(112,89,52,.2);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.bp-1{background-color:#dfd1b4;transform:rotate(-4.5deg) scale(1.07) translate3d(0, -10px, 0)}
.bp-2{background-color:#ede4ce;transform:rotate(3.6deg) scale(1.06) translate3d(0, -8px, 0)}
.bp-3{background-color:#d6c6a7;transform:rotate(-3.2deg) scale(1.06) translate3d(0, -6px, 0)}
.bp-4{background-color:#ead8c4;transform:rotate(4.2deg) scale(1.07) translate3d(0, -10px, 0)}
.bp-5{background-color:#e5dbc3;transform:rotate(3.5deg) scale(1.07) translate3d(0, 10px, 0)}
.bp-6{background-color:#d3c3a3;transform:rotate(-4.1deg) scale(1.08) translate3d(0, 12px, 0)}
.bp-7{background-color:#efe6d0;transform:rotate(3.1deg) scale(1.06) translate3d(0, 8px, 0)}
.bp-8{background-color:#dccbb0;transform:rotate(-3.8deg) scale(1.07) translate3d(0, 10px, 0)}

.bp-rule{
  font-family:var(--serif);
  font-size:15px;
  font-weight:700;
  letter-spacing:.12em;
  color:#16161470;
  border-top:1px solid #16161450;
  border-bottom:2px solid #16161450;
  padding:4px 0;
}
.bp-halftone{
  height:74px;
  background-color:#1616141a;
  background-image:radial-gradient(#16161445 1.3px, transparent 0);
  background-size:4px 4px;
}
.bp-cols{
  flex:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.bp-cols i{
  display:block;
  border-right:1px solid #16161425;
  background:repeating-linear-gradient(
    180deg,
    #16161420 0 4px,
    transparent 4px 10px,
    #16161418 10px 14px,
    transparent 14px 20px
  );
}

/* Torn Newspaper Patch Strips Breaking Across Boundaries */
.paper-patch{
  position:absolute;
  z-index:2;
  background-color:#e3d5b7;
  background-image:repeating-linear-gradient(180deg, #1616141a 0 3px, transparent 3px 9px);
  box-shadow:0 6px 14px rgba(0,0,0,.16), inset 0 0 20px rgba(110,85,45,.22);
  clip-path:polygon(2% 0%, 98% 4%, 100% 94%, 85% 100%, 12% 96%, 0% 88%);
}
.patch-a{width:320px;height:76px;top:-22px;left:22%;transform:rotate(-8deg)}
.patch-b{width:280px;height:86px;top:44%;left:58%;transform:rotate(7deg);background-color:#f0decb}
.patch-c{width:340px;height:74px;bottom:-22px;left:15%;transform:rotate(6deg);background-color:#d8c7a8}
.patch-d{width:250px;height:82px;top:-18px;right:12%;transform:rotate(-6deg)}
.patch-e{width:300px;height:74px;bottom:-20px;right:25%;transform:rotate(-5deg);background-color:#eee5ce}

/* Masking Tape Strips */
.Mask-tape{
  position:absolute;
  width:130px;
  height:34px;
  background:rgba(242, 227, 182, 0.82);
  border-left:2px dotted rgba(0,0,0,.15);
  border-right:2px dotted rgba(0,0,0,.15);
  box-shadow:0 3px 7px rgba(0,0,0,.18);
  pointer-events:none;
  z-index:15;
}
.tape-tl{top:-15px;left:28px;transform:rotate(-8deg)}
.tape-tc{top:-15px;left:46%;transform:rotate(6deg)}
.tape-tr{top:-14px;right:28px;transform:rotate(11deg)}
.tape-br{bottom:-14px;right:34px;transform:rotate(-9deg)}

/* Layer 1: Stage with Overlapping Sheets & Proportional Edge Bleed */
.mache-stage{
  position:relative;
  z-index:5;
  width:100vw;
  margin-left:0;
  display:grid;
  grid-template-columns:1.1fr .9fr 1.1fr;
  align-items:center;
  padding:8px 3.5vw;
}

.news-sheet{
  position:relative;
  color:#161614;
  padding:28px 32px 26px;
  border-radius:2px;
  background-color:#f0e5c9;
  box-shadow:
    0 18px 38px rgba(0,0,0,.28),
    0 4px 10px rgba(0,0,0,.18),
    inset 0 0 40px rgba(135,108,65,.16);
  will-change:transform;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
article.news-sheet:hover,
article.news-sheet:focus-within{
  z-index:30!important;
  transform:rotate(0deg) scale(1.02) translateY(-6px)!important;
  box-shadow:
    0 28px 56px rgba(0,0,0,.44),
    0 8px 18px rgba(0,0,0,.25),
    inset 0 0 36px rgba(135,108,65,.12);
}

/* Distinct Angles with Controlled Outward Bleed */
.sheet-folha{
  background-color:#f0e5c9;
  transform:rotate(-3.2deg) translate3d(0, -12px, 0);
  z-index:8;
  clip-path:polygon(0% 0.6%, 100% 0%, 99.2% 98.5%, 86% 100%, 68% 98.4%, 49% 100%, 28% 98.6%, 10% 100%, 0.4% 98.8%);
}
.sheet-dummy-center{
  background-color:#e2d4b7;
  margin-left:-28px;
  margin-right:-28px;
  margin-top:-16px;
  transform:rotate(3.8deg) translate3d(0, -8px, 0);
  z-index:6;
  opacity:.92;
  pointer-events:none;
}
.sheet-abf{
  background-color:#f4f0e6;
  transform:rotate(-2.8deg) translate3d(0, -10px, 0);
  z-index:9;
  clip-path:polygon(0.5% 0%, 100% 0.4%, 99.4% 99%, 82% 100%, 61% 98.5%, 38% 100%, 18% 98.6%, 0% 99.4%);
}
.sheet-dummy-left{
  background-color:#ebd8c5;
  margin-top:-22px;
  margin-right:-24px;
  transform:rotate(3.2deg) translate3d(0, 10px, 0);
  z-index:5;
  opacity:.9;
  pointer-events:none;
}
.sheet-classifieds{
  background-color:#f6edd6;
  margin-top:-24px;
  margin-left:-18px;
  margin-right:-18px;
  padding:22px;
  transform:rotate(-2.4deg) translate3d(0, 12px, 0);
  z-index:10;
}
.sheet-dummy-right{
  background-color:#dfd1b4;
  margin-top:-20px;
  margin-left:-24px;
  transform:rotate(3.8deg) translate3d(0, 10px, 0);
  z-index:6;
  opacity:.9;
  pointer-events:none;
}

/* Dummy Newspaper Elements */
.dummy-photo-box{
  height:110px;
  background-color:#16161420;
  background-image:radial-gradient(#16161455 1.4px, transparent 0);
  background-size:4px 4px;
  display:flex;
  align-items:flex-end;
  padding:8px 10px;
  margin-bottom:14px;
}
.dummy-photo-box span{
  background:#161614;
  color:#e2d4b7;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  padding:2px 7px;
}
.dummy-text-lines{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  height:92px;
}
.dummy-text-lines span{
  border-right:1px solid #16161430;
  background:repeating-linear-gradient(180deg, #16161430 0 5px, transparent 5px 11px);
}
.dummy-Headline{
  font-family:var(--font);
  font-size:32px;
  font-weight:700;
  line-height:.95;
  letter-spacing:.02em;
  color:#16161485;
  border-top:2px solid #16161460;
  border-bottom:2px solid #16161460;
  padding:8px 0;
  margin-bottom:14px;
}
.dummy-columns{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  height:120px;
}
.dummy-columns i{
  display:block;
  border-right:1px solid #16161425;
  background:repeating-linear-gradient(180deg, #16161425 0 4px, transparent 4px 10px);
}
.dummy-halftone-strip{
  height:84px;
  margin:12px 0;
  background-color:#16161418;
  background-image:radial-gradient(#16161450 1.5px, transparent 0);
  background-size:5px 5px;
}

/* Real Newspaper Clippings Typography */
.sheet-masthead{
  border-top:2px solid #161614;
  border-bottom:2px solid #161614;
  padding:6px 0;
  margin-bottom:14px;
}
.sheet-paper-name{
  font-family:var(--serif);
  font-size:clamp(28px,2.5vw,38px);
  font-weight:700;
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#141412;
}
.sheet-date-bar{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#423e36;
  border-top:1px solid #16161435;
  margin-top:5px;
  padding-top:4px;
}
.news-sheet h3{
  font-family:var(--serif);
  font-size:clamp(28px,2.3vw,36px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.3px;
  color:#141412;
}
.news-sheet h3 a:hover{
  color:#b54313;
  text-decoration:underline;
  text-underline-offset:4px;
}
.news-sheet p{
  font-family:var(--serif);
  font-size:19px;
  line-height:1.45;
  color:#22211d;
  margin-top:12px;
}
.news-sheet mark{
  background:linear-gradient(104deg, rgba(244,122,68,0) .9%, rgba(244,122,68,.42) 2.4%, rgba(244,122,68,.35) 96%, rgba(244,122,68,0) 98%);
  color:inherit;
  padding:0 3px;
}
.sheet-foot{
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #16161425;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.ink-stamp{
  font-family:var(--font);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  color:#9e380e;
  border:2px solid #9e380e;
  padding:2px 8px;
  transform:rotate(-3deg);
}
.sheet-link{
  font-family:var(--body);
  font-size:16px;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:4px;
}
.sheet-link:hover{color:#b54313}

/* Classifieds Coupon */
.classified-coupon{
  border:2px dashed #16161470;
  padding:20px 22px;
  background:#fbf6e890;
}
.coupon-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid #16161460;
  padding-bottom:8px;
  margin-bottom:12px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
}
.coupon-header b{
  background:#161614;
  color:#f6eed8;
  padding:3px 8px;
}
.sheet-classifieds h3{
  font-family:var(--font);
  font-size:clamp(30px,2.5vw,38px);
  line-height:.98;
  text-transform:uppercase;
}
.coupon-actions{
  margin-top:16px;
}
.coupon-btn{
  background:#161614;
  color:#f6eed8;
  font-family:var(--body);
  font-size:16px;
  font-weight:700;
  padding:12px 20px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  transition:background .18s ease, transform .18s ease;
}
.coupon-btn:hover{background:#b54313;color:#fff;transform:translateY(-1px)}

/* ==========================================================================
   CONTACT & FOOTER — Premium Pill Button, No Ugly Green, No Harsh Black Lines
   ========================================================================== */
.contact{
  padding:130px var(--gutter) 0;
  background:var(--orange);
  color:var(--ink);
  position:relative;
  z-index:2;
}
.contact-inner{max-width:1620px;margin:0 auto}
.contact-top{display:flex;justify-content:space-between;gap:25px;align-items:baseline;font-size:22px;font-weight:600}
.contact-top>span{font-size:18px;font-weight:500}
.contact h2{font-size:clamp(82px,11.2vw,168px);line-height:.94;text-transform:uppercase;letter-spacing:-1.5px;margin-top:24px}
.contact h2 a{display:inline-block}
.contact h2 a:hover{color:var(--paper)}
.contact-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:32px 48px;
  margin-top:42px;
  padding-top:32px;
  border-top:1px solid rgba(22, 22, 20, 0.15);
  align-items:flex-start;
}
.contact-wa-btn{
  background:#161614;
  color:#ffffff;
  font-size:19px;
  font-weight:700;
  padding:20px 38px;
  border-radius:9999px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 24px rgba(0, 0, 0, 0.2);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.contact-wa-btn:hover{
  background:#ffffff;
  color:#161614;
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(0, 0, 0, 0.25);
}
.contact-details{flex:1;min-width:300px;max-width:640px}
.contact-details summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:54px;padding:12px 20px;border-radius:8px;background:rgba(255,255,255,0.2);font-size:18px;font-weight:600;list-style:none}
.contact-details summary::-webkit-details-marker{display:none}
.contact-details summary>span{font-size:25px;transition:transform .2s}
.contact-details[open] summary>span{transform:rotate(45deg)}
#contact-form{display:grid;grid-template-columns:1fr 1fr;gap:25px;padding:28px 0 15px}
label{font-size:17px;font-weight:600;display:block;margin-bottom:8px}
label>span{font-size:15px;font-weight:400}
input,textarea,select{width:100%;background:transparent;border:0;border-bottom:2px solid rgba(22, 22, 20, 0.4);border-radius:0;padding:10px 0;font-size:18px}
input::placeholder,textarea::placeholder{color:#5c3b28}
select>option{background:var(--paper)}
textarea{resize:vertical}
.message-field{grid-column:1/-1}
#contact-form button{justify-self:start;border:0;background:var(--ink);color:var(--paper);font-size:17px;font-weight:700;padding:16px 32px;border-radius:9999px;transition:background .18s ease, transform .18s ease}
#contact-form button:hover{background:#ffffff;color:var(--ink);transform:translateY(-2px)}
#contact-form small{font-size:15px;line-height:1.5;align-self:center}
.contact footer{display:grid;grid-template-columns:1fr auto;gap:24px;padding:72px 0 32px;margin-top:48px;border-top:1px solid rgba(22, 22, 20, 0.15)}
.footer-wordmark{font-size:28px;font-weight:700;letter-spacing:-1px}
.contact footer>div{display:flex;align-items:center;gap:25px;font-size:16px;font-weight:500}
.contact footer>div:last-child{grid-column:1/-1;justify-content:space-between;font-size:15px;color:#4f3624}
.contact footer button{border:0;background:none;padding:8px 0;font-size:15px}
.reading-progress{position:fixed;bottom:0;left:0;right:0;height:3px;z-index:50;pointer-events:none}
.reading-progress>span{width:0;height:100%;display:block;background:var(--orange)}

dialog{background:var(--paper);color:var(--ink);border:0;width:calc(100% - 40px);max-width:590px;padding:40px;border-radius:12px}
dialog::backdrop{background:#11180fb3;backdrop-filter:blur(4px)}
dialog h2{font-size:42px}
dialog p{font-size:18px;line-height:1.6;margin-top:20px}
#privacy-close{position:absolute;right:13px;top:8px;background:none;border:0;font-size:30px;padding:4px 9px}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media(max-width:1200px){
  .services-grid{grid-template-columns:repeat(2, 1fr)}
  .mache-stage{grid-template-columns:repeat(2, 1fr);width:104vw;margin-left:-2vw}
}

@media(max-width:760px){
  :root{--gutter:6vw}
  html{scroll-padding-top:80px}
  .nav{height:76px;padding:0 6%;gap:20px}
  .wordmark{font-size:16px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto;font-size:13px;padding:9px 18px}
  .menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:25px;height:40px;background:none;border:0;padding:3px}
  .menu-toggle span{height:2px;width:19px;background:currentColor}
  .menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3px) rotate(-45deg)}
  .hero{min-height:660px;padding:128px var(--gutter) 48px}
  .hero-symbol-anchor{width:136px;top:126px;right:7%}
  .hero-top{top:92px}
  .hero h1{font-size:14.2vw;letter-spacing:-.5px;line-height:.94}
  .hero-bottom{margin-top:28px;padding-top:22px;gap:22px}
  .hero-bottom p{font-size:20px}
  .hero-primary{width:100%;justify-content:center;font-size:18px;padding:17px 20px}
  .solutions{padding:68px var(--gutter) 76px}
  .solutions-header h2{font-size:54px}
  .services-grid{grid-template-columns:1fr}
  .service-card{min-height:auto}
  .papier-mache-wall{margin-top:0;margin-bottom:0;padding:36px 0 44px}
  .mache-stage{grid-template-columns:1fr;width:100vw;margin-left:0;padding:0 4vw;gap:20px}
  .sheet-dummy-center,.sheet-dummy-left,.sheet-dummy-right{display:none}
  .news-sheet,.sheet-classifieds{margin:0;transform:rotate(-1deg)!important}
  .contact{padding-top:74px}
  .contact-top{display:block}
  .contact-top>p{font-size:20px}
  .contact-top>span{display:block;font-size:17px;margin-top:6px}
  .contact h2{font-size:18.5vw;margin-top:20px}
  .contact-wa-btn{width:100%;justify-content:center}
  .contact footer{display:block;padding-top:44px}
  .contact footer>div{margin-top:20px;flex-wrap:wrap}
  #contact-form{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .travelling-symbol{will-change:auto}
}
