/*
Theme Name: Studio Torri
Theme URI: https://www.studiotorri.com/
Author: WEBBAMI
Author URI: https://www.webbami.it/
Description: Tema su misura per Studio Torri – System Advisory Boutique. Homepage implementata dal design Figma "HOMEPAGE" (node 172:557).
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: studio-torri
License: Proprietary
*/

/* -------------------------------------------------------------------------
   Design tokens (stili Figma)
   ------------------------------------------------------------------------- */
:root {
	--st-white: #ececec;          /* WHITE */
	--st-light-grey: #d9d9d9;     /* LIGHT_GREY */
	--st-gold-flat: #8f7753;      /* GOLD_FLAT */
	--st-dark-blue: #293444;      /* DARK_BLUE / PAPER */
	--st-medium-blue: #2e3d51;    /* MEDIUM_BLUE */
	--st-paper-grey: #d9d9d9;     /* PAPER GREY */
	--st-green: #009183;          /* GREEN */
	--st-blue: #1270b7;           /* BLUE */

	/* GOLD_GRADIENT */
	--st-gold-stops: #8f7753 0%, #e1cba4 29.327%, #b8a17c 55.288%, #735b39 87.5%;
	--st-gold-v: linear-gradient(180deg, var(--st-gold-stops));
	--st-gold-h: linear-gradient(90deg, var(--st-gold-stops));

	--st-font-serif: "Domine", Georgia, "Times New Roman", serif;
	--st-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Spaziature: 180px laterali a 1440px */
	--st-gutter: clamp(20px, 12.5vw, 180px);
	--st-header-h: 182px;

	/* SHADOW */
	--st-shadow:
		0 100px 80px rgba(0, 0, 0, 0.13),
		0 41.778px 33.422px rgba(0, 0, 0, 0.09),
		0 22.336px 17.869px rgba(0, 0, 0, 0.08),
		0 12.522px 10.017px rgba(0, 0, 0, 0.06),
		0 6.65px 5.32px rgba(0, 0, 0, 0.05),
		0 2.767px 2.214px rgba(0, 0, 0, 0.04);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--st-dark-blue);
	color: var(--st-light-grey);
	font-family: var(--st-font-sans);
	font-size: 16px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

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

h1,
h2,
h3,
p {
	margin: 0;
	font-weight: inherit;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--st-gold-flat);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.st-skip:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--st-white);
	color: var(--st-dark-blue);
}

/* -------------------------------------------------------------------------
   Utility
   ------------------------------------------------------------------------- */
.st-gold-text {
	background-image: var(--st-gold-v);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Texture "carta" in multiply: da Opzioni tema (--st-texture) o da assets/img/bg-texture.jpg */
.st-textured {
	background-color: var(--st-dark-blue);
	background-image: var(--st-texture, url("assets/img/bg-texture.jpg"));
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

/* Variante chiara: #D9D9D9 + texture in multiply al 50% */
.st-textured-light {
	position: relative;
	isolation: isolate;
	background-color: var(--st-paper-grey);
}

.st-textured-light::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--st-texture, url("assets/img/bg-texture.jpg"));
	background-size: cover;
	background-position: center;
	mix-blend-mode: multiply;
	opacity: 0.5;
	pointer-events: none;
}

.st-bg-dark {
	background-color: var(--st-dark-blue);
}

.st-bg-medium {
	background-color: var(--st-medium-blue);
}

.st-section {
	padding-inline: var(--st-gutter);
}

/* H1 TORRI – Domine 49 / 1.25 */
.st-h1 {
	font-family: var(--st-font-serif);
	font-size: clamp(34px, 3.4vw, 49px);
	font-weight: 400;
	line-height: 1.25;
	color: var(--st-light-grey);
}

/* H3 TORRI – Inter Semi Bold 25 / 1.25 */
.st-h3 {
	font-size: clamp(21px, 1.74vw, 25px);
	font-weight: 600;
	line-height: 1.25;
	color: var(--st-light-grey);
}

/* Button (contorno) */
.st-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex-shrink: 0;
	padding: 14px 58px; /* 16/60 nel design con bordo interno da 2px → 52px di altezza */
	border: 2px solid var(--st-gold-flat);
	border-radius: 38px;
	color: var(--st-gold-flat);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.st-btn:hover,
.st-btn:focus-visible {
	background-color: var(--st-gold-flat);
	color: var(--st-dark-blue);
}

.st-btn--light {
	border-color: var(--st-light-grey);
	color: var(--st-light-grey);
}

.st-btn--light:hover,
.st-btn--light:focus-visible {
	background-color: var(--st-light-grey);
	color: var(--st-medium-blue);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.st-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 33px;
	padding: 33px 58px;
	background: rgba(41, 52, 68, 0.01);
	-webkit-backdrop-filter: blur(7.9px);
	backdrop-filter: blur(7.9px);
	transition: background-color 0.3s ease, padding 0.3s ease, gap 0.3s ease;
}

.st-header.is-scrolled {
	background: rgba(41, 52, 68, 0.85);
}

.admin-bar .st-header {
	top: 32px;
}

.st-header__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.st-header__line {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--st-gold-h);
}

.st-logo {
	display: flex;
	align-items: flex-end;
	gap: 11.924px;
	flex-shrink: 0;
}

.st-logo__icon {
	width: 80.016px;
	height: 82.432px;
}

.st-logo__words {
	display: flex;
	flex-direction: column;
	gap: 4.57px;
	width: 235.378px;
}

.st-logo__text {
	width: 235.318px;
	height: 22.85px;
}

.st-logo__tagline {
	display: block;
	font-size: 10.97px;
	line-height: 0.92;
	letter-spacing: 3.1813px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.st-nav {
	display: flex;
	align-items: center;
	gap: 46px;
	align-self: stretch;
	padding-top: 34px;
}

.st-nav__menu {
	height: 100%;
}

.st-nav__list {
	display: flex;
	align-items: stretch;
	gap: 48px;
	height: 100%;
	padding-inline: 48px;
}

.st-nav__list li {
	display: flex;
}

.st-nav__list a {
	display: flex;
	align-items: center;
	height: 100%;
	color: var(--st-light-grey);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	text-transform: uppercase;
	white-space: nowrap;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease;
}

.st-nav__list a:hover {
	color: var(--st-white);
}

.st-nav__list .current-menu-item > a,
.st-nav__list .current_page_item > a,
.st-nav__list .current-menu-ancestor > a,
.st-nav__list .current-page-ancestor > a {
	color: var(--st-white);
	border-image: var(--st-gold-h) 1;
	border-image-width: 0 0 1px 0;
	border-bottom-style: solid;
}

.st-header__actions {
	display: flex;
	align-items: center;
	gap: 21px;
}

.st-lang {
	display: flex;
	align-items: center;
	gap: 16px;
}

.st-lang__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 28px;
	color: var(--st-light-grey);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
}

.st-lang__toggle img {
	width: 15.896px;
	height: 15.896px;
}

.st-lang__arrow--dark {
	display: none;
}

.st-lang__divider {
	display: block;
	width: 1px;
	height: 46.5px;
	background: var(--st-light-grey);
}

.st-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border-radius: 40px;
	background-image: linear-gradient(112.89deg, #8f7753 13.844%, #e1cba4 20.552%, #b8a17c 51.002%, #735b39 88.782%);
	color: var(--st-dark-blue);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	transition: filter 0.2s ease;
}

.st-cta:hover {
	filter: brightness(1.08);
}

.st-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	padding: 10px;
}

.st-burger__bar {
	display: block;
	height: 2px;
	background: var(--st-gold-h);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.st-burger[aria-expanded="true"] .st-burger__bar:nth-child(2) {
	transform: translateY(8px) rotate(45deg);
}

.st-burger[aria-expanded="true"] .st-burger__bar:nth-child(3) {
	opacity: 0;
}

.st-burger[aria-expanded="true"] .st-burger__bar:nth-child(4) {
	transform: translateY(-8px) rotate(-45deg);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.st-hero {
	padding: 347px var(--st-gutter) 289px;
}

.st-hero__inner {
	display: flex;
	align-items: flex-end;
	gap: 22px;
}

.st-hero__title {
	flex-shrink: 0;
	width: min(7.865em, 100%); /* 755px a 96px */
	font-family: var(--st-font-serif);
	font-size: clamp(46px, 6.667vw, 96px);
	font-weight: 400;
	line-height: 0.84;
	letter-spacing: -0.07em;
	text-transform: uppercase;
	background-image: linear-gradient(114.09deg, #8f7753 12.455%, #e1cba4 35.15%, #b8a17c 55.242%, #735b39 80.17%);
}

.st-hero__aside {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.st-hero__aside p {
	color: var(--st-white);
	font-size: 16px;
	line-height: 1.25;
}

.st-hero__rule {
	display: block;
	width: 92px;
	height: 4px;
	margin-bottom: -1px; /* gap 21px nel design tra linea e testo */
	background: var(--st-gold-h);
}

/* -------------------------------------------------------------------------
   Gateway to global markets
   ------------------------------------------------------------------------- */
.st-gateway {
	display: flex;
	align-items: flex-start;
	gap: 100px;
	padding-block: 80px;
}

.st-gateway__intro,
.st-gateway__list {
	flex: 1 1 0;
	min-width: 0;
}

.st-gateway__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.st-gateway__intro p,
.st-service p,
.st-segment p,
.st-alongside__intro p,
.st-pillars__intro p,
.st-ethics p {
	color: var(--st-light-grey);
	font-size: 16px;
	line-height: 1.25;
}

.st-gateway__list {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.st-service {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.st-service__icon {
	width: 80px;
	height: 80px;
}

.st-divider {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--st-light-grey);
}

/* -------------------------------------------------------------------------
   Alongside every business
   ------------------------------------------------------------------------- */
.st-alongside {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 49px;
	padding-block: 80px;
}

.st-alongside__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	text-align: center;
}

.st-alongside__grid {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 72px;
	width: 100%;
	padding-inline: 9px;
}

.st-segment {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 33px;
}

.st-segment__icon {
	width: auto;
	height: auto;
}

/* lo slot nel design è 61.875px, l'SVG esportato include l'ingombro del tratto (inset -4.04%) */
.st-segment__icon--small {
	margin: -2.5px;
}

.st-vdivider {
	display: block;
	flex-shrink: 0;
	align-self: stretch;
	width: 2px;
	background: var(--st-gold-v);
}

/* -------------------------------------------------------------------------
   The six technology pillars
   ------------------------------------------------------------------------- */
.st-pillars {
	display: flex;
	flex-direction: column;
	gap: 46px;
	padding-block: 100px 31px; /* altezza sezione 972px nel design */
	overflow: hidden;
}

.st-pillars__head {
	display: flex;
	align-items: flex-end;
	gap: 21px;
}

.st-pillars__intro {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	gap: 21px;
	color: var(--st-light-grey);
}

.st-pillars__intro p {
	max-width: 705px;
}

.st-pillars__track {
	/* il carosello sborda a destra fino al bordo della pagina, come nel design */
	margin-right: calc(-1 * var(--st-gutter));
	padding-bottom: 126px; /* spazio per l'ombra (593 - 467) */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	scrollbar-color: var(--st-gold-flat) transparent;
	-webkit-overflow-scrolling: touch;
}

.st-pillars__track::-webkit-scrollbar {
	height: 4px;
}

.st-pillars__track::-webkit-scrollbar-thumb {
	background: var(--st-gold-flat);
	border-radius: 2px;
}

.st-pillars__list {
	display: flex;
	gap: 36px;
	width: max-content;
	padding-right: var(--st-gutter);
}

.st-pillar {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 9px;
	width: 336.051px;
	height: 467px;
	padding: 16px;
	background: var(--st-medium-blue);
	box-shadow: var(--st-shadow);
	scroll-snap-align: start;
}

.st-pillar__icon {
	width: 114px;
	height: 114px;
}

.st-pillar__num,
.st-pillar__title {
	display: block;
	width: 100%;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.25;
}

.st-pillar__title {
	background-image: linear-gradient(101.21deg, #8f7753 9.027%, #e1cba4 24.924%, #b8a17c 54.979%, #735b39 92.269%);
}

/* -------------------------------------------------------------------------
   Code of ethics
   ------------------------------------------------------------------------- */
.st-ethics {
	padding-block: 100px;
}

.st-ethics__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.st-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 32px;
	padding: 100px 78px;
}

.st-footer__top {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	gap: 96px;
	width: 100%;
}

.st-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13.515px;
	flex-shrink: 0;
	width: 290px;
}

.st-footer__brand-icon {
	width: 105.805px;
	height: 109px;
}

.st-footer__brand-words {
	display: flex;
	flex-direction: column;
	gap: 5.631px;
	width: 100%;
}

.st-footer__brand-text {
	width: 289.926px;
	height: 28.152px;
}

.st-footer__tagline {
	display: block;
	font-size: 13.51px;
	line-height: 0.92;
	letter-spacing: 3.9179px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.st-partners {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	align-items: center;
	gap: 20.129px;
}

.st-partner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6.441px;
	height: 124.441px;
	flex-shrink: 0;
}

.st-partner__label {
	color: var(--st-light-grey);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.25;
}

.st-partner__logo {
	max-width: 100%;
	height: auto;
}

a.st-partner {
	transition: opacity 0.2s ease;
}

a.st-partner:hover {
	opacity: 0.85;
}

.st-partners__divider {
	display: block;
	flex-shrink: 0;
	align-self: stretch;
	width: 0.805px;
	background: var(--st-gold-v);
}

.st-footer__line {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--st-gold-h);
}

.st-footer__bottom {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 118px;
	width: 100%;
}

.st-footer__legal {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	gap: 16px;
}

.st-feature {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.st-feature__icon {
	width: 36.75px;
	height: 46.947px;
	flex-shrink: 0;
}

.st-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	align-self: stretch;
}

.st-feature__title {
	color: var(--st-gold-flat);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
}

.st-feature__text {
	color: #fff;
	font-size: 9px;
	line-height: 1.5;
}

.st-footer__rule {
	display: block;
	width: 100%;
	height: 2px;
	background: linear-gradient(270deg, var(--st-gold-stops));
}

.st-footer__disclaimer {
	color: var(--st-white);
	font-size: 11px;
	line-height: 1.5;
}

.st-legal-list {
	display: flex;
	flex-wrap: wrap;
	color: var(--st-white);
	font-size: 11px;
	line-height: 1.5;
}

.st-legal-list li + li::before {
	content: "|";
	margin-inline: 0.3em;
}

.st-legal-list a:hover,
.st-footer__nav-list a:hover {
	color: var(--st-gold-flat);
}

.st-footer__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
}

.st-footer__heading {
	color: var(--st-gold-flat);
	font-size: 16px;
	line-height: 1.25;
}

.st-footer__nav-list {
	width: 154px;
	color: #fff;
	font-size: 16px;
	line-height: 2.83;
}

.st-social {
	display: inline-block;
	transition: opacity 0.2s ease;
}

.st-social:hover {
	opacity: 0.75;
}

/* -------------------------------------------------------------------------
   Logo personalizzati, social
   ------------------------------------------------------------------------- */
.st-logo__custom {
	width: auto;
	max-height: 83px;
}

.st-footer__brand-custom {
	width: auto;
	max-width: 290px;
	height: auto;
}

.st-social-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.st-social__text {
	color: var(--st-light-grey);
	font-size: 12px;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
   Header chiaro (pagine con sfondo grigio carta: Chi siamo)
   ------------------------------------------------------------------------- */
.st-light-header .st-nav__list a,
.st-light-header .st-lang__toggle {
	color: var(--st-dark-blue);
}

.st-light-header .st-nav__list a:hover,
.st-light-header .st-nav__list .current-menu-item > a,
.st-light-header .st-nav__list .current_page_item > a {
	color: var(--st-dark-blue);
}

.st-light-header .st-lang__divider {
	background: var(--st-dark-blue);
}

.st-light-header .st-lang__arrow--light {
	display: none;
}

.st-light-header .st-lang__arrow--dark {
	display: block;
}

.st-light-header .st-header.is-scrolled {
	background: rgba(217, 217, 217, 0.88);
}

/* -------------------------------------------------------------------------
   Chi siamo
   ------------------------------------------------------------------------- */
.st-h1--dark {
	color: var(--st-dark-blue);
}

.st-about-intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 939px;
	padding: 297px var(--st-gutter) 102px;
}

.st-about-intro__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 21px;
	max-width: 1080px;
}

.st-about-intro__inner .st-hero__rule {
	margin-bottom: 0;
}

.st-about-intro p,
.st-structure p,
.st-milestones p {
	color: var(--st-dark-blue);
	font-size: 16px;
	line-height: 1.25;
}

.st-structure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 49px;
	padding: 180px var(--st-gutter);
	background: var(--st-paper-grey);
}

.st-structure__intro {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
	text-align: center;
}

.st-structure__grid {
	display: flex;
	align-items: flex-end;
	gap: 72px;
	width: 100%;
	padding-inline: 9px;
}

.st-structure__item {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 33px;
	text-align: center;
}

.st-structure__logo img {
	max-width: 100%;
	height: auto;
}

.st-structure__item strong {
	font-weight: 700;
}

.st-milestones {
	display: flex;
	align-items: flex-start;
	gap: 60px;
	padding: 180px 0 180px var(--st-gutter);
}

.st-milestones__title {
	flex-shrink: 0;
	width: 402px;
}

.st-milestones__track {
	flex: 1 1 0;
	min-width: 0;
	padding-bottom: 12px; /* spazio per la scrollbar: contenitore ~359px come nel design */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--st-gold-flat) transparent;
	-webkit-overflow-scrolling: touch;
}

.st-milestones__track::-webkit-scrollbar {
	height: 4px;
}

.st-milestones__track::-webkit-scrollbar-thumb {
	background: var(--st-gold-flat);
	border-radius: 2px;
}

.st-milestones__list {
	display: flex;
	width: max-content;
	padding-right: var(--st-gutter);
}

.st-milestone {
	display: flex;
	flex-direction: column;
	gap: 47.147px;
	width: 241.426px;
	scroll-snap-align: start;
}

.st-milestone__year {
	padding-inline: 21.135px;
	color: var(--st-dark-blue);
	font-family: var(--st-font-serif);
	font-size: 39px;
	line-height: 1.25;
}

.st-milestone__body {
	display: flex;
	flex-direction: column;
	gap: 24.387px;
	width: 212.975px;
}

.st-milestone__dot {
	width: 236.549px;
	max-width: none;
	height: 22.761px;
}

.st-milestone__title {
	color: var(--st-dark-blue);
	font-family: var(--st-font-serif);
	font-size: 24px;
	line-height: 1.25;
}

.st-milestones p.st-milestone__text {
	line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Area di competenza
   ------------------------------------------------------------------------- */
.st-area {
	display: flex;
	flex-direction: column;
	gap: 100px;
	padding: 297px var(--st-gutter) 102px;
}

.st-area-tabs {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	border-bottom: 1px solid #fff;
}

.st-area-tabs__list {
	display: flex;
	align-items: stretch;
	gap: 61px;
	height: 35px;
	overflow: hidden;
}

.st-area-tabs__list li {
	display: flex;
}

.st-area-tabs__link {
	display: block;
	max-width: 154px;
	padding-inline: 12px;
	color: var(--st-light-grey);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	text-transform: uppercase;
	border-bottom: 4px solid transparent;
	transition: color 0.2s ease;
}

.st-area-tabs__link:hover {
	color: var(--st-white);
}

.st-area-tabs__link.is-active {
	border-image: var(--st-gold-h) 1;
	border-image-width: 0 0 4px 0;
	border-bottom-style: solid;
}

.st-area__main {
	display: flex;
	align-items: flex-start;
	gap: 132px;
}

.st-area__content {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

.st-area__number,
.st-area__title {
	display: block;
	font-family: var(--st-font-serif);
	font-size: clamp(36px, 3.4vw, 49px);
	font-weight: 400;
	line-height: 1.25;
}

.st-area__title {
	background-image: linear-gradient(114.19deg, #8f7753 8.4657%, #e1cba4 26.232%, #b8a17c 41.959%, #735b39 61.472%);
}

.st-area__content p {
	color: var(--st-light-grey);
	font-size: 16px;
	line-height: 1.25;
}

.st-area__body {
	display: flex;
	flex-direction: column;
	gap: 20px; /* una riga vuota tra i blocchi, come nel design */
}

.st-area__body strong {
	font-weight: 700;
}

.st-area__closing.is-italic {
	font-style: italic;
}

.st-area__divider {
	display: block;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #8f7753 0%, #e1cba4 29.3%, #b8a17c 55.3%, #735b39 100%);
}

.st-area__art {
	flex-shrink: 0;
	width: 316.028px;
}

.st-area__books {
	width: 316.028px;
	height: auto;
}

/* -------------------------------------------------------------------------
   Pagine generiche (index.php)
   ------------------------------------------------------------------------- */
.st-page {
	padding-top: calc(var(--st-header-h) + 80px);
	padding-bottom: 100px;
}

.st-page__article + .st-page__article {
	margin-top: 64px;
}

.st-page__content {
	max-width: 760px;
	margin-top: 24px;
	line-height: 1.6;
}

.st-page__content a {
	color: var(--st-gold-flat);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.st-header {
		padding-inline: 32px;
	}

	.st-nav {
		gap: 24px;
	}

	.st-nav__list {
		gap: 28px;
		padding-inline: 16px;
	}

	.st-gateway {
		gap: 64px;
	}

	.st-alongside__grid {
		gap: 40px;
	}

	.st-footer {
		padding-inline: 48px;
	}

	.st-footer__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
	}

	.st-partners {
		flex-wrap: wrap;
		row-gap: 32px;
	}
}

@media (max-width: 1100px) {
	:root {
		--st-header-h: 120px;
	}

	.st-header {
		gap: 16px;
		padding-block: 20px;
	}

	.st-header__inner {
		align-items: center;
	}

	.st-logo__icon {
		width: 56px;
		height: auto;
	}

	.st-logo__words {
		width: 165px;
		gap: 3px;
	}

	.st-logo__text {
		width: 165px;
		height: auto;
	}

	.st-logo__tagline {
		font-size: 7.7px;
		letter-spacing: 2.2px;
	}

	.st-burger {
		display: flex;
	}

	.st-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		padding: 32px;
		background: rgba(41, 52, 68, 0.97);
		-webkit-backdrop-filter: blur(7.9px);
		backdrop-filter: blur(7.9px);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	}

	.st-nav.is-open {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.st-nav__menu,
	.st-nav__list {
		height: auto;
	}

	.st-nav__list {
		flex-direction: column;
		gap: 20px;
		padding: 0;
	}

	.st-nav__list a {
		font-size: 14px;
		padding-bottom: 6px;
	}

	.st-hero {
		padding-top: calc(var(--st-header-h) + 120px);
		padding-bottom: 120px;
	}

	.st-hero__inner,
	.st-gateway,
	.st-pillars__head {
		flex-direction: column;
		align-items: flex-start;
	}

	.st-hero__inner {
		gap: 48px;
	}

	.st-hero__aside {
		max-width: 560px;
	}

	.st-alongside__grid {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
		padding-inline: 0;
	}

	.st-vdivider {
		width: 100%;
		height: 2px;
		background: var(--st-gold-h);
	}

	.st-footer__bottom {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 48px;
	}

	.st-footer__legal {
		flex-basis: 100%;
	}

	.st-light-header .st-nav {
		background: rgba(217, 217, 217, 0.97);
	}

	.st-about-intro {
		min-height: 0;
		padding-top: calc(var(--st-header-h) + 120px);
		padding-bottom: 100px;
	}

	.st-structure {
		padding-block: 100px;
	}

	.st-structure__grid {
		flex-direction: column;
		align-items: center;
		gap: 56px;
		padding-inline: 0;
	}

	.st-structure__item {
		max-width: 420px;
	}

	.st-milestones {
		flex-direction: column;
		gap: 40px;
		padding-block: 100px;
	}

	.st-milestones__title {
		width: auto;
	}

	.st-milestones__track {
		flex: none;
		width: 100%;
		padding-bottom: 32px;
	}

	.st-area {
		gap: 56px;
		padding-top: calc(var(--st-header-h) + 80px);
	}

	.st-area-tabs {
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.st-area-tabs::-webkit-scrollbar {
		display: none;
	}

	.st-area-tabs__list {
		gap: 24px;
		height: auto;
		min-height: 35px;
		overflow: visible;
	}

	.st-area-tabs__link {
		max-width: none;
		padding-bottom: 8px;
		white-space: nowrap;
	}

	.st-area__main {
		flex-direction: column;
		gap: 40px;
	}

	.st-area__art {
		order: -1;
		width: 160px;
	}

	.st-area__books {
		width: 160px;
	}
}

@media (max-width: 600px) {
	.st-header {
		padding-inline: 20px;
	}

	.st-btn {
		padding: 12px 34px;
		white-space: normal;
		text-align: center;
	}

	.st-gateway,
	.st-alongside {
		padding-block: 64px;
	}

	.st-pillars {
		padding-top: 64px;
	}

	.st-pillar {
		width: 280px;
		height: 400px;
	}

	.st-pillars__track {
		padding-bottom: 72px;
	}

	.st-ethics,
	.st-structure,
	.st-milestones {
		padding-block: 64px;
	}

	.st-area {
		padding-bottom: 64px;
	}

	.st-footer {
		padding: 64px 20px;
	}

	.st-partners__divider {
		display: none;
	}

	.st-partner {
		height: auto;
	}

	.st-partner__logo {
		max-width: min(100%, 260px);
	}

	.st-footer__brand {
		width: 220px;
	}

	.st-footer__brand-icon {
		width: 80px;
		height: auto;
	}

	.st-footer__brand-text {
		width: 220px;
		height: auto;
	}

	.st-footer__tagline {
		font-size: 10.2px;
		letter-spacing: 2.95px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}