/* ============================================================
   Piucco Holding – site styles
   Fonts self-hosted (GDPR). Design tokens & layout per brand handoff.
   ============================================================ */

/* --- Self-hosted fonts (Playfair Display, Archivo) --- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/archivo-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/archivo-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/playfair-display-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-display-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/playfair-display-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfair-display-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/playfair-display-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfair-display-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfair-display-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* --- Design system --- */
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  :root{
    --c-navy:#14233F;
    --c-midnight:#0B1730;
    --c-platinum:#9AA1AC;
    --c-holding:#6B727C;
    --c-ink:#141414;
    --c-ivory:#F5F2EA;
    --c-line:rgba(20,35,63,.14);
    --ff-serif:'Playfair Display', Georgia, serif;
    --ff-sans:'Archivo','Helvetica Neue', Arial, sans-serif;
  }
  html,body{ background:var(--c-ivory); }
  body{ font-family:var(--ff-sans); color:var(--c-ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  section[id]{ scroll-margin-top:84px; }
  a{ color:inherit; }
  .wrap{ max-width:1180px; margin:0 auto; }

  /* Header */
  .site-header{ position:sticky; top:0; z-index:50; background:rgba(245,242,234,.86); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--c-line); }
  .nav{ max-width:1180px; margin:0 auto; padding:18px 40px; display:flex; align-items:center; justify-content:space-between; }
  .brand{ text-decoration:none; display:flex; align-items:center; gap:15px; }
  .brand .mono{ display:flex; align-items:flex-end; font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:37px; line-height:.78; }
  .brand .mono .p{ letter-spacing:-0.1em; }
  .brand .rule{ width:1px; height:37px; background:var(--c-line); }
  .brand .word{ font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:18px; letter-spacing:.1em; margin-right:-.1em; }
  .brand .sub{ display:flex; justify-content:space-between; margin-top:3px; font-family:var(--ff-sans); font-weight:500; color:var(--c-holding); font-size:7px; text-transform:uppercase; }
  .nav-right{ display:flex; align-items:center; gap:38px; }
  .nav-link{ text-decoration:none; font-family:var(--ff-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-holding); transition:color .18s ease; }
  .nav-link:hover{ color:var(--c-navy); }
  .nav-cta{ text-decoration:none; font-family:var(--ff-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-navy); border:1px solid var(--c-line); border-radius:999px; padding:10px 22px; transition:background .18s ease,color .18s ease; }
  .nav-cta:hover{ background:var(--c-navy); color:var(--c-ivory); }

  /* Section primitives */
  .section{ padding:128px 40px; }
  .eyebrow{ font-family:var(--ff-sans); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--c-platinum); font-weight:600; margin-bottom:20px; }
  .h2{ font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:42px; line-height:1.14; }
  .lead{ font-family:var(--ff-serif); font-size:24px; line-height:1.5; color:var(--c-navy); }
  .body{ font-family:var(--ff-sans); font-size:16px; line-height:1.85; color:var(--c-ink); }

  /* Buttons */
  .btn-fill{ text-decoration:none; font-family:var(--ff-sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-ivory); background:var(--c-navy); border-radius:999px; padding:15px 32px; transition:background .18s ease; }
  .btn-fill:hover{ background:var(--c-midnight); }
  .btn-outline{ text-decoration:none; font-family:var(--ff-sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-navy); border:1px solid var(--c-navy); border-radius:999px; padding:15px 32px; transition:background .18s ease,color .18s ease; }
  .btn-outline:hover{ background:var(--c-navy); color:var(--c-ivory); }

  /* Hero */
  #hero{ position:relative; padding:170px 40px 150px; overflow:hidden; }
  .hero-ghost{ position:absolute; top:50%; right:-60px; transform:translateY(-50%); font-family:var(--ff-serif); font-weight:500; font-size:560px; line-height:1; color:var(--c-navy); opacity:.04; pointer-events:none; user-select:none; }
  .hero-eyebrow{ font-family:var(--ff-sans); font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:var(--c-platinum); font-weight:600; margin-bottom:40px; }
  .hero-h1{ font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:76px; line-height:1.08; letter-spacing:.005em; max-width:920px; }
  .hero-p{ font-family:var(--ff-sans); font-size:19px; line-height:1.7; color:var(--c-ink); max-width:640px; margin-top:36px; }
  .hero-actions{ display:flex; gap:18px; margin-top:48px; }

  /* Focus (dark) */
  #focus{ background:var(--c-midnight); color:var(--c-ivory); }
  #focus .h2{ color:var(--c-ivory); max-width:720px; margin-bottom:64px; }
  .focus-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .focus-card{ border:1px solid rgba(245,242,234,.18); border-radius:6px; padding:48px; }
  .focus-card .kicker{ font-family:var(--ff-sans); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-platinum); margin-bottom:28px; }
  .focus-card h3{ font-family:var(--ff-serif); font-weight:500; color:var(--c-ivory); font-size:30px; line-height:1.2; margin-bottom:20px; }
  .focus-card p{ font-family:var(--ff-sans); font-size:15px; line-height:1.85; color:rgba(245,242,234,.78); }
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(245,242,234,.14); border:1px solid rgba(245,242,234,.14); border-radius:6px; overflow:hidden; margin-top:28px; }
  .service-grid .cell{ background:var(--c-midnight); padding:30px 28px; font-family:var(--ff-sans); font-size:13px; color:var(--c-ivory); letter-spacing:.02em; }

  /* Founder */
  #founder{ border-top:1px solid var(--c-line); }
  .founder-grid{ display:grid; grid-template-columns:340px 1fr; gap:88px; align-items:start; }
  .founder-portrait{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 18%; display:block; border-radius:6px; }
  .founder-caption{ font-family:var(--ff-sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-platinum); margin-top:20px; line-height:1.95; }
  #founder .lead{ margin-bottom:32px; }
  #founder .body{ margin-bottom:18px; }

  /* Approach (white) */
  #approach{ background:#FFFFFF; border-top:1px solid var(--c-line); }
  #approach .h2{ max-width:680px; margin-bottom:64px; }
  .approach-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:56px; }
  .approach-num{ font-family:var(--ff-serif); font-size:22px; color:var(--c-platinum); }
  .approach-line{ height:1px; background:var(--c-line); margin:18px 0 22px; }
  .approach-grid h3{ font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:23px; margin-bottom:14px; }
  .approach-grid p{ font-family:var(--ff-sans); font-size:15px; line-height:1.8; color:var(--c-ink); }

  /* Portfolio (dark) – platinum monochrome logo wall */
  #portfolio{ background:var(--c-midnight); color:var(--c-ivory); }
  #portfolio .h2{ color:var(--c-ivory); }
  .portfolio-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(245,242,234,.18); border:1px solid rgba(245,242,234,.18); border-radius:6px; overflow:hidden; margin-top:48px; }
  .portfolio-cell{ background:var(--c-midnight); padding:36px 22px; min-height:132px; display:flex; align-items:center; justify-content:center; }
  .portfolio-logo{ display:block; width:100%; max-height:60px; object-fit:contain; opacity:.85; transition:opacity .25s ease, filter .25s ease; }
  .portfolio-cell:hover .portfolio-logo{ opacity:1; filter:brightness(1.45); }
  .portfolio-note{ margin-top:22px; font-family:var(--ff-sans); font-size:12px; letter-spacing:.04em; color:var(--c-platinum); }

  /* Contact */
  #contact{ border-top:1px solid var(--c-line); }
  .contact-grid{ display:grid; grid-template-columns:320px 1fr; gap:88px; align-items:start; }
  .contact-lead{ font-family:var(--ff-serif); font-size:25px; line-height:1.5; color:var(--c-navy); max-width:620px; margin-bottom:48px; }
  .contact-card{ position:relative; border:1px solid var(--c-line); border-radius:6px; padding:30px 32px; background:#fff; max-width:360px; transition:border-color .18s ease; }
  .contact-card:hover{ border-color:var(--c-navy); }
  .contact-card-main{ display:block; text-decoration:none; color:inherit; }
  .contact-card .role{ font-family:var(--ff-sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-platinum); margin-bottom:12px; }
  .contact-card .name{ font-family:var(--ff-serif); font-size:20px; color:var(--c-navy); margin-bottom:4px; }
  .contact-card .mail{ font-family:var(--ff-sans); font-size:14px; color:var(--c-ink); }
  .contact-linkedin{ position:absolute; top:24px; right:26px; display:flex; color:var(--c-platinum); transition:color .18s ease; }
  .contact-linkedin:hover{ color:var(--c-navy); }

  /* Footer */
  .site-footer{ background:var(--c-midnight); padding:96px 40px 56px; }
  .footer-top{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px; padding-bottom:48px; border-bottom:1px solid rgba(245,242,234,.14); }
  .footer-mark{ display:flex; flex-direction:column; align-items:flex-start; }
  .footer-mark .word{ font-family:var(--ff-serif); font-weight:500; color:var(--c-ivory); font-size:34px; letter-spacing:.14em; text-indent:.14em; line-height:1; }
  .footer-mark .rule{ width:148px; height:1px; background:#FFFFFF; opacity:.6; margin:12px 0; }
  .footer-mark .sub{ font-family:var(--ff-sans); font-weight:500; color:#FFFFFF; font-size:10px; letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; }
  .footer-nav{ display:flex; gap:38px; }
  .foot-link{ text-decoration:none; font-family:var(--ff-sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--c-platinum); transition:color .18s ease; }
  .foot-link:hover{ color:var(--c-ivory); }
  .footer-legal{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:32px; font-family:var(--ff-sans); font-size:12px; letter-spacing:.06em; color:rgba(154,161,172,.7); }
  .footer-legal a{ text-decoration:none; color:inherit; transition:color .18s ease; }
  .footer-legal a:hover{ color:var(--c-ivory); }

  /* Mobile nav: hamburger + full-screen overlay */
  .hamburger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:42px; padding:9px; background:none; border:0; cursor:pointer; }
  .hamburger span{ display:block; width:24px; height:2px; background:var(--c-navy); border-radius:2px; }
  .mobile-overlay{ position:fixed; inset:0; z-index:60; background:var(--c-ivory); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; opacity:0; pointer-events:none; transition:opacity .28s ease; }
  .mobile-overlay.open{ opacity:1; pointer-events:auto; }
  .mobile-overlay a{ font-family:var(--ff-serif); font-size:30px; color:var(--c-navy); text-decoration:none; letter-spacing:.04em; }
  .mobile-overlay a:hover{ opacity:.55; }
  .mobile-overlay .close{ position:absolute; top:22px; right:26px; background:none; border:0; cursor:pointer; font-family:var(--ff-sans); font-size:32px; line-height:1; color:var(--c-navy); }

  /* Responsive */
  @media (max-width:860px){
    .nav{ padding:16px 22px; }
    .nav-right{ display:none; }
    .hamburger{ display:flex; }
    #hero{ padding:120px 22px 84px; }
    .hero-h1{ font-size:42px; max-width:none; }
    .hero-p{ font-size:17px; }
    .hero-ghost{ font-size:300px; right:-80px; }
    .section{ padding:80px 22px; }
    .h2{ font-size:32px; }
    .focus-grid{ grid-template-columns:1fr; }
    .focus-card{ padding:34px; }
    .service-grid{ grid-template-columns:1fr 1fr; }
    .founder-grid{ grid-template-columns:1fr; gap:36px; }
    .founder-grid > div:first-child{ max-width:280px; }
    .approach-grid{ grid-template-columns:1fr; gap:40px; }
    .contact-grid{ grid-template-columns:1fr; gap:28px; }
    .portfolio-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; background:none; border:0; border-radius:0; overflow:visible; }
    .portfolio-cell{ flex:0 0 calc(50% - 6px); border:1px solid rgba(245,242,234,.18); border-radius:6px; }
    .footer-top{ flex-direction:column; align-items:flex-start; gap:30px; }
    .footer-nav{ display:grid; grid-template-columns:auto auto; justify-content:start; gap:18px 40px; }
    .footer-legal{ flex-direction:column; gap:10px; }
  }
  @media (max-width:480px){
    .hero-h1{ font-size:33px; }
    .service-grid{ grid-template-columns:1fr; }
  }

/* --- Legal/content pages (Imprint, Privacy) --- */
.legal{ padding:150px 40px 110px; }
.legal .wrap{ max-width:820px; }
.legal h1{ font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:46px; line-height:1.12; margin-bottom:14px; }
.legal .updated{ font-family:var(--ff-sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--c-platinum); font-weight:600; margin-bottom:48px; }
.legal h2{ font-family:var(--ff-serif); font-weight:500; color:var(--c-navy); font-size:25px; margin:44px 0 14px; }
.legal p, .legal li{ font-family:var(--ff-sans); font-size:16px; line-height:1.85; color:var(--c-ink); }
.legal p{ margin-bottom:14px; }
.legal ul{ margin:0 0 14px 22px; }
.legal a{ color:var(--c-navy); text-decoration:underline; text-underline-offset:3px; }
.legal .placeholder{ background:rgba(20,35,63,.06); border-radius:3px; padding:0 5px; color:var(--c-navy); font-weight:500; }
.legal .back{ display:inline-block; margin-top:48px; font-family:var(--ff-sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-navy); text-decoration:none; border:1px solid var(--c-navy); border-radius:999px; padding:13px 28px; transition:background .18s ease,color .18s ease; }
.legal .back:hover{ background:var(--c-navy); color:var(--c-ivory); }
@media (max-width:860px){ .legal{ padding:120px 22px 80px; } .legal h1{ font-size:34px; } }