/* Will McCumber site styles
   Design cues: machined metal (fine lines), warm neutrals, precise accent color.
*/

:root{
  --bg:#fbfaf7;
  --panel:#ffffff;
  --text:#131515;
  --muted:#4b5563;
  --border:#e7e3da;
  --shadow:0 14px 40px rgba(10,10,10,.08);
  --shadow-2:0 10px 24px rgba(10,10,10,.10);
  --accent:#e23d28;        /* seconds-hand red */
  --accent-2:#0ea5a4;      /* lume teal */
  --link:#0f5b6b;
  --radius:18px;
  --max:1100px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(226,61,40,.05) 0%, transparent 35%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0, rgba(0,0,0,.035) 1px, transparent 1px, transparent 90px),
    var(--bg);
  line-height:1.55;
}

:root.dark body{
  background:
    linear-gradient(180deg, rgba(14,165,164,.08) 0%, transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0, rgba(255,255,255,.045) 1px, transparent 1px, transparent 92px),
    var(--bg);
}

img{max-width:100%; height:auto; display:block}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1rem}
h1,h2,h3{font-family: "Fraunces", ui-serif, Georgia, serif; letter-spacing:-.01em; margin:0 0 .7rem}
h1{font-size:clamp(2rem, 4vw, 3.2rem); line-height:1.1}
h2{font-size:clamp(1.4rem, 2.2vw, 2rem); line-height:1.2}
h3{font-size:1.15rem; line-height:1.25; font-family:Inter, system-ui, sans-serif; letter-spacing:-.01em}

.container{width:min(var(--max), calc(100% - 2.4rem)); margin:0 auto}
.section{padding:3.2rem 0}
.section.tight{padding:2.2rem 0}
.section-head{display:flex; gap:1rem; align-items:flex-end; justify-content:space-between; margin-bottom:1.3rem}
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.pad{padding:1.25rem}
.card.pad-lg{padding:1.6rem}
.grid{display:grid; gap:1.2rem; grid-template-columns:repeat(12, minmax(0,1fr))}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
}

/* Header */
.skip-link{
  position:absolute; left:1rem; top:1rem;
  transform:translateY(-200%);
  padding:.6rem .85rem;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
}
.skip-link:focus{transform:translateY(0); z-index:9999}

.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
}
.brand{
  display:flex; align-items:center; gap:.75rem; color:var(--text);
}
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  display:grid; place-items:center;
  box-shadow:var(--shadow-2);
}
.brand span{
  font-weight:650; letter-spacing:-.01em;
}
.nav{
  display:flex; align-items:center; gap:.85rem;
}
.nav a{color:var(--muted); font-weight:550}
.nav a:hover{color:var(--text); text-decoration:none}
.nav .btn{margin-left:.25rem}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.75rem 1rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  font-weight:650;
  box-shadow:var(--shadow-2);
  cursor:pointer;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:var(--accent);
  border-color: color-mix(in srgb, var(--accent) 78%, #000);
  color:#fff;
}
.btn.ghost{
  background:transparent;
  box-shadow:none;
}
.btn.small{padding:.55rem .75rem; border-radius:12px; font-weight:650}
.btn.icon{padding:.55rem .65rem; width:42px}

.nav-toggle{display:none}
@media (max-width: 860px){
  .nav-toggle{display:inline-flex}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; padding:1rem; background:var(--bg); border-bottom:1px solid var(--border)}
  .header.open .nav-links{display:block}
  .nav-links .nav{flex-direction:column; align-items:flex-start}
}

/* Hero */
.hero{
  padding:2.6rem 0 2.2rem;
}
.hero-grid{
  display:grid;
  gap:1.4rem;
  grid-template-columns: 1.2fr .8fr;
  align-items:stretch;
}
@media (max-width: 900px){
  .hero-grid{grid-template-columns:1fr}
}
.hero .eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 85%, transparent);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.82rem;
}
.hero .lead{
  font-size:1.05rem;
  color:var(--muted);
  max-width:56ch;
}
.hero .cta{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.1rem}

.hero-figure{
  overflow:hidden;
  position:relative;
  min-height:340px;
}
.hero-figure img{
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.03);
}
.hero-figure .fig-overlay{
  position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(0,0,0,.40) 0%, rgba(0,0,0,0) 55%);
}
:root.dark .hero-figure .fig-overlay{
  background:linear-gradient(140deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 60%);
}
.hero-figure .fig-label{
  position:absolute; left:1rem; bottom:1rem; right:1rem;
  color:#fff;
}
.hero-figure .fig-label .title{
  font-family:Inter, system-ui, sans-serif;
  font-weight:750;
  letter-spacing:-.01em;
}
.hero-figure .fig-label .lead{font-size:1.03rem; color:var(--muted); max-width:72ch}

/* Lists */

.list{
  margin:0; padding-left:1.1rem;
  color:var(--muted);
}
.list li{margin:.45rem 0}

/* Highlight cards */
.highlight{
  display:flex; flex-direction:column; gap:.65rem;
}
.highlight .meta{
  display:flex; gap:.6rem; align-items:center; flex-wrap:wrap;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.85rem;
}
.pill{
  display:inline-flex; align-items:center;
  padding:.22rem .55rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 90%, transparent);
}
.metric{
  font-family:var(--mono);
  font-weight:800;
  color:var(--text);
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:1.1rem;
}
@media (max-width: 900px){
  .gallery{grid-template-columns:1fr}
}
.gallery .stack{display:grid; gap:1.1rem}
.media{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.media img{width:100%; height:100%; object-fit:cover}
.caption{
  padding:.75rem 1rem;
  color:var(--muted);
  font-size:.92rem;
}

/* Case studies list */
.cs-item{
  display:flex; flex-direction:column; gap:.55rem;
}
.cs-item h3{margin:0}
.cs-item .desc{color:var(--muted); margin:0}
.cs-item .links{display:flex; gap:.7rem; flex-wrap:wrap}
.cs-item .links a{font-weight:650}

/* Page hero */
.page-hero{
  padding:1.6rem 0 1.1rem;
}
.breadcrumbs{
  font-family:var(--mono);
  color:var(--muted);
  font-size:.85rem;
  margin-bottom:.8rem;
}
.meta-line{
  color:var(--muted);
  font-family:var(--mono);
  font-size:.9rem;
  margin-top:.2rem;
}
.facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:.9rem;
  margin-top:1.2rem;
}
@media (max-width:900px){ .facts{grid-template-columns:1fr} }
.fact{
  padding:.9rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.fact .label{
  font-family:var(--mono);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
.fact .value{font-weight:700; margin-top:.3rem}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  padding:2rem 0;
  color:var(--muted);
  font-size:.95rem;
}
.footer a{color:inherit}
.footer .row{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.note{
  color:var(--muted);
  font-size:.92rem;
}

hr.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:1.6rem 0;
}
/* Case study helpers (kept compatible with older page structure) */
.col-8{grid-column:span 8}
.col-4{grid-column:span 4}
@media (max-width: 900px){
  .col-8,.col-4{grid-column:span 12}
}

.case-list{
  margin:0;
  padding-left:1.15rem;
  color:var(--muted);
}
.case-list li{margin:.55rem 0}
.callout{
  padding:1rem 1rem;
  border-radius:16px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow:var(--shadow-2);
  margin:1rem 0 1.2rem;
}
.section-title{
  margin-top:1.4rem;
  padding-top:.4rem;
}
.toc{
  position:sticky;
  top:90px;
  padding:1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow:var(--shadow);
}
.toc a{display:block; padding:.4rem 0; color:var(--muted); font-weight:650}
.toc a:hover{color:var(--text); text-decoration:none}
.link{color:var(--link); font-weight:700}
.muted{color:var(--muted)}
.chips{display:flex; gap:.5rem; flex-wrap:wrap; margin:.75rem 0}
.chips .pill{font-family:var(--mono); font-size:.8rem}
.snapshots{display:grid; gap:1rem; margin-top:1rem}
.snapshot{
  padding:1rem;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb, var(--panel) 92%, transparent);
}
.snapshot .role{font-family:var(--mono); color:var(--muted); font-size:.85rem}


/* Hyalus section (contained, IG-inspired) */
.hyalus-section{
  position:relative;
  border-top:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background:
    radial-gradient(900px circle at 18% 0%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 55%),
    radial-gradient(900px circle at 85% 18%, rgba(0,0,0,.06), transparent 55%),
    var(--bg);
}
.hyalus-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23131515' stroke-opacity='0.35' stroke-width='1'%3E%3Cpath d='M40 6 L74 40 L40 74 L6 40 Z'/%3E%3Cpath d='M40 6 L40 74'/%3E%3Cpath d='M6 40 L40 74 L74 40'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
  background-position: 20px 10px;
}
.hyalus-section .container{position:relative;}
.hyalus-title{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.hyalus-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.hyalus-icon svg{width:100%; height:100%; display:block;}
.hyalus-media-card{padding:1rem}
.hyalus-media{display:grid; gap:1rem}
.hyalus-feature{aspect-ratio:17/18}
.hyalus-feature img{object-position:50% 82%}
.hyalus-caption{margin:0}
.hyalus-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1rem;
}
@media (max-width: 600px){
  .hyalus-grid{grid-template-columns:1fr;}
}
.hyalus-grid .media{
  aspect-ratio:1/1;
  box-shadow:none;
  border-radius:16px;
}
.hyalus-grid .media img{width:100%; height:100%;}
.hyalus-grid .media.glow{
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 35%, transparent), 0 18px 40px rgba(14,165,164,.12);
}
.hyalus-list{
  list-style:none;
  padding-left:0;
}
.hyalus-list li{
  position:relative;
  padding-left:1.35rem;
}
.hyalus-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.45rem;
  width:.85rem;
  height:.85rem;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230ea5a4' d='M12 2c2.9 4.8 7 8.6 7 13.1A7 7 0 1 1 5 15.1C5 10.6 9.1 6.8 12 2z'/%3E%3C/svg%3E");
}

/* Small helper text */
.sub{
  color:var(--muted);
  font-size:.95rem;
  margin-top:.25rem;
} 

/* Button rows */
.btn-row{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:1rem;
}