/*
  Base element styles + small utility classes
  --------------------------------------------
  Global typography, the page container/section rhythm, and a handful
  of one-off utility classes used to avoid inline styles in the markup.
*/
body{
  max-width:100vw;
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.15;letter-spacing:-.02em;}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1;}
section{padding:130px 0;position:relative;}

::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#d8d4e0;border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}

/* Gradient text accent — used for highlighted words/numbers */
.grad-text{background:linear-gradient(120deg,var(--accent-deep),var(--accent) 50%,var(--accent-pink));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* Utility classes (replace one-off inline styles in the markup) */
.section-title-sm{font-size:clamp(26px,3.2vw,36px);font-weight:700;margin-bottom:20px;}
.section-note{color:var(--muted);font-size:16px;margin-top:10px;}
.mb-sm{margin-bottom:6px;}
.no-top-pad{padding-top:0;}
.text-center{text-align:center;}

/* Placeholder blocks — shown until real photos/logo are dropped into /assets/images */
.ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1.5px dashed var(--border-strong);border-radius:inherit;
  background:repeating-linear-gradient(45deg,rgba(24,18,40,.035) 0 10px,transparent 10px 20px);
  color:var(--muted);font-size:12.5px;font-weight:700;text-align:center;letter-spacing:.04em;text-transform:uppercase;
  width:100%;height:100%;
}
.ph small{font-weight:500;font-size:10.5px;color:var(--muted-2);text-transform:none;letter-spacing:0;margin-top:2px;}

/* Real photos: an <img> is layered above the .ph placeholder inside a
   position:relative box. If the file at `src` is missing, onerror
   removes the broken <img>, revealing the placeholder underneath —
   so the page never shows a broken-image icon before assets arrive. */
.photo-box{position:relative;}
.photo-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;}