/* =========================================================================
   THEME: LICCIARDELLO (licciardello.html)
   Loaded after base.css. Defines this page's palette/typography tokens,
   then styles the components unique to this profile (method "chain",
   service list rows, values strip, contact grid, cross-link card).
   ========================================================================= */

:root{
  --ink:#142430;
  --ink-soft:#516D79;
  --bg:#EEF4F3;
  --bg-card:#FFFFFF;
  --accent:#2F8F82;       /* teal */
  --accent-deep:#1F6E63;
  --amber:#F2A63D;
  --amber-deep:#D98A1E;
  --line:rgba(20,36,48,0.12);
  --focus-color:#F2A63D;

  --wrap-max:1140px;
  --section-pad:76px;
  --nav-bg:rgba(238,244,243,0.9);
  --btn-radius:0;
}

body{ font-family:'Inter', sans-serif; }
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:700; line-height:1.14; }
.eyebrow{ font-family:'Space Grotesk', sans-serif; font-weight:600; color:var(--accent-deep); }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--amber); display:inline-block; }

.brand{ font-family:'Space Grotesk'; }
.brand-mark{ width:10px; height:10px; background:var(--accent); flex:none; }

.btn{ font-family:'Space Grotesk'; font-weight:600; border-width:2px; }

/* ---------- Hero ---------- */
.hero{ padding:72px 0 0; }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch; }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy{ padding:24px 56px 64px 0; display:flex; flex-direction:column; justify-content:center; }
@media (max-width:900px){ .hero-copy{ padding:0 0 40px; } }
.hero h1{ font-size:clamp(2.1rem,4vw,3rem); margin-top:16px; }
.hero .role{ font-size:1.05rem; color:var(--ink-soft); font-weight:600; margin-top:10px; }
.hero p.lede{ margin-top:20px; font-size:1.05rem; color:var(--ink-soft); max-width:48ch; }
.hero-ctas{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

.hero-photo{ position:relative; aspect-ratio:4/5; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply; opacity:.96; }
.hero-photo::after{
  content:""; position:absolute; inset:0;
}
.hero-photo-tag{
  position:absolute; left:24px; bottom:24px; z-index:2;
  background:#fff; color:var(--ink); font-family:'Space Grotesk'; font-weight:700;
  font-size:.85rem; padding:.7em 1.1em; display:flex; align-items:center; gap:.5em;
}
.hero-photo-tag svg{ color:var(--accent-deep); }

/* ---------- Method chain (signature component) ---------- */
.method{ background:var(--bg-card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.chain{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
@media (max-width:900px){ .chain{ grid-template-columns:1fr; } }
.chain-step{ padding:28px 20px; border-right:1px solid var(--line); position:relative; }
.chain-step:last-child{ border-right:none; }
@media (max-width:900px){
  .chain-step{ border-right:none; border-bottom:1px solid var(--line); padding:24px 4px; }
  .chain-step:last-child{ border-bottom:none; }
}
.chain-num{ font-family:'Space Grotesk'; font-weight:700; color:var(--amber-deep); font-size:.8rem; letter-spacing:.05em; }
.chain-icon{
  width:44px; height:44px; background:var(--bg); display:flex; align-items:center; justify-content:center;
  margin:14px 0 16px; color:var(--accent-deep);
}
.chain-icon svg{ width:20px; height:20px; }
.chain-step h3{ font-size:1rem; margin-bottom:6px; }
.chain-step p{ color:var(--ink-soft); font-size:.88rem; }
@media (min-width:901px){
  .chain-step:not(:last-child)::after{
    content:"→"; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
    color:var(--amber); font-weight:700; z-index:2; background:var(--bg-card); width:22px; text-align:center;
  }
}

/* ---------- Services detail ---------- */
.service-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.service-row{ background:var(--bg-card); padding:28px 32px; display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start; }
@media (max-width:700px){ .service-row{ grid-template-columns:1fr; gap:10px; } }
.service-row h3{ font-size:1.05rem; display:flex; align-items:center; gap:.5em; }
.service-row h3 svg{ color:var(--accent-deep); width:1.1em; height:1.1em; }
.service-row p{ color:var(--ink-soft); font-size:.95rem; margin:0; }

/* ---------- Values strip ---------- */
.values{ background:var(--ink); color:#EEF4F3; }
.values .section-head h2{ color:#fff; }
.values .section-head p{ color:rgba(238,244,243,0.7); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.12); }
@media (max-width:800px){ .value-grid{ grid-template-columns:1fr; } }
.value-cell{ background:var(--ink); padding:28px; }
.value-cell .num{ font-family:'Space Grotesk'; color:var(--amber); font-weight:700; font-size:1.4rem; }
.value-cell h4{ font-family:'Space Grotesk'; font-size:1.02rem; color:#fff; margin:10px 0 6px; }
.value-cell p{ color:rgba(238,244,243,0.68); font-size:.92rem; margin:0; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-main, .contact-side{ background:var(--bg-card); padding:36px; }
.contact-main h2{ font-size:1.6rem; }
.contact-main p{ color:var(--ink-soft); margin-top:12px; max-width:44ch; }
.contact-links{ margin-top:24px; flex-direction:column; gap:10px; display:flex; }
.contact-links a:hover{ color:var(--accent-deep); }
.contact-side{ background:var(--bg); display:flex; flex-direction:column; justify-content:center; gap:10px; }
.contact-side .label{ font-family:'Space Grotesk'; font-weight:700; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); }
.contact-side p{ margin:0; color:var(--ink-soft); font-size:.92rem; }

.crosslink{ display:flex; align-items:center; gap:14px; margin-top:24px; padding:16px 20px; background:var(--bg); border:1px solid var(--line); }
.crosslink img{ width:44px; height:44px; object-fit:cover; flex:none; }
.crosslink .txt{ font-size:.88rem; color:var(--ink-soft); }
.crosslink a{ font-family:'Space Grotesk'; font-weight:700; color:var(--ink); text-decoration:none; }