/* ===================================================================
   Studio & Partners — sistema di design "ink & brass"
   Palette ispirata alla cartografia storica: inchiostro notturno,
   carta pergamena, ottone invecchiato. Serif carattere + sans utility.
   =================================================================== */

:root{
  --ink: #2E4A6B;
  --ink-soft: #3C5A7D;
  --ink-line: rgba(185, 138, 62, .22);
  --parchment: #F8F5EC;
  --parchment-line: #E2DBC6;
  --brass: #B98A3E;
  --brass-light: #D4AE73;
  --slate: #45566E;
  --slate-light: #6B7C95;
  --white: #FCFAF3;
  --blue: #3E5C85;
  --blue-light: #6E93C2;
  --bronze: #8C6A2E;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --max: 1120px;
  --radius: 2px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}
h1{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h2{ font-size: clamp(1.5rem, 2.6vw, 2rem); }
h3{ font-size: 1.15rem; }
p{ margin: 0 0 1em; }
a{ color: inherit; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
}

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px){ .wrap{ padding: 0 20px; } }

section{ padding: 88px 0; }
@media (max-width: 640px){ section{ padding: 56px 0; } }

.on-ink{ background: var(--ink); color: var(--parchment); }
.on-ink .eyebrow{ color: var(--brass-light); }
.on-ink h1, .on-ink h2, .on-ink h3{ color: var(--white); }
.on-ink p{ color: rgba(243,238,223,.72); }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--brass);
  transition: background .15s ease, color .15s ease;
  cursor: pointer;
  background: none;
}
.btn-solid{ background: var(--brass); color: #FFFFFF; font-weight: 700; }
.btn-solid:hover{ background: var(--brass-light); }
.btn-ghost{ color: inherit; }
.btn-ghost:hover{ background: var(--ink-line); }
.on-ink .btn-ghost{ border-color: rgba(212,174,115,.5); }
.btn:focus-visible{ outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---------- header ---------- */
header.site{
  position: sticky; top: 0; z-index: 50;
  background: var(--parchment);
  border-bottom: 1px solid var(--parchment-line);
}
header.site .bar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
}
.mark{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.mark .box{
  width: 28px; height: 28px; border: 1px solid var(--brass);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: .85rem; color: var(--brass);
}
nav.primary{ display: flex; align-items: center; gap: 30px; }
nav.primary a{
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--slate);
}
nav.primary a:hover, nav.primary a[aria-current="page"]{ color: var(--brass); }
.lang{ color: var(--slate-light) !important; }
#nav-toggle{ display: none; }
.nav-btn{ display: none; }
@media (max-width: 860px){
  nav.primary{
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--parchment); flex-direction: column; align-items: flex-start;
    gap: 18px; padding: 22px 20px 26px; border-bottom: 1px solid var(--parchment-line);
    display: none;
  }
  #nav-toggle:checked ~ nav.primary{ display: flex; }
  .nav-btn{
    display: inline-flex; background: none; border: 1px solid var(--parchment-line);
    color: var(--ink); font-family: var(--font-mono); font-size: .8rem;
    padding: 8px 12px; cursor: pointer;
  }
}

/* ---------- hero (light) ---------- */
.hero{
  position: relative; overflow: hidden;
  padding: 120px 0 96px;
  background: var(--parchment);
}
.hero .graticule{
  position: absolute; inset: 0; opacity: .14; pointer-events: none;
}
.hero .wrap{ position: relative; }
.hero h1{ max-width: 15ch; color: var(--blue); }
.rule{ width: 48px; height: 2px; background: var(--brass); margin: 22px 0; }
.hero .lede{ max-width: 46ch; font-size: 1.08rem; color: var(--slate); }
.hero .cta-row{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero .btn-ghost{ border-color: var(--parchment-line); color: var(--ink); }
.hero .btn-ghost:hover{ background: var(--white); }
.hero-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.hero-logo{ display: flex; justify-content: center; }
.hero-logo img{ width: 100%; max-width: 240px; height: auto; }
@media (max-width: 760px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-logo{ order: -1; max-width: 150px; margin: 0 auto 10px; }
  .hero-logo img{ max-width: 150px; }
}

/* ---------- timezone ticker (signature element) ---------- */
.ticker{
  background: var(--ink-soft); border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
}
.ticker .wrap{
  display: flex; flex-wrap: wrap; gap: 0;
}
.ticker .stop{
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em;
  color: rgba(243,238,223,.8);
  padding: 18px 26px 18px 0; margin-right: 26px;
  border-right: 1px solid var(--ink-line);
  display: flex; align-items: baseline; gap: 10px;
}
.ticker .stop:last-child{ border-right: none; }
.ticker .stop .city{ color: var(--white); font-weight: 500; }
.ticker .stop .tz{ color: var(--brass-light); }

/* ---------- section headers ---------- */
.section-head{ max-width: 60ch; margin-bottom: 44px; }
.section-head .eyebrow{ display: block; margin-bottom: 10px; }
.section-head p{ color: var(--slate); }

/* ---------- practice areas: image cards with overlay ---------- */
.articles{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 760px){ .articles{ grid-template-columns: 1fr; } }
.article{
  position: relative; overflow: hidden; border-radius: 12px;
  min-height: 280px; padding: 26px 28px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center;
}
.article::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,24,38,0) 35%, rgba(14,24,38,.85) 100%);
}
.article:nth-child(4n+1){ background-color: var(--ink); }
.article:nth-child(4n+2){ background-color: var(--blue-light); }
.article:nth-child(4n+3){ background-color: var(--bronze); }
.article:nth-child(4n+4){ background-color: var(--slate); }
.article > *{ position: relative; z-index: 1; }
.article h3{ color: #FFFFFF; }
.article p{ color: rgba(255,255,255,.85); font-size: .95rem; }
.article ul{ list-style: none; margin: 14px 0 18px; padding: 0; }
.article li{ font-size: .88rem; color: rgba(255,255,255,.85); padding: 6px 0; border-top: 1px solid rgba(255,255,255,.2); }
.article li:first-child{ border-top: none; }
.article a.more{ font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; border-bottom: 1px solid var(--brass-light); padding-bottom: 2px; align-self: flex-start; }

/* ---------- why-us: image cards with overlay ---------- */
.facts{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px){ .facts{ grid-template-columns: repeat(2, 1fr); } }
.fact{
  position: relative; overflow: hidden; border-radius: 12px;
  min-height: 190px; padding: 22px 20px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background-size: cover; background-position: center;
}
.fact::before{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,24,38,0) 30%, rgba(14,24,38,.85) 100%);
}
.fact:nth-child(4n+1){ background-color: var(--ink); }
.fact:nth-child(4n+2){ background-color: var(--blue-light); }
.fact:nth-child(4n+3){ background-color: var(--bronze); }
.fact:nth-child(4n+4){ background-color: var(--slate); }
.fact > *{ position: relative; z-index: 1; }
.fact h3{ font-family: var(--font-body); font-size: .95rem; font-weight: 600; margin-bottom: 6px; color: #FFFFFF; }
.fact p{ font-size: .86rem; color: rgba(255,255,255,.85); margin: 0; }

/* ---------- insights / gazette list ---------- */
.gazette{ border-top: 1px solid var(--parchment-line); }
.gazette-item{ display: flex; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--parchment-line); align-items: baseline; flex-wrap: wrap; }
.gazette-item .tag{ font-family: var(--font-mono); font-size: .72rem; color: var(--brass); letter-spacing: .05em; text-transform: uppercase; width: 110px; flex-shrink: 0; }
.gazette-item .headline{ font-family: var(--font-display); font-size: 1.05rem; flex: 1; min-width: 220px; }
.gazette-item .date{ font-family: var(--font-mono); font-size: .74rem; color: var(--slate-light); }

/* ---------- team teaser ---------- */
.team-split{ display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.team-split .copy{ max-width: 44ch; }

/* ---------- cta band ---------- */
.cta-band{ text-align: left; }
.cta-band .wrap{ display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.cta-band h2{ margin-bottom: 6px; }

/* ---------- cards (generic parchment card on ink) ---------- */
.card{ background: var(--white); color: var(--ink); padding: 28px; border: 1px solid var(--parchment-line); }

/* ---------- footer ---------- */
footer.site{ background: var(--ink); color: rgba(243,238,223,.7); padding: 56px 0 30px; }
footer.site .grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid var(--ink-line); }
@media (max-width: 760px){ footer.site .grid{ grid-template-columns: 1fr; } }
footer.site h4{ font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-light); margin: 0 0 14px; }
footer.site .office{ font-size: .88rem; margin-bottom: 12px; line-height: 1.55; }
footer.site .office .city{ color: var(--white); font-weight: 500; }
footer.site a{ text-decoration: none; color: inherit; }
footer.site ul{ list-style: none; margin: 0; padding: 0; }
footer.site li{ margin-bottom: 10px; font-size: .88rem; }
footer.site .bottom{ display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; font-family: var(--font-mono); font-size: .72rem; color: rgba(243,238,223,.45); }

/* ---------- generic page hero (subpages) ---------- */
.page-hero{ padding: 76px 0 60px; background: var(--parchment); }
.page-hero .eyebrow{ margin-bottom: 14px; display: block; }
.page-hero h1{ color: var(--blue); }
.page-hero .lede{ color: var(--slate); }
.page-hero .btn-ghost{ border-color: var(--parchment-line); color: var(--ink); }
.page-hero .btn-ghost:hover{ background: var(--white); }

/* ---------- form ---------- */
form.contact{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 720px; }
form.contact .full{ grid-column: 1 / -1; }
@media (max-width: 640px){ form.contact{ grid-template-columns: 1fr; } }
form.contact label{ display: block; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); margin-bottom: 8px; }
form.contact input, form.contact select, form.contact textarea{
  width: 100%; font-family: var(--font-body); font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--parchment-line); border-radius: var(--radius);
  padding: 11px 13px;
}
form.contact input:focus, form.contact select:focus, form.contact textarea:focus{
  outline: 2px solid var(--brass); outline-offset: 1px; border-color: var(--brass);
}
form.contact textarea{ min-height: 130px; resize: vertical; }
.form-note{ font-size: .8rem; color: var(--slate-light); margin-top: 14px; }

/* ---------- offices list on contact page ---------- */
.offices{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--parchment-line); border: 1px solid var(--parchment-line); margin-top: 20px; }
@media (max-width: 760px){ .offices{ grid-template-columns: 1fr; } }
.office-card{ background: var(--parchment); padding: 26px; }
.office-card .city{ font-family: var(--font-display); font-size: 1.15rem; margin-bottom: 10px; }
.office-card p{ font-size: .88rem; color: var(--slate); margin: 0 0 4px; }

/* ---------- simple legal stub page ---------- */
.legal-body{ max-width: 68ch; }
.legal-body h2{ margin-top: 1.4em; }
.legal-body p{ color: var(--slate); }
.legal-notice{ background: var(--white); border: 1px solid var(--parchment-line); padding: 20px 24px; font-size: .9rem; color: var(--slate); margin-bottom: 40px; }

/* ===================================================================
   Estensioni: brand HIVE, selettore lingua, accordion FAQ, globo
   =================================================================== */

/* ---------- brand mark (logo only in header, no wordmark) ---------- */
.mark img{ display:block; height:46px; width:auto; }

/* ---------- language switcher ---------- */
details.lang-switch{ position: relative; }
details.lang-switch summary{
  list-style: none; cursor: pointer;
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate); display: flex; align-items: center; gap: 6px;
}
details.lang-switch summary::-webkit-details-marker{ display:none; }
details.lang-switch summary .chev{ font-size: .6rem; }
details.lang-switch[open] summary{ color: var(--brass); }
.lang-menu{
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 60;
  background: var(--white); border: 1px solid var(--parchment-line);
  min-width: 190px; padding: 6px 0; box-shadow: 0 8px 24px rgba(20,20,10,.08);
}
.lang-menu a{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 16px; font-family: var(--font-body); font-size: .86rem;
  text-decoration: none; color: var(--ink);
}
.lang-menu a:hover{ background: var(--parchment); }
.lang-menu a[aria-current="true"]{ color: var(--brass); }
.lang-menu a.soon{ color: var(--slate-light); opacity: .6; pointer-events: none; }
.lang-menu .tag{
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--parchment-line); padding: 1px 6px; border-radius: 2px;
}
@media (max-width: 860px){
  details.lang-switch{ order: 1; }
  .lang-menu{ right: auto; left: 0; }
}

/* ---------- FAQ accordion ---------- */
.faq-list{ border-top: 1px solid var(--parchment-line); max-width: 78ch; }
.faq-item{ border-bottom: 1px solid var(--parchment-line); }
.faq-item summary{
  list-style: none; cursor: pointer; padding: 22px 4px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .plus{ font-family: var(--font-mono); color: var(--brass); font-size: 1.2rem; flex-shrink:0; transition: transform .15s ease; }
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .answer{ padding: 0 4px 24px; max-width: 64ch; color: var(--slate); font-size: .95rem; line-height: 1.65; }
.faq-item .answer .note{ display:block; margin-top:8px; font-size:.82rem; color: var(--slate-light); }

/* ---------- globe illustration ---------- */
.globe-wrap{ display:flex; justify-content:center; padding: 10px 0 30px; }
.globe{ width: min(420px, 90%); height: auto; }
.globe .rim{ fill:none; stroke: var(--brass); stroke-width: 1; opacity:.55; }
.globe .meridian{ fill:none; stroke: var(--brass); stroke-width: .75; opacity:.4; }
.globe .pin{ fill: var(--brass-light); }
.globe .pin-ring{ fill:none; stroke: var(--brass-light); stroke-width: 1; opacity:.5; }
.globe text{ font-family: var(--font-mono); font-size: 10px; fill: rgba(243,238,223,.8); }

/* ---------- region grid (correspondent network) ---------- */
.regions{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:1px; background:var(--parchment-line); border:1px solid var(--parchment-line); margin-top:20px; }
.region-card{ background:var(--parchment); padding:22px 24px; }
.region-card h3{ font-size:1rem; margin-bottom:6px; }
.region-card p{ font-size:.86rem; color:var(--slate); margin:0; }

/* ---------- hero background motif (reused across inner pages) ---------- */
.page-hero.motif{ position:relative; overflow:hidden; }
.page-hero.motif svg.bg{ position:absolute; inset:0; opacity:.14; pointer-events:none; }
.page-hero.motif .wrap{ position:relative; }

/* ---------- small helper ---------- */
.lede-sm{ max-width:50ch; color:rgba(243,238,223,.78); }

/* ---------- faq on dark section (home teaser) ---------- */
.on-ink .faq-list{ border-top-color: var(--ink-line); }
.on-ink .faq-item{ border-bottom-color: var(--ink-line); }
.on-ink .faq-item summary{ color: var(--white); }
.on-ink .faq-item .answer{ color: rgba(243,238,223,.78); }