/* =========================================================================
   Solid Holdings Group — front page
   Built to Solid Holdings Group Brand Guidelines v1.0.
   Unbounded for display, DM Sans for text, monochrome throughout.
   Colour belongs to the portfolio, never to the group.
   ========================================================================= */

@font-face{
  font-family:"Unbounded";
  font-style:normal; font-weight:200 900; font-display:swap;
  src:url("fonts/unbounded.woff2") format("woff2-variations");
}
@font-face{
  font-family:"DM Sans";
  font-style:normal; font-weight:100 1000; font-display:swap;
  src:url("fonts/dmsans.woff2") format("woff2-variations");
}

:root{
  /* the observed group ramp, monochrome by design */
  --bone:#F0F0F1;
  --white:#FFFFFF;
  --ink:#000000;
  --panel:#1A1A1A;
  --grey:#4D4D4D;
  --grey-soft:#AAAAAA;
  --rule:#C6C6C8;
  --rule-soft:#E2E2E4;
  --on-panel:#FFFFFF;
  --on-panel-soft:#AAAAAA;

  --display:"Unbounded","Helvetica Neue",Arial,sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;

  --xs:8px; --sm:16px; --md:28px; --lg:56px; --xl:112px;
  --container:1328px;
  --gutter:56px;
  --edge:max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}

/* --- reset at zero specificity so component rules always win -------------- */
:where(html){-webkit-text-size-adjust:100%}
:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol){margin:0;padding:0}
:where(ul,ol){list-style:none}
:where(img,svg){display:block;max-width:100%;height:auto}
:where(a){color:inherit;text-decoration:none}
:where(button){font:inherit;color:inherit;background:none;border:0}
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body.shg{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.shg a:focus-visible,.shg button:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

.shg-skip{position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:var(--white); padding:12px 20px}
.shg-skip:focus{left:var(--gutter); top:12px}

.shg-wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

/* Display is Unbounded and always uppercase. Brand names are the exception:
   they keep the casing their own guidelines set, so THiRD stays THiRD. */
.shg-display{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:-.015em; line-height:1;
}
.shg-label{
  font-family:var(--body); font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin:0;
}

/* ================================ masthead =============================== */
.shg-masthead{border-bottom:1px solid var(--rule)}
.shg-masthead .shg-wrap{display:flex; align-items:center; justify-content:space-between;
  gap:var(--md); min-height:96px}
.shg-brandmark img{height:48px; width:auto}
.shg-nav{display:flex; align-items:center; gap:var(--md)}
.shg-nav a{font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey); padding:6px 0}
.shg-nav a:hover{color:var(--ink)}

/* ================================== hero ================================= */
.shg-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,34%); min-height:520px;
  border-bottom:1px solid var(--rule)}
.shg-hero-copy{display:flex; flex-direction:column; justify-content:center;
  padding:var(--xl) var(--lg) var(--xl) var(--edge)}
.shg-hero h1{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(26px,3.6vw,56px); line-height:1.02; letter-spacing:-.02em;
  margin:0 0 var(--md); max-width:14ch; text-wrap:balance;
}
.shg-hero .shg-sub{font-size:17px; line-height:1.6; color:var(--grey); max-width:46ch;
  margin:0 0 var(--lg)}
.shg-actions{display:flex; align-items:center; gap:var(--md); flex-wrap:wrap}
.shg-btn{display:inline-block; background:var(--ink); color:var(--white);
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:17px 30px; transition:background .18s ease}
.shg-btn:hover{background:var(--grey); color:var(--white)}
.shg-btn-quiet{display:inline-block; color:var(--ink);
  font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  padding:0 0 6px; border-bottom:1px solid var(--ink)}
.shg-btn-quiet:hover{color:var(--grey); border-bottom-color:var(--grey)}

.shg-hero-fig{position:relative; overflow:hidden; border-left:1px solid var(--rule);
  background:var(--panel); min-height:520px}
.shg-hero-fig img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 38%}

/* ============================== brand marks ==============================
   The four marks are drawn at very different weights, so each carries its own
   optical height from the brand data rather than one shared rule. The marks
   bring their own colour; the group around them does not.
   ======================================================================== */
.shg-marks{background:var(--white); border-bottom:1px solid var(--rule)}
.shg-marks .shg-wrap{display:flex; align-items:center; justify-content:space-between;
  gap:var(--lg); padding-block:var(--md); flex-wrap:wrap}
.shg-marks a{display:flex; align-items:center; justify-content:center;
  flex:1 1 0; min-width:118px; padding:6px 0; transition:opacity .18s ease}
.shg-marks a:hover,.shg-marks a:focus-visible{opacity:.55}
.shg-marks img{width:auto; max-width:100%; object-fit:contain}

/* ===================== figures, on the black panel ======================= */
.shg-figs{background:var(--panel); color:var(--on-panel)}
.shg-figs .shg-wrap{display:grid; grid-template-columns:repeat(4,1fr); padding-inline:0}
.shg-figs .shg-fig{padding:var(--lg); border-left:1px solid var(--grey)}
.shg-figs .shg-fig:first-child{border-left:0; padding-left:var(--gutter)}
.shg-figs .shg-fig:last-child{padding-right:var(--gutter)}
.shg-figs .shg-n{font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4vw,64px); line-height:1; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.shg-figs .shg-l{font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-panel-soft); margin-top:var(--sm)}

/* ============================== capabilities ============================= */
.shg-caps{background:var(--bone)}
.shg-caps .shg-wrap{padding-block:var(--xl)}
.shg-caps h2{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(20px,2.1vw,30px); line-height:1.12; letter-spacing:-.015em;
  margin:var(--sm) 0 var(--lg); max-width:22ch}
.shg-cap{display:grid; grid-template-columns:340px 1fr; gap:var(--lg);
  align-items:baseline; padding-block:var(--md); border-top:1px solid var(--rule)}
.shg-cap:last-child{border-bottom:1px solid var(--rule)}
.shg-cap h3{font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:14px; letter-spacing:-.005em; line-height:1.4}
.shg-cap p{color:var(--grey); max-width:62ch; margin:0}

/* ================================ brands ================================= */
.shg-brands-head{background:var(--white); border-top:1px solid var(--rule)}
.shg-brands-head .shg-wrap{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--md); flex-wrap:wrap; padding-block:var(--lg)}
.shg-brands-head h2{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(20px,2.1vw,30px); line-height:1.1; letter-spacing:-.015em; margin:0}

.shg-brand{display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr);
  background:var(--white); border-top:1px solid var(--rule); min-height:440px}
.shg-brand:last-of-type{border-bottom:1px solid var(--rule)}
.shg-brand-fig{position:relative; overflow:hidden; background:var(--panel); min-height:440px}
.shg-brand-fig img{position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%}
.shg-brand-body{display:flex; flex-direction:column; justify-content:center;
  padding:var(--lg) var(--edge) var(--lg) var(--lg); border-left:1px solid var(--rule)}
.shg-brand-mark{display:block; margin:0 0 var(--md)}
.shg-brand-mark img{width:auto; max-width:220px; object-fit:contain}
.shg-brand-body h3{font-family:var(--display); font-weight:700;
  font-size:clamp(22px,2.4vw,34px); line-height:1.1; letter-spacing:-.02em;
  margin:var(--sm) 0 var(--md)}
.shg-brand-body > p{color:var(--grey); max-width:56ch; margin:0 0 var(--lg)}
/* each brand's own line, in its own words, set apart from group prose */
.shg-brand-body > p.shg-brand-line{color:var(--ink); font-size:18px; line-height:1.45;
  max-width:34ch; margin:0 0 var(--md); padding-left:var(--sm);
  border-left:2px solid var(--ink)}

.shg-meta{display:flex; flex-wrap:wrap; align-items:center;
  font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grey-soft); font-variant-numeric:tabular-nums}
.shg-meta span,.shg-meta a{padding-right:var(--md); margin-right:var(--md);
  border-right:1px solid var(--rule)}
.shg-meta > :last-child{border-right:0; margin-right:0; padding-right:0}
.shg-meta a{color:var(--ink); border-bottom:1px solid var(--ink)}
.shg-meta a:hover{color:var(--grey); border-bottom-color:var(--grey)}

/* ================= contact, on the closing black panel =================== */
.shg-contact{background:var(--panel); color:var(--on-panel)}
.shg-contact .shg-wrap{padding-block:var(--xl)}
.shg-contact-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--lg)}
.shg-contact .shg-label{color:var(--on-panel-soft)}
.shg-contact h2{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(20px,2.1vw,30px); line-height:1.12; letter-spacing:-.015em;
  margin:var(--sm) 0 var(--md); max-width:14ch}
.shg-contact .shg-lead{color:var(--on-panel-soft); max-width:34ch; margin:0}
.shg-col h3{margin:0 0 var(--sm); font-size:13px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--on-panel-soft)}
.shg-col ul{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--md)}
.shg-col li{color:var(--on-panel); font-size:16px}
.shg-col a{border-bottom:1px solid var(--grey)}
.shg-col a:hover{border-bottom-color:var(--on-panel)}
.shg-col address{font-style:normal; color:var(--on-panel-soft); font-size:16px;
  line-height:1.6; margin-bottom:var(--md)}

.shg-colophon{background:var(--panel); color:var(--on-panel-soft)}
.shg-colophon .shg-wrap{display:flex; justify-content:space-between; align-items:center;
  gap:var(--md); flex-wrap:wrap; padding-block:var(--md) var(--lg);
  border-top:1px solid var(--grey); font-size:13px; letter-spacing:.06em}
.shg-colophon img{height:34px; width:auto}

/* =============================== motion (0.1) ============================ */
.js .shg-rise{opacity:0}
.js .shg-rise.is-in{opacity:1; transition:opacity .45s ease}
@media (prefers-reduced-motion:reduce){
  .js .shg-rise{opacity:1; transition:none}
  .shg-marks a{transition:none}
}

/* ============================== breakpoints ============================== */
@media (max-width:1180px){
  :root{--gutter:40px; --xl:88px; --lg:44px}
  .shg-cap{grid-template-columns:260px 1fr; gap:var(--md)}
  .shg-hero{grid-template-columns:minmax(0,1fr) minmax(0,38%)}
  .shg-figs .shg-fig{padding:var(--md) var(--lg)}
}
@media (max-width:1040px){
  .shg-hero{grid-template-columns:1fr; min-height:0}
  .shg-hero-copy{padding:var(--lg) var(--edge)}
  .shg-hero h1{max-width:18ch}
  .shg-hero-fig{min-height:0; aspect-ratio:16/9; border-left:0; border-top:1px solid var(--rule)}
  .shg-brand{grid-template-columns:1fr; min-height:0}
  .shg-brand-fig{min-height:0; aspect-ratio:16/9}
  .shg-brand-body{padding:var(--lg) var(--edge); border-left:0}
  .shg-contact-grid{grid-template-columns:1fr 1fr; row-gap:var(--lg)}
}
@media (max-width:840px){
  :root{--gutter:24px; --lg:36px; --xl:64px; --md:22px}
  .shg-figs .shg-wrap{grid-template-columns:1fr 1fr}
  .shg-figs .shg-fig{padding:var(--md) var(--gutter)}
  .shg-figs .shg-fig:nth-child(odd){border-left:0; padding-left:var(--gutter)}
  .shg-figs .shg-fig:nth-child(n+3){border-top:1px solid var(--grey)}
  .shg-cap{grid-template-columns:1fr; gap:var(--xs)}
  .shg-nav{gap:var(--sm)}
  .shg-nav a{font-size:12px; letter-spacing:.1em}
  .shg-hero-fig,.shg-brand-fig{aspect-ratio:4/3}
  .shg-marks .shg-wrap{gap:var(--md)}
  .shg-marks a{min-width:0}
}
@media (max-width:600px){
  .shg-contact-grid{grid-template-columns:1fr}
  .shg-brandmark img{height:38px}
  .shg-meta{font-size:11px; letter-spacing:.06em}
  .shg-meta span,.shg-meta a{padding-right:var(--sm); margin-right:var(--sm)}
  .shg-actions{gap:var(--md); flex-direction:column; align-items:flex-start}
  .shg-marks .shg-wrap{gap:var(--md) var(--lg); justify-content:flex-start}
  .shg-marks a{flex:0 1 calc(50% - var(--lg)); min-width:0}
  .shg-brand-mark img{max-width:170px}
}

/* a product brand nested under its parent: same system, half the weight */
.shg-nested{margin-top:var(--lg); padding-top:var(--md);
  border-top:1px solid var(--rule); max-width:56ch}
.shg-nested-mark{display:block; margin:var(--sm) 0}
.shg-nested-mark img{width:auto; max-width:170px; object-fit:contain}
.shg-brand-body .shg-nested > p{font-size:15px; color:var(--grey);
  max-width:54ch; margin:0 0 var(--md)}
.shg-nested .shg-meta{font-size:12px}