/* ========================================================================== deorsidesign — Layout System Containers,sections,hero,navigation,grids,portfolio ========================================================================== */ .container{width:100%;max-width:var(--container-max);margin-left:auto;margin-right:auto;padding-left:var(--container-padding);padding-right:var(--container-padding);}.container--narrow{max-width:var(--content-max);}.container--wide{max-width:none;}.section{padding-top:var(--space-24);padding-bottom:var(--space-24);}.page main{padding-top:calc(var(--space-16) var(--space-8));}.page--light main{padding-top:0;}.page--dark{background:var(--color-black);}.page--dark body,.page--dark > header,.page--dark main,.page--dark .section{background:var(--color-black);}.page--light{background:var(--color-white);}.page--light body,.page--light > header,.page--light main,.page--light .section{background:var(--color-white);color:var(--color-black);}@media (max-width:767px){.page main{padding-top:calc(var(--space-16) var(--space-6));}}.section--hero{height:100dvh;background:var(--color-bg-dark);display:flex;align-items:center;justify-content:center;padding-top:var(--space-24);padding-bottom:0;overflow:hidden;}.section--hero .hero{flex:1;width:100%;min-height:100dvh;position:relative;display:flex;align-items:center;justify-content:center;}.section--hero-mini{min-height:60vh;background:var(--color-black);color:var(--color-text-inverse);display:flex;align-items:center;justify-content:center;padding-top:var(--space-16);padding-bottom:var(--space-8);text-align:center;}.section--hero-mini .container{width:100%;}.section--hero-mini h1,.section--hero-mini .lead{color:var(--color-text-inverse);}.section--hero-mini .text-muted{color:rgb(var(--color-white-rgb) / 0.72) !important;}.page--light .section--hero-mini{min-height:45vh;padding-top:0;padding-bottom:var(--space-8);background:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../assets/portfolio-hero-bg.jpg");background-size:cover;background-position:center;background-repeat:no-repeat;}.section--dark{background:var(--color-black);color:var(--color-text-inverse);}.section--brand{background:var(--color-brand);color:var(--color-text-inverse);position:relative;overflow:hidden;}#contact{position:relative;}#flowfield-canvas{display:block;}#contact > .container{position:relative;z-index:10;}.section--subtle{background:var(--color-bg-subtle);}.section--dark:where(h1,h2,h3,h4,h5,h6,p,small),.section--brand:where(h1,h2,h3,h4,h5,h6,p,small){color:inherit;}.section--dark:where(a),.section--brand:where(a){color:rgb(var(--color-white-rgb) / 0.9);}.section--dark:where(a:hover),.section--brand:where(a:hover){color:var(--color-white);}.hero{position:relative;width:100%;height:100%;overflow:hidden;}.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;}.hero__content{position:relative;z-index:2;text-align:center;max-width:900px;padding:var(--space-8);display:flex;flex-direction:column;align-items:center;gap:var(--space-6);}.hero__logo{height:48px;width:auto;margin-bottom:var(--space-4);}.hero__headline{color:var(--color-white);margin:0;}.hero__tagline{font-family:var(--font-family-body);font-size:var(--font-size-lg);color:rgb(var(--color-white-rgb) / 0.72);letter-spacing:var(--letter-spacing-wide);}.hero__cta{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgb(var(--color-white-rgb) / 0.4);color:var(--color-white);background:transparent;padding:var(--space-3) var(--space-8);border-radius:var(--radius-full);letter-spacing:var(--letter-spacing-wider);font-size:var(--font-size-sm);text-transform:uppercase;text-decoration:none;transition:all var(--transition-normal);user-select:none;-webkit-tap-highlight-color:transparent;}.hero__cta:hover{background:var(--color-white);color:var(--color-black);}.hero__cta:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-focus-ring);}.nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:var(--z-nav);}.nav__inner{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-4);padding-bottom:var(--space-4);}.nav--transparent{background:transparent;}.nav--solid{background:var(--color-black) !important;box-shadow:var(--shadow-subtle);}.nav__logo{height:32px;width:auto;}.nav__links{display:flex;gap:var(--space-8);list-style:none;}.nav__link{font-family:var(--font-family-body);font-size:var(--font-size-md);font-weight:700;color:rgb(var(--color-white-rgb) / 0.8);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase;text-decoration:none;transition:color var(--transition-fast);}.nav__link:hover{color:var(--color-white);}.nav__link--active{color:var(--color-white);}.nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-full);border:1px solid rgb(var(--color-white-rgb) / 0.28);color:var(--color-white);background:rgb(var(--color-black-rgb) / 0.28);backdrop-filter:blur(10px);-webkit-tap-highlight-color:transparent;}.nav__toggle:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-focus-ring);}.nav__language-switcher{display:flex;gap:var(--space-2);align-items:center;}.nav__language-link{color:rgb(var(--color-white-rgb) / 0.6);font-size:20px;text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);text-decoration:none;transition:color var(--transition-fast);display:inline-block;line-height:1;}.nav__language-link:hover{color:var(--color-white);}.nav__language-link.active{color:var(--color-brand);}.nav__language-divider{color:rgb(var(--color-white-rgb) / 0.4);}.grid{display:grid;gap:var(--space-6);}.grid--auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}@media (min-width:768px){.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}}@media (min-width:1280px){.grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}}.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:3px;}.portfolio-item{position:relative;overflow:hidden;border-radius:0;cursor:pointer;aspect-ratio:4 / 3;background:var(--color-purple-50);transform:translateZ(0);}.portfolio-item__image{width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--easing-emphasized);will-change:transform;}.portfolio-item__overlay{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,0.4);opacity:1;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-6);}.portfolio-item__title{font-family:var(--font-family-heading);font-size:var(--font-size-xl);font-weight:700;color:var(--color-white);margin:var(--space-2) 0 0 0;line-height:var(--line-height-snug);}.portfolio-item__tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:var(--space-2);color:var(--color-white);}.portfolio-item__tag{font-size:var(--font-size-xs);font-weight:700;color:rgb(var(--color-white-rgb) / 0.9);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);}.portfolio-item:hover .portfolio-item__overlay,.portfolio-item:focus-within .portfolio-item__overlay{opacity:1;}.portfolio-item:hover .portfolio-item__image,.portfolio-item:focus-within .portfolio-item__image{transform:scale(1.05);}.portfolio-item:where(a,button){position:relative;z-index:1;display:block;width:100%;height:100%;}.portfolio-item:where(a):focus-visible,.portfolio-item:where(button):focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-focus-ring);border-radius:var(--radius-subtle);}@media (min-width:1280px){.portfolio-grid{gap:3px;}.hero__logo{height:72px;}}@media (max-width:1279px){.nav__links{display:none;}}@media (min-width:1280px){.nav__toggle{display:none;}}.scroll-indicator{position:absolute;bottom:var(--space-8);left:50%;transform:translateX(-50%);z-index:2;color:rgb(var(--color-white-rgb) / 0.5);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgb(var(--color-white-rgb) / 0.2);border-radius:var(--radius-full);text-decoration:none;transition:all var(--transition-normal);}.scroll-indicator:hover{color:var(--color-white);border-color:rgb(var(--color-white-rgb) / 0.5);}.scroll-indicator svg{width:20px;height:20px;}