/* ============================================================
   ARCH — Architecture & Interior Design Studio
   Tokens, layout, components, and CSS-driven motion.
   ============================================================ */

/* ---------- 1. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, nav,
header, footer, section, main, figure, picture, video, button, input, textarea {
  margin: 0; padding: 0; border: 0; vertical-align: baseline;
}
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; font: inherit; color: inherit; cursor: pointer; }
img, video { display: block; max-width: 100%; }
html, body, h1, h2, h3, h4, p, li {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 2. DESIGN TOKENS ---------- */
:root {
  --black: #0d0d0d;
  --black-rgb: 13 13 13;
  --white: #ffffff;
  --white-rgb: 255 255 255;
  --grey: #bac3c6;
  --grey-rgb: 186 195 198;
  --muted: #767676;
  --veil: #1e1e1e;

  --title-font: "Astetes", "Anek Latin", "Jost", system-ui, sans-serif;
  --main-font: "Anek Bangla", system-ui, sans-serif;
  --write-font: "Nothing You Could Do", cursive;

  /* Fluid type: min at 360px viewport, max at 1920px viewport */
  --fluid: ((100vw - 360px) / 1560);
  --h1-size: calc(50px + 130 * var(--fluid));
  --h2-size: calc(40px + 20 * var(--fluid));
  --h3-size: calc(28px + 22 * var(--fluid));
  --body-size: calc(15px + 4 * var(--fluid));

  /* Fluid spacing: vertical rhythm tightens and horizontal
     gutters widen as the viewport grows. */
  --vert-ratio: 1;
  --oriz-ratio: 1;
  --c1v: calc(1.25vw * var(--vert-ratio));
  --c2v: calc(2.5vw  * var(--vert-ratio));
  --c3v: calc(3.75vw * var(--vert-ratio));
  --c5v: calc(5vw    * var(--vert-ratio));
  --c7v: calc(7.5vw  * var(--vert-ratio));
  --c10v: calc(10vw  * var(--vert-ratio));
  --c15v: calc(15vw  * var(--vert-ratio));
  --c20v: calc(20vw  * var(--vert-ratio));
  --c1o: calc(1.25vw * var(--oriz-ratio));
  --c2o: calc(2.5vw  * var(--oriz-ratio));
  --c5o: calc(5vw    * var(--oriz-ratio));
  --c7o: calc(7.5vw  * var(--oriz-ratio));
  --c10o: calc(10vw  * var(--oriz-ratio));

  --ease-reveal: cubic-bezier(.76, 0, .24, 1);
  --ease-link:   cubic-bezier(.52, 0, 0, 1);
}
@media screen and (min-width: 601px)  { :root { --vert-ratio: .875; --oriz-ratio: 1.125; } }
@media screen and (min-width: 768px)  { :root { --vert-ratio: .75;  --oriz-ratio: 1.25; } }
@media screen and (min-width: 1024px) { :root { --vert-ratio: .625; --oriz-ratio: 1.375; } }
@media screen and (min-width: 1281px) { :root { --vert-ratio: .5;   --oriz-ratio: 1.5; } }

/* ---------- 3. BASE ---------- */
body {
  background-color: var(--black);
  color: var(--white);
  font-family: var(--main-font);
  font-size: var(--body-size);
  font-weight: 300;
  line-height: 1.15;
  overflow-x: hidden;
}
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--title-font);
  font-weight: 100;
  line-height: 1.1;
  color: var(--white);
}
h1, .h1 { font-size: var(--h1-size); text-transform: uppercase; }
h2 { font-size: var(--h2-size); }
h3, .h3 { font-size: var(--h3-size); }
p { line-height: 1.5; font-weight: 300; }

/* ---------- 4. LAYOUT UTILITIES ---------- */
main, section, .container { position: relative; width: 100%; }
.container { max-width: 1920px; margin-inline: auto; }
.rel { position: relative; }
.abs { position: absolute; }
.w100 { width: 100%; }
.h100 { height: 100%; }
.flex   { display: flex; align-items: center; justify-content: center; }
.flex-l { display: flex; align-items: center; justify-content: flex-start; }
.flex-r { display: flex; align-items: center; justify-content: flex-end; }
.flex-t { display: flex; align-items: flex-start; justify-content: center; }
.flex-auto, .flex-wrap { flex-wrap: wrap; }
.p5lr  { padding-left: var(--c5o); padding-right: var(--c5o); }
.p1lr  { padding-left: var(--c1o); padding-right: var(--c1o); }
.p10tb { padding-top: var(--c10v); padding-bottom: var(--c10v); }
.p15tb { padding-top: var(--c15v); padding-bottom: var(--c15v); }
.p10t  { padding-top: var(--c10v); }
.p10b  { padding-bottom: var(--c10v); }
.p15b  { padding-bottom: var(--c15v); }
.p20tb { padding-top: var(--c20v); padding-bottom: var(--c20v); }
.p20b  { padding-bottom: var(--c20v); }
.m7t   { margin-top: var(--c7v); }
.gap-15-2 { gap: var(--c2o); row-gap: var(--c7v); }

.desktop { display: none; }
.mobile  { display: block; }
.w30l, .w33l, .w35l, .w40l, .w45l, .w50l, .w55l, .w60l, .w90l { width: 100%; }
@media screen and (min-width: 1024px) {
  .desktop { display: block; }
  .mobile  { display: none; }
  .w30l { width: 30%; }
  .w33l { width: calc(100% / 3); }
  .w35l { width: 35%; }
  .w40l { width: 40%; }
  .w45l { width: 45%; }
  .w50l { width: 50%; }
  .w55l { width: 55%; }
  .w60l { width: 60%; }
  .w90l { width: 90%; }
}

/* Aspect-ratio picture frames */
.ratio-1-1   { aspect-ratio: 1 / 1; }
.ratio-4-3   { aspect-ratio: 4 / 3; }
.ratio-4-5   { aspect-ratio: 4 / 5; }
.ratio-3-4   { aspect-ratio: 3 / 4; }
.ratio-1-1e1 { aspect-ratio: 1 / 1.1; }
picture[class*="ratio-"] { display: block; overflow: hidden; }
picture[class*="ratio-"] img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 5. PAGE TRANSITION ---------- */
.page-transition {
  position: fixed; inset: 0;
  background: var(--black);
  transform: scaleY(1);
  transition: transform .875s ease;
  z-index: 9999; pointer-events: none;
}
.page-transition.active  { transform: scaleY(1) !important; transform-origin: bottom !important; }
.page-transition.reverse { transform: scaleY(1); transform-origin: top; }
.page-transition.reverse.end { transform: scaleY(0); transform-origin: top; }

/* ---------- 6. CUSTOM CURSOR ---------- */
#mouse {
  position: fixed; top: 0; left: 0;
  width: 1.75rem; height: 1.75rem;
  z-index: 10; pointer-events: none; will-change: transform;
}
#mouse .circle {
  width: 100%; height: 100%; border-radius: 50%;
  background-color: rgb(var(--grey-rgb) / 75%);
  transition: transform .3s ease, background-color .3s ease;
}
@media (hover: none), (max-width: 1023px) { #mouse { display: none; } }

/* ---------- 7. HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 4; transition: .25s ease-out;
}
.header.scrolling { transform: translateY(-100%); }
.header.open_menu { transform: none !important; }
.head_wrapper { padding: var(--c2v) var(--c5o); z-index: 2; }
.head_left { flex: 1; gap: var(--c2o); }
.head_logo { display: block; }
.head_logo svg { height: 2.6rem; width: auto; }
.head_inner { gap: var(--c2o); z-index: 2; }
.lang { display: flex; gap: .5ch; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.lang a { opacity: .5; transition: opacity .25s ease; }
.lang a:hover, .lang a.on { opacity: 1; }

/* Hamburger */
#hamburger { display: inline-block; line-height: 0; padding: .5em; overflow: visible; transition: .25s ease; }
#hamburger .wrap { position: relative; display: block; width: 4em; height: 1em; }
#hamburger span {
  display: block; position: absolute; right: 0;
  width: 4em; height: 2px; background-color: var(--white);
  transform-origin: center; will-change: transform; transition: .25s ease;
}
#hamburger .top_bun    { top: 2px; }
#hamburger .burger     { top: 50%; transform: translateY(-50%); width: 85%; opacity: 1; }
#hamburger .bottom_bun { bottom: 2px; width: 70%; }
#hamburger.tapped span        { width: 90%; }
#hamburger.tapped .burger     { opacity: 0; }
#hamburger.tapped .top_bun    { top: 50%; transform: translate(0, -50%) rotate(45deg); }
#hamburger.tapped .bottom_bun { top: 50%; bottom: auto; transform: translate(0, -50%) rotate(-45deg); }

#close_submenu {
  display: none; position: fixed; top: var(--c2v); right: calc(var(--c5o) + 7rem);
  z-index: 6; font-size: .85rem; text-transform: uppercase; letter-spacing: .1em;
}

/* ---------- 8. FULLSCREEN NAV ---------- */
#main_nav { position: absolute; top: 0; left: 0; width: 100%; display: none; z-index: 1; }
#main_nav .menu_wrapper {
  position: absolute; top: 0; left: 0; width: 100%; min-height: 100dvh;
  background-color: var(--black); counter-reset: menu;
  align-content: center; padding-top: 6rem;
}
#main_nav .menu_left { width: 100%; }
@media screen and (min-width: 1024px) {
  #main_nav .menu_left { width: 40%; }
  #main_nav .menu_wrapper::after {
    content: ""; position: absolute; left: 40%; top: 0;
    width: 1px; height: 100%; background-color: rgb(var(--white-rgb) / 25%);
  }
}
#main_nav .head_menu li {
  position: relative; display: flex; align-items: flex-start; justify-content: flex-start;
  line-height: 1; padding: 1rem var(--c5o);
  border-bottom: 1px solid rgb(var(--white-rgb) / 25%);
}
#main_nav .head_menu li:last-of-type { border-bottom: 0; }
#main_nav .head_menu > li::before {
  counter-increment: menu; content: "0" counter(menu);
  display: inline-block; white-space: nowrap;
  font-family: var(--title-font); font-size: 1.75em; line-height: 1.1; color: var(--white);
}
#main_nav .head_menu li a {
  position: relative; display: inline-block; margin-left: 2ch;
  font-size: 1.625em; font-weight: 200; line-height: 1.1; text-transform: uppercase;
}
#main_nav .head_menu li a::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 100%; height: 1px; background-color: var(--white);
  transform: scaleX(0); transform-origin: center left;
  transition: transform .7s var(--ease-link);
}
#main_nav .head_menu li a:hover::after { transform: scaleX(1); transform-origin: center right; }
@media screen and (min-width: 601px) {
  #main_nav .head_menu li { padding: 1.5rem var(--c5o); }
  #main_nav .head_menu li::before { font-size: 2.5em; }
  #main_nav .head_menu li a { font-size: 2em; }
}
@media screen and (min-width: 1281px) {
  #main_nav .head_menu li { padding: 2.5rem var(--c2o); }
  #main_nav .head_menu li a { font-size: 2.5em; }
}
#main_nav .sub-menu {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  padding-top: 5.5rem; margin: 0; z-index: 1;
  background: rgb(var(--black-rgb) / 80%); backdrop-filter: blur(5px);
  transform: translateX(100%); transition: .5s ease-in-out;
}
#main_nav .sub-menu.active { transform: translate(0); }
#main_nav .menu_right { padding: var(--c5o); align-content: center; gap: var(--c5v); }
#main_nav .menu_right .m_block { width: 100%; }
#main_nav .menu_right p { color: rgb(var(--white-rgb) / 60%); line-height: 1.7; }
#main_nav .menu_right .m_label {
  font-family: var(--write-font); font-size: 1.25rem; color: var(--grey); margin-bottom: .35rem;
}

/* ---------- 9. LINK COMPONENT (arrow swap) ---------- */
.link {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  padding-right: .25rem; text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.05rem; width: fit-content;
}
.link::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 100%; height: 1px; background-color: var(--white);
  transform: scaleX(0); transform-origin: center left;
  transition: transform .7s var(--ease-link);
}
.link span { transition: transform .7s var(--ease-link); }
.link svg {
  height: .85rem; width: auto; flex: none;
  transition: transform .7s var(--ease-link), opacity .7s var(--ease-link);
}
.link svg path { fill: var(--white); }
.link svg:nth-of-type(1) { position: absolute; left: 0; top: 50%; transform: translate3d(-100%, -100%, 0); opacity: 0; }
.link:hover span { transform: translateX(1.5rem); }
.link:hover svg:nth-of-type(2) { transform: translate3d(110%, 85%, 0); opacity: 0; }
.link:hover svg:nth-of-type(1) { transform: translate3d(0, -50%, 0); opacity: 1; }
.link:hover::after { transform: scaleX(1); transform-origin: center right; }

/* ---------- 10. SPLIT-TEXT LINE MASKS ---------- */
.split-parent { overflow: hidden; }
.split-child  { display: block; }

/* ---------- 11. IMAGE REVEAL (ScrollTrigger toggles .active) ---------- */
.sec_trigger.sec_img.toLeft  picture { clip-path: inset(0 0 0 100%); transition: 2s var(--ease-reveal); }
.sec_trigger.sec_img.toRight picture { clip-path: inset(0 100% 0 0); transition: 2s var(--ease-reveal); }
.sec_trigger.sec_img picture img {
  transform: scale(1.6); opacity: 0;
  transition: transform 3s var(--ease-reveal) -.25s, opacity .1s ease;
  will-change: transform;
}
.sec_trigger.active.sec_img picture { clip-path: inset(0 0 0 0); }
.sec_trigger.active.sec_img picture img { transform: scale(1); opacity: 1; }

/* Hand-drawn arrow annotations */
.wrp_freccetta { position: absolute; z-index: 1; }
.wrp_freccetta svg { width: 5rem; min-width: 5rem; overflow: visible; }
.wrp_freccetta svg path { fill: none; stroke: var(--grey); stroke-width: 3; stroke-linecap: round; }
.wrp_freccetta p {
  width: 30ch; margin-top: 1rem;
  font-family: var(--write-font); font-size: 1.05rem; text-transform: uppercase; color: var(--grey);
}
.wrp_freccetta.top:not(.left, .right) { transform: translateY(-110%); }
.wrp_freccetta.top svg { transform: rotate(180deg); }
.wrp_freccetta.top:not(.left, .right) p { width: 27ch; text-align: right; transform: translate(-40%, -20%); }
.wrp_freccetta.bottom:not(.left, .right) { bottom: 0; transform: translateY(100%); }
.wrp_freccetta.bottom:not(.left, .right) svg { transform: rotate(-20deg) translate(-10%, -40%); }
.wrp_freccetta.bottom:not(.left, .right) p { transform: translateX(-25%); }
.wrp_freccetta.left:not(.top, .bottom) { left: 0; bottom: 0; transform: translate(-70%, -70%); }
.wrp_freccetta.left:not(.top, .bottom) p {
  width: 16ch; margin: 0; position: absolute; left: 100%; bottom: 0; transform: translate(-110%, 110%);
}
.sec_trigger .freccia_box {
  transform: scale(0); opacity: 0; transform-origin: top left;
  transition: 1s var(--ease-reveal) 1s;
}
.sec_trigger .freccia_box svg { opacity: 0; transition: .25s ease 1s; }
.sec_trigger.active .freccia_box { transform: scale(1); opacity: 1; }
.sec_trigger.active .freccia_box svg { opacity: 1; }
@media screen and (max-width: 1023px) { .wrp_freccetta { display: none; } }

/* ---------- 12. HERO ---------- */
#s1_home { height: 100svh; overflow: hidden; }
#s1_home .bkg_thumb, #s1_home .bkg_video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; height: 100%; object-fit: cover;
}
#s1_home .bkg_thumb img { width: 100%; height: 100%; object-fit: cover; }
#s1_home .filter_black { position: absolute; inset: 0; background: var(--veil); opacity: .5; }
#s1_home .filter_bt {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--black), transparent);
}
#s1_home .container {
  height: 100%; padding: var(--c15v) var(--c5o) var(--c10v);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#s1_home h1 { width: 100%; }
#s1_home h1 span { display: block; width: 100%; }
#s1_home h1 .riga_2, #s1_home h1 .riga_3 { text-align: right; }
#s1_home .slogan p {
  margin-top: var(--c3v); font-family: var(--write-font);
  font-size: calc(18px + 14 * var(--fluid)); color: var(--grey); text-align: center;
}
#scroll_btn {
  position: absolute; left: 50%; bottom: var(--c5v); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; z-index: 2;
}
#scroll_btn .line { display: block; width: 1px; height: 3rem; background: rgb(var(--white-rgb) / 25%); overflow: hidden; }
#scroll_btn .line::after {
  content: ""; display: block; width: 100%; height: 50%; background: var(--white);
  animation: scrollLine 2s cubic-bezier(.76, 0, .24, 1) infinite;
}
@keyframes scrollLine { 0% { transform: translateY(-100%); } 100% { transform: translateY(200%); } }

/* ---------- 13. SECTION 2 — scroll-painted text ---------- */
#s2_home .text h2 { position: relative; }
.not_text_color_comp { opacity: .25; }
span.text_color_comp {
  position: absolute; top: 0; left: 0; display: block;
  width: 100%; height: 100%; color: var(--white);
}
span.text_color_comp .split-child { clip-path: inset(0% 100% 0% 0%); }
#s2_home .wrp_freccetta p { width: 13ch; }
#s2_home .wrp_freccetta.top svg { transform: rotate(180deg) translate(-40%, -10%); }

/* ---------- 14. SECTION 3 — pinned expand ---------- */
#s3_home { overflow: hidden; }   /* the title parks off-frame before it sweeps in */
#s3_home .sec_img.to_big { position: relative; }
#s3_home .sec_img.to_big picture { display: block; height: 80vh; overflow: hidden; }
#s3_home .sec_img.to_big picture img { width: 100%; height: 100%; object-fit: cover; }
#s3_home .filter_bt.anim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--black-rgb) / .85), transparent 60%);
  pointer-events: none;
}
/* shrink-wrapped to its own ink so the sweep is measured against the
   text width, not the image box */
.text_enter {
  position: absolute; left: 0; bottom: 1rem; width: max-content;
  white-space: nowrap;
  font-size: clamp(4rem, 15vw, 12vw); line-height: 1;
}

/* ---------- 15. SECTION 5 — three-column intro ---------- */
/* widths already total 100% — a column-gap would force a wrap, so the
   breathing room comes from padding inside each column instead */
#s5_home .container { column-gap: 0; row-gap: var(--c7v); align-items: flex-start; }
#s5_home .text { padding-right: var(--c2o); }
#s5_home .text:last-child { padding-right: 0; }
#s5_home .text p { color: rgb(var(--white-rgb) / 70%); }

/* ---------- 16. SERVICES — cursor-tracked image ---------- */
.wrapper_servizi { position: relative; }
.box_anim {
  position: relative; display: block; z-index: 0; width: fit-content;
  margin: 0 auto; padding: .5rem;
  font-family: var(--title-font); font-size: 12vw; font-weight: 300;
  line-height: 1; text-transform: uppercase; color: var(--white);
  transition: opacity .25s ease;
}
.box_anim:hover { z-index: 1; }
.box_anim::after {
  content: ""; position: absolute; left: 0; bottom: .5rem;
  width: 100%; height: 1px; background-color: var(--white);
  transform: scaleX(0); transform-origin: center right;
  transition: transform 1s var(--ease-link);
}
.box_anim:hover::after, .box_anim.hover_mob::after { transform: scaleX(1); transform-origin: center left; }
.img_hover {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 30vw; aspect-ratio: 4 / 3; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .3s ease;
}
.wrapper_servizi:hover .img_hover { opacity: 1; }
.img_hover img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transition: clip-path 0s ease-in-out .5s;
}
.img_hover img.visible {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  z-index: 1; transition: .5s ease-in-out;
}
@media screen and (max-width: 1023px) {
  picture.img_hover { display: none; }  /* out-ranks the ratio-* rule */
  .box_anim { font-size: 14vw; }
}

/* ---------- 17. ABOUT ---------- */
/* 45% + 50% leaves only 5% of slack, so the gutter lives inside the
   text column rather than as a flex gap */
#sec_2 .container { column-gap: 0; row-gap: var(--c10v); align-items: flex-start; }
#sec_2 .text { padding-left: var(--c5o); }
#sec_2 .text p { margin: var(--c3v) 0; color: rgb(var(--white-rgb) / 70%); max-width: 46ch; }
#sec_2 .text .sec_img { margin-top: var(--c10v); }

/* ---------- 18. HORIZONTAL GALLERY ---------- */
#sec_realizzazioni { overflow: hidden; }
/* the track is desktop-only; the ID would otherwise out-rank .desktop */
#wrapper_scroll_orizzontale { display: none; }
@media screen and (min-width: 1024px) {
  #wrapper_scroll_orizzontale {
    display: flex; align-items: center; flex-wrap: nowrap;
    gap: var(--c5o); padding: var(--c10v) var(--c5o);
    width: max-content;
  }
}
#wrapper_scroll_orizzontale .sec_img { flex: none; width: 26vw; }
#wrapper_scroll_orizzontale .text { flex: none; width: 34vw; padding-inline: var(--c2o); }
#wrapper_scroll_orizzontale .text h2 { margin-bottom: var(--c3v); }
#wrapper_scroll_orizzontale .img_1 { align-self: flex-start; }
#wrapper_scroll_orizzontale .img_3 { align-self: flex-end; }
.g_caption { margin-top: .75rem; font-size: .85rem; color: rgb(var(--white-rgb) / 55%); text-transform: uppercase; letter-spacing: .08em; }

#swiper_gallery .swiper { width: 100%; }
#swiper_gallery #nav_dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
#swiper_gallery .swiper-pagination-bullet {
  width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--white-rgb) / 30%);
  opacity: 1; transition: .25s ease;
}
#swiper_gallery .swiper-pagination-bullet-active { background: var(--white); width: 22px; border-radius: 4px; }

/* ---------- 19. FOOTER ---------- */
footer { position: relative; overflow: hidden; }
/* three 33.3% blocks total 100% — kill the column-gap, pad inside */
footer .gap-15-2 { column-gap: 0; }
.foot_block { align-items: flex-start; flex-direction: column; gap: .4rem; padding-right: var(--c2o); }
.foot_block:last-child { padding-right: 0; }
.foot_block .f_label {
  font-family: var(--write-font); font-size: 1.15rem; color: var(--grey); margin-bottom: .5rem;
}
.foot_block p, .foot_block a { color: rgb(var(--white-rgb) / 70%); line-height: 1.7; }
.foot_block a:hover { color: var(--white); }
.titolonemega {
  font-family: var(--title-font); font-size: clamp(16vw, 16.5vw, 20rem);
  line-height: .55; text-align: center; white-space: nowrap; text-transform: uppercase;
}
.titolonemega span {
  display: block; white-space: nowrap; margin-top: 3vw;
  color: var(--muted); font-size: clamp(14vw, 14vw, 17rem);
}
#credits {
  border-top: 1px solid rgb(var(--white-rgb) / 15%);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
}
#credits p { font-size: .8rem; color: rgb(var(--white-rgb) / 45%); line-height: 2; }
#credits a:hover { color: var(--white); }
.resp_sep { margin-inline: .4rem; }
@media screen and (max-width: 767px) { .resp_sep { display: none; } }

/* ---------- 20. BACK TO TOP ---------- */
#back_top {
  position: fixed; right: var(--c2o); bottom: var(--c2o);
  width: 3rem; height: 3rem; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgb(var(--white-rgb) / 10%); backdrop-filter: blur(6px);
  border: 1px solid rgb(var(--white-rgb) / 20%);
  z-index: 5; transition: background .25s ease;
}
#back_top:hover { background: rgb(var(--white-rgb) / 20%); }
#back_top svg { width: .9rem; fill: var(--white); }

/* ---------- 21. MOBILE TWEAKS ---------- */
@media screen and (max-width: 1023px) {
  .tac_mobile { text-align: center; }
  #s2_home .container, #sec_2 .container { gap: var(--c7v); }
  #s1_home .container { justify-content: flex-end; padding-bottom: var(--c20v); }
  .head_logo svg { height: 2rem; }
  #hamburger .wrap, #hamburger span { width: 3em; }
  #sec_2 .text .sec_img { margin-top: var(--c7v); }
}

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .sec_trigger.sec_img picture { clip-path: inset(0 0 0 0) !important; }
  .sec_trigger.sec_img picture img { transform: none !important; opacity: 1 !important; }
  span.text_color_comp .split-child { clip-path: inset(0 0 0 0) !important; }
}

/* ============================================================
   23. JOURNAL — index + article pages
   ============================================================ */

/* ---- shared inner-page hero ---- */
.page_hero {
  position: relative;
  padding: calc(var(--c20v) + 6rem) var(--c5o) var(--c10v);
  overflow: hidden;
}
.page_hero .eyebrow {
  font-family: var(--write-font); font-size: 1.2rem;
  color: var(--grey); margin-bottom: .75rem;
}
.page_hero h1 { max-width: 18ch; }
.page_hero .lede {
  margin-top: var(--c3v); max-width: 52ch;
  color: rgb(var(--white-rgb) / 70%);
}

/* ---- journal index grid ---- */
.journal_grid {
  display: grid; grid-template-columns: 1fr; gap: var(--c7v) var(--c2o);
  padding: 0 var(--c5o) var(--c20v);
}
@media screen and (min-width: 768px)  { .journal_grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (min-width: 1281px) { .journal_grid { grid-template-columns: repeat(3, 1fr); } }

.j_card { position: relative; display: block; }
.j_card picture { display: block; overflow: hidden; aspect-ratio: 4 / 3; }
.j_card picture img { width: 100%; height: 100%; object-fit: cover; }
.j_card .j_meta {
  display: flex; gap: .75rem; align-items: center; margin-top: 1.25rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgb(var(--white-rgb) / 45%);
}
.j_card h2 {
  margin-top: .6rem; font-size: var(--h3-size); line-height: 1.15;
  transition: opacity .3s ease;
}
.j_card p { margin-top: .8rem; color: rgb(var(--white-rgb) / 65%); max-width: 44ch; }
.j_card .j_more {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem;
  font-size: .85rem; text-transform: uppercase; letter-spacing: .1em;
}
.j_card .j_more::after {
  content: ""; width: 1.75rem; height: 1px; background: var(--white);
  transition: width .7s var(--ease-link);
}
.j_card:hover .j_more::after { width: 3.5rem; }
.j_card.sec_trigger.active:hover picture img { transform: scale(1.04); }  /* out-ranks the reveal rule */
.j_card picture img { transition: transform 1.2s var(--ease-reveal); }

/* ---- article page ---- */
.article_hero { position: relative; height: 70svh; overflow: hidden; }
.article_hero picture, .article_hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.article_hero .filter_bt {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--black) 5%, rgb(var(--black-rgb) / .25));
}
.article_hero .container {
  position: relative; height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; padding: var(--c10v) var(--c5o) var(--c7v);
}
.article_hero h1 { font-size: var(--h2-size); max-width: 20ch; text-transform: none; }
.article_meta {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgb(var(--white-rgb) / 55%);
}
.article_meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

.article_body { padding: var(--c10v) var(--c5o) var(--c15v); }
.article_body .prose { max-width: 68ch; margin-inline: auto; }
.article_body .prose > * + * { margin-top: 1.4em; }
.article_body .prose p {
  font-size: calc(16px + 3 * var(--fluid));
  line-height: 1.75; color: rgb(var(--white-rgb) / 78%);
}
.article_body .prose p.standfirst {
  font-size: calc(19px + 6 * var(--fluid));
  line-height: 1.5; color: var(--white);
}
.article_body .prose h2 {
  margin-top: 2.2em; font-size: var(--h3-size); line-height: 1.2;
}
.article_body .prose h3 {
  margin-top: 1.8em; font-size: calc(19px + 6 * var(--fluid));
  font-family: var(--main-font); font-weight: 400; color: var(--white);
}
.article_body .prose ul { padding-left: 1.2em; }
.article_body .prose li {
  list-style: disc; margin-top: .6em; line-height: 1.7;
  color: rgb(var(--white-rgb) / 78%);
}
.article_body .prose li::marker { color: rgb(var(--grey-rgb) / 70%); }
.article_body .prose blockquote {
  margin-top: 2em; padding-left: 1.5rem; border-left: 1px solid rgb(var(--grey-rgb) / 45%);
  font-family: var(--title-font); font-size: var(--h3-size); font-weight: 100;
  line-height: 1.25; color: var(--white);
}
.article_body .prose figure { margin-top: 2.5em; }
.article_body .prose figure img { width: 100%; height: auto; }
.article_body .prose figcaption {
  margin-top: .75rem; font-size: .85rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgb(var(--white-rgb) / 45%);
}
.article_body .prose strong { color: var(--white); font-weight: 500; }

/* wide pull image that breaks the measure */
.article_body .prose .bleed { max-width: none; width: 100%; }

/* ---- next / prev ---- */
.article_next {
  border-top: 1px solid rgb(var(--white-rgb) / 15%);
  padding: var(--c10v) var(--c5o);
}
.article_next .n_label {
  font-family: var(--write-font); font-size: 1.15rem; color: var(--grey); margin-bottom: .75rem;
}
.article_next h2 { font-size: var(--h3-size); max-width: 22ch; }

/* ============================================================
   24. INNER PAGES — services, showcase, contact
   ============================================================ */

/* ---- services rows ---- */
/* 45% + 50% = 95%, so no column-gap; the gutter lives in padding */
.svc_row .container { column-gap: 0; row-gap: var(--c10v); align-items: flex-start; }
.svc_row .text { padding-left: var(--c5o); }
.svc_row .svc_flip .text { padding-left: 0; padding-right: var(--c5o); }
.svc_row .svc_flip .sec_img { order: 2; }
.svc_row .svc_flip .text { order: 1; }
.svc_num {
  font-family: var(--write-font); font-size: 1.3rem;
  color: var(--grey); margin-bottom: .5rem;
}
.svc_row .text p { margin: var(--c3v) 0; color: rgb(var(--white-rgb) / 70%); max-width: 48ch; }
.svc_row .text .link { margin-top: var(--c2v); }
@media screen and (max-width: 1023px) {
  .svc_row .text, .svc_row .svc_flip .text { padding-left: 0; padding-right: 0; }
  .svc_row .svc_flip .sec_img, .svc_row .svc_flip .text { order: 0; }
}

/* ---- shared inner-page CTA ---- */
.svc_cta { border-top: 1px solid rgb(var(--white-rgb) / 15%); }
.svc_cta .lede { margin: var(--c3v) 0; max-width: 54ch; color: rgb(var(--white-rgb) / 70%); }

/* ---- showcase grid ---- */
.sc_grid {
  display: grid; grid-template-columns: 1fr;
  gap: var(--c10v) var(--c2o);
  align-items: start;
}
@media screen and (min-width: 768px)  { .sc_grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (min-width: 1281px) { .sc_grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (min-width: 1281px) { .sc_grid .sc_tall { margin-top: var(--c7v); } }
.sc_item picture { display: block; overflow: hidden; }
.sc_meta { margin-top: 1.1rem; }
.sc_caption { font-size: calc(16px + 4 * var(--fluid)); color: var(--white); }
.sc_place {
  margin-top: .25rem; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgb(var(--white-rgb) / 45%);
}

/* ---- contact ---- */
#page_inner .container { align-items: flex-start; }
.contact_block { margin-top: var(--c5v); }
.c_label {
  font-family: var(--write-font); font-size: 1.15rem; color: var(--grey); margin-bottom: .3rem;
}
.contact_block p { color: rgb(var(--white-rgb) / 75%); line-height: 1.6; }
.contact_block a:hover { color: var(--white); }

.c_form { max-width: 40rem; }
.f_row { position: relative; margin-bottom: var(--c3v); }
.f_row label {
  display: block; margin-bottom: .5rem;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgb(var(--white-rgb) / 50%);
}
.f_row input, .f_row textarea, .f_row select {
  width: 100%; padding: .85rem 0;
  background: none; color: var(--white);
  font-family: var(--main-font); font-size: 1.05rem; font-weight: 300;
  border: 0; border-bottom: 1px solid rgb(var(--white-rgb) / 25%);
  border-radius: 0; transition: border-color .3s ease;
}
.f_row select { padding-right: 1rem; }
.f_row select option { background: var(--black); color: var(--white); }
.f_row textarea { resize: vertical; min-height: 6rem; }
.f_row input:focus, .f_row textarea:focus, .f_row select:focus {
  outline: none; border-bottom-color: var(--white);
}
.c_submit {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  margin-top: var(--c2v); padding: 0 .25rem .35rem 0;
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em;
}
.c_submit::after {
  content: ""; position: absolute; right: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--white);
  transform: scaleX(1); transform-origin: center left;
  transition: transform .7s var(--ease-link);
}
.c_submit svg { height: .85rem; width: auto; flex: none; transition: transform .7s var(--ease-link), opacity .7s var(--ease-link); }
.c_submit svg path { fill: var(--white); }
.c_submit svg:nth-of-type(1) { position: absolute; left: 0; top: 50%; transform: translate3d(-100%, -100%, 0); opacity: 0; }
.c_submit span { transition: transform .7s var(--ease-link); }
.c_submit:hover span { transform: translateX(1.5rem); }
.c_submit:hover svg:nth-of-type(2) { transform: translate3d(110%, 85%, 0); opacity: 0; }
.c_submit:hover svg:nth-of-type(1) { transform: translate3d(0, -50%, 0); opacity: 1; }
.f_note {
  margin-top: var(--c3v); font-size: .82rem; line-height: 1.6;
  color: rgb(var(--white-rgb) / 40%);
}

/* ============================================================
   25. REVISIONS — flat header nav, showcase fit, services scale
   ============================================================ */

/* ---- flat nav in the header bar (desktop) ---- */
.head_nav { display: none; }
.head_nav ul { display: flex; align-items: center; gap: var(--c2o); }
.head_nav a {
  position: relative; display: inline-block;
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgb(var(--white-rgb) / 72%);
  transition: color .3s ease;
}
.head_nav a::after {
  content: ""; position: absolute; right: 0; bottom: -.4rem;
  width: 100%; height: 1px; background-color: var(--white);
  transform: scaleX(0); transform-origin: center right;
  transition: transform .7s var(--ease-link);
}
.head_nav a:hover { color: var(--white); }
.head_nav a:hover::after { transform: scaleX(1); transform-origin: center left; }
.head_nav a[aria-current="page"] { color: var(--white); }
.head_nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: center left; }

@media screen and (min-width: 1024px) {
  .head_nav { display: block; }
  #hamburger { display: none; }   /* nav is visible, burger is redundant */
}

/* ---- showcase heading was clipping ("Show…") ---- */
/* the word needs more room than the 34vw column gave it, and
   #sec_realizzazioni is overflow:hidden for the pinned title */
#wrapper_scroll_orizzontale .text { width: 42vw; }
#wrapper_scroll_orizzontale .text h2 {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  margin-bottom: var(--c3v);
}

/* ---- services: larger reading size ---- */
.svc_row .text p {
  font-size: calc(19px + 8 * var(--fluid));
  line-height: 1.6;
  max-width: 42ch;
  color: rgb(var(--white-rgb) / 78%);
}
.svc_row .text h2 { font-size: calc(34px + 30 * var(--fluid)); }
.svc_num { font-size: 1.5rem; }
.svc_row .text .link { font-size: 1.15rem; }
.svc_cta .lede { font-size: calc(19px + 8 * var(--fluid)); line-height: 1.6; }
#page_inner .page_hero .lede { font-size: calc(17px + 7 * var(--fluid)); line-height: 1.6; }

/* five services now — keep the home hover list from getting too tall */
#wrapper_servizi .box_anim { font-size: 9.5vw; }
@media screen and (max-width: 1023px) { #wrapper_servizi .box_anim { font-size: 12vw; } }

/* ---- contact form: honeypot + status ---- */
.f_hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.f_status { margin-top: var(--c2v); font-size: .95rem; line-height: 1.6; }
.f_status:empty { display: none; }
.f_status.is_ok    { color: var(--grey); }
.f_status.is_error { color: #e8a0a0; }
.c_submit:disabled { opacity: .5; cursor: default; }
.c_submit:disabled::after { transform: scaleX(1); }
.f_note a { border-bottom: 1px solid rgb(var(--white-rgb) / 30%); }
.f_note a:hover { color: var(--white); border-bottom-color: var(--white); }