:root{
  --bg:#ffffff; --surface:#ffffff; --text:#2A2A2A; --muted:#6B6B6B;
  --accent:#C04B12; --accent-2:#335C81; --border:#E9E9E9;
  --radius:12px; --shadow:0 12px 30px rgba(0,0,0,.08);
  --container:1200px;
  /* spacing scale */
  --sp-2:2px; --sp-4:4px; --sp-6:6px; --sp-8:8px; --sp-10:10px;
  --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px; --sp-32:32px;
  --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-80:80px; --sp-96:96px;
  /* type scale */
  --h1:clamp(32px, 4vw, 52px);
  --h2:clamp(24px, 3vw, 36px);
  --h3:clamp(18px, 2.2vw, 24px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.65}
html,body{overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-20)}
section{padding:var(--sp-64) 0}

/* Match site container to wide hero on large screens */
@media (min-width: 1200px){ :root{ --container: 1440px; } }
@media (min-width: 1600px){ :root{ --container: 1600px; } }

/* Grid */
.grid{display:grid;gap:var(--sp-24)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Widen project cards grid on ultra-wide screens */
@media (min-width: 1400px){
  #projects .grid-3{ gap: var(--sp-40); }
}
@media (min-width: 1600px){
  #projects .grid-3{ gap: var(--sp-48); grid-template-columns: repeat(3, minmax(480px, 1fr)); }
}

/* Header */
.header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--border);z-index:1000}
.header--fixed{position:fixed;top:0;left:0;right:0}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px}
.logo img{height:36px;width:auto}
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--text);font-weight:600}
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.menu-btn .hamburger{display:inline-block;width:22px;height:16px;position:relative}
.menu-btn .hamburger span{position:absolute;left:0;right:0;height:2px;background:#333;border-radius:2px;transition:transform .2s ease, opacity .2s ease}
.menu-btn .hamburger span:nth-child(1){top:0}
.menu-btn .hamburger span:nth-child(2){top:7px}
.menu-btn .hamburger span:nth-child(3){bottom:0}
.menu-btn[aria-expanded="true"] .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .hamburger span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:840px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:10px 0;
    box-shadow:0 12px 30px rgba(0,0,0,.06)}
  .nav[data-open="true"]{display:flex;flex-direction:column;gap:10px}
  .nav a{padding:10px var(--sp-20)}
  .header-inner{position:relative}
  .menu-btn{display:inline-flex}
}

/* Hero */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{background:radial-gradient(1200px 600px at 10% -10%, rgba(192,75,18,.08), transparent), radial-gradient(1200px 600px at 110% 10%, rgba(51,92,129,.08), transparent);}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.96));z-index:-1}
.hero .hero-inner{display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:var(--sp-40)}
.hero h1{font-family:Kanit,Inter,sans-serif;font-size:var(--h1);line-height:1.1;margin:0 0 var(--sp-12)}
.hero p{font-size:18px;color:var(--muted);margin:0 0 var(--sp-24)}
.hero-cta{display:flex;gap:var(--sp-12);flex-wrap:wrap}
.hero .card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp-16);background:var(--surface)}
@media(max-width:900px){.hero .hero-inner{grid-template-columns:1fr}}
.hero-img{width:100%;height:auto;border-radius:var(--radius);box-shadow:var(--shadow);object-fit:cover}
.hero-visual{position:relative}
.hero-visual::after{content:"";position:absolute;inset:auto -10% -12% -10%;height:50px;background:radial-gradient(60% 100% at 50% 0%, rgba(192,75,18,.18), transparent 60%);filter:blur(20px);z-index:-1}

/* Make hero image more prominent on wide screens */
@media (min-width: 1200px){
  .hero{ --container: 1440px; }
  .hero .hero-inner{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1600px){
  .hero{ --container: 1600px; }
}

/* Bias layout and allow the hero image to scale/bleed a bit on ultra-wide */
@media (min-width: 1400px){
  .hero .hero-inner{ grid-template-columns: 0.9fr 1.1fr; }
  .hero .hero-visual{ margin-right: -2vw; }
  .hero .hero-img{ max-width:none; width:min(120%, 1100px); }
}

/* Diagonal split hero variant */
.hero--diagonal::before{background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.98))}
.hero--diagonal::after{content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(135deg, rgba(192,75,18,.08) 0%, rgba(192,75,18,.08) 50%, transparent 50%)
    ,linear-gradient(315deg, rgba(51,92,129,.08) 0%, rgba(51,92,129,.08) 50%, transparent 50%);
  -webkit-mask: linear-gradient(180deg, #000 30%, transparent 110%);
          mask: linear-gradient(180deg, #000 30%, transparent 110%);
}

/* Cards */
.card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface);transition:transform .15s ease, box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.09)}
.card-body{padding:var(--sp-18,var(--sp-16))}
.card h3{margin:0 0 var(--sp-8);font-size:var(--h3)}
.muted{color:var(--muted)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:999px;padding:12px 18px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:.18s ease;will-change:transform;position:relative;overflow:hidden}
.btn:focus-visible{outline:3px solid rgba(192,75,18,.35);outline-offset:2px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{background:#fff;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:#cfcfcf;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.btn-ghost{background:transparent;color:var(--text)}

/* Button micro-interactions: sheen + lift */
.btn::before{content:"";position:absolute;inset:0;transform:translateX(-120%);background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%)}
.btn:hover::before{transition:transform .5s ease;transform:translateX(120%)}
.btn:hover{transform:translateY(-1px)}

/* Spinner (brand-colored) */
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--accent);border-top-color:transparent;display:inline-block;animation:spin .9s linear infinite}
.btn-primary .spinner{border-color:rgba(255,255,255,.85);border-top-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* Accents */
.underline-accent{position:relative;display:inline-block}
.underline-accent::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg, rgba(192,75,18,.25), rgba(51,92,129,.25));border-radius:999px}

/* Sections */
.section--tint{background:linear-gradient(180deg,#fff, #fcfcfc)}

/* Project cards */
.card--project .card-body{display:grid;gap:12px}
.card--project h3{display:flex;align-items:center;gap:10px}
.card--project h3::after{content:"";flex:1;height:1px;background:var(--border)}

/* Project logos */
.project-logo-wrap{display:flex;align-items:center;justify-content:center;padding:16px;border:none;border-radius:10px;background:#fafafa}
.project-logo{max-height:54px;max-width:200px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(0,0,0,.02))}
@media (min-width: 1200px){
  .project-logo{max-height:64px;max-width:240px}
}

/* Badges */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{display:inline-block;padding:6px 12px;border-radius:999px;background:#f6f6f6;color:#444;font-size:12px;border:1px solid var(--border)}

/* Forms */
.input,textarea{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;color:var(--text)}
.input:focus,textarea:focus{outline:2px solid #e8e8e8}
.field{display:grid;gap:6px}
.help{font-size:12px;color:var(--muted)}
.error{color:#b00020;font-size:13px}
.form-row{display:grid;gap:12px}

/* Utilities */
.center{display:grid;place-items:center}
.stack-sm>*+*{margin-top:8px}
.stack-md>*+*{margin-top:14px}
.stack-lg>*+*{margin-top:20px}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* Section headings */
section h2{font-size:var(--h2);margin:0 0 var(--sp-16)}
section .lead{color:var(--muted);margin:0 0 var(--sp-24)}

/* Eyebrow label */
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--accent-2);margin-bottom:var(--sp-10)}

/* Helpers */
.visually-hidden,.sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;clip:rect(0 0 0 0)!important;overflow:hidden!important;white-space:nowrap!important}

/* Footer */
.footer{border-top:1px solid var(--border);padding:var(--sp-32) 0;background:linear-gradient(180deg,#fff, #fafafa)}
.footer-grid{display:grid;gap:24px;grid-template-columns:1.4fr .6fr}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr}}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn,.btn::before{transition:none!important}
  .btn:hover{transform:none}
  .btn::before{display:none}
}