/* -------------------- Fonts & Icons -------------------- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=DM+Sans:wght@700&family=Inter:wght@400;500;600&family=Source+Sans+Pro:wght@300;400&display=swap");
@import url("fontawesome-all.min.css");

/* -------------------- Design tokens -------------------- */
:root {
  /* Tagline sizing controls (edit these to change size) */
  --tagline-min: 3rem;
  --tagline-fluid: 3vw;
  --tagline-max: 4rem;

  /* Brand accent */
  --accent: #6b5bff;

  /* Neutrals */
  --ink-900: #111;
  --ink-800: #1a1a1a;
  --ink-700: #222;
  --ink-600: #2c2c2c;
  --ink-500: #363636;
  --ink-400: #555;
  --ink-300: #6a6a6a;

  /* Buttons */
  --btn-radius: 30px;
  --btn-border: 1.5px;
}

/* =============================
   Reset & Base Normalization
   ============================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article,
aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; vertical-align:baseline; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display:block; }

body { line-height:1; -webkit-text-size-adjust:none; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; }
table { border-collapse:collapse; border-spacing:0; }
mark { background-color:transparent; color:inherit; }
input::-moz-focus-inner { border:0; padding:0; }

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="search"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea { -webkit-appearance:none; appearance:none; }

/* =============================
   Grid (HTML5 UP row system)
   ============================= */
.row { display:flex; flex-wrap:wrap; box-sizing:border-box; align-items:stretch; }
.row > * { box-sizing:border-box; }
.row.gtr-uniform > * > :last-child { margin-bottom:0; }
.row.aln-left { justify-content:flex-start; }
.row.aln-center { justify-content:center; }
.row.aln-right { justify-content:flex-end; }
.row.aln-top { align-items:flex-start; }
.row.aln-middle { align-items:center; }
.row.aln-bottom { align-items:flex-end; }
.row > .imp { order:-1; }

.row > .col-1 { width:8.33333%; } .row > .off-1 { margin-left:8.33333%; }
.row > .col-2 { width:16.66667%; } .row > .off-2 { margin-left:16.66667%; }
.row > .col-3 { width:25%; } .row > .off-3 { margin-left:25%; }
.row > .col-4 { width:33.33333%; } .row > .off-4 { margin-left:33.33333%; }
.row > .col-5 { width:41.66667%; } .row > .off-5 { margin-left:41.66667%; }
.row > .col-6 { width:50%; } .row > .off-6 { margin-left:50%; }
.row > .col-7 { width:58.33333%; } .row > .off-7 { margin-left:58.33333%; }
.row > .col-8 { width:66.66667%; } .row > .off-8 { margin-left:66.66667%; }
.row > .col-9 { width:75%; } .row > .off-9 { margin-left:75%; }
.row > .col-10 { width:83.33333%; } .row > .off-10 { margin-left:83.33333%; }
.row > .col-11 { width:91.66667%; } .row > .off-11 { margin-left:91.66667%; }
.row > .col-12 { width:100%; } .row > .off-12 { margin-left:100%; }

.row.gtr-0 { margin-top:0; margin-left:0; }
.row.gtr-0 > * { padding:0 0 0 0; }
.row.gtr-0.gtr-uniform { margin-top:0; }
.row.gtr-0.gtr-uniform > * { padding-top:0; }

.row.gtr-25 { margin-top:-0.3125em; margin-left:-0.3125em; }
.row.gtr-25 > * { padding:0.3125em 0 0 0.3125em; }
.row.gtr-25.gtr-uniform { margin-top:-0.3125em; }
.row.gtr-25.gtr-uniform > * { padding-top:0.3125em; }

.row.gtr-50 { margin-top:-0.625em; margin-left:-0.625em; }
.row.gtr-50 > * { padding:0.625em 0 0 0.625em; }
.row.gtr-50.gtr-uniform { margin-top:-0.625em; }
.row.gtr-50.gtr-uniform > * { padding-top:0.625em; }

.row { margin-top:-1.25em; margin-left:-1.25em; }
.row > * { padding:1.25em 0 0 1.25em; }
.row.gtr-uniform { margin-top:-1.25em; }
.row.gtr-uniform > * { padding-top:1.25em; }

.row.gtr-150 { margin-top:-1.875em; margin-left:-1.875em; }
.row.gtr-150 > * { padding:1.875em 0 0 1.875em; }
.row.gtr-150.gtr-uniform { margin-top:-1.875em; }
.row.gtr-150.gtr-uniform > * { padding-top:1.875em; }

.row.gtr-200 { margin-top:-2.5em; margin-left:-2.5em; }
.row.gtr-200 > * { padding:2.5em 0 0 2.5em; }
.row.gtr-200.gtr-uniform { margin-top:-2.5em; }
.row.gtr-200.gtr-uniform > * { padding-top:2.5em; }

/* Breakpoints (as in original) */
@media screen and (max-width: 1680px) {
  .row > .imp-xlarge { order:-1; }
  .row > .col-1-xlarge { width:8.33333%; } .row > .off-1-xlarge { margin-left:8.33333%; }
  .row > .col-2-xlarge { width:16.66667%; } .row > .off-2-xlarge { margin-left:16.66667%; }
  .row > .col-3-xlarge { width:25%; } .row > .off-3-xlarge { margin-left:25%; }
  .row > .col-4-xlarge { width:33.33333%; } .row > .off-4-xlarge { margin-left:33.33333%; }
  .row > .col-5-xlarge { width:41.66667%; } .row > .off-5-xlarge { margin-left:41.66667%; }
  .row > .col-6-xlarge { width:50%; } .row > .off-6-xlarge { margin-left:50%; }
  .row > .col-7-xlarge { width:58.33333%; } .row > .off-7-xlarge { margin-left:58.33333%; }
  .row > .col-8-xlarge { width:66.66667%; } .row > .off-8-xlarge { margin-left:66.66667%; }
  .row > .col-9-xlarge { width:75%; } .row > .off-9-xlarge { margin-left:75%; }
  .row > .col-10-xlarge { width:83.33333%; } .row > .off-10-xlarge { margin-left:83.33333%; }
  .row > .col-11-xlarge { width:91.66667%; } .row > .off-11-xlarge { margin-left:91.66667%; }
  .row > .col-12-xlarge { width:100%; } .row > .off-12-xlarge { margin-left:100%; }

  .row.gtr-0 { margin-top:0; margin-left:0; } .row.gtr-0 > * { padding:0; }
  .row.gtr-25 { margin-top:-0.3125em; margin-left:-0.3125em; } .row.gtr-25 > * { padding:0.3125em 0 0 0.3125em; }
  .row.gtr-50 { margin-top:-0.625em; margin-left:-0.625em; } .row.gtr-50 > * { padding:0.625em 0 0 0.625em; }
  .row { margin-top:-1.25em; margin-left:-1.25em; } .row > * { padding:1.25em 0 0 1.25em; }
  .row.gtr-150 { margin-top:-1.875em; margin-left:-1.875em; } .row.gtr-150 > * { padding:1.875em 0 0 1.875em; }
  .row.gtr-200 { margin-top:-2.5em; margin-left:-2.5em; } .row.gtr-200 > * { padding:2.5em 0 0 2.5em; }
}

@media screen and (max-width: 1280px) {
  .row > .imp-large { order:-1; }
  .row > .col-1-large { width:8.33333%; } .row > .off-1-large { margin-left:8.33333%; }
  .row > .col-2-large { width:16.66667%; } .row > .off-2-large { margin-left:16.66667%; }
  .row > .col-3-large { width:25%; } .row > .off-3-large { margin-left:25%; }
  .row > .col-4-large { width:33.33333%; } .row > .off-4-large { margin-left:33.33333%; }
  .row > .col-5-large { width:41.66667%; } .row > .off-5-large { margin-left:41.66667%; }
  .row > .col-6-large { width:50%; } .row > .off-6-large { margin-left:50%; }
  .row > .col-7-large { width:58.33333%; } .row > .off-7-large { margin-left:58.33333%; }
  .row > .col-8-large { width:66.66667%; } .row > .off-8-large { margin-left:66.66667%; }
  .row > .col-9-large { width:75%; } .row > .off-9-large { margin-left:75%; }
  .row > .col-10-large { width:83.33333%; } .row > .off-10-large { margin-left:83.33333%; }
  .row > .col-11-large { width:91.66667%; } .row > .off-11-large { margin-left:91.66667%; }
  .row > .col-12-large { width:100%; } .row > .off-12-large { margin-left:100%; }
  .row.gtr-0 { margin-top:0; margin-left:0; } .row.gtr-0 > * { padding:0; }
  .row.gtr-25 { margin-top:-0.3125em; margin-left:-0.3125em; } .row.gtr-25 > * { padding:0.3125em 0 0 0.3125em; }
  .row.gtr-50 { margin-top:-0.625em; margin-left:-0.625em; } .row.gtr-50 > * { padding:0.625em 0 0 0.625em; }
  .row { margin-top:-1.25em; margin-left:-1.25em; } .row > * { padding:1.25em 0 0 1.25em; }
  .row.gtr-150 { margin-top:-1.875em; margin-left:-1.875em; } .row.gtr-150 > * { padding:1.875em 0 0 1.875em; }
  .row.gtr-200 { margin-top:-2.5em; margin-left:-2.5em; } .row.gtr-200 > * { padding:2.5em 0 0 2.5em; }
}

@media screen and (max-width: 980px) {
  .row > .imp-medium { order:-1; }
  .row > .col-1-medium { width:8.33333%; } .row > .off-1-medium { margin-left:8.33333%; }
  .row > .col-2-medium { width:16.66667%; } .row > .off-2-medium { margin-left:16.66667%; }
  .row > .col-3-medium { width:25%; } .row > .off-3-medium { margin-left:25%; }
  .row > .col-4-medium { width:33.33333%; } .row > .off-4-medium { margin-left:33.33333%; }
  .row > .col-5-medium { width:41.66667%; } .row > .off-5-medium { margin-left:41.66667%; }
  .row > .col-6-medium { width:50%; } .row > .off-6-medium { margin-left:50%; }
  .row > .col-7-medium { width:58.33333%; } .row > .off-7-medium { margin-left:58.33333%; }
  .row > .col-8-medium { width:66.66667%; } .row > .off-8-medium { margin-left:66.66667%; }
  .row > .col-9-medium { width:75%; } .row > .off-9-medium { margin-left:75%; }
  .row > .col-10-medium { width:83.33333%; } .row > .off-10-medium { margin-left:83.33333%; }
  .row > .col-11-medium { width:91.66667%; } .row > .off-11-medium { margin-left:91.66667%; }
  .row > .col-12-medium { width:100%; } .row > .off-12-medium { margin-left:100%; }
  .row.gtr-0 { margin-top:0; margin-left:0; } .row.gtr-0 > * { padding:0; }
  .row.gtr-25 { margin-top:-0.3125em; margin-left:-0.3125em; } .row.gtr-25 > * { padding:0.3125em 0 0 0.3125em; }
  .row.gtr-50 { margin-top:-0.625em; margin-left:-0.625em; } .row.gtr-50 > * { padding:0.625em 0 0 0.625em; }
  .row { margin-top:-1.25em; margin-left:-1.25em; } .row > * { padding:1.25em 0 0 1.25em; }
  .row.gtr-150 { margin-top:-1.875em; margin-left:-1.875em; } .row.gtr-150 > * { padding:1.875em 0 0 1.875em; }
  .row.gtr-200 { margin-top:-2.5em; margin-left:-2.5em; } .row.gtr-200 > * { padding:2.5em 0 0 2.5em; }
}

@media screen and (max-width: 736px) {
  .row > .imp-small { order:-1; }
  .row > .col-1-small { width:8.33333%; } .row > .off-1-small { margin-left:8.33333%; }
  .row > .col-2-small { width:16.66667%; } .row > .off-2-small { margin-left:16.66667%; }
  .row > .col-3-small { width:25%; } .row > .off-3-small { margin-left:25%; }
  .row > .col-4-small { width:33.33333%; } .row > .off-4-small { margin-left:33.33333%; }
  .row > .col-5-small { width:41.66667%; } .row > .off-5-small { margin-left:41.66667%; }
  .row > .col-6-small { width:50%; } .row > .off-6-small { margin-left:50%; }
  .row > .col-7-small { width:58.33333%; } .row > .off-7-small { margin-left:58.33333%; }
  .row > .col-8-small { width:66.66667%; } .row > .off-8-small { margin-left:66.66667%; }
  .row > .col-9-small { width:75%; } .row > .off-9-small { margin-left:75%; }
  .row > .col-10-small { width:83.33333%; } .row > .off-10-small { margin-left:83.33333%; }
  .row > .col-11-small { width:91.66667%; } .row > .off-11-small { margin-left:91.66667%; }
  .row > .col-12-small { width:100%; } .row > .off-12-small { margin-left:100%; }

  .row.gtr-0 { margin-top:0; margin-left:0; } .row.gtr-0 > * { padding:0; }
  .row.gtr-25 { margin-top:-0.3125em; margin-left:-0.3125em; } .row.gtr-25 > * { padding:0.3125em 0 0 0.3125em; }
  .row.gtr-50 { margin-top:-0.625em; margin-left:-0.625em; } .row.gtr-50 > * { padding:0.625em 0 0 0.625em; }
  .row { margin-top:-1.25em; margin-left:-1.25em; } .row > * { padding:1.25em 0 0 1.25em; }
  .row.gtr-150 { margin-top:-1.875em; margin-left:-1.875em; } .row.gtr-150 > * { padding:1.875em 0 0 1.875em; }
  .row.gtr-200 { margin-top:-2.5em; margin-left:-2.5em; } .row.gtr-200 > * { padding:2.5em 0 0 2.5em; }
}

/* ===============
   Basic Styles
   =============== */
html { box-sizing:border-box; }
*, *:before, *:after { box-sizing:inherit; }

body {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.05'/></svg>"),
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0) 0 0/18px 18px,
    linear-gradient(180deg, #121214, #121214);
  background-attachment:fixed;
  overflow-y:scroll;
}

body, input, textarea, select {
  font-family:'Source Sans Pro', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:300;
  color:#777;
  font-size:20pt;
  line-height:1.75em;
}

@media screen and (max-width: 1680px) { body, input, textarea, select { font-size:15pt; } }
@media screen and (max-width: 1280px) { body, input, textarea, select { font-size:14pt; } }
@media screen and (max-width: 736px)  { body, input, textarea, select { font-size:12pt; } }
@media screen and (max-width: 360px)  { body, input, textarea, select { font-size:11pt; } }

strong, b, h1, h2, h3, h4, h5, h6 { font-weight:400; color:#363636; }
h1 { font-size:2.4em; letter-spacing:-0.015em; }
h2 { font-size:1.8em; letter-spacing:-0.015em; }
h3, h4, h5, h6 { font-size:1.25em; letter-spacing:-0.015em; }

@media screen and (max-width: 736px) {
  h1 { font-size:1.75em; }
  h2 { font-size:1.375em; }
  h3, h4, h5, h6 { font-size:1em; }
}

p, ul, ol, dl, table, blockquote, form { margin-bottom:2em; }
blockquote { border-left:0.5em solid #ddd; padding:1em 0 1em 2em; font-style:italic; }
em, i { font-style:italic; }
hr { border:0; border-top:1px solid #ddd; padding:1.5em 0 0; margin:1.75em 0 0; }
sub { position:relative; top:0.5em; font-size:0.8em; }
sup { position:relative; top:-0.5em; font-size:0.8em; }
br.clear { clear:both; }

/* Tables */
table { width:100%; }
table.default tbody tr { border-bottom:1px solid #f4f4f4; }
table.default td { padding:0.5em 1em; }
table.default th { text-align:left; font-weight:400; padding:0.5em 1em; }
table.default thead { border-bottom:2px solid #f4f4f4; }

/* Images */
.image { display:inline-block; }
.image img { display:block; width:100%; }
.image.fit { display:block; width:100%; padding:0; border:0; background:none; }
.image.fit img { display:block; width:100%; height:auto; overflow:hidden; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.image.fit:hover img { transform:scale(1.05); box-shadow:0 10px 20px rgba(0,0,0,0.3); }
.image.featured { display:block; width:100%; margin:0 0 2em 0; }
.image.left { float:left; margin:0 2em 2em 0; }
.image.centered { display:block; margin:0 0 2em 0; }
.image.centered img { margin:0 auto; width:auto; }

/* Buttons (global defaults) */
input[type="button"], input[type="submit"], input[type="reset"],
button, .button {
  transition:background-color .25s ease-in-out;
  display:inline-block;
  background-color:#222;
  color:#fff;
  border:0;
  cursor:pointer;
  outline:0;
  padding:0.7em 1.5em;
}
button:hover, .button:hover { background-color:#333; }
button:active, .button:active { background-color:#444; }
.button.alt { background-color:#777; }
.button.alt:hover { background-color:#888; }
.button.alt:active { background-color:#999; }

@media screen and (max-width: 736px) {
  input[type="button"], input[type="submit"], input[type="reset"],
  button, .button { width:100%; }
}

/* Lists & actions */
ul { list-style:disc; padding-left:1em; } ul li { padding-left:0.5em; }
ol { list-style:decimal; padding-left:1.25em; } ol li { padding-left:0.25em; }
ul.actions { list-style:none; padding-left:0; }
ul.actions li { display:inline-block; padding-left:0; margin:0 0 0 0.5em; }
ul.actions li:first-child { margin-left:0; }
@media screen and (max-width: 736px) {
  ul.actions li { display:block; margin:0.75em 0 0 0; }
  ul.actions li:first-child { margin-top:0; }
}

/* Icons */
.icon { text-decoration:none; position:relative; }
.icon:before {
  -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;
  display:inline-block; font-style:normal; font-variant:normal; text-rendering:auto; line-height:1;
  text-transform:none !important; font-family:'Font Awesome 5 Free'; font-weight:400;
}
.icon.solid:before { font-weight:900; }
.icon.brands:before { font-family:'Font Awesome 5 Brands'; }
.icon > .label { display:none; }

/* =====================
   Nav
   ===================== */
#nav { text-align:center; height:4.25em; cursor:default; }
#nav a {
  position:relative; display:inline-block; color:#fff;
  width:1em; height:1em; line-height:0.9em; font-size:2.5em;
  margin:0 0.25em; opacity:0.35; outline:0; transition:opacity .25s ease-in-out;
}
#nav a.icon:before { padding-right:0; }
#nav a:before { font-size:0.8em; }
#nav a:after {
  content:''; display:block; position:absolute; left:50%; bottom:-0.75em;
  margin-left:-0.5em; border-bottom:0 solid #fff; border-left:0.5em solid transparent;
  border-right:0.5em solid transparent; transition:border-bottom-width .25s ease-in-out;
}
#nav a span {
  display:block; position:absolute; background:#222; color:#fff;
  top:-2.75em; font-size:0.3em; height:2.25em; line-height:2.25em; left:50%; opacity:0;
  transition:opacity .25s ease-in-out; width:5.5em; margin-left:-2.75em;
}
#nav a span:after {
  content:''; display:block; position:absolute; bottom:-0.4em; left:50%; margin-left:-0.6em;
  border-top:0.6em solid #222; border-left:0.6em solid transparent; border-right:0.6em solid transparent;
}
#nav a:hover { opacity:1; }
#nav a:hover span { opacity:1; }
#nav a.active { opacity:1; }
#nav a.active:after { border-bottom-width:0.5em; }
@media screen and (max-width: 980px) { #nav a span { display:none; } }

/* =====================
   Wrapper
   ===================== */
#wrapper {
  width:45em; margin:0 auto; min-height:100vh; max-width:100%; padding:4em 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transition:opacity 1s ease-in-out;
}
body.is-preload #wrapper { opacity:0; }
@media screen and (max-width: 1280px) { #wrapper { padding:3em 0; max-width:calc(100% - 6em); } }
@media screen and (max-width: 980px)  { #wrapper { padding:1.5em 0; max-width:calc(100% - 8em); } }
@media screen and (max-width: 736px)  { #wrapper { padding:1em 0; max-width:calc(100% - 2em); } }
@media screen and (max-width: 360px)  { #wrapper { padding:1em 0; max-width:100%; } }

/* =====================
   Lightbox
   ===================== */
#lightbox { position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; z-index:9999; }
#lightbox[aria-hidden="false"] { display:flex; }
#lightbox img { max-width:90vw; max-height:90vh; box-shadow:0 0 20px rgba(0,0,0,0.6); }
#lightbox .lb-close, #lightbox .lb-prev, #lightbox .lb-next, #lightbox .lb-fs {
  position:absolute; background:rgba(255,255,255,0.1); border:none; color:#fff; font-size:28px; line-height:1; padding:10px 14px; cursor:pointer;
}
#lightbox .lb-close { top:16px; right:16px; }
#lightbox .lb-fs { top:16px; right:62px; }
#lightbox .lb-prev { left:16px; top:50%; transform:translateY(-50%); }
#lightbox .lb-next { right:16px; top:50%; transform:translateY(-50%); }

/* =====================
   Main Panels
   ===================== */
#main { position:relative; overflow:hidden; width:100%; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.25); transition:min-height 0.5s ease-in-out, max-height 0.5s ease-in-out; }
#main > .panel { transition:opacity 0.25s ease-in-out; margin-bottom:0; position:relative; padding:3.5em 2.5em 2.5em; width:100%; }
#main > .panel.inactive { opacity:0; }
/* Section titles (Portfolio, Photography) */
#main > .panel:not(.intro) h2 {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.01em;
  color: var(--ink-800);
  margin-bottom: 0.75em;
  text-transform: none;
}

/* Project titles / photo captions */
#main > .panel:not(.intro) h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink-700);
  margin: 0.5em 0 0.3em;
}

/* Body text */
#main > .panel:not(.intro) p {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-400);
  line-height: 1.6;
}

/* Instagram text */
.instagram {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink-400);
  line-height: 1.6;
  text-align: center;
  margin-top: 1em;
}
@media screen and (max-width: 736px) { #main > .panel { padding:2em 1.5em 1.5em; } }

/* Intro layout (unchanged from original structure) */
#main > .panel.intro { padding:0; height:20em; display:flex; flex-direction:row; align-items:center; }
#main > .panel.intro .pic { text-decoration:none; position:relative; flex-grow:0; flex-shrink:0; width:17em; height:100%; }
#main > .panel.intro .pic:before { content:''; position:absolute; top:0; left:0; background:url("images/overlay.png"); width:100%; height:100%; z-index:1; }
#main > .panel.intro .pic img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:center; }
#main > .panel.intro .pic .arrow {
  display:block; position:absolute; right:0; top:50%; margin-top:-1.375em; width:2.75em; height:2.75em;
  background:rgba(0,0,0,0.75); color:#fff; text-align:center; line-height:2.75em; font-size:1.5em;
  transition:width .15s ease-in-out, padding-right .15s ease-in-out; z-index:1;
}
#main > .panel.intro .pic .arrow:before { position:relative; padding-right:0; top:0.125em; }
#main > .panel.intro .pic .arrow span { display:block; text-indent:-9999px; }
#main > .panel.intro .pic:hover .arrow { width:3em; padding-right:0.25em; }

#main > .panel.intro header { flex:1 1 0; padding:3.5em 2.5em; margin-bottom:0; width:auto; min-width: 0; }
#main > .panel.intro header h1 { line-height:1.25em; margin-bottom:0; }
#main > .panel.intro header p { letter-spacing:-0.015em; font-size:1.25em; margin:0.25em 0 0 0; }

@media screen and (max-width: 980px) {
.panel.intro .name-with-mark { justify-content: center; }

  #main > .panel.intro {
    flex-direction: column;
    height: auto;
    align-items: stretch; /* make children stretch full width */
  }

  /* Header keeps padding and centers text */
  #main > .panel.intro header {
    padding: 4em;
    text-align: center;
  }

  /* Pic now respects same gutters as header */
  #main > .panel.intro .pic {
    padding: 0 4em 4em;
    width: 100%;
    height: auto;
    position: relative;
  }

  #main > .panel.intro .pic img {
    position: static;   /* no absolute positioning */
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Chevron arrow stays inside padded area */
  #main > .panel.intro .pic .arrow {
    right: 4em;
  }
}

@media screen and (max-width: 736px) {
  #main > .panel.intro .pic {
    padding: 0 2em 2em;  /* match smaller header padding */
    height: auto;
  }

  #main > .panel.intro header {
    padding: 2.75em 2em 2.5em;
    text-align: center;
  }

  #main > .panel.intro header p {
    font-size: 1em;
    margin: 0.25em 0 0 0;
  }

  #main > .panel.intro .pic .arrow {
    right: 2em;
  }
}

/* =====================
   Intro Panel — SCOPED DESIGN
   ===================== */

/* Name uses DM Sans for character */
.panel.intro h1 {
  font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:700;
  color:var(--ink-800);
}

/* Roles with icons (Inter) */
.panel.intro .roles {
  display:flex; flex-wrap:wrap; gap:1.2em;
  margin:0.5em 0 1.4em;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:1rem; color:var(--ink-400);
}
.panel.intro .role { display:flex; align-items:center; gap:0.4em; }
.panel.intro .role i { color:var(--accent); font-size:0.95em; }

/* Tagline (Space Grotesk) — single source of truth */
.panel.intro .tagline {
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:600;
  letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--ink-800);
  margin:0.2em 0 1em;
  max-width:18ch;
  font-size:clamp(var(--tagline-min), var(--tagline-fluid), var(--tagline-max));
}

/* Blue highlight — single definition */
.panel.intro .accent-underline {
  background:linear-gradient(to top, var(--accent) 0 58%, transparent 58% 100%);
  color:var(--ink-900);
  padding:0 .15em;
  border-radius:3px;
}

.panel.intro .name-with-mark{
  display:flex; align-items:center; gap:.5rem; min-width:0; flex-wrap:nowrap;
}
.panel.intro .name-with-mark .name-mark{
  width:1.1em; height:1.1em; flex:0 0 auto; object-fit:contain;
  transform:translateY(0.03em);
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.06));
}


/* CTAs — thinner, elegant (Inter), scoped */
.panel.intro .cta { display:flex; flex-wrap:wrap; gap:0.7em; }
.panel.intro .button {
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:500; font-size:0.9rem;
  padding:0.55em 1.3em;
  border-radius:var(--btn-radius);
  border:var(--btn-border) solid transparent;
  transition:all 0.25s ease;
  background:var(--ink-700); color:#fff;
}
.panel.intro .button:hover { background:var(--ink-600); transform:translateY(-1px); }
.panel.intro .button.alt { background:transparent; color:var(--ink-700); border-color:var(--ink-700); }
.panel.intro .button.alt:hover { background:var(--ink-700); color:#fff; }

/* Mobile ergonomics for hero */
@media screen and (max-width: 980px) {
  .panel.intro header { text-align:center; }
  .panel.intro .roles, .panel.intro .cta { justify-content:center; }
}
@media screen and (max-width: 736px) {
  .panel.intro .cta .button { width:100%; text-align:center; }
}

/* =============
   Forms
   ============= */
form label { display:block; font-weight:400; color:#363636; margin:0 0 1em 0; }
form input[type="text"], form input[type="email"], form input[type="password"], form select, form textarea {
  border:0; background:#f4f4f4; padding:0.75em; width:100%; transition:background-color .25s ease-in-out;
}
form input[type="text"]:focus, form input[type="email"]:focus, form input[type="password"]:focus,
form select:focus, form textarea:focus { background:#f8f8f8; }
form input[type="text"], form input[type="email"], form input[type="password"], form select { line-height:1.35em; }
form ::-webkit-input-placeholder { color:#999; }
form :-moz-placeholder { color:#999; }
form ::-moz-placeholder { color:#999; }
form :-ms-input-placeholder { color:#999; }
select { background-image:none; padding-right:2rem; }
button:focus, input:focus, select:focus, textarea:focus { outline:2px solid #222; outline-offset:2px; }
button[disabled], input[disabled], select[disabled], textarea[disabled] { cursor:not-allowed; opacity:.5; }

/* =====================
   Footer
   ===================== */
#footer { color:rgba(255,255,255,0.45); text-align:center; padding:2em 0 0; font-size:0.75em; }
#footer a { color:rgba(255,255,255,0.65); transition:color .25s ease-in-out; }
#footer a:hover { color:#fff; }
#footer .copyright { list-style:none; padding-left:0; }
#footer .copyright li { display:inline-block; padding-left:1em; margin-left:1em; border-left:1px solid rgba(255,255,255,0.25); line-height:1; }
#footer .copyright li:first-child { padding-left:0; margin-left:0; border-left:0; }
@media screen and (max-width: 736px) { #footer .copyright li { padding-left:0.5em; margin-left:0.5em; } }