/* Hoopla - shared styles for Work / Services / About (extends journal/blog.css) */

/* generic section rhythm */
.section{ padding:clamp(48px,7vw,96px) 0; border-bottom:1px solid var(--hair); }
.section:last-of-type{ border-bottom:0; }
.section__head{ max-width:760px; margin-bottom:clamp(32px,5vw,56px); }
.section__head .eyebrow{ margin-bottom:14px; }
.section__head h2{ font-family:"Clash Display",sans-serif; font-weight:600; letter-spacing:-.03em; line-height:1.02; color:var(--ink); font-size:clamp(30px,4.6vw,58px); }
.section__head p{ font-size:clamp(17px,1.9vw,21px); color:var(--body); margin-top:18px; max-width:62ch; }
.lead-in{ font-size:clamp(19px,2.3vw,26px); line-height:1.5; color:var(--ink); max-width:60ch; }

/* capability pillars (Services) */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.pillar{ background:var(--bg); padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; transition:background .3s; }
.pillar:hover{ background:var(--panel); }
.pillar__n{ font-family:var(--mono); letter-spacing:.16em; color:var(--red); font-size:15px; }
.pillar__t{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:clamp(22px,2.4vw,30px); color:var(--ink); letter-spacing:-.02em; line-height:1.08; margin:14px 0 12px; }
.pillar:hover .pillar__t{ color:var(--red-soft); }
.pillar p{ font-size:16px; line-height:1.65; color:var(--body); }
.pillar ul{ list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pillar li{ font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; font-size:13px; color:var(--meta); border:1px solid var(--hair); border-radius:999px; padding:5px 12px; }

/* process steps */
.steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,40px); counter-reset:step; }
.step{ border-top:2px solid var(--red); padding-top:20px; }
.step__n{ font-family:var(--mono); letter-spacing:.16em; color:var(--meta); font-size:14px; }
.step h3{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:clamp(20px,2.2vw,26px); color:var(--ink); letter-spacing:-.02em; margin:8px 0 10px; }
.step p{ font-size:15px; line-height:1.6; color:var(--body); }

/* work cases (outcome-led) */
.cases{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.case{ background:var(--bg); padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; min-height:300px; transition:background .3s; }
.case:hover{ background:var(--panel); }
.case__sector{ font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-size:14px; }
.case__metric{ font-family:"Clash Display",sans-serif; font-weight:700; color:var(--ink); font-size:clamp(40px,5vw,64px); letter-spacing:-.03em; line-height:.95; margin:18px 0 6px; }
.case__metric span{ color:var(--red); }
.case__t{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:clamp(19px,2vw,23px); color:var(--ink); letter-spacing:-.01em; margin:6px 0 10px; }
.case p{ font-size:15.5px; line-height:1.65; color:var(--body); }
.case__tags{ margin-top:auto; padding-top:20px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--meta); font-size:13px; }

/* stats band */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.stat{ background:var(--bg); padding:clamp(26px,3vw,40px) clamp(20px,2vw,28px); }
.stat__n{ font-family:"Clash Display",sans-serif; font-weight:700; color:var(--ink); font-size:clamp(34px,4.4vw,56px); letter-spacing:-.03em; line-height:1; }
.stat__n span{ color:var(--red); }
.stat__l{ font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--meta); font-size:14px; margin-top:12px; }

/* values */
.values{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(24px,3vw,44px); }
.value h3{ font-family:"Clash Display",sans-serif; font-weight:600; font-size:clamp(20px,2.2vw,26px); color:var(--ink); letter-spacing:-.02em; margin-bottom:10px; }
.value h3 .mark{ color:var(--red); }
.value p{ font-size:16px; line-height:1.65; color:var(--body); }

/* clients strip */
.clients{ display:flex; flex-wrap:wrap; gap:14px 14px; }
.clients span{ font-family:"Clash Display",sans-serif; font-weight:500; font-size:clamp(16px,1.8vw,21px); color:var(--ink); border:1px solid var(--hair); border-radius:999px; padding:10px 22px; }

/* client logo wall - logos rendered uniform white via filter (any source colour works on transparent bg) */
.logos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.logos__item{ background:var(--bg); display:flex; align-items:center; justify-content:center; padding:clamp(26px,3vw,40px) 24px; min-height:112px; transition:background .3s; }
.logos__item:hover{ background:var(--panel); }
.logos img{ max-height:40px; max-width:150px; width:auto; height:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.65; transition:opacity .3s; }
.logos__item:hover img{ opacity:1; }

/* leadership / founder note */
.lead-note{ max-width:760px; }
.lead-note p{ font-size:clamp(17px,1.6vw,20px); line-height:1.7; color:var(--body); margin-bottom:20px; }
.lead-note p strong{ color:var(--ink); font-weight:600; }
.sign{ font-family:"Clash Display",sans-serif; font-weight:600; color:var(--ink); font-size:clamp(18px,2vw,22px); margin-top:8px; }
.sign span{ display:block; font-family:var(--mono); font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:14px; color:var(--meta); margin-top:4px; }

/* contact / address block */
.addr{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(20px,3vw,40px); }
.addr h3{ font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--meta); font-size:14px; margin-bottom:12px; }
.addr p{ font-size:16px; line-height:1.6; color:var(--ink); }
.addr a{ color:var(--red-soft); border-bottom:1px solid #ff5a6355; }
.addr a:hover{ color:#fff; border-color:#fff; }

@media (max-width:760px){ .case{ min-height:auto; } }