/*!
 * Piero Salardi® · Home · home.css
 * The Home page on the site shell (no Elementor).
 *
 * Grid: 12 columns, 32px margins (24px on phones), 24px gutters.
 * Type: TT Firs Neue (display), Galano Grot (text), Romie (motto).
 * Colors: charcoal #16181D, cream #F8F3ED, ink #121212, blue #0422B6 / hover #0161FF.
 *
 *   1. Tokens and base
 *   2. Shared pieces: grid, kicker, display title, rule, buttons, pictures
 *   3. Hero
 *   4. Intro
 *   5. Services
 *   6. Selected projects
 *   7. Goal
 *   8. Tablet and phone
 */

/* ===================================================================== *
 * 1. Tokens and base
 * ===================================================================== */
@font-face{font-family:"TT Firs Neue Reg";src:url(/wp-content/uploads/2026/09/TT_Firs_Neue_Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

.hm{
  --cream:#F8F3ED;
  --char:#16181D;
  --ink:#121212;
  --line:rgba(18,18,18,.28);
  --blue:#0422B6;
  --blue-hover:#0161FF;
  --m:32px;            /* page margin */
  --g:24px;            /* gutter */
  display:block;
  background:var(--cream);
  color:var(--ink);
  font:400 16px/1.5 "Galano Grot Reg",sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* resets carry no weight (:where), so every class below wins without !important */
:where(.hm) *,:where(.hm) *::before,:where(.hm) *::after{box-sizing:border-box}
:where(.hm) :where(p,h1,h2,h3,ol,figure){margin:0;padding:0}
:where(.hm) ol{list-style:none}
:where(.hm) img{display:block;max-width:none}

/* ===================================================================== *
 * 2. Shared pieces
 * ===================================================================== */
.hm-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:0 var(--m)}

/* small bold label above a block: "Services —", "My goal —" */
.hm-k{font:400 15px/21px "Galano Grot Bold",sans-serif;color:var(--char);letter-spacing:normal}

/* display titles: "Selected projects", "Support, translate & implement ideas." */
.hm-display{font:400 54px/54px "TT Firs Neue Bold",sans-serif;letter-spacing:-1.8px;color:var(--char)}

/* the short line under a block */
.hm-rule{display:block;width:35px;height:1px;background:var(--char)}

/* buttons: 52px pills, the site's blue */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 28px;border-radius:999px;font:400 15px/1 "Galano Grot Bold",sans-serif;text-decoration:none;white-space:nowrap;transition:background-color .3s ease,color .3s ease}
.hm-btn.is-primary{background-color:var(--blue);color:#FBFBFB}
.hm-btn.is-primary:hover{background-color:var(--blue-hover)}
.hm-btn.is-secondary{background-color:#FBFBFB;color:var(--blue)}
.hm-btn.is-secondary:hover{color:var(--blue-hover)}
.hm-btn:focus-visible{outline:2px solid var(--blue-hover);outline-offset:4px}

/* pictures: framed, filled, and zoomed slowly by ps-motion while on screen */
.hm-art{position:relative;overflow:hidden;background:#E9E3DA}
.hm-art img{width:100%;height:100%;object-fit:cover}

/* ===================================================================== *
 * 3. Hero (the hero script builds the title, the video and the ripple inside)
 * ===================================================================== */
.hm-hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--char);color:var(--cream)}
.hm-hero-in{position:relative;height:100%}
/* the plain title stays for readers and search engines; the hero script draws its own */
.hm-hero-tag,.hm-hero-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================================================================== *
 * 4. Intro: the big sentence lights up word by word as you scroll
 * ===================================================================== */
.hm-intro{position:relative;min-height:100vh;padding:120px 0 72px;overflow:hidden}
.hm-intro .hm-grid{position:relative}
.hm-intro-t{grid-column:7/span 5;grid-row:1;font:400 clamp(36px,4.6vw,80px)/1.04 "TT Firs Neue Reg",sans-serif;letter-spacing:-.03em;color:var(--ink)}
.hm-intro .hm-rule{grid-column:7/span 1;grid-row:2;align-self:start;width:27px;margin-top:32px}
.hm-read{color:rgba(22,24,29,var(--a,.16))}
/* two pictures, overlapping, the first one running off the left edge */
.hm-intro-art{grid-column:1/span 6;grid-row:1/span 2;position:relative;height:48.4vw;max-height:calc(100vh - 192px)}
.hm-art-a{position:absolute;left:calc(-5.9vw - var(--m));top:0;width:46.9vw;aspect-ratio:676/456}
.hm-art-b{position:absolute;left:calc(26.5vw - var(--m));top:25vw;width:22.6vw;aspect-ratio:326/336}

/* ===================================================================== *
 * 5. Services
 * ===================================================================== */
.hm-services{padding:120px 0 144px}
.hm-services .hm-grid{grid-template-rows:auto 1fr}
.hm-services-lead{grid-column:1/span 5;grid-row:1}
.hm-lead{margin-top:12px;font:400 28px/32px "TT Firs Neue Bold",sans-serif;letter-spacing:-.56px;color:var(--char)}
.hm-services-go{grid-column:1/span 5;grid-row:2;align-self:start;margin-top:32px}
.hm-services-go .hm-btn{min-width:180px}
.hm-list{grid-column:7/span 6;grid-row:1/span 2;border-top:1px solid var(--line)}
.hm-list-r{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;padding:30px 0 34px;border-bottom:1px solid var(--line)}
.hm-list-r small{grid-row:1;font:400 12px/32px "Galano Grot Reg",sans-serif;letter-spacing:.04em}
.hm-list-r h3{grid-column:2;margin:0 0 10px;font:400 28px/32px "TT Firs Neue Reg",sans-serif;letter-spacing:-.56px;color:var(--ink);transition:color .3s ease}
.hm-list-r p{grid-column:2;font:400 18px/31.5px "Galano Grot Reg",sans-serif}

/* ===================================================================== *
 * 6. Selected projects (the deck itself comes from the Home layer)
 * ===================================================================== */
.hm-projects{position:relative}
.hm-projects-head{position:relative;z-index:3;padding:96px var(--m) 0;pointer-events:none}
.hm-projects-head .hm-display{max-width:676px}
.hm-trust{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding:40px var(--m) 64px;color:var(--char)}
.hm-trust small{font:400 10px/1 "Galano Grot Reg",sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.hm-trust span{font:400 clamp(20px,2vw,28px)/1.2 "TT Firs Neue Bold",sans-serif;letter-spacing:-.01em}

/* ===================================================================== *
 * 7. Goal
 * ===================================================================== */
.hm-goal{padding:120px 0}
.hm-goal-text{grid-column:1/span 4;grid-row:1}
.hm-goal-text .hm-display{margin-top:7px}
.hm-goal-text .hm-rule{margin-top:80px}
.hm-name{margin-top:33px;font:400 28px/32px "TT Firs Neue Bold",sans-serif;letter-spacing:-.56px;color:var(--char)}
.hm-motto{margin-top:12px;font:400 15px/28px "Romie",serif;letter-spacing:.3px;text-transform:uppercase;color:var(--char)}
.hm-btns{display:flex;flex-wrap:wrap;gap:24px;margin-top:68px}
.hm-btns .hm-btn{min-width:209px}
.hm-goal-art{grid-column:5/span 8;grid-row:1;position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--g)}
.hm-art-c{grid-column:1/span 4;grid-row:1;aspect-ratio:443/336}
.hm-art-d{grid-column:2/span 7;grid-row:1;margin-top:120px;aspect-ratio:793/456}

/* ===================================================================== *
 * 8. Tablet and phone
 * ===================================================================== */
@media (max-width:1024px){
  .hm-intro{min-height:0}
  .hm-intro-t{grid-column:1/-1}
  .hm-intro .hm-rule{grid-column:1/-1}
  .hm-intro-art{grid-column:1/-1;grid-row:3;height:auto;max-height:none;margin:96px calc(-1 * var(--m)) 0}
  .hm-art-a,.hm-art-b{position:relative;left:auto;top:auto;width:100%}
  .hm-art-a{aspect-ratio:390/360}
  .hm-art-b{aspect-ratio:390/439;margin-top:-64px}
  .hm-services-lead,.hm-services-go{grid-column:1/-1}
  .hm-list{grid-column:1/-1;grid-row:2;margin-top:48px}
  .hm-services-go{grid-row:3;margin-top:24px}
  .hm-goal-art{grid-column:1/-1;display:block;margin:0 calc(-1 * var(--m))}
  .hm-art-c{aspect-ratio:390/288}
  .hm-art-d{margin-top:-120px;aspect-ratio:390/500}
  .hm-goal-text{grid-column:1/-1;grid-row:2;margin-top:64px}
}
@media (max-width:767px){
  .hm{--m:24px;--g:16px}
  .hm-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .hm-intro{padding:104px 0 32px}
  .hm-intro-t{font-size:10.8vw}
  .hm-display{font-size:45px;line-height:47px;letter-spacing:-2.5px}
  .hm-lead{letter-spacing:-.56px}
  .hm-list-r{grid-template-columns:44px minmax(0,1fr);column-gap:12px;padding:26px 0 30px}
  .hm-services{padding:86px 0 96px}
  .hm-goal{padding:32px 0 96px}
  .hm-btns{gap:16px}
  .hm-btns .hm-btn{min-width:0;flex:1 1 0}
}