/* ==========================================================
   Gloss layer: white + gold finish
   Loaded after style.css and personal.css. Remove this file
   (and its <link> in index.html) to return to the plain look.
   ========================================================== */

@property --ring-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

:root{
  --gold-deep:#6f5216;
  --gold:#a8822f;
  --gold-mid:#c9a24a;
  --gold-light:#ead39a;
  --gold-pale:#f8efd6;
  --gold-text:linear-gradient(120deg,#6f5216 0%,#a8822f 30%,#d8b565 48%,#a8822f 66%,#6f5216 100%);
  --gold-foil:linear-gradient(135deg,#8a6a22 0%,#d9b860 28%,#fbefc6 50%,#c9a24a 72%,#8a6a22 100%);
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --glass-edge:rgba(255,255,255,.9);
  --hair:rgba(168,130,47,.22);
  --shadow-soft:0 1px 2px rgba(23,23,23,.04),0 10px 30px -12px rgba(23,23,23,.12);
  --shadow-gold:0 1px 2px rgba(111,82,22,.08),0 22px 50px -18px rgba(168,130,47,.38);
  --radius:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

html,body{overflow-x:clip}
html{scroll-padding-top:100px}
@media(max-width:700px){html{scroll-padding-top:80px}}
body{background:#fdfcf9;position:relative}
::selection{background:#c9a24a;color:#fff}

/* ---------- Ambient light behind the page ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(60vw 50vw at 8% -8%,rgba(234,211,154,.38),transparent 60%),
    radial-gradient(50vw 45vw at 105% 18%,rgba(214,222,235,.55),transparent 62%),
    radial-gradient(55vw 40vw at 50% 110%,rgba(248,239,214,.7),transparent 65%),
    linear-gradient(180deg,#fff 0%,#fdfbf6 100%);
}
body::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  width:42vw;height:42vw;max-width:620px;max-height:620px;
  top:30vh;left:-14vw;
  background:radial-gradient(closest-side,rgba(234,211,154,.32),rgba(234,211,154,0));
  animation:drift 22s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate(70vw,25vh) scale(1.2)}}

/* ---------- Scroll progress bar ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:40;pointer-events:none;
  background:var(--gold-foil);transform-origin:0 50%;transform:scaleX(var(--progress,0))}

/* ---------- Glass header ---------- */
.site-header{position:sticky;top:0;z-index:20;padding-block:22px 20px;border-bottom-color:transparent;transition:padding .35s var(--ease)}
.site-header::before{
  content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);
  background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background .35s,box-shadow .35s,border-color .35s,backdrop-filter .35s;
}
.site-header.is-scrolled::before{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
  border-bottom-color:rgba(168,130,47,.18);
  box-shadow:0 10px 30px -18px rgba(23,23,23,.25);
}
.site-header:not(.is-scrolled){box-shadow:inset 0 -1px 0 var(--line)}
.wordmark-dot,.name-period{color:var(--gold-mid)}
.main-nav>a::after{background:var(--gold-foil);height:2px;border-radius:2px}
.main-nav .nav-contact{
  padding:10px 18px!important;border-radius:999px;
  background:linear-gradient(180deg,#2b2b2b,#0d0d0d);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px rgba(201,162,74,.55),0 8px 20px -8px rgba(0,0,0,.45);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.main-nav .nav-contact::after{display:none}
.main-nav .nav-contact:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px var(--gold-mid),0 12px 26px -8px rgba(168,130,47,.55)}
.nav-contact span{margin-left:12px;font-size:15px;color:var(--gold-light)}

/* ---------- Gold text helpers ---------- */
.hero-greeting{color:var(--gold)}
.eyebrow span[aria-hidden],.section-number,.service-index,.company-number{color:var(--gold)}
.display-title em,.work-total p,.card-name{color:var(--gold-deep)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .display-title em,.work-total p{
    background:var(--gold-text);background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    padding-right:.08em;
  }
  .work-total p>span{-webkit-text-fill-color:transparent}

  /* Headline: polished black with a gold light sweep */
  .personal-heading .hero-name{
    text-shadow:none;
    background:
      linear-gradient(100deg,transparent 0 46%,rgba(232,200,120,.95) 48.6%,#fff6d6 50%,rgba(232,200,120,.95) 51.4%,transparent 54% 100%) no-repeat,
      linear-gradient(180deg,#3a3a3a 0%,#111 45%,#000 55%,#2a2a2a 100%);
    background-size:300% 100%,100% 100%;
    background-position:150% 0,0 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 3px rgba(0,0,0,.18)) drop-shadow(0 14px 22px rgba(168,130,47,.18));
    animation:sheen 7s var(--ease) 1s infinite;
  }
  .personal-heading .name-period{
    background:var(--gold-foil);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .card-name{
    text-shadow:none;background:var(--gold-text);background-size:200% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 2px 2px rgba(111,82,22,.25));
  }
}
@keyframes sheen{0%{background-position:150% 0,0 0}45%,100%{background-position:-50% 0,0 0}}

/* ---------- Links ---------- */
.text-link{border-bottom:0;position:relative}
.text-link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,#bbb,#bbb);transition:height .25s}
.text-link::before{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-foil);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);z-index:1}
.text-link:hover::before{transform:scaleX(1)}
.text-link span[aria-hidden]{color:var(--gold)}
.hero-bottom .text-link::after,.hero-bottom .text-link::before{display:none}

/* ---------- Portrait ---------- */
.hero-portrait::before{
  content:"";position:absolute;z-index:-2;inset:6% -12% 18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(234,211,154,.65),rgba(234,211,154,0));
  filter:blur(8px);
}
.portrait-outline{
  border:1.5px solid transparent;
  background:conic-gradient(from var(--ring-angle),#ead39a,#a8822f,#fff6d6,#c9a24a,#ead39a 60%,#8a6a22,#ead39a) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
  animation:ring 9s linear infinite;
}
.portrait-outline::after{border-color:rgba(201,162,74,.35)}
@keyframes ring{to{--ring-angle:360deg}}
.portrait-image{box-shadow:0 0 0 1px rgba(201,162,74,.5),0 30px 60px -24px rgba(23,23,23,.45),0 20px 50px -20px rgba(168,130,47,.45)}
.portrait-image::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    linear-gradient(155deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.08) 28%,rgba(255,255,255,0) 42%),
    linear-gradient(110deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%) no-repeat;
  background-size:100% 100%,250% 100%;background-position:0 0,160% 0;
  transition:background-position 1.1s var(--ease);
}
.hero-portrait:hover .portrait-image::after{background-position:0 0,-60% 0}
.hero-portrait figcaption{color:var(--gold)}

/* ---------- Work totals ---------- */
.work-total{position:relative}
.work-total p{filter:drop-shadow(0 6px 12px rgba(168,130,47,.18))}

/* ---------- Brand strip as glossy chips ---------- */
.brand-strip{border-top:0;gap:14px;padding:22px 0 26px}
.brand-strip a{
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:16px 14px;border-radius:999px;
  background:linear-gradient(180deg,#fff 0%,#f6f3ec 100%);
  border:1px solid rgba(201,162,74,.28);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(168,130,47,.08),var(--shadow-soft);
  transition:transform .3s var(--ease),box-shadow .3s,color .3s,border-color .3s;
}
.brand-strip a:hover{transform:translateY(-3px);color:var(--ink);border-color:rgba(201,162,74,.6);box-shadow:inset 0 1px 0 #fff,var(--shadow-gold)}

/* ---------- Shared glass surface ---------- */
.hero-contact,.service,.company,.contact-card,#contact-dialog{--mx:50%;--my:0%}
.hero-contact{
  border:1px solid var(--glass-edge);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));
  box-shadow:0 0 0 1px rgba(201,162,74,.16),var(--shadow-soft);
  padding:24px 30px!important;margin-bottom:8px;
}
.hero-contact-cell a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.hero-contact-cell a:hover{text-decoration:none;background-size:100% 1px}

/* Section dividers become a soft gold hairline */
.section{border-bottom:0;position:relative}
.section::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,74,.45),transparent)}
.section-number{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(180deg,#fff,#f5efe0);border:1px solid rgba(201,162,74,.4);box-shadow:inset 0 1px 0 #fff,0 4px 10px -4px rgba(168,130,47,.4);font-weight:700}

/* ---------- Services as glass cards ---------- */
.service-grid{gap:22px}
.service,.service:first-child,.service:last-child{
  position:relative;overflow:hidden;isolation:isolate;
  padding:36px 34px 34px;border:1px solid var(--glass-edge);border-radius:var(--radius);
  background:linear-gradient(170deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.7) 60%,rgba(248,239,214,.55) 100%);
  box-shadow:0 0 0 1px rgba(201,162,74,.16),inset 0 1px 0 #fff,var(--shadow-soft);
  transition:transform .45s var(--ease),box-shadow .45s;
}
.service::before,.company::before,.contact-card::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(234,211,154,.45),transparent 45%);
}
.service:hover,.company:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(201,162,74,.45),inset 0 1px 0 #fff,var(--shadow-gold)}
.service:hover::before,.company:hover::before,.contact-card:hover::before{opacity:1}
.service-index{
  display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 10px;border-radius:999px;
  font-weight:700;font-size:16px;background:linear-gradient(180deg,#fff,#f3ead2);
  border:1px solid rgba(201,162,74,.45);box-shadow:inset 0 1px 0 #fff,0 6px 14px -6px rgba(168,130,47,.5);
}
.service p{color:#555}

/* ---------- Companies as glossy rows ---------- */
.company-list{border-top:0;display:grid;gap:12px}
.company{
  position:relative;overflow:hidden;isolation:isolate;border:1px solid var(--glass-edge);border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.66));
  box-shadow:0 0 0 1px rgba(201,162,74,.14),inset 0 1px 0 #fff,var(--shadow-soft);
  transition:transform .4s var(--ease),box-shadow .4s;
}
.company summary{padding-inline:26px}
.company-body{padding-right:26px}
.company[open]{box-shadow:0 0 0 1px rgba(201,162,74,.5),inset 0 1px 0 #fff,var(--shadow-gold);background:linear-gradient(180deg,#fff,rgba(248,239,214,.6))}
.company[open]::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--gold-foil)}
.company:hover{transform:translateY(-2px)}
.company-toggle{width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#fff,#f3ead2);border:1px solid rgba(201,162,74,.45);box-shadow:inset 0 1px 0 #fff,0 6px 14px -6px rgba(168,130,47,.5)}
.company-toggle::before,.company-toggle::after{top:16px;left:9px;width:14px;background:var(--gold-deep)}
.company[open] .company-toggle{background:var(--gold-foil)}
.company[open] .company-toggle::before,.company[open] .company-toggle::after{background:#fff}

/* ---------- Business card with gold foil and holo sheen ---------- */
.contact-card{
  position:relative;overflow:hidden;isolation:isolate;border-radius:20px;border:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,1) 0%,rgba(250,247,240,1) 45%,rgba(244,238,224,1) 100%);
  box-shadow:0 0 0 1px rgba(201,162,74,.55),0 1px 1px rgba(0,0,0,.06),0 30px 60px -28px rgba(23,23,23,.4),0 30px 70px -30px rgba(168,130,47,.5);
}
.contact-card:hover{box-shadow:0 0 0 1px var(--gold-mid),0 1px 1px rgba(0,0,0,.06),0 40px 70px -30px rgba(23,23,23,.45),0 40px 90px -30px rgba(168,130,47,.6)}
.contact-card::before{
  opacity:.9;
  background:
    radial-gradient(500px circle at var(--mx) var(--my),rgba(255,255,255,.85),transparent 40%),
    linear-gradient(115deg,transparent 20%,rgba(255,236,190,.35) 35%,rgba(220,230,255,.35) 45%,rgba(255,220,240,.25) 55%,transparent 70%);
  background-size:100% 100%,250% 100%;
  animation:holo 8s ease-in-out infinite alternate;
}
@keyframes holo{from{background-position:0 0,100% 0}to{background-position:0 0,0 0}}
.contact-card::after{
  content:"";position:absolute;inset:12px;border-radius:12px;pointer-events:none;z-index:-1;
  border:1px solid transparent;background:var(--gold-foil) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);
  opacity:.75;
}
.card-role{color:#3b3b3b}
.card-role span{color:var(--gold-mid)}
.card-hint{color:var(--gold)}

/* ---------- Glossy buttons ---------- */
.button{
  position:relative;overflow:hidden;border-radius:999px;padding-inline:24px;
  background:linear-gradient(180deg,#fff 0%,#f4f1ea 100%);border:1px solid rgba(201,162,74,.45);
  box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(23,23,23,.25);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.button::after,.hero-save::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%) no-repeat;
  background-size:250% 100%;background-position:160% 0;transition:background-position .9s var(--ease);
}
.button:hover::after,.hero-save:hover::after{background-position:-60% 0}
.button:hover{transform:translateY(-2px);border-color:var(--gold-mid);box-shadow:inset 0 1px 0 #fff,var(--shadow-gold)}
.button-dark{
  background:linear-gradient(180deg,#333 0%,#121212 48%,#000 52%,#1a1a1a 100%);color:#fff;border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px rgba(201,162,74,.7),0 10px 24px -10px rgba(0,0,0,.6);
}
.button-dark span{color:var(--gold-light)}
.button-dark::after{background-image:linear-gradient(110deg,transparent 30%,rgba(255,236,190,.35) 50%,transparent 70%)}
.button-dark:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 1px var(--gold-mid),0 16px 30px -10px rgba(168,130,47,.65)}

.hero-save{
  position:relative;overflow:hidden;padding:11px 18px;border-radius:999px;color:var(--ink);
  background:linear-gradient(180deg,#fff,#f4f1ea);border:1px solid rgba(201,162,74,.45);
  box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(23,23,23,.25);transition:transform .3s var(--ease),box-shadow .3s;
}
.hero-save span{color:var(--gold)}
.hero-save:hover{text-decoration:none;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,var(--shadow-gold)}

/* ---------- Dialog ---------- */
#contact-dialog{border-radius:26px;border:1px solid var(--glass-edge);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(253,250,243,.94));
  box-shadow:0 0 0 1px rgba(201,162,74,.4),0 40px 100px -30px rgba(23,23,23,.45),0 30px 80px -30px rgba(168,130,47,.45)}
#contact-dialog::backdrop{background:rgba(253,251,246,.65);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
#contact-dialog[open]{animation:pop .45s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.dialog-close{border-radius:50%;background:transparent}
.dialog-close:hover{background:var(--gold-pale)}
.dialog-person>img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--gold-mid),0 10px 20px -8px rgba(168,130,47,.6)}
.dialog-contact-links>a,.dialog-contact-links>button{border-radius:14px;border-color:rgba(201,162,74,.35);background:linear-gradient(180deg,#fff,#f6f2e9);box-shadow:inset 0 1px 0 #fff;transition:transform .25s var(--ease),border-color .25s}
.dialog-contact-links>a:hover,.dialog-contact-links>button:hover{border-color:var(--gold-mid);transform:translateY(-2px)}
.dialog-contact-links span{color:var(--gold)}
.share-details{border-radius:12px}

/* ---------- Footer ---------- */
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,74,.5),transparent)}
.back-top span{color:var(--gold)}

/* ---------- Mobile ---------- */
@media(max-width:1000px){
  .service,.service:first-child,.service:last-child{padding:30px 24px}
}
@media(max-width:700px){
  .site-header{padding-block:16px 14px}
  .js .site-header.menu-open .main-nav{border-top-color:rgba(201,162,74,.25)}
  .js .site-header.menu-open::before{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 30px -18px rgba(23,23,23,.3)}
  .main-nav .nav-contact{padding:9px 16px!important}
  .hero-contact{padding:20px!important}
  .brand-strip{gap:10px}
  .brand-strip a{padding:13px 10px;font-size:15px}
  .service-grid{gap:16px}
  .service,.service:first-child,.service:last-child{padding:26px 22px 24px!important;border-bottom:1px solid var(--glass-edge)}
  .service-index{position:static;margin-bottom:18px;min-width:40px;height:40px;font-size:14px}
  .company summary{padding-inline:16px}
  .company-body{padding:0 16px 22px 48px}
  .company-toggle{width:30px;height:30px}
  .company-toggle::before,.company-toggle::after{top:14px;left:7px}
  .contact-card{border-radius:16px}
  .contact-card::after{inset:8px;border-radius:10px}
  .section-number{width:26px;height:26px}
}

/* ---------- Respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  body::after,.personal-heading .hero-name,.portrait-outline,.contact-card::before,#contact-dialog[open]{animation:none!important}
}

/* ---------- Print: drop the effects ---------- */
@media print{
  body{background:#fff}
  body::before,body::after,.scroll-progress,.portrait-outline,.contact-card::before,.contact-card::after,.hero-portrait::before{display:none!important}
  .personal-heading .hero-name,.display-title em,.work-total p,.card-name,.name-period{background:none!important;-webkit-text-fill-color:#000!important;color:#000!important;filter:none!important}
  .site-header{position:static}
  .service,.company,.hero-contact{box-shadow:none!important;border:1px solid #ccc}
}