/* ---------- tokens ---------- */
:root{
  --paper:#f7d6d6;        /* pale celadon, the page */
  --card:#fff7f7;         /* lifted surface */
  --ink:#18231D;          /* deep green-black, all text */
  --muted:#5F6E64;        /* secondary text */
  --rule:#fffbfb;         /* hairlines */
  --mark:#D6402C;         /* the correction pen. used sparingly */
  --display:"Fraunces",Georgia,serif;
  --body:"Karla",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --pad:clamp(1.25rem,5vw,4rem);
  --max:74rem;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:5.5rem}   /* keep the sticky header from covering anchored targets */
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
a{color:inherit}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:2px}
img{max-width:100%;display: inline-block; vertical-align: middle}

/* section label, set like a phonetic transcription */
.label{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  color:var(--muted);text-transform:lowercase;margin-bottom:2.5rem;
  display:flex;align-items:center;gap:1rem;
}
.label::after{content:"";flex:1;height:1px;background:var(--rule)}

h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3rem);
  line-height:1.1;letter-spacing:-.015em;font-variation-settings:"SOFT" 20;
  max-width:20ch;
}
section{padding-block:clamp(4rem,9vw,7.5rem)}

h4{
  font-family:var(--display);font-weight:200;
  font-size:1rem;
  line-height:1.1;letter-spacing:-.015em;font-variation-settings:"SOFT" 20;
  max-width:20ch;
  margin-top:2rem;          /* ← the space */
}
section{padding-block:clamp(4rem,9vw,7.5rem)}

/* ---------- nav ---------- */
header{position:sticky;top:0;z-index:10;background:rgb(252, 223, 223);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
.brand{font-family:var(--display);font-size:1.15rem;font-weight:500;text-decoration:none;letter-spacing:-.01em}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a:not(.btn){text-decoration:none;font-size:.95rem;color:var(--muted);transition:color .15s ease}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
@media(max-width:34rem){.nav-links{gap:1rem}.nav-links a:not(.btn){display:none}}

/* ---------- language switch (EN | IT) ---------- */
.lang-switch{display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden}
.lang-switch button{
  appearance:none;-webkit-appearance:none;border:0;background:transparent;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--muted);
  padding:.34rem .62rem;cursor:pointer;line-height:1;
  transition:background .15s ease,color .15s ease;
}
.lang-switch button + button{border-left:1px solid var(--ink)}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button[aria-pressed="true"]{background:var(--ink);color:var(--card)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:var(--body);font-weight:600;font-size:.9375rem;
  padding:.7rem 1.25rem;border-radius:999px;text-decoration:none;
  background:var(--ink);color:var(--card);border:1px solid var(--ink);
  transition:transform .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-1px);background:#0E1712}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:rgba(24,35,29,.06)}
.btn.big{padding:.9rem 1.6rem;font-size:1rem}

/* ---------- hero: the signature ---------- */
.hero{padding-top:clamp(3.5rem,8vw,7rem);padding-bottom:clamp(3.5rem,8vw,6rem)}
.eyebrow{font-family:var(--mono);font-size:.8125rem;color:var(--muted);margin-bottom:1.75rem}
/* brand wordmark + slogan lockup at the top of the hero */
.hero-brand{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.7rem,1.3rem + 1.8vw,2.5rem);
  letter-spacing:-.015em;line-height:1.05;color:var(--ink);
}
.hero-slogan{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);
  color:var(--mark);margin-top:.45rem;margin-bottom:1.9rem;
}
.thesis{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,1rem + 6.4vw,5.25rem);
  line-height:1.03;letter-spacing:-.03em;
  font-variation-settings:"SOFT" 30,"WONK" 1;
  max-width:16ch;text-wrap:balance;
}
/* a tracked change, the way it looks on a marked-up page */
.edit{white-space:normal}
.edit s{
  position:relative;text-decoration:none;color:var(--muted);
  font-variation-settings:"SOFT" 0,"WONK" 0;
}
.edit s::after{
  content:"";position:absolute;left:-.04em;right:-.04em;top:.56em;height:.055em;
  background:var(--mark);transform-origin:left;
  animation:strike .45s cubic-bezier(.65,0,.35,1) .95s backwards;
}
.edit ins{
  text-decoration:none;font-style:italic;
  box-shadow:inset 0 -.09em 0 var(--mark);
  animation:insert .5s cubic-bezier(.2,.7,.3,1) 1.3s backwards;
  display:inline-block;
}
@keyframes strike{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes insert{from{opacity:0;transform:translateY(.22em) rotate(-1.2deg)}to{opacity:1}}
.hero-sub{
  margin-top:2rem;max-width:44ch;font-size:clamp(1.05rem,1rem + .35vw,1.25rem);
  color:var(--muted);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.25rem}
.hero-note{margin-top:1.5rem;font-family:var(--mono);font-size:.75rem;color:var(--muted)}

/* ---------- lessons ---------- */
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin-top:1.5rem}
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:1.75rem 1.5rem;display:flex;flex-direction:column;
}
.card h3{font-family:var(--display);font-weight:500;font-size:1.4rem;letter-spacing:-.01em;line-height:1.2}
.card .who{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.6rem}
.card ul{list-style:none;margin:1.25rem 0 1.75rem;font-size:.9375rem;color:var(--muted)}
.card li{padding-left:1.1rem;position:relative;margin-bottom:.5rem}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:1px;background:var(--mark)}
.price{margin-top:auto;padding-top:1.25rem;border-top:1px solid var(--rule);font-family:var(--display);font-size:1.6rem;font-weight:500}
.price small{font-family:var(--body);font-size:.875rem;font-weight:400;color:var(--muted)}
.package{margin-top:1.5rem;font-size:.9375rem;color:var(--muted)}

/* ---------- home: "what i offer" teaser ---------- */
.offers{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-top:1.5rem}
.offer{
  display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:1.5rem;transition:transform .15s ease,border-color .15s ease;
}
.offer:hover{transform:translateY(-2px);border-color:var(--mark)}
.offer h3{font-family:var(--display);font-weight:500;font-size:1.3rem;letter-spacing:-.01em;line-height:1.2}
.offer p{color:var(--muted);font-size:.9375rem}
.offer .go{margin-top:.35rem;font-family:var(--mono);font-size:.72rem;color:var(--mark)}

/* ---------- how it works: a real sequence, so it gets numbers ---------- */
.steps{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:3rem}
.step .n{font-family:var(--mono);font-size:.75rem;color:var(--mark);display:block;margin-bottom:.9rem}
.step h3{font-family:var(--display);font-weight:500;font-size:1.25rem;margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.9375rem;max-width:32ch}

/* ---------- about ---------- */
.about{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr)}
@media(min-width:56rem){.about{grid-template-columns:20rem minmax(0,1fr);align-items:start}}
.portrait{border-radius:14px;border:1px solid var(--rule);aspect-ratio:4/5;object-fit:cover;width:100%;background:var(--card)}
.about p{margin-bottom:1.1rem;max-width:58ch}
.creds{list-style:none;margin-top:1.75rem;font-family:var(--mono);font-size:.78rem;color:var(--muted);display:grid;gap:.55rem}
.creds li{padding-left:1.2rem;position:relative}
.creds li::before{content:"—";position:absolute;left:0;color:var(--mark)}

/* ---------- quotes ---------- */
.quotes{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));margin-top:3rem}
blockquote{background:var(--card);border:1px solid var(--rule);border-radius:14px;padding:1.75rem 1.5rem}
blockquote p{font-family:var(--display);font-size:1.15rem;line-height:1.45;font-weight:400}
blockquote cite{display:block;margin-top:1.1rem;font-family:var(--mono);font-size:.72rem;font-style:normal;color:var(--muted)}

/* ---------- closing cta ---------- */
.close{background:var(--ink);color:var(--card);border-radius:18px;padding:clamp(2.5rem,6vw,4.5rem) var(--pad);text-align:center;margin-bottom:clamp(3rem,7vw,5rem)}
.close h2{color:var(--card);margin:0 auto 1.25rem;text-align:center;font-size:clamp(1.8rem,1.2rem + 2.4vw,2.75rem)}
.close p{color:#B9C6BC;max-width:38ch;margin:0 auto 2rem}
.close .btn{background:var(--card);color:var(--ink);border-color:var(--card)}
.close .btn:hover{background:#fff}

footer{border-top:1px solid var(--rule);padding-block:2rem;font-size:.875rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
footer a{text-decoration:none;box-shadow:inset 0 -1px 0 var(--rule)}
footer a:hover{box-shadow:inset 0 -1px 0 var(--mark)}

/* ---------- hero photo + centering ---------- */
.hero{overflow-x:clip}                 /* safety net so the rose accent never adds horizontal scroll */
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-photo{
  display:block;border-radius:16px;object-fit:cover;object-position:center top;
  box-shadow:
    0 0 0 4px var(--card),                /* white photo-mount ring */
    0 0 0 5px var(--rule),                /* fine outer hairline */
    0 16px 34px rgba(24,35,29,.16);       /* soft drop shadow */
}

/* portrait wrapper — shrink-wrapped to the photo so the roses can anchor to the photo's edges */
.hero-portrait{--photo:190px;position:relative;display:block;width:var(--photo);margin-top:1.5rem;margin-bottom:1.75rem}
.hero-portrait .hero-photo{width:var(--photo);height:auto;aspect-ratio:1179/2050}

/* rose flourishes — each anchored to a photo edge with a guaranteed gap, so they NEVER touch the face.
   Width fills the space between the photo and the viewport edge (capped), so the size and position both
   shift with the window and nothing bleeds off-screen. A mirrored copy sits on the left. */
.hero-decor{
  --rose-gap:clamp(.7rem,2.5vw,1.75rem);   /* leaves room for the photo's mount ring */
  position:absolute;top:50%;
  width:clamp(0px, calc(50vw - 129px), 230px);   /* fills the gap between the photo and the viewport edge (95px half-photo + gap slack), capped at 230px */
  max-width:none;                                /* override the global img max-width:100% (which is 100% of the 170px wrapper) */
  height:auto;pointer-events:none;user-select:none;
  filter:drop-shadow(0 8px 18px rgba(24,35,29,.12));
}
.hero-decor-right{left:100%;transform:translate(var(--rose-gap),-50%)}
.hero-decor-left{right:100%;transform:translate(calc(-1 * var(--rose-gap)),-50%) scaleX(-1)}
.hero-inner .thesis{max-width:18ch}
.hero-inner .hero-sub{margin-left:auto;margin-right:auto}
.hero-cta{justify-content:center}

/* ---------- about teaser button spacing ---------- */
.about .btn{margin-top:.5rem}

/* ---------- contact ---------- */
.contact{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;margin-top:3rem}
@media(min-width:52rem){.contact{grid-template-columns:1fr 1.1fr;align-items:start}}
.contact-intro h2{margin-bottom:1.25rem}
.contact-intro p{color:var(--muted);max-width:42ch;margin-bottom:1rem}
.contact-alt a{box-shadow:inset 0 -1px 0 var(--rule);text-decoration:none}
.contact-alt a:hover{box-shadow:inset 0 -1px 0 var(--mark)}
.contact-form{display:grid;gap:1.1rem;background:var(--card);border:1px solid var(--rule);border-radius:16px;padding:clamp(1.5rem,3vw,2rem)}
.contact-form label{display:grid;gap:.4rem}
.contact-form label span{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);text-transform:lowercase}
.contact-form input,.contact-form select,.contact-form textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:.7rem .85rem;width:100%;
}
.contact-form textarea{resize:vertical;min-height:6rem}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--mark);box-shadow:0 0 0 3px rgba(214,64,44,.14);
}
.contact-form button{margin-top:.4rem;justify-self:start;cursor:pointer}

/* ---------- about page ---------- */
.about-page{max-width:var(--max);margin:0 auto;padding-inline:var(--pad);padding-block:clamp(3rem,7vw,6rem)}
.about-page > section{padding-block:0}
.about-hero{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:center;grid-template-columns:1fr}
@media(min-width:48rem){.about-hero{grid-template-columns:16rem 1fr}}
.about-page .about-photo{width:auto;height:auto;max-width:16rem;max-height:22rem;border-radius:16px;object-fit:contain;border:1px solid var(--rule);background:var(--card)}
.about-hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,1.5rem + 3vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin:.4rem 0 1rem}
.about-hero .lede{font-size:clamp(1.1rem,1rem + .5vw,1.3rem);color:var(--muted);max-width:44ch}
.about-body{margin-top:clamp(2.5rem,6vw,4.5rem);max-width:62ch}
.about-body h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2rem);margin-top:2rem;margin-bottom:.75rem}
.about-body h2:first-of-type{margin-top:0}
.about-body p{color:var(--muted);margin-bottom:1.25rem}
.about-body .btn{margin-top:1rem}

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