:root{
  --bg-0:#04080f;
  --bg-1:#071422;
  --bg-2:#0b1f33;
  --text:#cfe8ff;
  --muted:#9fc0decc;
  --accent:#31d0ff;
  --accent-2:#64ffda;
  --warning:#ffc857;
  --card:#0b1624;
  --border:#1e2a3d;
  --shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.02);
  --radius:14px;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{min-height:100svh}
html{overflow-x:hidden}
/* Solid + gradient base so background persists even if body is not painted */
html{
  background-color:var(--bg-0);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(49,208,255,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(100,255,218,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
}
/* Ensure primary content wrapper covers viewport height on mobile */
main{min-height:100svh}
body{
  margin:0; color:var(--text); font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 80% -10%, rgba(49,208,255,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(100,255,218,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
  overflow-x:hidden; /* hide any accidental horizontal overflow */
  overscroll-behavior-x:none; /* prevent horizontal overscroll */
  touch-action:pan-y; /* restrict gestures to vertical panning */
}
/* Ensure Services page always uses the same dark background as other pages */
.page-services{
  background-color: var(--bg-0);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(49,208,255,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(100,255,218,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
}
/* Portfolio page: match dark background across all views */
.page-portfolio{
  background-color: var(--bg-0);
  background: radial-gradient(1200px 600px at 80% -10%, rgba(49,208,255,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(100,255,218,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
}
/* Lock the Services background to the viewport so it never breaks while scrolling on iOS */
.page-services::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(49,208,255,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(100,255,218,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
  /* Help iOS keep it composited */
  transform:translateZ(0);
  will-change:transform;
}
/* Lock the Portfolio background to the viewport on iOS */
.page-portfolio::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(49,208,255,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(100,255,218,.10), transparent 60%),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2) 100%);
  transform:translateZ(0);
  will-change:transform;
}
/* Subtle star field */
html::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background-image:radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.25), transparent 60%),
                   radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.18), transparent 60%),
                   radial-gradient(1.2px 1.2px at 80% 20%, rgba(255,255,255,.16), transparent 60%),
                   radial-gradient(1.4px 1.4px at 35% 80%, rgba(255,255,255,.20), transparent 60%);
  opacity:.6;
}
.container{max-width:var(--container); margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(120%) blur(12px);
  background:linear-gradient(180deg, rgba(4,8,15,.88), rgba(4,8,15,.66)); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; position:relative}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text)}
.brand-logo{width:38px; height:38px; object-fit:contain;
  filter: drop-shadow(0 0 2px rgba(49,208,255,.65)) drop-shadow(0 0 14px rgba(100,255,218,.45));}
.brand-name{font-family:Orbitron, Poppins; letter-spacing:.5px; font-weight:700}
.brand-sub{font-size:12px; color:var(--muted)}

.nav-links{display:flex; align-items:center; gap:22px}
.nav-links a{color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; padding:8px 10px; border-radius:10px; transition:color .2s, background-color .2s, box-shadow .2s}
.nav-links a:hover{color:var(--accent)}
.nav-links a.active{background:#07638c; color:#000 !important; box-shadow:0 0 0 1px #06506f inset, 0 8px 20px rgba(7,99,140,.35)}
.nav-links a.active:hover{color:#000}
.nav-links .has-dropdown{position:relative}
.nav-links .has-dropdown > a{display:inline-flex; align-items:center}
.nav-links .submenu-toggle{display:none; margin-left:6px; background:transparent; border:1px solid var(--border); color:var(--muted); font-size:12px; border-radius:6px; width:22px; height:22px; cursor:pointer}
.nav-links .dropdown{display:none; position:absolute; top:100%; left:0; min-width:220px; padding:10px; border-top:6px solid transparent; border-radius:12px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(14,23,39,.98), rgba(11,22,36,.98)); box-shadow:var(--shadow); z-index:80; flex-direction:column; gap:6px}
.nav-links .dropdown a{padding:8px 10px; border-radius:10px; color:var(--muted); text-decoration:none; font-weight:600}
.nav-links .dropdown a:hover{color:var(--accent); background:rgba(255,255,255,.04)}
.nav-links .has-dropdown:hover .dropdown{display:flex}
.btn{display:inline-flex; align-items:center; gap:8px; border-radius:999px; padding:10px 16px; text-decoration:none; font-weight:700; letter-spacing:.2px; transition:background-color .2s, color .2s, box-shadow .2s}
.btn-primary{background:#07638c; color:#000; box-shadow:0 8px 20px rgba(7,99,140,.25); border:1px solid #06506f}
.btn-primary:hover{background:#0a7ca7; }
.btn-ghost{border:1px solid var(--border); color:var(--text); background:rgba(255,255,255,.02)}

.menu-toggle{display:none; background:transparent; border:0; color:var(--text); font-size:24px}
@media(max-width:900px){
  .menu-toggle{display:block}
  /* Popover: always absolutely positioned below the header; hidden by default */
  #primary-nav{
    position:absolute;
    top:calc(100% + 8px);
    right:20px;
    display:none;
    flex-direction:column;
    gap:6px;
    width:min(92vw, 320px);
    padding:10px;
    border-radius:14px;
    border:1px solid var(--border);
    background:linear-gradient(180deg, rgba(14,23,39,.98), rgba(11,22,36,.98));
    box-shadow:var(--shadow);
    z-index:50;
  }
  /* Show when toggle is expanded (and keep support for the header class) */
  .menu-toggle[aria-expanded="true"] + #primary-nav,
  .site-header.menu-open #primary-nav{display:flex}
  /* Full-width clickable rows */
  #primary-nav a{display:block; width:100%}
  #primary-nav a.btn{justify-content:center}
  /* Hide desktop hover dropdowns inside the mobile menu panel */
  #primary-nav .has-dropdown .dropdown{display:none}
  /* Mobile: plus toggles and inline submenu layout */
  #primary-nav .has-dropdown{display:flex; align-items:center; gap:8px; width:100%}
  #primary-nav .has-dropdown > a{flex:1 1 auto; display:block; width:100%; text-align:left}
  #primary-nav .has-dropdown .submenu-toggle{display:inline-flex}
  #primary-nav .has-dropdown.open .dropdown{display:flex; position:static; top:auto; left:auto; min-width:0; width:100%; padding:8px; margin-top:6px; flex-direction:column; gap:6px}
}

/* Hero */
.hero{position:relative; padding:72px 0 48px; min-height:100svh}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center}
.eyebrow{color:#07638c; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:12px}
 h1{font-size:48px; line-height:1.1; margin:10px 0 14px}
.lead{color:var(--muted); font-size:16px; max-width:56ch}
.cta-row{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.logo-hero{position:relative; aspect-ratio:1/1; border-radius:20px; background:none;
  border:1px solid var(--border); box-shadow:var(--shadow); display:grid; place-items:center;
  width:clamp(200px, 50vw, 460px); max-width:92vw; margin:0 auto;
}
.logo-hero img{width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 0 24px rgba(49,208,255,.35))}

/* Feature badges */
.badges{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:26px}
/* Elegant pill badges with subtle accent bar */
.badge{
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--text); font-weight:600; letter-spacing:.2px; text-align:center;
  padding:10px 16px; border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 6px 16px rgba(0,0,0,.18);
}
.badge::before{
  content:""; position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:4px; height:14px; border-radius:2px;
  background:#07638c; /* single, elegant color */
  box-shadow:0 0 6px rgba(7,99,140,.25);
}

/* Cards grid */
.section{padding:56px 0; min-height:100svh}
.section h2{font-size:28px; text-align:center; margin:0 0 10px}
.section p.sub{color:var(--muted); text-align:center; margin:0 0 30px}
/* Ensure native <section> elements also respect viewport height on iOS */
section{min-height:100svh}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:linear-gradient(180deg, rgba(14,23,39,.9), rgba(11,22,36,.9)); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow)}
.card h3{margin:12px 0 6px}
.card p{color:var(--muted); margin:0 0 14px}
.icon{width:54px; height:54px; border-radius:14px; display:grid; place-items:center; background:rgba(49,208,255,.10); border:1px solid var(--border)}
.card .btn-ghost{padding:8px 12px; font-size:13px}

/* Value props */
.value-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.pill{display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--muted)}

/* CTA strip */
.cta-strip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:36px 0; background:linear-gradient(180deg, rgba(49,208,255,.06), rgba(49,208,255,0)); min-height:100svh}
.cta-box{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; background:rgba(4,8,15,.35); border:1px solid var(--border); border-radius:16px; padding:18px 20px}

/* Footer */
.site-footer{padding:30px 0; color:var(--muted); font-size:14px}
.footer-top{display:flex; align-items:center; justify-content:space-between; gap:16px}
.footer-nav{display:flex; gap:16px}
.footer-nav a{color:var(--muted); text-decoration:none}
.footer-nav a:hover{color:var(--accent)}
.social a{display:inline-flex; width:28px; height:28px; border:1px solid var(--border); align-items:center; justify-content:center; border-radius:8px; color:var(--muted); text-decoration:none}
.social a:hover{color:var(--accent); border-color:var(--accent)}

/* Contact info links: stylish, non-default look */
.contact-link{color:var(--text); text-decoration:none; border-bottom:1px dashed rgba(49,208,255,.35); transition:color .2s ease, border-color .2s ease}
.contact-link:hover{color:var(--accent); border-bottom-color:var(--accent)}
.contact-link:focus{outline:2px solid #07638c; outline-offset:2px}
.contact-link.whatsapp{color:#25D366; border-bottom-color:rgba(37,211,102,.35)}
.contact-link.whatsapp:hover{color:#25D366; border-bottom-color:#25D366}
.contact-link.phone{color:var(--text)}
.contact-link.email{color:var(--text)}

/* Responsive */
@media(max-width:1100px){
  .hero-grid{grid-template-columns:1fr;}
  .logo-hero{width:clamp(200px, 52vw, 420px);}
}
@media(max-width:900px){
  .badges{grid-template-columns:repeat(2,1fr)}
  .cards,.value-cards{grid-template-columns:1fr 1fr}
  .logo-hero{width:clamp(160px, 58vw, 340px)}
  .logo-hero img{width:80%; height:80%}
}
@media(max-width:640px){
  h1{font-size:36px}
  .cards,.value-cards{grid-template-columns:1fr}
  .footer-top{flex-direction:column; align-items:flex-start}
  .logo-hero{width:clamp(140px, 66vw, 300px)}
  .logo-hero img{width:78%; height:78%}
  /* Nudge header logo inward on small screens */
  .site-header .brand{padding-left:10px}
  /* Mobile-friendly spacing reductions */
  .section{padding:40px 0}
  .section h2{font-size:24px}
  .card{padding:16px}
  .icon{width:44px; height:44px}
  .badges{gap:10px}
  .badge{padding:8px 12px; font-size:14px}
  .form-card{padding:16px}
  .input, .select, .textarea{padding:8px 10px}
  .select{font-size:13px}
}

/* Extra small screens: keep two badges per row */
@media(max-width:480px){
  .badges{grid-template-columns:repeat(2,1fr)}
}

/* Page-specific mobile background tuning for About & Contact */
@media(max-width:900px){
  .page-about, .page-contact, .page-services, .page-portfolio{
    background: radial-gradient(800px 420px at 75% -12%, rgba(49,208,255,.16), transparent 60%),
                radial-gradient(620px 360px at 12% 22%, rgba(100,255,218,.10), transparent 60%),
                linear-gradient(180deg, var(--bg-0), var(--bg-1) 42%, var(--bg-2) 100%);
  }
}
@media(max-width:640px){
  .page-about, .page-contact, .page-services, .page-portfolio{
    background: radial-gradient(560px 300px at 72% -16%, rgba(49,208,255,.15), transparent 60%),
                radial-gradient(460px 280px at 14% 26%, rgba(100,255,218,.10), transparent 60%),
                linear-gradient(180deg, var(--bg-0), var(--bg-1) 44%, var(--bg-2) 100%);
  }
}
@media(max-width:420px){
  .page-about, .page-contact, .page-services, .page-portfolio{
    /* Simplified mix for very small screens to remove seams */
    background: radial-gradient(420px 240px at 68% -18%, rgba(49,208,255,.14), transparent 60%),
                linear-gradient(180deg, var(--bg-0), var(--bg-1) 46%, var(--bg-2) 100%);
  }
}

/* About page: increase text contrast for readability */
.page-about main{ --text:#ffffff; --muted:#f2f7ff; }
.page-about .sub{ color:#ffffff; opacity:.92 }
.page-about .card p{ color:#ffffff }
.page-about .muted-list{ color:#ffffff }

/* Portfolio page */
.filters{display:flex; gap:10px; margin-top:18px; margin-bottom:18px; flex-wrap:wrap}
.filter-btn{border:1px solid var(--border); background:rgba(255,255,255,.02); color:var(--text); padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:600}
.filter-btn:hover{border-color:#07638c; color:#07638c}
.filter-btn.active{background:#07638c; color:#000; box-shadow:0 8px 20px rgba(7,99,140,.25); border-color:#06506f}

.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
/* Forms */
.form-section{padding:56px 0; min-height:100svh}
.form-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:22px}
.form-card{background:linear-gradient(180deg, rgba(14,23,39,.9), rgba(11,22,36,.9)); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px}
.form-row{display:flex; flex-direction:column; gap:6px}
.form-row.inline{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-row label{font-weight:600; font-size:14px}
.input, .select, .textarea{width:100%; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:12px 12px; font:inherit}
.textarea{min-height:120px; resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
/* Dark-themed selects and dropdown options for better visibility */
.select{background:linear-gradient(180deg, rgba(14,23,39,.92), rgba(11,22,36,.92)); color:var(--text); color-scheme:dark}
.select option{background-color:#0b1624 !important; color:var(--text) !important}
.select optgroup{background-color:#0b1624 !important; color:var(--text) !important; font-weight:700}
.select optgroup option{background-color:#0b1624 !important; color:var(--text) !important}
.select:focus{outline:none; border-color:#07638c; box-shadow:0 0 0 3px rgba(7,99,140,.2)}
.quote-form .select{background:linear-gradient(180deg, rgba(14,23,39,.94), rgba(11,22,36,.94))}
.quote-form .select option,.quote-form .select optgroup,.quote-form .select optgroup option{background-color:#0b1624}
/* Quote form: enhanced placeholder styling */
.quote-form .input::placeholder,
.quote-form .textarea::placeholder{color:var(--muted); font-style:italic; letter-spacing:.2px; opacity:.78; transition:opacity .2s ease, color .2s ease}
.quote-form .input:focus::placeholder,
.quote-form .textarea:focus::placeholder{opacity:.35; color:#07638c}
/* Vendor-specific placeholder support */
.quote-form .input::-webkit-input-placeholder,
.quote-form .textarea::-webkit-input-placeholder{color:var(--muted); font-style:italic; letter-spacing:.2px; opacity:.78}
.quote-form .input:focus::-webkit-input-placeholder,
.quote-form .textarea:focus::-webkit-input-placeholder{opacity:.35; color:#07638c}
.quote-form .input:-ms-input-placeholder,
.quote-form .textarea:-ms-input-placeholder{color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:#07638c; box-shadow:0 0 0 3px rgba(7,99,140,.2)}
.invalid{border-color:#b54747 !important; box-shadow:0 0 0 3px rgba(181,71,71,.18) !important}
.help{font-size:12px; color:var(--muted)}
.error-text{font-size:12px; color:#ff8b8b}
.alert{border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin:10px 0; background:rgba(255,255,255,.03)}
.alert-success{border-color:rgba(100,255,218,.35); color:#b6ffe9; background:rgba(100,255,218,.06)}
.alert-error{border-color:rgba(255,107,107,.35); color:#ffc1c1; background:rgba(255,107,107,.06)}
.muted-list{color:var(--muted); margin:0 0 0 16px}

@media(max-width:1100px){.form-grid{grid-template-columns:1fr}}
@media(max-width:640px){.form-row.inline{grid-template-columns:1fr}}

/* Mobile app-style bottom bar */
.mobile-app-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:8px 10px; border-top:1px solid var(--border);
  backdrop-filter:saturate(120%) blur(12px);
  background:linear-gradient(180deg, rgba(4,8,15,.88), rgba(4,8,15,.66));
  width:100%; max-width:100%; box-sizing:border-box; overflow:hidden; /* avoid 100vw-induced horizontal scroll */
  /* iOS Safari: keep above bottom UI */
  bottom: env(safe-area-inset-bottom);
  bottom: constant(safe-area-inset-bottom);
  visibility:visible; opacity:1;
}
.mobile-app-bar{flex-direction:row}
.mobile-app-bar .app-link{flex:1 0 20%; max-width:20%; min-width:0; display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--muted);
  padding:6px; border-radius:10px}
.mobile-app-bar .app-link .app-icon{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; background:rgba(49,208,255,.06); border:1px solid var(--border)}
.mobile-app-bar .app-link span:not(.app-icon){display:none}
.mobile-app-bar .app-link:hover{color:var(--accent)}
.mobile-app-bar .app-link.active{color:#07638c}
.mobile-app-bar .app-link.active .app-icon{border-color:#06506f; box-shadow:0 0 0 1px #06506f inset, 0 6px 16px rgba(7,99,140,.18); background:rgba(7,99,140,.12)}
/* Extra isolation for About/Contact icons (identical look, explicit rules) */
.mobile-app-bar .app-link-about .app-icon,
.mobile-app-bar .app-link-contact .app-icon{width:24px; height:24px; display:grid; place-items:center; border-radius:8px; background:rgba(49,208,255,.06); border:1px solid var(--border)}

@media(max-width:900px){
  .mobile-app-bar{justify-content:space-between; padding-bottom:calc(8px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}
@media(min-width:901px){
  .mobile-app-bar{display:none !important}
}
.project-card{background:linear-gradient(180deg, rgba(14,23,39,.9), rgba(11,22,36,.9)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.project-thumb{height:140px; background:radial-gradient(400px 200px at 70% -10%, rgba(49,208,255,.18), transparent 60%), linear-gradient(180deg, rgba(10,18,31,1), rgba(8,16,27,1)); border-bottom:1px solid var(--border)}
.project-thumb img{width:100%; height:100%; object-fit:contain; display:block; padding:8px}
.project-body{padding:18px}
.project-body h3{margin:8px 0 6px}
.project-desc{color:var(--muted); margin:0 0 10px}
.project-tech{color:var(--muted); font-size:13px}
.project-card:hover{transform:translateY(-2px); transition:transform .2s ease}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:20px; z-index:100}
.modal.open{display:flex}
.modal-content{max-width:900px; width:100%; background:linear-gradient(180deg, rgba(14,23,39,.98), rgba(11,22,36,.98)); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:20px}
.modal-close{background:transparent; border:1px solid var(--border); color:var(--text); border-radius:8px; float:right; padding:6px 10px; cursor:pointer}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:10px}
.modal-content h4{margin:12px 0 6px}
.modal-content ul{margin:0 0 10px 16px}

/* Utilities: alternate card grid counts */
.cards.cards-2{grid-template-columns:repeat(2,1fr)}
.cards.cards-4{grid-template-columns:repeat(4,1fr)}

/* Ensure two-column card grids stack on mobile to avoid clipping */
@media(max-width:900px){
  .cards.cards-2{grid-template-columns:1fr}
  .cards.cards-4{grid-template-columns:1fr}
}
@media(max-width:640px){
  .cards.cards-2{grid-template-columns:1fr}
  .cards.cards-4{grid-template-columns:1fr}
}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.visible{opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease}

@media(max-width:900px){
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .modal-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .portfolio-grid{grid-template-columns:1fr}
}

/* Select caret & mobile-friendly select padding overrides */
.select{appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:34px; background-repeat:no-repeat; background-position:right 10px center; background-size:14px}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cfe8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");}
@media(max-width:640px){
  .input, .select, .textarea{padding:12px 14px !important}
}