/* G-Label. Minimal black and white, light + dark modes.
   Headings: Syne. Body: Gilroy (falls back to Figtree). */

@font-face{font-family:"Gilroy";font-weight:400;font-style:normal;font-display:swap;src:local("Gilroy Regular"),local("Gilroy-Regular"),url("../fonts/Gilroy-Regular.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-weight:500;font-style:normal;font-display:swap;src:local("Gilroy Medium"),local("Gilroy-Medium"),url("../fonts/Gilroy-Medium.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-weight:600;font-style:normal;font-display:swap;src:local("Gilroy SemiBold"),local("Gilroy-SemiBold"),url("../fonts/Gilroy-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Gilroy";font-weight:700;font-style:normal;font-display:swap;src:local("Gilroy Bold"),local("Gilroy-Bold"),url("../fonts/Gilroy-Bold.woff2") format("woff2")}

:root{
  /* Light mode (default) */
  --bg:#fff;--fg:#000;--muted:#666;--soft:#f1f1f1;--hero:#e5e5e5;--rule:#bdbdbd;
  --hdr-bg:#fff;--hdr-fg:#000;--hdr-line:#e3e3e3;
  --dk-bg:#000;--dk-fg:#fff;--dk-muted:#aaa;--dk-line:#555;
  --display:"Syne","Arial Narrow",Arial,sans-serif;
  --body:"Gilroy","Figtree","Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;--hh:72px;
  color-scheme:light;
}
/* Dark mode: explicit choice... */
:root[data-theme="dark"]{
  --bg:#0c0c0c;--fg:#f2f2f2;--muted:#9a9a9a;--soft:#141414;--hero:#171717;--rule:#333;
  --hdr-bg:#000;--hdr-fg:#fff;--hdr-line:#222;
  --dk-bg:#000;--dk-fg:#fff;--dk-muted:#a0a0a0;--dk-line:#444;
  color-scheme:dark;
}
/* ...or the visitor's system setting when no explicit choice has been made */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0c0c0c;--fg:#f2f2f2;--muted:#9a9a9a;--soft:#141414;--hero:#171717;--rule:#333;
    --hdr-bg:#000;--hdr-fg:#fff;--hdr-line:#222;
    --dk-bg:#000;--dk-fg:#fff;--dk-muted:#a0a0a0;--dk-line:#444;
    color-scheme:dark;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:1.0625rem;line-height:1.65;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--display);line-height:1.08;letter-spacing:-.015em;margin:0}
p{margin:0 0 1em}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
:focus-visible{outline:3px solid var(--fg);outline-offset:3px;box-shadow:0 0 0 6px var(--bg)}
.portfolio :focus-visible,.contact :focus-visible,.site-footer :focus-visible,.lightbox :focus-visible{outline-color:var(--dk-fg);box-shadow:0 0 0 6px var(--dk-bg)}

/* Header */
.site-header{position:fixed;inset:0 0 auto 0;height:var(--hh);background:var(--hdr-bg);color:var(--hdr-fg);border-bottom:1px solid var(--hdr-line);z-index:50;transition:background .3s,color .3s}
.bar{height:100%;display:flex;align-items:center;gap:1.75rem}
.logo{display:flex;align-items:center;text-decoration:none}
.logo img{height:32px;width:auto}
.logo-dark{display:none!important}
:root[data-theme="dark"] .logo-light{display:none!important}
:root[data-theme="dark"] .logo-dark{display:block!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-light{display:none!important}
  :root:not([data-theme="light"]) .logo-dark{display:block!important}
}
.nav{margin-left:auto;display:flex;gap:2rem}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;padding:.4rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s}
.nav a:hover{background-size:100% 1px}
.socials{display:flex;gap:1rem;align-items:center}
.socials a{display:grid;place-items:center;width:32px;height:32px;opacity:.8}
.socials a:hover{opacity:1}
.theme-toggle{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--hdr-line);border-radius:50%;background:transparent;color:var(--hdr-fg);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.theme-toggle:hover{background:var(--hdr-fg);color:var(--hdr-bg);border-color:var(--hdr-fg)}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--hdr-fg);margin:6px auto;transition:transform .25s}
.burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* Buttons */
.btn{display:inline-block;padding:.85rem 1.5rem;border:2px solid var(--fg);background:transparent;color:var(--fg);font:600 1rem var(--body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.light{border-color:var(--dk-fg);color:var(--dk-fg)}
.btn.light:hover{background:var(--dk-fg);color:var(--dk-bg)}

/* Hero */
.hero{background:var(--hero);padding:calc(var(--hh) + 5rem) 0 6rem;transition:background .3s}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center}
.hero-title{font-weight:800;font-size:clamp(2.5rem,5.8vw,5.2rem);white-space:pre-line;margin-bottom:1.75rem}
.hero-text{max-width:34rem;font-size:1.1rem;white-space:pre-line}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero-media{position:relative}
.hero-media::before{content:"";position:absolute;inset:1.25rem -1.25rem -1.25rem 1.25rem;background:var(--fg)}
.hero-media img{position:relative;width:100%;aspect-ratio:1;object-fit:cover}

/* One orchestrated moment: the hero reveals on load */
@media (prefers-reduced-motion:no-preference){
  .js .hero-title,.js .hero-text,.js .hero-actions{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .js .hero-text{animation-delay:.12s}.js .hero-actions{animation-delay:.22s}
  .js .hero-media img{animation:wipe 1.1s cubic-bezier(.7,0,.2,1) .1s both}
  .js .hero-media::before{animation:wipe 1.1s cubic-bezier(.7,0,.2,1) .3s both}
}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}

/* Portfolio (always a dark band for contrast) */
.portfolio{background:var(--dk-bg);color:var(--dk-fg);padding:5.5rem 0 0}
.port-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.portfolio h2,.services h2,.about h2,.contact h2{font-weight:800;font-size:clamp(1.9rem,3.8vw,3.2rem);letter-spacing:-.01em}
.lead{margin:1rem 0 0;opacity:.72;max-width:34rem;white-space:pre-line}
.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font:500 .95rem var(--body);color:var(--dk-fg);background:transparent;border:1px solid var(--dk-line);padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--dk-fg)}
.chip.is-on{background:var(--dk-fg);color:var(--dk-bg);border-color:var(--dk-fg)}
.grid{display:grid;grid-template-columns:repeat(4,1fr)}
.tile{position:relative;display:block;padding:0;border:0;background:#111;aspect-ratio:1;overflow:hidden;cursor:pointer;color:#fff;text-align:left;transition:opacity .28s,transform .28s}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.tile .ph{display:block;width:100%;height:100%;background:#1a1a1a}
.tile-info{position:absolute;inset:auto 0 0 0;padding:1.25rem;display:flex;flex-direction:column;gap:.15rem;background:linear-gradient(transparent,rgba(0,0,0,.88));transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.tile-info b{font:700 1.05rem var(--display)}
.tile-info small{opacity:.75}
.tile:hover img,.tile:focus-visible img{transform:scale(1.05)}
.tile:hover .tile-info,.tile:focus-visible .tile-info{transform:none}
.tile.is-out{opacity:0;transform:scale(.96)}
.tile.is-gone{display:none}
@media (hover:none){.tile-info{transform:none;background:linear-gradient(transparent 40%,rgba(0,0,0,.8))}}
.empty{padding:3rem 0;color:var(--dk-muted)}

/* About */
.about{padding:6rem 0;background:var(--bg);transition:background .3s}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:5rem;align-items:center}
.about-media img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.about-media:hover img{filter:none}
.about h2{margin-bottom:1.5rem;white-space:pre-line}
.about p{max-width:36rem;white-space:pre-line}
.stats{display:flex;gap:3rem;margin:2.5rem 0 0;padding-top:1.75rem;border-top:2px solid var(--fg)}
.stats dt{font:800 2.3rem/1 var(--display)}
.stats dd{margin:.35rem 0 0;color:var(--muted);font-size:.95rem}

/* Services */
.services{background:var(--soft);padding:6rem 0;transition:background .3s}
.sec-head{margin-bottom:3.5rem}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--fg)}
.svc{padding:2rem 2rem 2.5rem 0;border-bottom:1px solid var(--rule);transition:background .25s,color .25s,padding .25s}
.svc:nth-child(3n+2),.svc:nth-child(3n){padding-left:2rem}
.svc h3{font-size:1.3rem;margin-bottom:.75rem}
.svc p{margin:0;color:var(--muted);white-space:pre-line}
.svc:hover{background:var(--fg);color:var(--bg);padding-left:2rem}
.svc:hover p{color:inherit;opacity:.75}

/* Contact (dark band) */
.contact{background:var(--dk-bg);color:var(--dk-fg);padding:6rem 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem}
.contact h2{white-space:pre-line}
.contact-list{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.5rem}
.contact-list a{text-decoration:underline;text-underline-offset:4px}
.cform{display:grid;gap:1.25rem;align-content:start}
.cform label{display:grid;gap:.35rem;font-weight:500}
.cform input,.cform textarea{font:inherit;color:var(--dk-fg);background:transparent;border:0;border-bottom:2px solid var(--dk-line);padding:.7rem 0;border-radius:0;transition:border-color .2s}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--dk-fg)}
.cform textarea{resize:vertical}
.cform .btn{justify-self:start}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.5em;margin:0;font-weight:500}
.form-msg.err,.form-msg .err{color:#ff9a9a}

/* Footer */
.site-footer{background:var(--dk-bg);color:#999;border-top:1px solid #222;padding:1.5rem 0;font-size:.9rem}
.site-footer .wrap{display:flex;justify-content:space-between;gap:1rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:100;display:grid;place-items:center;padding:4.5rem 1.5rem 2rem;overflow:auto;color:#fff}
.lightbox[hidden]{display:none}
.lb-body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:center;max-width:1100px;width:100%}
.lb-body img{width:100%;max-height:78vh;object-fit:contain;background:#111}
.lb-meta h3{font-size:1.9rem;margin-bottom:.75rem}
.lb-line{color:#aaa}
.lb-meta .btn{margin-top:1rem}
.lb-close,.lb-nav{position:absolute;background:transparent;color:#fff;border:1px solid #666;padding:.55rem 1rem;font:500 .95rem var(--body);cursor:pointer;border-radius:999px}
.lb-close:hover,.lb-nav:hover{background:#fff;color:#000}
.lb-close{top:1rem;right:1rem}
.lb-nav{bottom:1rem}.lb-nav.prev{left:1rem}.lb-nav.next{right:1rem}
.lightbox:not([hidden]){animation:lbin .25s ease-out}
@keyframes lbin{from{opacity:0}to{opacity:1}}
body.lb-open{overflow:hidden}

/* WordPress */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;width:auto;height:auto;margin:0;background:#fff;color:#000;padding:.75rem 1rem;position:fixed;top:.5rem;left:.5rem;z-index:200}
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
@media (max-width:600px){body.admin-bar .site-header{top:0}}

/* Generic pages and single project */
.page-main{padding:calc(var(--hh) + 4rem) 0 5rem;min-height:70vh}
.entry-wrap{max-width:760px}
.entry-wrap h1,.single-meta h1{font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);margin-bottom:1.25rem}
.entry{font-size:1.08rem}
.entry a{text-underline-offset:3px}
.muted{color:var(--muted)}
.single-project{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:start}
.single-img{width:100%;aspect-ratio:1;object-fit:cover;background:var(--soft)}
.navigation.pagination{margin-top:2rem}
.page-numbers{display:inline-block;padding:.4rem .8rem;border:1px solid var(--fg);margin-right:.3rem;text-decoration:none}
.page-numbers.current{background:var(--fg);color:var(--bg)}

/* Responsive */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc:nth-child(n){padding-left:0}.svc:nth-child(2n){padding-left:2rem}
  .svc:hover{padding-left:1.25rem}.svc:nth-child(2n):hover{padding-left:2rem}
  .about-grid,.contact-grid,.hero-grid{gap:3rem}
}
@media (max-width:820px){
  :root{--hh:64px}
  .burger{display:block}
  .socials{display:none}
  .theme-toggle{margin-left:auto}
  .nav{position:fixed;inset:var(--hh) 0 auto 0;background:var(--hdr-bg);border-bottom:1px solid var(--hdr-line);flex-direction:column;gap:0;padding:.5rem 1.25rem 1.5rem;transform:translateY(-120%);transition:transform .3s;visibility:hidden;margin-left:0}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--hdr-line);font-size:1.1rem}
  body.admin-bar .nav{inset-block-start:calc(var(--hh) + 46px)}
  .hero{padding:calc(var(--hh) + 3rem) 0 4.5rem}
  .hero-grid,.about-grid,.contact-grid,.single-project{grid-template-columns:1fr}
  .single-project{gap:2rem}
  .hero-media{margin-right:1.25rem}
  .about{padding:4rem 0}.services,.contact{padding:4rem 0}
  .grid{grid-template-columns:repeat(2,1fr)}
  .lb-body{grid-template-columns:1fr;gap:1.5rem}
  .stats{gap:1.75rem;flex-wrap:wrap}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}.svc:nth-child(n),.svc:hover{padding-left:0}
  .svc:hover{padding-left:1rem}
  .site-footer .wrap{flex-direction:column}
  .logo img{height:26px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}