:root{
  --bg:#020817;
  --surface:#030b1a;
  --text:#f8fafc;
  --muted:#c3ccd8;
  --faint:#94a1b3;
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.28);
  --accent:#4f8cff;
  --accent2:#ff8b98;
  --red:#e11d2e;
  --panel:rgba(255,255,255,.04);
  --map-filter:grayscale(1) contrast(.92) brightness(.98);
}
html[data-theme="light"]{
  --bg:#eef2f7;
  --surface:#fff;
  --text:#101827;
  --muted:#475569;
  --faint:#5b6a7e;
  --line:rgba(16,24,39,.14);
  --line-strong:rgba(16,24,39,.34);
  --accent:#245bb5;
  --accent2:#c7243c;
  --red:#c7243c;
  --panel:rgba(255,255,255,.72);
  --map-filter:grayscale(1) contrast(1.02);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  transition:background-color .35s ease,color .35s ease;
}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--red);color:#fff}
input,textarea{caret-color:var(--accent)}
:focus-visible{outline-color:var(--accent)}

.skip-link{position:absolute;left:1rem;top:-3rem;z-index:100;background:#fff;color:#0b121c;padding:.6rem 1.1rem;border-radius:6px;font-size:.875rem;font-weight:600;transition:top 150ms ease}
.skip-link:focus{top:1rem}

/* ── header — the same fixed bar every page uses ── */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  transition:background-color .3s ease;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{display:block;width:150px;height:52px;object-fit:contain;object-position:center}
@media (max-width:767px){.brand img{width:124px;height:48px}}
.header-actions{display:flex;align-items:center;gap:12px}
.nav-links a{position:relative;color:#d1d5db;transition:color .15s ease}
html[data-theme="light"] .nav-links a{color:#475569}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:#fff}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a[aria-current="page"]{color:#102033}
.nav-links a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:2px;
}
.theme-toggle{
  width:34px;
  height:34px;
  display:inline-grid;
  place-items:center;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:1px solid rgb(255 255 255 / .22);
  border-radius:50%;
  color:inherit;
  cursor:pointer;
  transition:transform 180ms ease,background-color 180ms ease,border-color 180ms ease;
}
.theme-toggle:hover{transform:rotate(12deg) scale(1.05);background:rgb(255 255 255 / .1)}
html[data-theme="light"] .theme-toggle{border-color:rgb(16 32 51 / .2)}
/* the toggle draws its own sun / moon (stroke: currentColor) instead of the
   Unicode dingbats, which some platforms render through the colour-emoji font
   and paint as a solid white disc regardless of theme */
.theme-toggle svg{width:16px;height:16px;display:block}
.theme-toggle .icon-moon{display:none}
html[data-theme="light"] .theme-toggle .icon-sun{display:none}
html[data-theme="light"] .theme-toggle .icon-moon{display:block}

/* ── primary nav — one shared bar on Home, About, Projects, Contact and Yrkon.
      A 1fr / auto / 1fr grid keeps the links on the page centre line whatever
      the logo and the theme button measure. ── */
.nav-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem;
}
.nav-bar > :first-child { justify-self: start; }
.nav-bar > :last-child { justify-self: end; }
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .nav-bar { padding: 1.5rem 3rem; }
  .nav-links { gap: 3rem; }
}
@media (max-width: 767px) {
  .nav-bar { padding: 1.25rem 1.25rem; gap: 0.75rem; }
  .nav-links { gap: 1.35rem; font-size: 0.8125rem; }
}
@media (max-width: 559px) {
  .nav-bar { grid-template-columns: 1fr auto; row-gap: 0.85rem; padding: 1rem 1.25rem; }
  .nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: center; gap: 1.5rem; }
}

/* ── page shell ──
   The canvas carries the same mesh the Home contact block uses, so this page
   sits in the same world instead of on flat navy. It stops before the footer,
   which stays identical on every page. */
.contact-canvas{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(58% 46% at 14% 82%, rgb(225 29 46 / .16), transparent 68%),
    radial-gradient(50% 44% at 88% 10%, rgb(34 211 238 / .11), transparent 70%),
    radial-gradient(70% 55% at 50% 38%, rgb(79 140 255 / .14), transparent 72%),
    linear-gradient(180deg, #030b1a 0%, #01060f 58%, #01040b 100%);
}
html[data-theme="light"] .contact-canvas{
  background:
    radial-gradient(58% 46% at 14% 82%, rgb(199 36 60 / .1), transparent 68%),
    radial-gradient(50% 44% at 88% 10%, rgb(34 211 238 / .08), transparent 70%),
    radial-gradient(70% 55% at 50% 38%, rgb(36 91 181 / .1), transparent 72%),
    linear-gradient(180deg, #f6f9fc 0%, #eef2f7 100%);
}
.contact-glow{
  position:absolute;
  left:58%;
  top:30%;
  width:min(110%,900px);
  aspect-ratio:2 / 1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:radial-gradient(ellipse at center, rgb(125 184 255 / .16), rgb(79 140 255 / .06) 45%, transparent 72%);
  filter:blur(34px);
}
html[data-theme="light"] .contact-glow{
  background:radial-gradient(ellipse at center, rgb(36 91 181 / .12), rgb(36 91 181 / .05) 45%, transparent 72%);
}

main{
  position:relative;
  max-width:80rem;
  margin:0 auto;
  padding:8rem 1.5rem clamp(3rem,6vw,5rem);
}
@media (min-width:1024px){main{padding-left:3rem;padding-right:3rem}}
@media (max-width:767px){main{padding:7.5rem 1.25rem 3rem}}
@media (max-width:559px){main{padding-top:9rem}}

.contact-title{
  margin:0;
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:clamp(2.15rem,5.2vw,4.25rem);
  line-height:1;
  letter-spacing:-.035em;
}
.contact-title .accent{color:var(--red)}

/* ── the body: pointer and details on the left, the brief on the right ── */
.contact-body{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  align-items:start;
  gap:clamp(2rem,4.5vw,4rem);
  margin-top:clamp(2.25rem,4.5vw,3.25rem);
}
.contact-aside{display:flex;flex-direction:column;gap:clamp(1.75rem,3vw,2.5rem)}

.pointer{
  width:clamp(5.5rem,11vw,9.5rem);
  height:auto;
  color:var(--text);
  transition:transform 420ms cubic-bezier(.23,1,.32,1);
}
/* the one moment of motion on this page: the arrow commits to the form the
   instant the visitor starts filling it in */
.contact-body:focus-within .pointer{transform:translateX(14px)}

.contact-details{
  display:flex;
  flex-direction:column;
  gap:1.35rem;
  margin:0;
}
.detail dt{
  margin:0 0 .3rem;
  color:var(--accent);
  font-family:'Space Grotesk',sans-serif;
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.detail dd{
  margin:0;
  font-size:.98rem;
  line-height:1.45;
}
.detail a{
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
}
.detail a:hover,.detail a:focus-visible{border-bottom-color:var(--line-strong)}

/* ── the brief ── */
.brief{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem 1.4rem;
  padding:clamp(1.5rem,2.6vw,2.1rem);
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel);
}
.field{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.field--wide{grid-column:1 / -1}
.field > label{font-size:.88rem;color:var(--muted);transition:color .18s ease}
.field input,
.field textarea{
  width:100%;
  padding:.3rem 0 .7rem;
  border:0;
  border-bottom:1px solid var(--line-strong);
  border-radius:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:.98rem;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.field textarea{min-height:4.75rem;resize:vertical;line-height:1.5}
.field input::placeholder,
.field textarea::placeholder{color:var(--faint);opacity:1}
.field input:hover,
.field textarea:hover{border-bottom-color:var(--text)}
.field input:focus-visible,
.field textarea:focus-visible{
  outline:none;
  border-bottom-color:var(--accent);
  box-shadow:0 1px 0 0 var(--accent);
}
.field:focus-within > label{color:var(--accent)}
.field-error{
  margin:0;
  font-size:.78rem;
  line-height:1.3;
  color:var(--accent2);
}
.field-error:empty{display:none}
.field[data-invalid="true"] input,
.field[data-invalid="true"] textarea{border-bottom-color:var(--accent2)}

.brief-actions{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1.25rem;
  margin-top:.25rem;
}
.send{
  position:relative;
  padding:.8rem 1.9rem;
  border:0;
  background:none;
  color:var(--text);
  font-family:'Space Grotesk',sans-serif;
  font-size:1rem;
  cursor:pointer;
  transition:transform 160ms ease;
}
.send span{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:6px;
}
.send::before,
.send::after{
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  border:2px solid var(--red);
  transition:transform 220ms cubic-bezier(.23,1,.32,1);
}
.send::before{left:0;top:0;border-right:0;border-bottom:0}
.send::after{right:0;bottom:0;border-left:0;border-top:0}
.send:hover::before,.send:focus-visible::before{transform:translate(-5px,-5px)}
.send:hover::after,.send:focus-visible::after{transform:translate(5px,5px)}
.send:active{transform:scale(.98)}
.send:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.send[data-busy="true"]{opacity:.55;pointer-events:none}

.brief-status{
  margin:0;
  max-width:26rem;
  font-size:.86rem;
  line-height:1.4;
  color:var(--muted);
  opacity:0;
  transform:translateY(4px);
  transition:opacity .22s ease,transform .22s ease;
}
.brief-status[data-shown="true"]{opacity:1;transform:translateY(0)}
.brief-status[data-tone="error"]{color:var(--accent2)}

/* ── where we are ── */
.map-section{margin-top:clamp(2.75rem,5.5vw,4.5rem)}
.map-frame{
  position:relative;
  aspect-ratio:4.4;
  max-height:17rem;
  min-height:11rem;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
}
/* shown through the iframe's own background if the embed is blocked or offline,
   so the band still reads as designed rather than as a hole */
.map-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:1rem;
  text-align:center;
  font-size:.86rem;
  color:var(--faint);
}
.map-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  filter:var(--map-filter);
}
.map-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  padding-top:.85rem;
  font-size:.78rem;
  color:var(--faint);
}
.map-meta a{border-bottom:1px solid var(--line);transition:border-color .18s ease,color .18s ease}
.map-meta a:hover{color:var(--text);border-bottom-color:var(--line-strong)}

/* ── footer — the same markup and rules on Home, About, Projects, Contact and
      Yrkon; the inner column lines up with .nav-bar above it ── */
.site-footer {
  --f-line: rgba(255, 255, 255, 0.13);
  --f-accent: #4f8cff;
  --f-muted: #c3ccd8;
  --f-faint: #8d98a8;
  --f-text: #f8fafc;
  border-top: 1px solid var(--f-line);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--f-muted);
}
html[data-theme="light"] .site-footer {
  --f-line: rgba(16, 24, 39, 0.14);
  --f-accent: #245bb5;
  --f-muted: #475569;
  --f-faint: #5b6a7e;
  --f-text: #101827;
}
.site-footer-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 34px 1.5rem 30px;
}
.site-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}
.site-footer h2 {
  margin: 0 0 9px;
  color: var(--f-accent);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-footer p { margin: 5px 0; }
.site-footer a {
  display: block;
  margin: 5px 0;
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--f-text); }
.site-footer-base {
  margin-top: 34px;
  text-align: center;
}
.site-footer-base p { margin: 0; }
.site-footer-base .site-footer-credit {
  margin-top: 10px;
  font-size: 0.66rem;
  color: var(--f-faint);
}
@media (min-width: 1024px) {
  .site-footer-inner { padding: 34px 3rem 30px; }
}
@media (max-width: 767px) {
  .site-footer-inner { padding: 28px 1.25rem 26px; }
  .site-footer-cols { grid-template-columns: 1fr 1fr; }
  .site-footer-cols > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 519px) {
  .site-footer-cols { grid-template-columns: 1fr; }
  .site-footer-cols > div:last-child { grid-column: auto; }
}

/* ── entrance ── */
.reveal{opacity:0;transform:translateY(16px);animation:rise .72s cubic-bezier(.23,1,.32,1) forwards}
.reveal.delay-1{animation-delay:90ms}
.reveal.delay-2{animation-delay:180ms}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

@media (max-width:900px){
  .contact-body{grid-template-columns:1fr;gap:2.25rem}
  .contact-aside{
    flex-direction:row;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:1.5rem 2.5rem;
  }
  .pointer{width:6rem}
  .contact-details{flex:1 1 18rem}
  .map-frame{aspect-ratio:2.6;max-height:none}
}
@media (max-width:620px){
  .brief{grid-template-columns:1fr}
  .contact-aside{flex-direction:column;align-items:stretch}
  .map-frame{aspect-ratio:1.7}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
}

/* *** */

.detail .cofounder-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.35rem;
  padding-bottom: 0.25rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 500;
  text-decoration: none;
  transition: color 200ms ease;
}

.detail .cofounder-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 250ms ease, opacity 250ms ease;
  opacity: 0.65;
}

.detail .cofounder-link span {
  transition: transform 250ms ease;
}

.detail .cofounder-link:hover,
.detail .cofounder-link:focus-visible {
  color: #fff;
}

.detail .cofounder-link:hover::after,
.detail .cofounder-link:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

.detail .cofounder-link:hover span,
.detail .cofounder-link:focus-visible span {
  transform: translateX(3px);
}

.detail .cofounder-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 4px;
}