/* Clayton Agius portfolio — CSS3, no framework.
   Edit the design tokens here to change the entire site's visual language. */
:root{color-scheme:light;
  --bg:#fbfcff;
  --ink:#101d3c;
  --muted:#4c5e7c;
  --blue:#0865ef;
  --surface:rgba(245,249,255,.78);
  --border:rgba(255,255,255,.95);
  --line:#dbe5f3;
  --shadow:0 12px 35px rgba(56,105,174,.08),inset 0 1px 0 #fff;
  --orb:#e3edff;
  --hero:#eaf1ff;
  --content:1100px;
  --font:17px;
  --ease:cubic-bezier(.22,1,.36,1)}

[data-theme=dark]{color-scheme:dark;
  --bg:#080f20;
  --ink:#eef4ff;
  --muted:#b3c3df;
  --blue:#74b1ff;
  --surface:rgba(26,43,75,.8);
  --border:rgba(173,202,255,.2);
  --line:#263955;
  --shadow:0 15px 45px #0003,inset 0 1px 0 #dceaff16;
  --orb:#203e6b;
  --hero:#101f40}

[data-size=small]{--font:16px}
[data-size=large]{--font:21px}

*{box-sizing:border-box}
html{font-size:var(--font);
  scroll-behavior:smooth;
  scroll-padding-top:28px}
body{margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  line-height:1.5;
  transition:background-color .4s,color .4s}
button,select{font:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
button,a{touch-action:manipulation}
button{cursor:pointer;
  color:inherit}
a{color:inherit;
  text-decoration:none}
button{border:0;
  background:none}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--blue);
  outline-offset:5px}
h1,h2,h3,p{margin:0}
h2{font-size:clamp(1.7rem,3vw,2.3rem);
  letter-spacing:-.065em;
  line-height:1.2;
  font-weight:700;
  margin-bottom:1.35rem}
h3{font-size:1rem;
  font-weight:600;
  line-height:1.45}
p{color:var(--muted)}
.icon{width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0}
.sprite{position:absolute;
  width:0;
  height:0;
  overflow:hidden}
.sr-only{position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
.skip-link{position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:var(--bg);
  padding:12px 20px;
  z-index:100}
.skip-link:focus{top:10px}
.glass{background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%)}
.round{display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%}
.topbar{position:absolute;
  z-index:5;
  top:26px;
  left:5%;
  right:116px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px}
.brand{font-weight:750;
  font-size:1.65rem;
  letter-spacing:-.1em;
  color:var(--blue)}
.brand span{color:var(--ink)}
.settings{display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border-radius:40px;
  font-size:.8rem}
.settings .icon{width:19px;
  height:19px}
.segmented{display:flex;
  align-items:center;
  border-radius:24px;
  background:var(--orb);
  padding:3px;
  gap:2px}
.settings button{min-width:36px;
  min-height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:background .25s,color .25s,box-shadow .25s}
.settings button[aria-pressed=true]{background:#0764ee;
  color:#fff;
  box-shadow:0 3px 12px #1268e94d}
.sizes [data-size-choice=small]{font-size:13px}
.sizes [data-size-choice=medium]{font-size:17px}
.sizes [data-size-choice=large]{font-size:21px}
.language select{max-width:150px;
  border:0;
  background:transparent;
  color:var(--ink);
  padding:9px 5px;
  cursor:pointer;
  border-radius:30px;
  font-size:14px}
.language option{background:var(--bg);
  color:var(--ink)}
#motion-toggle{color:var(--muted)}
#menu-open{display:none}
.desktop-nav{position:fixed;
  z-index:12;
  top:50%;
  right:22px;
  transform:translateY(-50%);
  padding:8px;
  border-radius:40px;
  display:flex;
  flex-direction:column;
  gap:7px}
.desktop-nav a{position:relative;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--muted);
  transition:background .3s,color .3s}
.desktop-nav a:hover{background:var(--orb)}
.desktop-nav a.active{background:#0967f2;
  color:white;
  box-shadow:0 5px 16px #066cff4d}
.desktop-nav a span{position:absolute;
  right:60px;
  white-space:nowrap;
  font-size:14px;
  background:var(--ink);
  color:var(--bg);
  padding:6px 12px;
  border-radius:10px;
  opacity:0;
  pointer-events:none;
  transform:translateX(6px);
  transition:.2s}
.desktop-nav a:hover span,.desktop-nav a:focus-visible span{opacity:1;
  transform:none}

/* The background uses three lightweight CSS ribbons, not video/WebGL. */
.hero{position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--hero)}
.ribbons{position:absolute;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 75% 20%,#d3dfff 0,transparent 52%),radial-gradient(ellipse at 12% 90%,#d5eeff 0,transparent 55%)}
.ribbons i{position:absolute;
  display:block;
  width:90%;
  height:75%;
  border-radius:48% 52% 44% 56%;
  border:2px solid #fff9;
  background:linear-gradient(145deg,#ffffff05 25%,#81aeff45 48%,#ffffff90 50%,#b6b7ff55 55%,#ffffff08 72%);
  box-shadow:inset 12px 12px 40px #fff8,0 20px 60px #76a8f424;
  transform:rotate(-28deg);
  animation:drift 18s ease-in-out infinite alternate}
.ribbons i:nth-child(1){top:14%;
  left:26%}
.ribbons i:nth-child(2){top:64%;
  left:-25%;
  animation-delay:-7s;
  transform:rotate(24deg)}
.ribbons i:nth-child(3){top:-65%;
  left:-17%;
  animation-delay:-12s}
.hero-inner{max-width:var(--content);
  margin:auto;
  padding:145px 10px 65px;
  min-height:680px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  position:relative}
.hero-copy{position:relative;
  z-index:2;
  padding-bottom:50px}
.hero h1{font-size:clamp(3rem,5.6vw,5rem);
  letter-spacing:-.075em;
  line-height:1.06;
  white-space:nowrap;
  margin-bottom:20px}
.hero h1 span{color:var(--blue)}
.headline{font-size:clamp(1.35rem,2.4vw,2rem);
  letter-spacing:-.055em;
  line-height:1.3;
  color:var(--ink);
  max-width:550px}
.subtitle{font-size:1.2rem;
  letter-spacing:-.025em;
  margin-top:8px}
.primary-button{display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  background:linear-gradient(180deg,#2583ff,#005ce3);
  color:#fff;
  border:1px solid #76b0ff;
  padding:15px 25px;
  border-radius:40px;
  font-size:.95rem;
  font-weight:600;
  box-shadow:0 8px 24px #0564eb35,inset 0 2px 4px #ffffff50;
  margin-top:32px;
  transition:transform .25s,box-shadow .25s}
.primary-button:hover{transform:translateY(-3px);
  box-shadow:0 12px 30px #0564eb50}
.portrait-wrap{position:absolute;
  right:0;
  bottom:0;
  width:47%;
  height:88%;
  }
.portrait{width:100%;
  height:100%;
  object-fit:contain;
  object-position:bottom;
  display:block;
  mask-image:linear-gradient(#000 94%,transparent);
  -webkit-mask-image:linear-gradient(#000 94%,transparent)}
.experience-badge{position:absolute;
  right:-1%;
  top:37%;
  border-radius:25px;
  text-align:center;
  padding:14px 19px;
  min-width:125px;
  transform:rotate(3deg);
  animation:badge-in 1s var(--ease) both}
.experience-badge strong{display:block;
  color:var(--blue);
  font-size:3.3rem;
  line-height:1.1;
  letter-spacing:-.08em}
.experience-badge strong span{font-weight:400;
  font-size:2rem}
.experience-badge>span{font-size:.8rem;
  color:var(--ink)}
.content{max-width:var(--content);
  margin:0 auto;
  padding:36px 10px 0}
.content>section{margin-bottom:68px;
  scroll-margin-top:25px}
.role-card{position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:32px 38px;
  display:flex;
  justify-content:space-between;
  align-items:center}
.role-card h2{font-size:1.9rem;
  margin-bottom:10px}
.role-title{font-size:1.15rem;
  color:var(--ink);
  margin-bottom:3px}
.role-card .muted{font-size:.85rem;
  margin-top:12px}
.role-art{width:170px;
  height:130px;
  display:grid;
  place-items:center;
  transform:rotate(-15deg);
  color:var(--blue);
  background:linear-gradient(135deg,transparent,var(--orb));
  border:1px solid var(--border);
  border-radius:40px}
.role-art .icon{width:85px;
  height:85px;
  stroke-width:.6}
.expertise-grid{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px}
.expertise-card{border-radius:24px;
  min-height:168px;
  padding:24px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:16px;
  transition:transform .35s var(--ease),box-shadow .35s}
.expertise-card:hover{transform:translateY(-5px);
  box-shadow:0 18px 32px #1b6cdc16}
.icon-orb{display:grid;
  place-items:center;
  border-radius:50%;
  width:62px;
  height:62px;
  background:var(--orb);
  color:var(--blue);
  flex-shrink:0}
.icon-orb .icon{width:30px;
  height:30px}
.expertise-card h3{max-width:180px;
  font-size:.95rem}
.technology-grid{display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:32px 14px;
  padding:12px 0}
.technology{display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  text-align:center;
  font-size:.8rem}
.tech-icon{color:var(--tech);
  display:grid;
  place-items:center;
  width:58px;
  height:55px}
.tech-icon .icon{width:42px;
  height:42px;
  stroke-width:1.8}
.timeline{list-style:none;
  margin:0;
  padding:0 0 0 24px}
.timeline li{position:relative;
  display:grid;
  grid-template-columns:210px 1fr;
  gap:20px;
  padding:8px 10px 29px 32px;
  border-left:1px solid #a9caff}
.timeline li:last-child{padding-bottom:0}
.timeline li:before{content:"";
  position:absolute;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#147aff;
  box-shadow:0 0 0 7px var(--orb);
  left:-6.5px;
  top:15px}
.timeline .date{font-size:.9rem;
  color:var(--muted)}
.timeline p{font-size:.9rem;
  margin-top:3px}
.education-card{display:flex;
  gap:24px;
  align-items:center;
  border-radius:24px;
  padding:24px 30px}
.project-tabs{display:flex;
  border-radius:22px;
  padding:6px;
  margin-bottom:18px}
.project-tabs button{flex:1;
  min-height:46px;
  font-weight:600;
  border-radius:17px;
  transition:background .25s,color .25s}
.project-tabs [aria-selected=true]{background:linear-gradient(#2984ff,#075ee5);
  color:white;
  box-shadow:0 5px 18px #146df330}
.project-body{padding:6px 24px;
  border-radius:24px}
.project{border-bottom:1px solid var(--line)}
.project:last-child{border:0}
.project summary{list-style:none;
  display:flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
  min-height:72px;
  padding:14px 0;
  font-size:.95rem}
.project summary::-webkit-details-marker{display:none}
.project summary>span:first-child{flex:1;
  font-weight:500}
.project summary .icon{width:23px;
  height:23px;
  border:1px solid var(--line);
  padding:3px;
  border-radius:50%;
  color:var(--blue);
  transition:transform .25s}
.project[open] summary .icon{transform:rotate(45deg)}
.project p{padding:0 50px 22px 0;
  font-size:.9rem;
  max-width:850px;
  animation:detail-in .3s ease}
.status{font-size:.7rem;
  border-radius:20px;
  padding:5px 10px;
  white-space:nowrap;
  background:var(--orb);
  color:var(--muted)}
.status.delivered,.status.achieved{background:#d9f7ea;
  color:#176342}
.status.in-progress{background:#fff0d5;
  color:#825100}
.status.ongoing{background:#eee2ff;
  color:#65428e}
.connect{position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:45px 38px;
  border-radius:30px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  background:var(--hero)}
.connect h2{margin:0}
.socials{display:flex;
  gap:23px}
.social-item{display:flex;
  align-items:center;
  gap:8px;
  flex-direction:column;
  font-size:.75rem}
.social-link{width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:20px;
  color:var(--blue);
  transition:transform .25s}
.social-link .icon{width:27px;
  height:27px}
.social-link:hover{transform:translateY(-4px)}
.social-link[aria-disabled=true]{opacity:.5;
  cursor:default}
.endline{display:flex;
  justify-content:space-between;
  color:var(--muted);
  padding:24px 5px 35px;
  font-size:.75rem}
#back-top{position:fixed;
  right:28px;
  bottom:25px;
  color:var(--blue);
  z-index:10;
  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:opacity .3s,transform .3s,visibility .3s}
#back-top.visible{opacity:1;
  visibility:visible;
  transform:none}
.no-js-label{margin:18px 0}
html.js .no-js-label{display:none}
.noscript-note{padding:20px;
  background:var(--orb)}
html:not(.js) .settings,html:not(.js) .project-tabs{display:none}
dialog:not([open]){display:none}
#mobile-menu{border:0;
  margin:0;
  padding:24px;
  width:100%;
  max-width:100%;
  height:100dvh;
  max-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  overflow:auto}
#mobile-menu[open]{animation:menu-in .35s var(--ease)}
#mobile-menu::backdrop{background:#09152fcc;
  backdrop-filter:blur(20px)}
.menu-heading{display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px}
.menu-heading h2{margin:0}
#mobile-menu nav{display:flex;
  flex-direction:column;
  gap:5px}
#mobile-menu nav a{display:flex;
  align-items:center;
  gap:18px;
  padding:14px 18px;
  border-radius:18px;
  font-size:1.1rem}
#mobile-menu nav a.active{background:var(--orb);
  color:var(--blue)}
#mobile-settings{margin-top:25px;
  border-top:1px solid var(--line);
  padding-top:24px}
#mobile-settings .settings{flex-wrap:wrap;
  justify-content:center;
  box-shadow:none;
  border:0;
  background:transparent}
html.menu-open{overflow:hidden}

[data-theme=dark] .ribbons{background:radial-gradient(ellipse at 80% 25%,#243e77,transparent 55%),radial-gradient(ellipse at 0 90%,#261e54,transparent 60%)}
[data-theme=dark] .ribbons i{border-color:#7aabfa50;
  background:linear-gradient(145deg,#10274905 25%,#223c8545 45%,#86bfff99 50%,#7264ed55 55%,transparent 75%);
  box-shadow:inset 8px 8px 40px #28549980,0 20px 60px #02081755}
[data-theme=dark] .tech-icon{color:#9ec8ff}
[data-theme=dark] .status.delivered,[data-theme=dark] .status.achieved{background:#173d35;
  color:#a2ecd0}
[data-theme=dark] .status.in-progress{background:#443819;
  color:#ffe0a4}
[data-theme=dark] .status.ongoing{background:#34224f;
  color:#dcc2ff}

/* Responsive grids and menus. Larger text can reflow without fixed-height clipping. */
@media(min-width:900px) and (max-width:1350px){.hero-inner,.content{margin-left:5%;
  margin-right:115px}
.hero-inner{min-height:630px}
.hero h1{font-size:4.7vw}
.hero-copy{max-width:58%}
.hero-inner{display:block}
.hero-copy{padding-top:55px}
.portrait-wrap{width:48%}
.experience-badge{right:0;
  top:45%}
}

@media(max-width:899px){.topbar{left:6%;
  right:6%;
  top:20px}
.desktop-nav,#settings-home{display:none}
#menu-open{display:grid}
.hero-inner{min-height:800px;
  display:flex;
  flex-direction:column-reverse;
  padding:85px 6% 45px;
  gap:15px}
.portrait-wrap{position:relative;
  width:100%;
  height:390px;
  max-width:480px;
  right:auto;
  bottom:auto}
.hero-copy{text-align:center;
  padding:0}
.hero h1{font-size:clamp(2.8rem,7.8vw,4rem);
  white-space:normal;
  margin-bottom:15px}
.headline{max-width:none;
  font-size:1.5rem}
.subtitle{font-size:1.05rem}
.experience-badge{right:2%;
  top:30%;
  padding:12px 15px;
  min-width:105px}
.experience-badge strong{font-size:2.8rem}
.content{padding:30px 6% 0}
.content>section{margin-bottom:48px}
.role-card{padding:25px}
.role-art{display:none}
.expertise-grid{gap:12px}
.expertise-card{min-height:160px;
  padding:18px 8px}
.expertise-card h3{font-size:.85rem}
.connect{flex-direction:column;
  align-items:flex-start;
  padding:30px}
.timeline li{grid-template-columns:155px 1fr}
.socials{gap:25px}
#back-top{width:44px;
  height:44px;
  right:16px;
  bottom:16px}
}

@media(max-width:580px){.hero-inner{min-height:0}
.expertise-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.technology-grid{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px 12px}
.timeline{padding-left:10px}
.timeline li{grid-template-columns:1fr;
  gap:5px;
  padding-left:25px;
  padding-bottom:28px}
.education-card{padding:22px 18px;
  gap:15px}
.education-card h3{font-size:.95rem}
.education-card .icon-orb{width:50px;
  height:50px}
.project-body{padding:5px 16px}
.project summary{flex-wrap:wrap;
  gap:8px;
  font-size:.9rem}
.project summary>span:first-child{flex-basis:calc(100% - 40px);
  order:0}
.project summary .icon{order:1}
.project summary .status{order:2}
.project p{padding-right:0}
.socials{width:100%;
  justify-content:space-between;
  gap:10px}
.social-link{width:48px;
  height:48px;
  border-radius:15px}
.social-item{font-size:.65rem}
.connect{padding:28px 22px}
.hero .primary-button{font-size:.85rem}
.hero h1{letter-spacing:-.07em}
.settings{gap:5px}
.role-title{font-size:1.05rem}
.icon-orb{width:55px;
  height:55px}
h2{letter-spacing:-.045em}
}

@keyframes drift{to{transform:translate(5%,-6%) rotate(-14deg) scale(1.06)}
}
@keyframes badge-in{from{opacity:0;
  transform:translateY(15px) rotate(3deg)}
to{opacity:1;
  transform:rotate(3deg)}
}
@keyframes detail-in{from{opacity:0;
  transform:translateY(-4px)}
to{opacity:1;
  transform:none}
}
@keyframes menu-in{from{opacity:0;
  transform:translateY(-20px)}
to{opacity:1;
  transform:none}
}

/* Animation is opt-out and never blocks access to content. */
[data-motion=off] *,[data-motion=off] *:before,[data-motion=off] *:after{animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
html[data-motion=off]{scroll-behavior:auto}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
html{scroll-behavior:auto}
}

@media print{.settings,.desktop-nav,.topbar,.ribbons,#back-top,.primary-button,.project-tabs{display:none!important}
body{background:white;
  color:black}
.content{margin:0;
  max-width:none}
.hero-inner{min-height:260px;
  padding:30px}
.hero h1{font-size:40px}
.hero-copy{padding:0}
.portrait-wrap{height:250px}
.glass{box-shadow:none;
  backdrop-filter:none;
  border:1px solid #ddd}
.project-panel[hidden]{display:block!important}
.no-js-label{display:block!important}
.content>section{break-inside:avoid;
  margin-bottom:24px}
}


/* VERSION 2 — reference monogram, dimensional glass and balanced timeline.
   SVG outlines inherit the selected theme; no raster logo recolouring needed. */
.brand{display:block;color:#122139;line-height:0;--logo-accent:#39838e}
.brand .monogram{display:block;width:76px;height:68px;overflow:visible}
[data-theme=dark] .brand{color:#f5f8ff;--logo-accent:#86ccd3}
.topbar{top:17px;align-items:center}

/* Platform-independent circular flags and a native disclosure dropdown. */
.language-picker{position:relative;font-size:14px;min-width:128px}
.language-picker summary{display:flex;align-items:center;gap:9px;min-height:40px;padding:5px 10px;cursor:pointer;list-style:none;border-radius:25px}
.language-picker summary::-webkit-details-marker{display:none}
.language-picker summary:hover{background:var(--orb)}
.flag{width:24px;height:24px;object-fit:cover;object-position:center;border-radius:50%;box-shadow:0 0 0 1px #93a6c03b;flex-shrink:0}
.chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 3px 4px 2px;transition:transform .2s}
.language-picker[open] .chevron{transform:rotate(225deg);margin-bottom:-3px}
.language-options{position:absolute;right:0;top:calc(100% + 12px);width:174px;padding:7px;border-radius:20px;z-index:30;background:var(--bg)}
.settings .language-options button{display:flex;width:100%;gap:10px;min-height:46px;justify-content:flex-start;padding:8px;border-radius:14px;box-shadow:none;font-size:14px}
.settings .language-options button[aria-pressed=true]{background:var(--orb);color:var(--ink)}
.language-check{margin-left:auto;color:var(--blue);visibility:hidden}
.language-options [aria-pressed=true] .language-check{visibility:visible}
#mobile-settings .language-options{top:auto;bottom:calc(100% + 12px)}

/* Sculptural glass loops: perspective, distinct rear/front rims and travelling
   reflections add depth. Only transforms animate; no video or 3D library. */
.ribbons{perspective:950px;perspective-origin:55% 40%;background:radial-gradient(ellipse at 80% 25%,#d4e2ff,transparent 60%),linear-gradient(130deg,#eff7ff,#e2eaff 55%,#f4edff)}
.ribbons i{width:100%;height:100%;left:18%;top:5%;border-radius:50%;border:clamp(18px,3.6vw,60px) solid #ffffff40;background:linear-gradient(115deg,#f5feff08 10%,#a8c9f638 37%,#ffffff8a 47%,#bcbcf945 58%,#fff0 78%);box-shadow:inset 2px 3px 4px #fff,inset -9px -12px 24px #7289cc45,2px 3px 3px #fff9,-10px -14px 25px #fff8,14px 30px 42px #668bd13b;transform:rotateX(55deg) rotateY(-19deg) rotateZ(-30deg);animation:glass-orbit 10s ease-in-out infinite alternate;will-change:transform;transform-style:preserve-3d}
.ribbons i:after{content:"";position:absolute;inset:-12px;border:2px solid transparent;border-top-color:#ffffffdd;border-right-color:#fff9;border-radius:inherit;box-shadow:3px -4px 11px #ffffffc9;transform:translateZ(12px);animation:glass-reflection 7s ease-in-out infinite alternate}
.ribbons i:nth-child(1){top:3%;left:27%;animation-duration:10s;animation-delay:-3s}
.ribbons i:nth-child(2){width:95%;height:125%;top:32%;left:-28%;animation-name:glass-orbit-back;animation-duration:13s;animation-delay:-7s}
.ribbons i:nth-child(3){width:75%;height:110%;top:-71%;left:-7%;animation-duration:16s;animation-delay:-11s;opacity:.75}
[data-theme=dark] .ribbons{background:radial-gradient(ellipse at 80% 20%,#26336c,transparent 65%),linear-gradient(135deg,#111d39,#172a4b 55%,#211a46)}
[data-theme=dark] .ribbons i{border-color:#688aff26;background:linear-gradient(110deg,#10254908 15%,#284a9545 36%,#8fbfff77 47%,#7264ef45 58%,#10152e00 76%);box-shadow:inset 2px 3px 4px #c4e4ffb3,inset -8px -14px 26px #122859e6,2px 3px 3px #c2deff99,-10px -14px 25px #7082ea26,16px 32px 45px #03091b99}
[data-theme=dark] .ribbons i:after{border-top-color:#b5d9ffba;border-right-color:#a7b1ff7a;box-shadow:3px -4px 14px #849dff6b}
/* Readable text sits above the same moving material on every surface. */
.hero-copy{text-shadow:0 1px 20px var(--hero)}
.role-card{isolation:isolate;background:var(--hero);min-height:210px}
.role-card>div:not(.ribbons){position:relative;z-index:1}
.role-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,var(--surface) 38%,transparent 90%);z-index:0;pointer-events:none}
.role-card .ribbons i{height:220%;top:-60%;left:40%;border-width:25px}
.role-card .ribbons i:nth-child(2){left:-25%;top:-130%;animation-delay:-5s}
.role-card .ribbons i:nth-child(3){left:55%;top:-210%}
.connect .ribbons i{height:240%;top:-80%;border-width:25px}
.connect .ribbons i:nth-child(2){left:-35%;top:-140%}
.connect .ribbons i:nth-child(3){top:-210%}
.connect h2,.connect .socials{position:relative;z-index:1}
@keyframes glass-orbit{0%{transform:translate3d(-3%,3%,-25px) rotateX(57deg) rotateY(-22deg) rotateZ(-33deg)}50%{transform:translate3d(3%,-5%,35px) rotateX(43deg) rotateY(8deg) rotateZ(-16deg)}100%{transform:translate3d(-4%,8%,5px) rotateX(62deg) rotateY(20deg) rotateZ(1deg)}}
@keyframes glass-orbit-back{0%{transform:translate3d(0,0,-70px) rotateX(45deg) rotateY(30deg) rotateZ(24deg)}100%{transform:translate3d(8%,-8%,15px) rotateX(65deg) rotateY(-15deg) rotateZ(2deg)}}
@keyframes glass-reflection{from{transform:translateZ(12px) rotateZ(-22deg);opacity:.5}to{transform:translateZ(18px) rotateZ(38deg);opacity:1}}

/* Decorative icon hover effects. Labels remain steady and readable. */
.expertise-card{perspective:600px}
.icon-orb,.tech-icon{transition:transform .5s var(--ease),box-shadow .5s,background .5s}
@media(hover:hover) and (pointer:fine){
 .expertise-card:hover .icon-orb{transform:translateY(-4px) rotateY(16deg) rotateX(10deg);box-shadow:7px 10px 20px #0865ef25,inset 1px 1px 1px #fff9}
 .expertise-card:hover .icon{animation:icon-float 1.6s ease-in-out infinite alternate}
 .technology:hover .tech-icon{transform:translateY(-7px) rotate(-7deg) scale(1.1);filter:drop-shadow(0 9px 7px #066cf330)}
 .technology:hover .tech-icon .icon{animation:icon-float 1.6s ease-in-out infinite alternate}
}
@keyframes icon-float{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-3px) rotate(5deg)}}

/* Alternating desktop career timeline; single readable column on phones. */
.timeline{position:relative;padding:8px 0;margin:0}
.timeline:before{content:"";position:absolute;left:50%;top:17px;bottom:24px;width:2px;background:linear-gradient(#1279ff,#a4c9ff);transform:translateX(-50%)}
.timeline li{position:relative;display:flex;flex-direction:column;gap:8px;width:50%;border:0;padding:0 42px 34px 0;text-align:right;min-height:115px}
.timeline li:nth-child(odd){margin-right:50%}
.timeline li:nth-child(even){margin-left:50%;padding:0 0 34px 42px;text-align:left}
.timeline li:last-child{padding-bottom:4px}
.timeline li:before{left:auto;right:-6px;top:10px;z-index:1}
.timeline li:nth-child(even):before{left:-6px;right:auto}
.timeline li .date{font-weight:500;color:var(--blue)}
.timeline li>div{padding:16px 20px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:var(--shadow)}
.timeline li:after{content:"";position:absolute;right:10px;top:15px;width:23px;height:1px;background:var(--line)}
.timeline li:nth-child(even):after{right:auto;left:10px}
@media(max-width:899px){.brand .monogram{width:62px;height:57px}.topbar{top:12px}.ribbons i{animation-duration:13s}.role-card{min-height:200px}}
@media(max-width:580px){
 .timeline:before{left:7px;transform:none}
 .timeline li,.timeline li:nth-child(even),.timeline li:nth-child(odd){width:100%;margin:0;padding:0 0 28px 35px;text-align:left;min-height:0}
 .timeline li:before,.timeline li:nth-child(even):before{left:2px;right:auto}
 .timeline li:after,.timeline li:nth-child(even):after{left:15px;right:auto;width:13px}
 .timeline li>div{padding:14px 16px}.role-card:after{background:var(--surface);opacity:.72}
 .language-picker{min-width:119px}.settings{row-gap:12px}
}
/* Keep all new animation respectful of the pause and accessibility controls. */
[data-motion=off] .ribbons i{will-change:auto}
[data-motion=off] .expertise-card:hover .icon-orb,[data-motion=off] .technology:hover .tech-icon{transform:none;filter:none}
@media(prefers-reduced-motion:reduce){.ribbons i{will-change:auto}.expertise-card:hover .icon-orb,.technology:hover .tech-icon{transform:none;filter:none}}

/* VERSION 3 — personal introduction and an accessible, non-shifting typewriter. */
.hello{font-size:1.2rem;color:var(--muted);letter-spacing:.015em;margin-bottom:12px}
.typewriter{min-height:2.8em;max-width:550px;line-height:1.4;text-wrap:wrap}
.typing-caret{display:inline-block;height:.92em;width:2px;background:var(--blue);vertical-align:-.05em;margin-left:4px;animation:caret-blink 1.1s steps(1,end) infinite}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.experience-badge>span{display:block;max-width:116px;line-height:1.35;margin-top:5px}
.experience-badge{min-width:132px}

/* Authentic marks retain their geometry and colour in equal optical containers. */
.tech-icon.logo-frame{width:108px;height:82px;border-radius:21px;background:#fff;border:1px solid #e4eaf4;box-shadow:0 7px 20px #3c609b0c;overflow:hidden;padding:14px}
.technology-logo{display:block;max-width:100%;max-height:100%;width:78px;height:52px;object-fit:contain}
[data-theme=dark] .tech-icon.logo-frame{background:#f8faff;border-color:#dbe5fa40;box-shadow:0 8px 24px #0002}
.technology:hover .technology-logo{animation:icon-float 1.6s ease-in-out infinite alternate}

/* Progressive timeline fills with scroll, with separately revealed milestones. */
.timeline:before{background:var(--line)}
.timeline:after{content:"";position:absolute;left:50%;top:17px;bottom:24px;width:2px;transform:translateX(-50%) scaleY(var(--timeline-progress,1));transform-origin:top;background:linear-gradient(#0e86ff,#7479ff);box-shadow:0 0 12px #1786ff50;pointer-events:none}
.timeline.scroll-ready li{opacity:0;transform:translateY(25px);transition:opacity .65s var(--ease),transform .75s var(--ease)}
.timeline.scroll-ready li.is-reached{opacity:1;transform:none}
.timeline li>div{transition:box-shadow .35s,transform .35s}
.timeline h3{font-size:1rem;line-height:1.4}
.education-card{transition:transform .4s var(--ease),box-shadow .4s;background:linear-gradient(135deg,var(--surface),var(--orb));border-radius:24px;position:relative;overflow:hidden}
.education-card:after{content:"";position:absolute;width:140px;height:140px;right:-30px;top:-65px;background:linear-gradient(135deg,#ffffff60,transparent);border-radius:50%;pointer-events:none}
@media(hover:hover) and (pointer:fine){.education-card:hover{transform:translateY(-5px);box-shadow:0 18px 32px #1b6cdc16}.education-card:hover .icon-orb{transform:rotateY(16deg) rotateX(10deg)}.education-card:hover .icon{animation:icon-float 1.6s ease-in-out infinite alternate}}

/* Privacy choice affects only optional local display-preference storage.
   Equal prominence, no preselection, no blocking overlay or advertising code. */
body{padding-bottom:var(--privacy-clearance,0px)}
.privacy-banner[hidden]{display:none}
.privacy-banner{position:fixed;z-index:25;left:50%;bottom:20px;transform:translateX(-50%);width:min(760px,calc(100% - 36px));padding:24px 28px;border-radius:26px;background:var(--bg);box-shadow:0 15px 60px #09183935,inset 0 1px 0 #ffffff40;animation:privacy-in .5s var(--ease)}
.privacy-banner h2{font-size:1.3rem;letter-spacing:-.035em;margin-bottom:8px}
.privacy-banner p{font-size:.85rem;line-height:1.55}
.privacy-actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.privacy-actions button{flex:1;min-height:45px;font-size:.8rem;padding:11px 16px;font-weight:600;border-radius:24px;white-space:normal;margin:0}
.privacy-actions .primary-button{box-shadow:none}
.secondary-button{border:1px solid var(--blue);background:var(--orb);color:var(--ink)}
.privacy-banner .privacy-note{font-size:.7rem;margin-top:12px}
#privacy-open{font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}
.endline{gap:24px;flex-wrap:wrap}
#back-top{bottom:calc(25px + var(--privacy-clearance,0px))}
@keyframes privacy-in{from{opacity:0;transform:translate(-50%,15px)}to{opacity:1;transform:translate(-50%,0)}}
@media(max-width:899px){.typewriter{max-width:570px;margin:0 auto;min-height:2.8em}.hero-copy .primary-button{margin-top:20px}.hello{font-size:1rem}.experience-badge>span{max-width:103px;font-size:.75rem}}
@media(max-width:580px){.timeline:after{left:7px;transform:scaleY(var(--timeline-progress,1))}.typewriter{font-size:1.35rem;min-height:3em}.privacy-banner{padding:19px;bottom:12px;width:calc(100% - 24px)}.privacy-actions{gap:8px}.privacy-actions button{min-width:100%;font-size:.82rem}.tech-icon.logo-frame{width:88px;height:72px;padding:12px}.technology-logo{height:46px}.endline{font-size:.7rem}}
[data-motion=off] .timeline.scroll-ready li{opacity:1;transform:none}
[data-motion=off] .typing-caret{display:none}
[data-motion=off] .education-card:hover{transform:none}
@media(prefers-reduced-motion:reduce){.timeline.scroll-ready li{opacity:1;transform:none}.typing-caret{display:none}.education-card:hover{transform:none}}
@media print{.privacy-banner,#privacy-open{display:none!important}body{padding-bottom:0}.timeline.scroll-ready li{opacity:1;transform:none}}
/* Official white wordmarks keep their intended dark presentation background. */
.tech-icon.logo-frame.dark-brand,[data-theme=dark] .tech-icon.logo-frame.dark-brand{background:#102c47;border-color:#2b4662}
@media(prefers-reduced-motion:reduce){.technology:hover .technology-logo{animation:none!important}}

/* VERSION 4 — project carousel, matched to the selected glass-card concept. */
#projects{overflow:visible}
#projects .project-tabs{max-width:430px;margin:0 0 25px auto}
.carousel-body{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
.project-panel[hidden]{display:none}
.project-track{position:relative;display:flex;gap:22px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:12px 0 25px;overscroll-behavior-x:contain;scroll-behavior:smooth;cursor:grab;isolation:isolate}
.project-track::-webkit-scrollbar{display:none}
.project-track:after{content:"";flex:0 0 calc(22% - 22px)}
.project-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none}
.project.project-slide{position:relative;flex:0 0 78%;min-width:0;min-height:460px;scroll-snap-align:start;scroll-snap-stop:always;border:1px solid var(--border);border-radius:30px;overflow:hidden;display:grid;grid-template-columns:1.02fr 1fr;background:linear-gradient(135deg,var(--surface),var(--orb));box-shadow:0 12px 25px #205fa711,inset 0 1px 0 #fff9;opacity:.72;transform:scale(.975);transform-origin:left center;transition:opacity .4s,transform .55s var(--ease),box-shadow .4s;isolation:isolate}
.project-slide.is-current{opacity:1;transform:scale(1);box-shadow:0 15px 30px #2461bc14,inset 0 1px 0 #fff9}
.slide-copy{position:relative;z-index:2;padding:38px 0 38px 36px;display:flex;align-items:flex-start;flex-direction:column;justify-content:center}
.slide-org{font-size:.75rem;font-weight:600;letter-spacing:.22em;color:var(--muted);display:block;margin-bottom:22px}
.slide-title{font-size:clamp(1.5rem,2.8vw,2.25rem);font-weight:650;line-height:1.13;letter-spacing:-.055em;overflow-wrap:normal;margin-bottom:22px}
.slide-copy .status{font-size:.76rem;display:inline-flex;align-items:center;gap:8px;padding:7px 11px}
.slide-copy .status:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.project-slide p.slide-focus{padding:0;margin-top:18px;font-size:.95rem;color:var(--muted)}
.project-slide .primary-button{margin-top:28px;gap:16px;padding:12px 20px;font-size:.85rem}
.slide-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;pointer-events:none}
.slide-visual:before{content:"";position:absolute;inset:15% 3%;background:radial-gradient(ellipse,#88b6ff38,transparent 70%);border-radius:50%}
.slide-visual img{position:relative;width:125%;max-width:none;height:auto;object-fit:contain;transition:transform 1s var(--ease);filter:drop-shadow(0 16px 18px #406fc31a);user-select:none}
.project-slide.is-current .slide-visual img{transform:translateY(-2px) scale(1.025)}
@media(hover:hover) and (pointer:fine){.project-slide.is-current:hover .slide-visual img{transform:translateY(-9px) scale(1.055)}}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:30px;margin-top:3px}
.carousel-controls .round{width:55px;height:55px;color:var(--blue);transition:transform .25s,opacity .25s,background .25s}
.carousel-controls .round:hover:not(:disabled){transform:translateY(-3px);background:var(--orb)}
.carousel-prev .icon{transform:rotate(180deg)}
.carousel-controls button:disabled{opacity:.3;cursor:default}
.carousel-position{width:165px;text-align:center}
.carousel-count{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--muted);letter-spacing:.12em}
.carousel-progress{height:4px;background:var(--line);border-radius:10px;overflow:hidden;margin-top:12px}
.carousel-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#1686ff,#7f93ff);border-radius:10px;transition:width .5s var(--ease)}
.carousel-hint{font-size:.75rem!important;text-align:center;color:var(--muted);margin-top:14px}
/* Native dialog provides keyboard focus containment and Escape-to-close. */
.project-dialog{padding:0;border:1px solid var(--border);border-radius:32px;width:min(940px,calc(100% - 36px));max-width:none;max-height:calc(100dvh - 40px);background:var(--bg);color:var(--ink);overflow:auto;box-shadow:0 30px 100px #0004}
.project-dialog[open]{animation:project-open .4s var(--ease)}
.project-dialog::backdrop{background:#07162bb3;backdrop-filter:blur(12px)}
.project-dialog-inner{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;min-height:440px}
#project-dialog-close{position:absolute;right:18px;top:18px;z-index:5;color:var(--ink)}
.project-dialog-art{display:grid;place-items:center;background:linear-gradient(145deg,var(--orb),var(--surface));min-width:0;overflow:hidden}
.project-dialog-art img{display:block;width:110%;height:auto;object-fit:contain}
.project-dialog-copy{padding:64px 40px 38px}
.project-dialog-copy h2{font-size:2rem;letter-spacing:-.05em;margin-bottom:18px}
.project-dialog-copy h3{font-size:.85rem;margin:28px 0 9px;color:var(--ink)}
.project-dialog-copy p{font-size:1rem;line-height:1.7}
.project-dialog-copy .art-note{font-size:.7rem;margin-top:28px;color:var(--muted)}
html.project-modal-open{overflow:hidden}
@keyframes project-open{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
[data-theme=dark] .project-slide{background:linear-gradient(135deg,#172a4b,#192a48 55%,#293259);box-shadow:0 16px 35px #0002,inset 0 1px 0 #9abaff33}
[data-theme=dark] .slide-visual img{filter:drop-shadow(0 15px 20px #050b2555)}
@media(max-width:899px){.project.project-slide{flex-basis:87%;min-height:430px}.project-track:after{flex-basis:calc(13% - 22px)}.slide-copy{padding:28px 0 28px 26px}.slide-title{font-size:1.7rem}#projects .project-tabs{margin-left:0}}
@media(max-width:580px){
 .project-track{gap:14px;padding-top:5px}
 .project.project-slide{flex-basis:91%;display:flex;flex-direction:column-reverse;justify-content:flex-end;min-height:0;border-radius:26px}
 .project-track:after{flex-basis:calc(9% - 14px)}
 .slide-visual{height:205px;flex:0 0 205px;width:100%;background:radial-gradient(ellipse,var(--orb),transparent 80%)}
 .slide-visual img{height:250px;width:auto;max-width:100%;object-fit:contain}
 .slide-copy{padding:20px 24px 28px;justify-content:flex-start;flex:1}
 .slide-org{margin-bottom:12px;font-size:.7rem}.slide-title{font-size:1.6rem;margin-bottom:15px}
 .project-slide .primary-button{margin-top:22px}.project-slide p.slide-focus{font-size:.9rem}
 .carousel-controls{gap:22px}.carousel-controls .round{width:48px;height:48px}.carousel-position{width:135px}
 .project-dialog{width:calc(100% - 24px);border-radius:25px}.project-dialog-inner{display:flex;flex-direction:column}
 .project-dialog-art{height:220px}.project-dialog-art img{height:270px;width:auto;max-width:100%}
 .project-dialog-copy{padding:28px}.project-dialog-copy h2{font-size:1.65rem}
}
/* No-JavaScript fallback shows all project content, without unusable controls. */
html:not(.js) .project-track{display:block;overflow:visible}
html:not(.js) .project-slide{opacity:1;transform:none;margin-bottom:20px}
html:not(.js) .project-description{display:block!important}
html:not(.js) .project-description p{padding:20px 0;font-size:.9rem}
html:not(.js) .project-open,html:not(.js) .carousel-controls,html:not(.js) .carousel-hint{display:none}
[data-motion=off] .slide-visual img{transform:none!important}
@media(prefers-reduced-motion:reduce){.slide-visual img{transform:none!important}}
@media print{.project-track{display:block;overflow:visible}.project-slide{opacity:1;transform:none;break-inside:avoid;margin-bottom:20px}.carousel-controls,.carousel-hint,.project-open{display:none}.project-description[hidden]{display:block}.project-description p{padding:20px 0}}
/* Blend the studio backdrop of the infrastructure artwork into either theme. */
.project-slide[data-art=infrastructure] .slide-visual img,.project-dialog[data-art=infrastructure] .project-dialog-art img{mask-image:radial-gradient(ellipse at center,#000 42%,transparent 72%);-webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 72%)}

/* VERSION 5 — distinct artwork, softer previews and shared animated glass. */
.project.project-slide{transition:filter .5s var(--ease),opacity .5s var(--ease),transform .55s var(--ease),box-shadow .4s;filter:blur(1.6px)}
.project.project-slide.is-current{filter:none;opacity:1}
.project-track{mask-image:linear-gradient(90deg,#000 0%,#000 91%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 91%,transparent 100%)}
.project-slide>.ribbons{border-radius:inherit;z-index:-1;opacity:.7}
.project-slide>.ribbons i{width:140%;height:150%;left:25%;top:-35%;border-width:25px}
.project-slide>.ribbons i:nth-child(2){left:-70%;top:15%;animation-delay:-5s}
.project-slide>.ribbons i:nth-child(3){left:40%;top:-110%;animation-delay:-10s}
/* Only the selected visible card animates: avoid running dozens of offscreen loops. */
.project-slide:not(.is-current)>.ribbons i,.project-slide:not(.is-current)>.ribbons i:after,.project-panel[hidden] .ribbons i,.project-panel[hidden] .ribbons i:after{animation-play-state:paused}
.project-slide:not(.is-current){cursor:pointer}
.slide-copy{background:linear-gradient(90deg,var(--surface),transparent);border-radius:inherit}
.slide-visual{z-index:1}
.project-dialog-focus{display:inline-flex;padding:7px 13px;border-radius:20px;background:var(--orb);color:var(--blue)!important;font-size:.8rem!important;line-height:1.5!important;margin-top:24px}
#project-dialog-description{margin-top:22px}
.status.maintaining{background:#d8f2f5;color:#145f6d}
[data-theme=dark] .status.maintaining{background:#183f49;color:#a4e4ed}
[data-theme=dark] .project-slide>.ribbons{opacity:.55}
@media(max-width:580px){.project.project-slide{filter:blur(1px)}.project.project-slide.is-current{filter:none}.slide-copy{background:linear-gradient(0deg,var(--surface),transparent)}.project-track{mask-image:linear-gradient(90deg,#000 0%,#000 96%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 96%,transparent 100%)}}
html:not(.js) .project.project-slide{filter:none}
html:not(.js) .project-track{mask-image:none;-webkit-mask-image:none}
@media print{.project.project-slide{filter:none}.project-track{mask-image:none;-webkit-mask-image:none}}

/* VERSION 7 — centred loop, balanced previews and comfortably contained artwork. */
.project-track{mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.project-track:after{display:none}
.project.project-slide{scroll-snap-align:center;transform-origin:center}
.slide-visual{padding:18px}
.slide-visual img{width:92%;max-width:100%;height:auto;max-height:390px;object-fit:contain}
.project-slide.is-current .slide-visual img{transform:translateY(-2px)}
@media(hover:hover) and (pointer:fine){.project-slide.is-current:hover .slide-visual img{transform:translateY(-6px) scale(1.02)}}
.project-dialog-art img{width:92%;max-width:100%}
.carousel-pause{border:1px solid var(--border);border-radius:24px;color:var(--ink);padding:12px 17px;min-height:44px;cursor:pointer;font:inherit;font-size:.8rem}
@media(max-width:899px){.project.project-slide{flex-basis:84%}}
@media(max-width:580px){
 .project.project-slide{flex-basis:86%}
 .project-track{gap:10px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
 .slide-visual img{height:175px;width:92%;max-height:100%}
 .project-dialog-art img{height:195px;width:92%}
 .carousel-controls{gap:12px;flex-wrap:wrap}.carousel-position{width:100px}
 .carousel-pause{padding:10px 12px}
}
html:not(.js) .project-track{mask-image:none;-webkit-mask-image:none}
@media print{.project-slide[data-clone]{display:none!important}.project-track{mask-image:none;-webkit-mask-image:none}.project.project-slide{filter:none}}

/* VERSION 8 — supplied CA logo introduction; completes automatically in 3s. */
.site-intro{display:none}
.js .site-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#06131f;animation:intro-exit .45s ease 2.55s forwards}
.intro-active{overflow:hidden}
.intro-mark{position:relative;isolation:isolate;animation:intro-arrive 1s var(--ease) both}
.intro-mark img{display:block;width:137px;height:115px;object-fit:contain;border-radius:8px}
.intro-mark:before{content:"";position:absolute;inset:-55px;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#66cedb33,transparent 68%);animation:intro-glow 2.55s ease-in-out both}
.intro-mark:after{content:"";position:absolute;left:15%;right:15%;bottom:-22px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#91d4dc,transparent);transform-origin:left;animation:intro-line 2.55s ease-in-out both}
@keyframes intro-arrive{from{opacity:0;transform:translateY(12px) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes intro-glow{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes intro-line{from{transform:scaleX(0);opacity:0}20%{opacity:1}to{transform:scaleX(1);opacity:1}}
@keyframes intro-exit{to{opacity:0;visibility:hidden;pointer-events:none}}
[data-motion=off] .intro-mark,[data-motion=off] .intro-mark:before,[data-motion=off] .intro-mark:after{animation:none}
[data-motion=off] .site-intro{animation-duration:0s;animation-delay:3s}
@media(prefers-reduced-motion:reduce){.intro-mark,.intro-mark:before,.intro-mark:after{animation:none}.js .site-intro{animation-duration:0s;animation-delay:3s}}
@media print{.js .site-intro{display:none}.intro-active{overflow:visible}}

/* VERSION 9 — transparent vector branding and a slim, rounded startup bar. */
.intro-brand{display:flex;flex-direction:column;align-items:center;gap:36px}
.intro-mark img{width:160px;height:143px;border-radius:0;background:transparent}
.intro-mark:after{display:none}
.intro-progress{width:240px;max-width:65vw;height:5px;border-radius:999px;overflow:hidden;background:#dbe9f342;box-shadow:inset 0 1px 2px #0005}
.intro-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:#f1f8ff;box-shadow:0 0 7px #b8e7ff80;transform:scaleX(0);transform-origin:left;animation:intro-fill 2.55s cubic-bezier(.2,.65,.35,1) forwards}
@keyframes intro-fill{0%{transform:scaleX(0)}35%{transform:scaleX(.3)}70%{transform:scaleX(.68)}100%{transform:scaleX(1)}}
.social-link .icon{width:27px;height:27px;fill:currentColor;stroke:none;overflow:visible}
[data-motion=off] .intro-progress span{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.intro-progress span{transform:scaleX(1)}}

/* VERSION 10 — mobile scrolling and rendering safeguards.
   Hidden decorations release layers; paused animations alone do not do that. */
.ribbons i{will-change:auto}
.js .ribbons i{display:none}
.js .effects-visible .ribbons i{display:block}
.project-slide:not(.is-current)>.ribbons i{display:none!important}
.project.project-slide{backdrop-filter:none;-webkit-backdrop-filter:none}
.js .project-slide:not(.is-near){visibility:hidden;filter:none}
/* Allow native vertical page gestures as well as horizontal carousel swipes. */
.project-track{touch-action:pan-x pan-y pinch-zoom;min-width:0;max-width:100%}
.project-panel,.carousel-body{min-width:0;max-width:100%}
/* Timeline text remains readable even if an animation callback fails. */
.timeline.scroll-ready li{opacity:1}
@media(max-width:899px),(pointer:coarse){
 /* A 2D sheen preserves the look without dozens of oversized 3D surfaces. */
 .ribbons{perspective:none}
 .ribbons i,.js .effects-visible .ribbons i{display:none!important}
 .ribbons:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,#ffffff24 42%,#ffffff60 50%,transparent 72%);transform:translateX(-8%);animation:mobile-sheen 12s ease-in-out infinite alternate;animation-play-state:paused}
 .effects-visible .ribbons:before{animation-play-state:running}
 .project-slide:not(.is-current)>.ribbons:before{display:none}
 .glass{backdrop-filter:none;-webkit-backdrop-filter:none}
 .project-track{mask-image:none;-webkit-mask-image:none}
 .project.project-slide{filter:none;box-shadow:inset 0 1px 0 #ffffff40;transition:opacity .3s,transform .3s}
 .project-slide:not(.is-current) .slide-copy,.project-slide:not(.is-current) .slide-visual{opacity:.55}
 .project-slide.is-near:not(.is-current) .slide-visual img{filter:blur(.7px)}
 .project-slide.is-current .slide-visual img{filter:none}
 .timeline li>div{box-shadow:none}
 .timeline.scroll-ready li,.timeline.scroll-ready li.is-reached{transform:none;transition:none}
 #mobile-menu::backdrop,.project-dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}
@keyframes mobile-sheen{to{transform:translateX(8%)}}
@media print{.js .project-slide:not([data-clone]){visibility:visible}.ribbons:before{display:none}}
/* End spacing lets boundary copies centre before an invisible loop reset. */
.project-track{--carousel-edge:11%;--carousel-gap:22px}
.project-track:before,.project-track:after{content:"";display:block;flex:0 0 max(0px,calc(var(--carousel-edge) - var(--carousel-gap)))}
@media(max-width:899px){.project-track{--carousel-edge:8%}}
@media(max-width:580px){.project-track{--carousel-edge:7%;--carousel-gap:10px}}

/* VERSION 11 — restore 3D ribbons on phones only in the hero and contact.
   Viewport gating still removes offscreen layers; projects retain the lighter path. */
@media(max-width:899px),(pointer:coarse){
 .hero .ribbons,.connect .ribbons{perspective:950px}
 .hero .ribbons:before,.connect .ribbons:before{display:none}
 .js .hero.effects-visible .ribbons i,.js .connect.effects-visible .ribbons i{display:block!important}
}