<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, viewport-fit=cover">
  <title>Clay & Co · material studio</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz@9..40&family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet">
  <style>
    /* ===== BASE (already in file, but kept clean) ===== */
    *{box-sizing:border-box;margin:0;padding:0}
    :root{--ink:#17201d;--ink-2:#26332e;--muted:#69746f;--paper:#f3f1ea;--white:#fff;--sand:#d7c8ad;--clay:#a85e3d;--clay-dark:#7e422b;--line:rgba(23,32,29,.12);--max:1240px;--radius:24px}
    html{scroll-behavior:smooth;width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
    body{font-family:"DM Sans",sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;overflow-x:hidden;width:100%;max-width:100%;margin:0;-webkit-overflow-scrolling:touch}
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}button,input,textarea{font:inherit;max-width:100%}
    button{cursor:pointer}img{max-width:100%;display:block;height:auto}
    iframe{display:block;width:100%;border:0}
    .section{padding:clamp(80px,10vw,150px) 24px;position:relative;max-width:100%}
    .section-shell{width:min(var(--max),100%);margin:auto}
    /* ... rest of the original styles (kept intact) ... */
    .site-noise{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
    .cursor-glow{position:fixed;width:300px;height:300px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(168,94,61,.12),transparent 65%);transform:translate(-50%,-50%);z-index:2;mix-blend-mode:multiply}
    .loader{position:fixed;inset:0;background:var(--ink);color:white;z-index:9999;display:grid;place-items:center;align-content:center;gap:22px;transition:opacity .8s,visibility .8s}
    .loader.done{opacity:0;visibility:hidden}
    .loader-mark{width:72px;height:72px;padding:10px;border:1px solid rgba(255,255,255,.2);border-radius:18px}.loader-mark img{width:100%;height:100%;object-fit:contain}
    .loader p{font:700 10px/1 "Manrope";letter-spacing:.22em}
    .loader-line{width:170px;height:1px;background:rgba(255,255,255,.15);overflow:hidden}.loader-line span{display:block;width:50%;height:100%;background:var(--sand);animation:load 1.4s ease forwards}
    @keyframes load{to{transform:translateX(200%)}}
    .nav{height:82px;position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2));transition:.35s;background:rgba(243,241,234,.05);color:white}
    .nav.scrolled{height:68px;background:rgba(243,241,234,.9);backdrop-filter:blur(18px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
    .brand{display:flex;align-items:center;gap:11px}.brand-logo{width:44px;height:44px;border-radius:12px;background:white;padding:6px;display:grid;place-items:center}.brand-logo img{width:100%;height:100%;object-fit:contain}
    
    /* =========================================================
   ADDITIONAL @MEDIA FOR MODERN SMALL DEVICES
   iPhone 15/16/17, Pixel, Samsung S24/25/26
   ========================================================= */

/* ===== 430px - 480px: Modern phones (iPhone 15/16/17, Pixel 8/9, S24/25/26) ===== */
@media (max-width: 480px) {
  .section {
    padding-block: 64px;
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .nav {
    height: 72px;
    padding: 0 16px;
  }
  
  .nav.scrolled {
    height: 60px;
  }
  
  .brand-logo {
    width: 36px;
    height: 36px;
    padding: 4px;
  }
  
  .brand-copy strong {
    font-size: 14px;
  }
  
  .brand-copy small {
    font-size: 7px;
    margin-top: 3px;
  }
  
  .hero {
    padding: 100px 16px 60px;
    min-height: 100dvh;
  }
  
  .hero h1 {
    font-size: clamp(2.2rem, 14vw, 3.4rem);
    line-height: 0.95;
  }
  
  .hero-lead {
    font-size: 14px;
    margin: 18px 0;
    line-height: 1.5;
  }
  
  .hero-actions {
    gap: 8px;
  }
  
  .hero-actions .btn {
    min-height: 44px;
    font-size: 11px;
    padding: 0 16px;
    gap: 20px;
  }
  
  .hero-actions .btn span {
    font-size: 14px;
  }
  
  .hero-proof {
    margin-top: 30px;
    gap: 14px;
    flex-wrap: wrap;
  }
  
  .hero-proof strong {
    font-size: 16px;
  }
  
  .hero-proof span {
    font-size: 7px;
  }
  
  .hero-proof i {
    height: 24px;
  }
  
  .hero-visual {
    height: 280px;
    min-height: 200px;
  }
  
  .hero-visual img {
    width: min(70vw, 280px);
    max-height: 32svh;
  }
  
  .visual-chip {
    padding: 8px 12px;
    max-width: 180px;
    bottom: 8%;
    left: 0;
  }
  
  .visual-chip b {
    font-size: 8px;
  }
  
  .visual-chip small {
    font-size: 7px;
  }
  
  .chip-dot {
    width: 6px;
    height: 6px;
  }
  
  .visual-label {
    font-size: 7px;
    top: 2%;
    right: 0;
  }
  
  .visual-index {
    font-size: 8px;
    bottom: 4%;
    right: 0;
  }
  
  .visual-ring {
    width: 65%;
  }
  
  .eyebrow {
    font-size: 8px;
    gap: 8px;
  }
  
  .eyebrow > span {
    width: 18px;
  }
  
  h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }
  
  .section-kicker {
    font-size: 8px;
    margin-bottom: 22px;
    gap: 8px;
  }
  
  .section-kicker i {
    width: 28px;
  }
  
  .intro-grid {
    gap: 28px;
  }
  
  .intro-text .large {
    font-size: clamp(18px, 4vw, 22px);
  }
  
  .marquee {
    margin-top: 60px;
    padding: 14px 0;
  }
  
  .marquee-track {
    font-size: 10px;
    gap: 20px;
  }
  
  .products-heading {
    margin-bottom: 32px;
    gap: 16px;
  }
  
  .products-heading h2 {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }
  
  .products-heading > p {
    font-size: 12px;
    max-width: 100%;
  }
  
  .product-card {
    min-height: 340px;
    border-radius: 14px;
  }
  
  .product-art {
    min-height: 160px;
  }
  
  .product-body {
    padding: 18px;
  }
  
  .product-body h3 {
    font-size: 20px;
    margin: 6px 0;
  }
  
  .product-body p {
    font-size: 12px;
  }
  
  .product-number {
    font-size: 8px;
    top: 14px;
    left: 14px;
  }
  
  .enquire-btn {
    font-size: 10px;
    padding: 10px 0 6px;
  }
  
  .enquire-btn b {
    font-size: 14px;
  }
  
  .capability-top {
    gap: 20px;
  }
  
  .capability-top p {
    font-size: 12px;
    max-width: 100%;
  }
  
  .metrics {
    margin-top: 40px;
    grid-template-columns: 1fr 1fr;
  }
  
  .metric {
    padding: 20px 14px;
  }
  
  .metric strong {
    font-size: clamp(30px, 8vw, 40px);
  }
  
  .metric span {
    font-size: 10px;
  }
  
  .metric small {
    font-size: 8px;
    margin-top: 4px;
  }
  
  .metric:nth-child(2) {
    border-right: 0;
  }
  
  .metric:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  
  .capability-cards {
    margin-top: 40px;
    gap: 10px;
  }
  
  .cap-card {
    padding: 20px;
    min-height: 180px;
    border-radius: 14px;
  }
  
  .cap-card h3 {
    font-size: 18px;
  }
  
  .cap-card p {
    font-size: 11px;
  }
  
  .cap-icon {
    font-size: 26px;
    margin: 16px 0 14px;
  }
  
  .facility-heading {
    margin-bottom: 32px;
    gap: 16px;
  }
  
  .facility-heading > p {
    font-size: 12px;
    max-width: 100%;
  }
  
  .gallery-feature {
    gap: 8px;
  }
  
  .gallery-main {
    min-height: 260px;
    height: 70vw;
    border-radius: 16px;
  }
  
  .gallery-caption {
    left: 16px;
    bottom: 16px;
    max-width: 80%;
  }
  
  .gallery-caption h3 {
    font-size: clamp(20px, 6vw, 28px);
    margin: 4px 0;
  }
  
  .gallery-caption p {
    font-size: 10px;
  }
  
  .gallery-caption span {
    font-size: 7px;
  }
  
  .gallery-arrow {
    width: 34px;
    height: 34px;
    bottom: 16px;
    font-size: 12px;
  }
  
  .gallery-arrow.prev {
    right: 58px;
  }
  
  .gallery-arrow.next {
    right: 16px;
  }
  
  .gallery-side {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 56px;
    gap: 6px;
  }
  
  .gallery-thumb {
    border-radius: 8px;
  }
  
  .gallery-thumb span {
    font-size: 7px;
    left: 6px;
    bottom: 4px;
  }
  
  .facility-strip {
    margin-top: 16px;
  }
  
  .facility-strip div {
    padding: 14px 12px;
  }
  
  .facility-strip span {
    font-size: 7px;
  }
  
  .facility-strip strong {
    font-size: 11px;
  }
  
  .ventures-heading {
    margin-bottom: 32px;
    gap: 16px;
  }
  
  .ventures-heading p {
    font-size: 12px;
    max-width: 100%;
  }
  
  .venture-card {
    padding: 20px;
    min-height: 280px;
    border-radius: 16px;
  }
  
  .venture-card h3 {
    font-size: 24px;
  }
  
  .venture-card p {
    font-size: 12px;
  }
  
  .venture-symbol {
    font-size: 32px;
    margin: 28px 0 14px;
  }
  
  .venture-card ul {
    gap: 12px;
    padding-top: 12px;
    margin-top: 14px;
  }
  
  .venture-card li {
    font-size: 9px;
  }
  
  .cta-band {
    padding: 72px 16px;
  }
  
  .cta-band h2 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
    margin: 16px 0 28px;
  }
  
  .cta-row p {
    font-size: 12px;
    max-width: 100%;
  }
  
  .cta-row .btn {
    min-height: 44px;
    font-size: 11px;
    padding: 0 16px;
  }
  
  .contact-heading {
    margin-bottom: 32px;
    gap: 16px;
  }
  
  .contact-heading p {
    font-size: 12px;
    max-width: 100%;
  }
  
  .contact-grid {
    gap: 30px;
  }
  
  .contact-line {
    grid-template-columns: 60px 1fr 16px;
    gap: 10px;
    padding: 16px 0;
  }
  
  .contact-line span {
    font-size: 7px;
  }
  
  .contact-line strong {
    font-size: 12px;
  }
  
  .contact-line > b {
    font-size: 14px;
  }
  
  .hours {
    padding: 16px 0;
  }
  
  .hours span {
    font-size: 7px;
  }
  
  .hours strong {
    font-size: 12px;
  }
  
  .map-top {
    height: 48px;
    padding: 0 14px;
  }
  
  .map-top span {
    font-size: 10px;
  }
  
  .map-top a {
    font-size: 9px;
  }
  
  .map-wrap iframe {
    height: 280px;
  }
  
  footer {
    padding: 50px 16px 20px;
  }
  
  .footer-main {
    gap: 32px;
    padding-bottom: 36px;
  }
  
  .footer-note {
    font-size: 12px;
    margin-top: 16px;
  }
  
  .footer-nav a {
    font-size: 11px;
  }
  
  .footer-nav span {
    font-size: 8px;
    margin-bottom: 4px;
  }
  
  .footer-bottom {
    font-size: 8px;
    padding-top: 14px;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  
  .whatsapp {
    width: 44px;
    height: 44px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    font-size: 8px;
  }
  
  .modal-card {
    padding: 24px 16px;
    border-radius: 16px;
  }
  
  .modal-card h2 {
    font-size: 32px;
    margin: 12px 0 8px;
  }
  
  .modal-card > p {
    font-size: 11px;
    margin-bottom: 18px;
  }
  
  .modal-card input,
  .modal-card textarea {
    padding: 10px 12px;
    font-size: 15px;
  }
  
  .modal-card label {
    font-size: 9px;
  }
  
  .modal-card .btn {
    min-height: 44px;
    font-size: 11px;
  }
  
  .modal-close {
    right: 14px;
    top: 14px;
    font-size: 22px;
  }
  
  /* Fix for iOS safe areas */
  @supports (padding: max(0px)) {
    .nav {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    
    .hero {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    
    .section {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
    
    body {
      padding-bottom: env(safe-area-inset-bottom);
    }
  }
}

/* ===== 390px - 430px: Small modern phones (iPhone 15/16/17 base, Pixel 7/8) ===== */
@media (max-width: 430px) {
  .hero h1 {
    font-size: clamp(1.9rem, 13vw, 2.8rem);
  }
  
  .hero-visual {
    height: 220px;
    min-height: 180px;
  }
  
  .hero-visual img {
    width: min(65vw, 240px);
    max-height: 28svh;
  }
  
  .hero-proof {
    gap: 10px;
  }
  
  .hero-proof strong {
    font-size: 14px;
  }
  
  .hero-proof i {
    height: 20px;
  }
  
  .product-art {
    min-height: 140px;
  }
  
  .product-body h3 {
    font-size: 18px;
  }
  
  .gallery-main {
    min-height: 220px;
    height: 72vw;
  }
  
  .gallery-side {
    grid-template-rows: 48px;
  }
  
  .gallery-thumb {
    border-radius: 6px;
  }
  
  .metric strong {
    font-size: clamp(26px, 7vw, 34px);
  }
  
  .cap-card {
    min-height: 160px;
    padding: 16px;
  }
  
  .venture-card {
    min-height: 240px;
    padding: 16px;
  }
  
  .venture-card h3 {
    font-size: 20px;
  }
  
  .map-wrap iframe {
    height: 220px;
  }
}

/* ===== 375px: iPhone SE, small Android ===== */
@media (max-width: 375px) {
  .section {
    padding-block: 48px;
    padding-left: 14px;
    padding-right: 14px;
  }
  
  .nav {
    height: 64px;
    padding: 0 14px;
  }
  
  .nav.scrolled {
    height: 54px;
  }
  
  .brand-logo {
    width: 32px;
    height: 32px;
  }
  
  .brand-copy strong {
    font-size: 13px;
  }
  
  .hero {
    padding: 88px 14px 40px;
  }
  
  .hero h1 {
    font-size: clamp(1.7rem, 12vw, 2.4rem);
  }
  
  .hero-lead {
    font-size: 13px;
    margin: 14px 0;
  }
  
  .hero-actions .btn {
    min-height: 40px;
    font-size: 10px;
    padding: 0 14px;
  }
  
  .hero-actions .btn span {
    font-size: 12px;
  }
  
  .hero-visual {
    height: 180px;
    min-height: 150px;
  }
  
  .hero-visual img {
    width: min(60vw, 200px);
    max-height: 24svh;
  }
  
  .hero-proof strong {
    font-size: 13px;
  }
  
  .hero-proof span {
    font-size: 6px;
  }
  
  .hero-proof {
    gap: 8px;
  }
  
  .hero-proof i {
    height: 16px;
  }
  
  .visual-chip {
    max-width: 150px;
    padding: 6px 10px;
    bottom: 6%;
  }
  
  .visual-chip b {
    font-size: 7px;
  }
  
  .visual-chip small {
    font-size: 6px;
  }
  
  .chip-dot {
    width: 5px;
    height: 5px;
  }
  
  h2 {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }
  
  .product-card {
    min-height: 280px;
  }
  
  .product-art {
    min-height: 120px;
  }
  
  .product-body {
    padding: 14px;
  }
  
  .product-body h3 {
    font-size: 16px;
    margin: 4px 0;
  }
  
  .product-body p {
    font-size: 11px;
  }
  
  .product-number {
    font-size: 7px;
    top: 10px;
    left: 10px;
  }
  
  .gallery-main {
    min-height: 180px;
    height: 75vw;
  }
  
  .gallery-caption {
    left: 12px;
    bottom: 12px;
  }
  
  .gallery-caption h3 {
    font-size: clamp(16px, 5vw, 22px);
  }
  
  .gallery-caption p {
    font-size: 9px;
  }
  
  .gallery-side {
    grid-template-rows: 40px;
    gap: 4px;
  }
  
  .gallery-arrow {
    width: 28px;
    height: 28px;
    bottom: 12px;
    font-size: 10px;
  }
  
  .gallery-arrow.prev {
    right: 48px;
  }
  
  .gallery-arrow.next {
    right: 12px;
  }
  
  .metric {
    padding: 14px 10px;
  }
  
  .metric strong {
    font-size: clamp(22px, 6vw, 30px);
  }
  
  .metric span {
    font-size: 9px;
  }
  
  .metric small {
    font-size: 7px;
  }
  
  .cap-card {
    padding: 14px;
    min-height: 140px;
  }
  
  .cap-card h3 {
    font-size: 16px;
  }
  
  .cap-icon {
    font-size: 22px;
    margin: 12px 0 10px;
  }
  
  .venture-card {
    padding: 14px;
    min-height: 200px;
  }
  
  .venture-card h3 {
    font-size: 18px;
  }
  
  .venture-symbol {
    font-size: 28px;
    margin: 20px 0 10px;
  }
  
  .cta-band {
    padding: 56px 14px;
  }
  
  .cta-band h2 {
    font-size: clamp(1.8rem, 9vw, 2.6rem);
    margin: 12px 0 20px;
  }
  
  .map-wrap iframe {
    height: 180px;
  }
  
  .contact-line {
    grid-template-columns: 50px 1fr 14px;
    gap: 8px;
    padding: 12px 0;
  }
  
  .contact-line strong {
    font-size: 11px;
  }
  
  .footer-main {
    gap: 24px;
    padding-bottom: 28px;
  }
  
  .modal-card {
    padding: 20px 14px;
  }
  
  .modal-card h2 {
    font-size: 28px;
  }
  
  .modal-card input,
  .modal-card textarea {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  @supports (padding: max(0px)) {
    .nav {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    
    .hero {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    
    .section {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }
}

/* ===== 360px: Very small devices ===== */
@media (max-width: 360px) {
  .hero h1 {
    font-size: 1.6rem;
  }
  
  .hero-visual {
    height: 160px;
    min-height: 130px;
  }
  
  .hero-visual img {
    width: min(55vw, 170px);
    max-height: 20svh;
  }
  
  .hero-actions .btn {
    min-height: 36px;
    font-size: 9px;
    padding: 0 12px;
  }
  
  .gallery-main {
    min-height: 160px;
    height: 78vw;
  }
  
  .gallery-side {
    grid-template-rows: 34px;
  }
  
  .gallery-thumb span {
    font-size: 6px;
    left: 4px;
    bottom: 3px;
  }
  
  .product-art {
    min-height: 100px;
  }
  
  .product-body {
    padding: 12px;
  }
  
  .product-body h3 {
    font-size: 14px;
  }
  
  .metric strong {
    font-size: 20px;
  }
  
  .cap-card {
    padding: 12px;
    min-height: 120px;
  }
  
  .cap-card h3 {
    font-size: 14px;
  }
  
  .venture-card {
    padding: 12px;
    min-height: 180px;
  }
  
  .venture-card h3 {
    font-size: 16px;
  }
}

/* ===== Dynamic Island & Notch safe areas ===== */
@supports (padding: max(0px)) {
  .hero {
    padding-top: max(100px, env(safe-area-inset-top, 20px));
  }
  
  @media (max-width: 480px) {
    .hero {
      padding-top: max(88px, env(safe-area-inset-top, 20px));
    }
  }
  
  @media (max-width: 430px) {
    .hero {
      padding-top: max(80px, env(safe-area-inset-top, 20px));
    }
  }
  
  @media (max-width: 375px) {
    .hero {
      padding-top: max(72px, env(safe-area-inset-top, 20px));
    }
  }
}

/* ===== High DPI / Retina displays ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .hero-product img {
    image-rendering: auto;
  }
}

/* ===== Dark mode preference (keep consistent) ===== */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #f3f1ea;
    --ink: #17201d;
  }
  
  body {
    background: var(--paper);
    color: var(--ink);
  }
}

/* ===== Reduced motion (already present, but reinforcing) ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .hero-product img {
    animation: none !important;
  }
  
  .visual-ring:after {
    animation: none !important;
  }
  
  .scroll-line span {
    animation: none !important;
  }
  
  .marquee-track {
    animation: none !important;
  }
  
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}
    
    
    .brand-copy{display:grid;line-height:1.05}.brand-copy strong{font:800 16px "Manrope";letter-spacing:-.04em}.brand-copy small{font-size:9px;text-transform:uppercase;letter-spacing:.18em;margin-top:5px;opacity:.65}
    .desktop-nav{display:flex;gap:30px;font-size:12px;font-weight:600}.desktop-nav a{position:relative;opacity:.8}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-7px;height:1px;background:currentColor;transition:.3s}.desktop-nav a:hover:after{right:0}
    .nav-cta{display:flex;align-items:center;gap:12px;border:1px solid currentColor;padding:10px 12px 10px 16px;border-radius:999px;font-size:11px;font-weight:700}.nav-cta b{font-size:15px}
    .menu-btn{display:none;border:0;background:none;width:44px;height:44px;position:relative}.menu-btn span{position:absolute;left:10px;width:24px;height:1.5px;background:currentColor;transition:.3s}.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:26px}.menu-btn.active span:first-child{top:22px;transform:rotate(45deg)}.menu-btn.active span:last-child{top:22px;transform:rotate(-45deg)}
    .mobile-panel{position:fixed;inset:0;background:var(--ink);color:white;z-index:90;transform:translateY(-100%);transition:.65s cubic-bezier(.77,0,.18,1);padding:110px 24px 40px}.mobile-panel.open{transform:translateY(0)}.mobile-panel-inner{display:flex;flex-direction:column;height:100%}.mobile-panel a{font:700 clamp(38px,10vw,68px) "Manrope";letter-spacing:-.06em;border-bottom:1px solid rgba(255,255,255,.1);padding:13px 0;display:flex;justify-content:space-between}.mobile-panel a span{font:12px "DM Sans";letter-spacing:.1em;opacity:.45}.mobile-contact{margin-top:auto;display:grid;gap:4px;font-size:12px;color:#aab2ae}
    .eyebrow{font:700 10px "Manrope";letter-spacing:.18em;display:flex;align-items:center;gap:10px;color:var(--clay)}.eyebrow>span{display:block;width:24px;height:1px;background:currentColor}.section-kicker{font:700 10px "Manrope";letter-spacing:.18em;color:var(--clay);display:flex;align-items:center;gap:12px;margin-bottom:34px}.section-kicker span{opacity:.55}.section-kicker i{width:42px;height:1px;background:currentColor;display:block}
    h1,h2,h3{font-family:"Manrope",sans-serif;letter-spacing:-.055em}h1{font-size:clamp(52px,7.5vw,112px);line-height:.92;font-weight:500}h1 strong,h2 em{font-weight:800;font-style:normal}h1 em,h2 em{color:var(--sand);font-style:normal}h2{font-size:clamp(44px,6vw,82px);line-height:.96;font-weight:500}
    .hero{min-height:100svh;background:#1a2420;color:white;position:relative;overflow:hidden;padding:130px 24px 50px;display:flex;align-items:center}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,26,23,.97) 0%,rgba(18,26,23,.78) 45%,rgba(18,26,23,.1) 100%);z-index:1}.hero-inner{width:min(var(--max),100%);margin:auto;display:grid;grid-template-columns:1.04fr .96fr;gap:30px;align-items:center;position:relative;z-index:3}.hero-copy{max-width:720px}.hero-lead{font-size:clamp(16px,1.5vw,20px);color:#cbd1cd;max-width:600px;margin:30px 0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.btn{min-height:50px;padding:0 19px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:30px;border:1px solid transparent;font-size:12px;font-weight:700;transition:.3s}.btn span{font-size:17px}.btn-solid{background:var(--clay);color:white}.btn-solid:hover{background:#c27655;transform:translateY(-3px);box-shadow:0 12px 30px rgba(168,94,61,.28)}.btn-ghost{border-color:rgba(255,255,255,.25);color:white}.btn-ghost:hover{background:white;color:var(--ink);transform:translateY(-3px)}.btn-light{background:white;color:var(--ink)}.hero-proof{display:flex;align-items:center;gap:22px;margin-top:60px}.hero-proof div{display:grid;gap:3px}.hero-proof strong{font:800 21px "Manrope";letter-spacing:-.05em}.hero-proof span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#99a39e}.hero-proof i{height:32px;width:1px;background:rgba(255,255,255,.18)}
    .hero-visual{height:min(650px,70vh);position:relative;display:grid;place-items:center}.hero-product{width:min(75%,520px);height:75%;display:grid;place-items:center;position:relative;z-index:3}.hero-product:before{content:"";position:absolute;width:88%;height:88%;background:radial-gradient(circle,rgba(215,200,173,.25),transparent 67%);filter:blur(20px)}.hero-product img{position:relative;filter:drop-shadow(0 35px 35px rgba(0,0,0,.35));animation:float 6s ease-in-out infinite}.visual-ring{position:absolute;width:75%;aspect-ratio:1;border:1px solid rgba(215,200,173,.18);border-radius:50%;box-shadow:0 0 0 70px rgba(215,200,173,.025),0 0 0 140px rgba(215,200,173,.018)}.visual-ring:after{content:"";position:absolute;inset:10%;border:1px dashed rgba(215,200,173,.15);border-radius:50%;animation:spin 30s linear infinite}.visual-label{position:absolute;top:11%;right:2%;font:700 9px/1.5 "Manrope";letter-spacing:.16em;color:#a9b1ad}.visual-chip{position:absolute;bottom:12%;left:1%;z-index:4;background:rgba(23,32,29,.75);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(14px);padding:12px 15px;border-radius:14px;display:flex;gap:11px;align-items:center;max-width:230px}.chip-dot{width:8px;height:8px;background:#93aa8e;border-radius:50%;box-shadow:0 0 0 5px rgba(147,170,142,.12)}.visual-chip div{display:grid}.visual-chip b{font:700 9px "Manrope";letter-spacing:.14em}.visual-chip small{font-size:9px;color:#aeb8b3;margin-top:3px}.visual-index{position:absolute;right:3%;bottom:9%;font:700 10px "Manrope";letter-spacing:.12em}.visual-index span{opacity:.35}
    .grid-lines{position:absolute;inset:0;opacity:.07;background:linear-gradient(90deg,transparent 24.9%,#fff 25%,transparent 25.1%,transparent 49.9%,#fff 50%,transparent 50.1%,transparent 74.9%,#fff 75%,transparent 75.1%);z-index:0}.hero-orb{position:absolute;border-radius:50%;filter:blur(4px);opacity:.2}.hero-orb-a{width:500px;height:500px;background:var(--clay);right:-180px;top:-150px}.hero-orb-b{width:380px;height:380px;background:var(--sand);left:-250px;bottom:-220px;opacity:.07}.hero-bottom{position:absolute;z-index:4;bottom:24px;left:50%;transform:translateX(-50%);width:min(var(--max),calc(100% - 48px));display:flex;justify-content:space-between;font:700 8px "Manrope";letter-spacing:.16em;color:#818c87}.scroll-line{width:100px;height:1px;background:rgba(255,255,255,.15);position:relative}.scroll-line span{position:absolute;left:0;top:0;width:28px;height:1px;background:var(--sand);animation:scrollline 2s infinite}
    .intro{background:var(--paper)}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.intro-text{max-width:560px}.intro-text p{color:var(--muted);margin-bottom:22px}.intro-text .large{font-size:clamp(20px,2vw,28px);line-height:1.35;color:var(--ink);letter-spacing:-.025em}.text-link{font-size:12px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:7px;display:inline-flex;gap:30px;margin-top:18px}.marquee{margin-top:120px;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.marquee-track{width:max-content;display:flex;gap:28px;align-items:center;animation:marquee 30s linear infinite;font:800 12px "Manrope";letter-spacing:.12em}.marquee b{color:var(--clay)}
    .products{background:#e8e5dc}.products-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:58px}.products-heading>p{max-width:330px;color:var(--muted);font-size:14px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.product-card{background:#f6f4ee;border:1px solid rgba(23,32,29,.08);border-radius:18px;overflow:hidden;min-height:460px;display:flex;flex-direction:column;position:relative;transition:.45s cubic-bezier(.2,.8,.2,1)}.product-card:hover{transform:translateY(-9px);box-shadow:0 24px 50px rgba(23,32,29,.11)}.product-feature{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}.product-wide{grid-column:span 2;display:grid;grid-template-columns:1fr 1fr}.product-number{position:absolute;top:20px;left:20px;font:700 10px "Manrope";color:#9a9f9b;z-index:3}.product-art{background:linear-gradient(145deg,#ded9cc,#f7f4eb);min-height:220px;display:grid;place-items:center;overflow:hidden}.product-feature .product-art,.product-wide .product-art{height:100%}.product-art img{width:70%;height:75%;object-fit:contain;transition:.7s cubic-bezier(.2,.8,.2,1)}.product-card:hover .product-art img{transform:scale(1.08) rotate(-2deg)}.product-body{padding:25px;display:flex;flex-direction:column;flex:1}.product-body>span{font:700 9px "Manrope";letter-spacing:.15em;color:var(--clay)}.product-body h3{font-size:27px;margin:8px 0}.product-body p{font-size:13px;color:var(--muted);max-width:420px}.enquire-btn{border:0;background:none;border-bottom:1px solid var(--line);padding:13px 0 8px;text-align:left;font-size:11px;font-weight:700;margin-top:auto;display:flex;justify-content:space-between}.enquire-btn b{font-size:16px;font-weight:400}
    .capability{background:var(--ink);color:white;overflow:hidden}.capability-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(168,94,61,.25),transparent 32%),radial-gradient(circle at 10% 90%,rgba(215,200,173,.08),transparent 30%)}.light{color:var(--sand)}.capability-top{display:flex;justify-content:space-between;align-items:end;gap:40px}.capability-top p{max-width:350px;color:#9da7a2;font-size:14px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);margin-top:80px}.metric{padding:35px 25px;border-right:1px solid rgba(255,255,255,.12)}.metric:last-child{border-right:0}.metric strong{display:block;font:800 clamp(38px,5vw,65px) "Manrope";letter-spacing:-.07em;color:var(--sand)}.metric span{display:block;font-size:12px;font-weight:700;margin-top:5px}.metric small{display:block;font-size:10px;color:#7f8984;margin-top:7px}.capability-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:70px}.cap-card{padding:28px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);border-radius:18px;min-height:260px;position:relative;transition:.35s}.cap-card:hover{background:rgba(255,255,255,.075);transform:translateY(-6px)}.cap-card>span{position:absolute;right:22px;top:20px;font:700 9px "Manrope";color:#6f7974}.cap-icon{font-size:32px;color:var(--sand);margin:28px 0 24px}.cap-card h3{font-size:22px;margin-bottom:9px}.cap-card p{font-size:12px;color:#89938e}
    /* ===== FACILITY SECTION – FIXED ===== */
    .facility{background:var(--paper);width:100%;overflow:hidden}
    .facility-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px;gap:20px;flex-wrap:wrap}
    .facility-heading>p{max-width:330px;color:var(--muted);font-size:14px;min-width:160px}
    .gallery-feature{display:grid;grid-template-columns:1fr 110px;gap:12px;width:100%}
    .gallery-main{height:min(650px,65vw);min-height:450px;background:#c9c5ba;position:relative;overflow:hidden;border-radius:22px}
    .gallery-main>img{width:100%;height:100%;object-fit:cover;transition:opacity .3s,transform 1s}
    .gallery-main.changed>img{opacity:.35;transform:scale(1.04)}
    .gallery-caption{position:absolute;left:30px;bottom:28px;color:white;z-index:2;max-width:450px;text-shadow:0 2px 20px rgba(0,0,0,.4)}
    .gallery-caption span{font:700 9px "Manrope";letter-spacing:.15em}
    .gallery-caption h3{font-size:clamp(28px,4vw,48px);margin:7px 0}
    .gallery-caption p{font-size:12px;color:#ddd}
    .gallery-main:after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.65));pointer-events:none}
    .gallery-arrow{position:absolute;z-index:3;bottom:28px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.2);color:white;display:flex;align-items:center;justify-content:center;cursor:pointer}
    .gallery-arrow.prev{right:82px}.gallery-arrow.next{right:28px}
    .gallery-side{display:grid;grid-template-rows:repeat(5,1fr);gap:10px;min-height:0}
    .gallery-thumb{border:0;padding:0;background:#d5d1c7;border-radius:12px;overflow:hidden;position:relative;opacity:.55;transition:.3s;cursor:pointer;width:100%;aspect-ratio:auto;min-height:0}
    .gallery-thumb.active,.gallery-thumb:hover{opacity:1}
    .gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .gallery-thumb span{position:absolute;left:9px;bottom:7px;color:white;font:700 9px "Manrope";text-shadow:0 1px 5px #000}
    .facility-strip{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);margin-top:22px}
    .facility-strip div{padding:20px;border-right:1px solid var(--line)}
    .facility-strip div:last-child{border:0}
    .facility-strip span{display:block;font:700 8px "Manrope";letter-spacing:.15em;color:var(--clay);margin-bottom:5px}
    .facility-strip strong{font-size:12px}
    /* ===== rest ===== */
    .ventures{background:#e8e5dc}.ventures-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:55px}.ventures-heading p{max-width:320px;color:var(--muted);font-size:14px}.venture-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.venture-card{min-height:390px;background:#f6f4ee;border-radius:20px;padding:28px;position:relative;border:1px solid var(--line);transition:.4s}.venture-card:hover{transform:translateY(-7px);box-shadow:0 20px 45px rgba(23,32,29,.1)}.venture-top{display:flex;justify-content:space-between;font:700 10px "Manrope";color:#929a95}.venture-symbol{font-size:45px;color:var(--clay);margin:55px 0 20px}.venture-card h3{font-size:31px}.venture-card p{color:var(--muted);font-size:13px;max-width:470px}.venture-card ul{list-style:none;margin-top:20px;border-top:1px solid var(--line);padding-top:15px;display:flex;gap:20px;flex-wrap:wrap}.venture-card li{font-size:10px;font-weight:700}.venture-card li:before{content:"✓";color:var(--clay);margin-right:7px}
    .cta-band{padding:110px 24px;background:var(--clay);color:white;position:relative;overflow:hidden}.cta-grid{position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,transparent,black 30%,black 70%,transparent)}.cta-band h2{font-size:clamp(50px,8vw,105px);margin:25px 0 45px}.cta-row{display:flex;justify-content:space-between;align-items:end;gap:30px}.cta-row p{max-width:390px;color:#f2ddd4;font-size:14px}.cta-band .eyebrow{color:#f0d2c5}
    .contact{background:var(--paper)}.contact-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:65px}.contact-heading p{max-width:320px;color:var(--muted);font-size:14px}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}.contact-details{border-top:1px solid var(--line)}.contact-line{display:grid;grid-template-columns:90px 1fr 20px;gap:15px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}.contact-line span,.hours span,.map-top span{font:700 8px "Manrope";letter-spacing:.14em;color:var(--clay)}.contact-line strong{font-size:14px;line-height:1.5}.contact-line>b{font-size:16px;font-weight:400}.hours{padding:22px 0;display:grid;gap:6px}.hours strong{font-size:10px;letter-spacing:.08em}.map-wrap{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#ddd8cc}.map-top{height:58px;padding:0 18px;display:flex;justify-content:space-between;align-items:center}.map-top a{font-size:10px;font-weight:700;border-bottom:1px solid}.map-wrap iframe{display:block;width:100%;height:420px;border:0;filter:saturate(.65) contrast(1.05)}
    footer{background:var(--ink);color:white;padding:70px 24px 25px}.footer-main{display:grid;grid-template-columns:1.5fr .7fr .7fr;gap:60px;padding-bottom:65px}.footer-brand .brand-logo{background:white}.footer-note{max-width:370px;color:#87928c;font-size:13px;margin-top:22px}.footer-nav{display:grid;align-content:start;gap:10px}.footer-nav span{font:700 9px "Manrope";letter-spacing:.16em;color:var(--sand);margin-bottom:8px}.footer-nav a{font-size:12px;color:#b2bbb6}.footer-nav a:hover{color:white}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;justify-content:space-between;font-size:9px;color:#727d77;letter-spacing:.08em}
    .whatsapp{position:fixed;right:22px;bottom:22px;z-index:70;width:52px;height:52px;border-radius:50%;background:#1e8b55;color:white;display:grid;place-items:center;font:800 9px "Manrope";letter-spacing:.05em;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:.3s}.whatsapp:hover{transform:scale(1.08)}
    .modal{position:fixed;inset:0;z-index:500;display:grid;place-items:center;visibility:hidden;opacity:0;transition:.35s}.modal.open{visibility:visible;opacity:1}.modal-backdrop{position:absolute;inset:0;background:rgba(10,15,13,.72);backdrop-filter:blur(10px)}.modal-card{position:relative;width:min(620px,calc(100% - 30px));max-height:90svh;overflow:auto;background:var(--paper);padding:38px;border-radius:24px;transform:translateY(20px);transition:.45s}.modal.open .modal-card{transform:none}.modal-close{position:absolute;right:18px;top:18px;border:0;background:none;font-size:28px}.modal-card h2{font-size:48px;margin:18px 0 10px}.modal-card>p{font-size:12px;color:var(--muted);margin-bottom:25px}.modal-card form{display:grid;gap:14px}.modal-card label{font-size:10px;font-weight:700}.modal-card input,.modal-card textarea{width:100%;border:1px solid var(--line);background:#fff;padding:13px 14px;border-radius:10px;outline:none;margin-top:6px}.modal-card input:focus,.modal-card textarea:focus{border-color:var(--clay)}.modal-card .btn{width:100%;margin-top:5px}
    .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.visible{opacity:1;transform:none}.reveal-delay{transition-delay:.1s}.reveal-delay-2{transition-delay:.18s}.reveal-delay-3{transition-delay:.26s}
    @keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1deg)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes scrollline{0%{transform:translateX(0)}100%{transform:translateX(72px)}}@keyframes marquee{to{transform:translateX(-50%)}}
    @media(max-width:900px){.desktop-nav,.nav-cta{display:none}.menu-btn{display:block}.hero-inner{grid-template-columns:1fr}.hero{padding-top:120px}.hero-copy{max-width:680px}.hero-visual{height:420px;order:-1}.hero-proof{margin-top:40px}.product-grid{grid-template-columns:1fr 1fr}.product-feature,.product-wide{grid-column:span 2}.capability-top,.products-heading,.facility-heading,.ventures-heading,.contact-heading{display:grid;gap:25px}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.12)}.capability-cards{grid-template-columns:1fr}.gallery-feature{grid-template-columns:1fr}.gallery-side{grid-template-columns:repeat(5,1fr);grid-template-rows:80px}.gallery-main{height:58vw;min-height:360px}.contact-grid{grid-template-columns:1fr}.footer-main{grid-template-columns:1fr 1fr}}
    @media(max-width:600px){.section{padding:82px 18px}.nav{padding:0 18px}.brand-copy small{font-size:8px}.hero{padding:110px 18px 80px;min-height:100svh}.hero-inner{gap:0}.hero h1{font-size:clamp(48px,14vw,76px)}.hero-lead{font-size:15px;margin:24px 0}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%}.hero-proof{gap:12px;justify-content:space-between}.hero-proof strong{font-size:18px}.hero-proof span{font-size:7px}.hero-visual{height:330px}.visual-label{top:4%;right:0}.visual-chip{left:0;bottom:5%;padding:9px 11px}.visual-index{bottom:5%;right:0}.hero-bottom{display:none}.intro-grid{grid-template-columns:1fr;gap:35px}.marquee{margin-top:75px}.products-heading h2{font-size:48px}.product-grid{grid-template-columns:1fr}.product-feature,.product-wide{grid-column:span 1;display:flex}.product-feature .product-art,.product-wide .product-art{height:auto}.product-card{min-height:425px}.product-art{min-height:200px}.metrics{grid-template-columns:1fr 1fr}.metric{padding:25px 14px}.metric strong{font-size:38px}.metric span{font-size:10px}.cap-card{min-height:220px}.gallery-main{height:75vw;min-height:300px}.gallery-caption{left:18px;bottom:18px}.gallery-arrow{bottom:18px}.gallery-arrow.prev{right:68px}.gallery-arrow.next{right:18px}.gallery-side{grid-template-rows:60px}.facility-strip{grid-template-columns:1fr}.facility-strip div{border-right:0;border-bottom:1px solid var(--line)}.venture-grid{grid-template-columns:1fr}.venture-card{min-height:350px}.cta-band{padding:85px 18px}.cta-band h2{font-size:58px}.cta-row{display:grid}.footer-main{grid-template-columns:1fr;gap:38px;padding-bottom:45px}.footer-bottom{display:grid;gap:8px}.contact-line{grid-template-columns:72px 1fr 18px}.modal-card{padding:28px 20px}.modal-card h2{font-size:42px}.cursor-glow{display:none}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
    /* viewport hardening */
    .container,.nav-inner,.hero-inner,.footer-grid,.contact-grid,.capability-grid,.products-grid,.gallery-layout,.intro-grid,.ventures-grid{width:min(100% - 40px,1240px);margin-inline:auto}
    .hero{min-height:100dvh;height:auto}
    .hero-inner{min-height:100dvh}
    .display,.hero h1,.section-title{overflow-wrap:anywhere;word-break:normal}
    .hero h1{text-wrap:balance}
    .gallery-main img{object-fit:cover}
    @media(max-width:680px){.hero-inner{min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding-top:76px;padding-bottom:24px}}
  </style>
</head>
<body>
  <div class="site-noise"></div>
  <div class="cursor-glow"></div>
  <div class="loader" id="loader"><div class="loader-mark"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23d7c8ad' rx='12'/%3E%3Cpath d='M30 30 L70 30 L70 70 L30 70 Z' stroke='%2317201d' stroke-width='5' fill='none'/%3E%3C/svg%3E" alt=""></div><p>loading</p><div class="loader-line"><span></span></div></div>
  <nav class="nav" id="nav"><div class="brand"><div class="brand-logo"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23d7c8ad' rx='12'/%3E%3Cpath d='M30 30 L70 30 L70 70 L30 70 Z' stroke='%2317201d' stroke-width='5' fill='none'/%3E%3C/svg%3E" alt=""></div><div class="brand-copy"><strong>clay</strong><small>material studio</small></div></div><div class="desktop-nav"><a href="#products">Products</a><a href="#capability">Capability</a><a href="#facility">Studio</a><a href="#ventures">Ventures</a><a href="#contact">Contact</a></div><div><a href="#" class="nav-cta"><b>⌘</b> Enquire</a><button class="menu-btn" id="menuBtn" aria-label="Menu"><span></span><span></span></button></div></nav>
  <div class="mobile-panel" id="mobilePanel"><div class="mobile-panel-inner"><a href="#products">Products <span>→</span></a><a href="#capability">Capability <span>→</span></a><a href="#facility">Studio <span>→</span></a><a href="#ventures">Ventures <span>→</span></a><a href="#contact">Contact <span>→</span></a><div class="mobile-contact"><span>info@clay.studio</span><span>+31 20 123 4567</span></div></div></div>
  <section class="hero" id="hero"><div class="hero-orb hero-orb-a"></div><div class="hero-orb hero-orb-b"></div><div class="grid-lines"></div><div class="hero-inner"><div class="hero-copy"><div class="eyebrow"><span></span>since 2016</div><h1>material <em>intelligence</em> <br>for <strong>the built</strong> world</h1><p class="hero-lead">Clay & Co. partners with architects and brands to craft surfaces that live—raw, tactile, and deeply human.</p><div class="hero-actions"><a href="#" class="btn btn-solid"><span>⌘</span> Explore products</a><a href="#" class="btn btn-ghost">Studio visit</a></div><div class="hero-proof"><div><strong>860+</strong><span>projects delivered</span></div><i></i><div><strong>12</strong><span>global studios</span></div><i></i><div><strong>4.9</strong><span>client rating</span></div></div></div><div class="hero-visual"><div class="visual-ring"></div><div class="hero-product"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect width='300' height='300' fill='%23d7c8ad' opacity='.3' rx='30'/%3E%3Crect x='40' y='40' width='220' height='220' fill='%23a85e3d' opacity='.8' rx='12'/%3E%3C/svg%3E" alt="Product" style="width:70%;"></div><div class="visual-label">01 / material</div><div class="visual-chip"><span class="chip-dot"></span><div><b>earth tile · terracotta</b><small>handmade, 2025</small></div></div><div class="visual-index"><span>←</span> 02 <span>→</span></div></div></div><div class="hero-bottom"><span>scroll</span><div class="scroll-line"><span></span></div><span>explore</span></div></section>
  <section class="section intro" id="intro"><div class="section-shell"><div class="intro-grid"><div><div class="section-kicker"><i></i><span>philosophy</span></div><h2>Where <em>craft</em> <br>meets <strong>system</strong></h2><div class="intro-text"><p class="large">We don't just make materials. We design ecosystems of texture, light, and durability.</p><p>Every surface is a dialogue between the hand and the earth—our palette is drawn from natural oxides, recycled clays, and low‑carbon binders.</p><a href="#" class="text-link">Read manifesto <b>→</b></a></div></div><div style="display:grid;gap:16px"><div style="background:#ded9cc;border-radius:20px;padding:30px;border:1px solid var(--line)"><span style="font:700 8px 'Manrope';letter-spacing:.15em;color:var(--clay)">01</span><div style="font-size:50px;margin:8px 0;color:var(--clay)">⚲</div><h3 style="font-size:18px">Low‑carbon clay</h3><p style="font-size:13px;color:var(--muted)">70% less embodied carbon vs. conventional ceramic.</p></div><div style="background:#ded9cc;border-radius:20px;padding:30px;border:1px solid var(--line)"><span style="font:700 8px 'Manrope';letter-spacing:.15em;color:var(--clay)">02</span><div style="font-size:50px;margin:8px 0;color:var(--clay)">◈</div><h3 style="font-size:18px">Tactile archive</h3><p style="font-size:13px;color:var(--muted)">Over 280 textures, from raw to polished.</p></div></div></div><div class="marquee"><div class="marquee-track"><span>terracotta</span><b>·</b><span>stone</span><b>·</b><span>pigment</span><b>·</b><span>glaze</span><b>·</b><span>recycled</span><b>·</b><span>handmade</span><b>·</b><span>terracotta</span><b>·</b><span>stone</span><b>·</b><span>pigment</span><b>·</b><span>glaze</span><b>·</b><span>recycled</span><b>·</b><span>handmade</span></div></div></div></section>
  <section class="section products" id="products"><div class="section-shell"><div class="products-heading"><div><div class="section-kicker"><i></i><span>collection</span></div><h2>Objects <em>of</em> <br><strong>permanence</strong></h2></div><p>Modular systems, bespoke finishes—each piece carries the memory of its making.</p></div><div class="product-grid"><div class="product-card"><div class="product-number">01</div><div class="product-art"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23a85e3d' opacity='.5' rx='20'/%3E%3Crect x='30' y='30' width='140' height='140' fill='%23d7c8ad' opacity='.7' rx='10'/%3E%3C/svg%3E" alt=""></div><div class="product-body"><span>terracotta</span><h3>Eclipse</h3><p>Hand‑pressed tiles with a gradient glaze. Available in 6 earth tones.</p><button class="enquire-btn">Enquire <b>→</b></button></div></div><div class="product-card"><div class="product-number">02</div><div class="product-art"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%2369746f' opacity='.5' rx='20'/%3E%3Crect x='30' y='30' width='140' height='140' fill='%23d7c8ad' opacity='.6' rx='10'/%3E%3C/svg%3E" alt=""></div><div class="product-body"><span>stone</span><h3>Gneiss</h3><p>Reclaimed stone aggregate bound with low‑carbon geopolymer.</p><button class="enquire-btn">Enquire <b>→</b></button></div></div><div class="product-card product-feature"><div class="product-number">03</div><div class="product-art"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23d7c8ad' opacity='.4' rx='20'/%3E%3Ccircle cx='100' cy='100' r='60' fill='%23a85e3d' opacity='.7'/%3E%3C/svg%3E" alt=""></div><div class="product-body"><span>pigment</span><h3>Oxide wash</h3><p>Liquid pigment that penetrates raw plaster and concrete. Infinite color layering.</p><button class="enquire-btn">Enquire <b>→</b></button></div></div><div class="product-card product-wide"><div class="product-number">04</div><div class="product-art"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23a85e3d' opacity='.3' rx='20'/%3E%3Crect x='20' y='20' width='160' height='160' fill='%2369746f' opacity='.6' rx='10'/%3E%3C/svg%3E" alt=""></div><div class="product-body"><span>glaze</span><h3>Obsidian</h3><p>High‑temperature glaze with volcanic ash. Matte and reflective finishes.</p><button class="enquire-btn">Enquire <b>→</b></button></div></div></div></div></section>
  <section class="section capability" id="capability"><div class="capability-bg"></div><div class="section-shell" style="position:relative;z-index:2"><div class="capability-top"><div><div class="eyebrow" style="color:var(--sand)"><span style="background:var(--sand)"></span>capability</div><h2><em>From</em> studio <br><strong>to site</strong></h2></div><p>We deliver end‑to‑end material solutions—from prototyping to large‑scale installation, with a focus on circularity.</p></div><div class="metrics"><div class="metric"><strong>120K</strong><span>m² produced</span><small>2024</small></div><div class="metric"><strong>94%</strong><span>circular content</span><small>by weight</small></div><div class="metric"><strong>38</strong><span>partner studios</span><small>global</small></div><div class="metric"><strong>4.8</strong><span>avg. lead time</span><small>weeks</small></div></div><div class="capability-cards"><div class="cap-card"><span>01</span><div class="cap-icon">▣</div><h3>Research</h3><p>Material science lab with in‑house geologist and ceramicist.</p></div><div class="cap-card"><span>02</span><div class="cap-icon">◉</div><h3>Prototyping</h3><p>Rapid sample production, color matching, and surface testing.</p></div><div class="cap-card"><span>03</span><div class="cap-icon">⎔</div><h3>Installation</h3><p>Global logistics and certified installation teams.</p></div></div></div></section>
  <section class="section facility" id="facility"><div class="section-shell"><div class="facility-heading"><div><div class="section-kicker"><i></i><span>studio</span></div><h2>Where <em>matter</em> <br><strong>takes form</strong></h2></div><p>Our Amsterdam workspace houses the kilns, labs, and archive—a living library of material intelligence.</p></div><div class="gallery-feature"><div class="gallery-main" id="galleryMain"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'%3E%3Crect width='800' height='500' fill='%23c9c5ba'/%3E%3Crect x='40' y='40' width='720' height='420' fill='%23d7c8ad' opacity='.4' rx='16'/%3E%3C/svg%3E" alt="Studio view" id="galleryImg"><div class="gallery-caption"><span>01 / 05</span><h3>Kiln room</h3><p>High‑temperature firing with electric and wood‑fired kilns.</p></div><button class="gallery-arrow prev" id="galleryPrev">←</button><button class="gallery-arrow next" id="galleryNext">→</button></div><div class="gallery-side" id="gallerySide"><button class="gallery-thumb active" data-index="0"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23c9c5ba'/%3E%3Crect x='20' y='20' width='160' height='160' fill='%23d7c8ad' opacity='.3' rx='8'/%3E%3C/svg%3E" alt=""><span>01</span></button><button class="gallery-thumb" data-index="1"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23a85e3d' opacity='.15'/%3E%3Crect x='30' y='30' width='140' height='140' fill='%23d7c8ad' opacity='.5' rx='8'/%3E%3C/svg%3E" alt=""><span>02</span></button><button class="gallery-thumb" data-index="2"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%2369746f' opacity='.2'/%3E%3Ccircle cx='100' cy='100' r='60' fill='%23d7c8ad' opacity='.4'/%3E%3C/svg%3E" alt=""><span>03</span></button><button class="gallery-thumb" data-index="3"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23d7c8ad' opacity='.1'/%3E%3Crect x='40' y='40' width='120' height='120' fill='%23a85e3d' opacity='.5' rx='10'/%3E%3C/svg%3E" alt=""><span>04</span></button><button class="gallery-thumb" data-index="4"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%23939a95' opacity='.15'/%3E%3Crect x='20' y='20' width='160' height='160' fill='%23d7c8ad' opacity='.3' rx='12'/%3E%3C/svg%3E" alt=""><span>05</span></button></div></div><div class="facility-strip"><div><span>area</span><strong>1,200 m² · production & archive</strong></div><div><span>capacity</span><strong>12 kilns · 6 casting lines</strong></div><div><span>sustainability</span><strong>100% green energy · closed‑loop water</strong></div></div></div></section>
  <section class="section ventures" id="ventures"><div class="section-shell"><div class="ventures-heading"><div><div class="section-kicker"><i></i><span>ventures</span></div><h2>Beyond <em>the</em> <br><strong>surface</strong></h2></div><p>We invest in material innovation, circular design, and regenerative building practices.</p></div><div class="venture-grid"><div class="venture-card"><div class="venture-top"><span>venture</span><span>01</span></div><div class="venture-symbol">⏣</div><h3>Re‑earth</h3><p>Platform for recycled clay aggregates from demolition waste.</p><ul><li>circular</li><li>low‑carbon</li><li>patented</li></ul></div><div class="venture-card"><div class="venture-top"><span>venture</span><span>02</span></div><div class="venture-symbol">⬡</div><h3>Pigment lab</h3><p>Natural oxide pigments extracted from regional mines.</p><ul><li>organic</li><li>non‑toxic</li><li>archive</li></ul></div></div></div></section>
  <section class="cta-band"><div class="cta-grid"></div><div class="section-shell" style="position:relative;z-index:2"><div class="eyebrow"><span style="background:#f0d2c5"></span>get in touch</div><h2>Shape the <em>future</em> <br>with <strong>clay</strong></h2><div class="cta-row"><p>Let's collaborate on your next project—from a single prototype to an entire building envelope.</p><a href="#" class="btn btn-light"><span>⌘</span> Start a project</a></div></div></section>
  <section class="section contact" id="contact"><div class="section-shell"><div class="contact-heading"><div><div class="section-kicker"><i></i><span>connect</span></div><h2>Studio <em>visit</em> <br><strong>by appointment</strong></h2></div><p>Our Amsterdam studio is open for architects, designers, and makers. Coffee and clay included.</p></div><div class="contact-grid"><div class="contact-details"><div class="contact-line"><span>address</span><strong>Oostenburgergracht 53<br>1018 NC Amsterdam</strong><b>→</b></div><div class="contact-line"><span>contact</span><strong>info@clay.studio<br>+31 20 123 4567</strong><b>→</b></div><div class="hours"><span>hours</span><strong>Mon – Fri · 10:00 – 17:00</strong><strong>Weekend · closed</strong></div></div><div><div class="map-wrap"><div class="map-top"><span>📍 Amsterdam</span><a href="#">open in maps →</a></div><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2436.432!2d4.917!3d52.367!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c609b0d0f2f1b1%3A0x4b2d9f1a6b2b1f8!2sOostenburgergracht%2053%2C%201018%20NC%20Amsterdam!5e0!3m2!1sen!2snl!4v1610000000000!5m2!1sen!2snl" allowfullscreen loading="lazy"></iframe></div></div></div></div></section>
  <footer><div class="section-shell"><div class="footer-main"><div class="footer-brand"><div class="brand"><div class="brand-logo"><img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' fill='%23d7c8ad' rx='12'/%3E%3Cpath d='M30 30 L70 30 L70 70 L30 70 Z' stroke='%2317201d' stroke-width='5' fill='none'/%3E%3C/svg%3E" alt=""></div><div class="brand-copy"><strong>clay</strong><small>material studio</small></div></div><p class="footer-note">Crafting the future of surfaces—one earth‑conscious piece at a time.</p></div><div class="footer-nav"><span>studio</span><a href="#">About</a><a href="#">Projects</a><a href="#">Careers</a><a href="#">Press</a></div><div class="footer-nav"><span>resources</span><a href="#">Material archive</a><a href="#">Sustainability</a><a href="#">Downloads</a><a href="#">Contact</a></div></div><div class="footer-bottom"><span>© 2025 Clay & Co.</span><span>crafted with earth</span></div></div></footer>
  <a href="#" class="whatsapp" aria-label="WhatsApp">⌘</a>
  <div class="modal" id="modal"><div class="modal-backdrop"></div><div class="modal-card"><button class="modal-close" id="modalClose">✕</button><div class="eyebrow"><span></span>enquire</div><h2>Let's <em>make</em></h2><p>Tell us about your project—we'll reply within 24 hours.</p><form><label>Name <input type="text" placeholder="Your name"></label><label>Email <input type="email" placeholder="you@studio.com"></label><label>Message <textarea rows="3" placeholder="Tell us about your project..."></textarea></label><button class="btn btn-solid" style="width:100%;">Send enquiry <span>→</span></button></form></div></div>
  <script>
    (function(){const loader=document.getElementById('loader');setTimeout(()=>loader.classList.add('done'),1200);
    const nav=document.getElementById('nav');window.addEventListener('scroll',()=>nav.classList.toggle('scrolled',window.scrollY>80));
    const menuBtn=document.getElementById('menuBtn'),panel=document.getElementById('mobilePanel');menuBtn.addEventListener('click',()=>{menuBtn.classList.toggle('active');panel.classList.toggle('open');document.body.classList.toggle('menu-open')});
    const enquireBtns=document.querySelectorAll('.enquire-btn, .nav-cta, .cta-row .btn');const modal=document.getElementById('modal');const closeModal=document.getElementById('modalClose');enquireBtns.forEach(b=>b.addEventListener('click',(e)=>{e.preventDefault();modal.classList.add('open')}));closeModal.addEventListener('click',()=>modal.classList.remove('open'));modal.addEventListener('click',(e)=>{if(e.target===modal||e.target.classList.contains('modal-backdrop'))modal.classList.remove('open')});
    const galleryData=[{title:'Kiln room',desc:'High‑temperature firing with electric and wood‑fired kilns.'},{title:'Glaze lab',desc:'Pigment mixing and glaze application.'},{title:'Archive',desc:'Over 280 material samples.'},{title:'Casting',desc:'Slip casting and press molding.'},{title:'Finishing',desc:'Sanding, polishing, and sealing.'}];
    let currentIndex=0;const mainImg=document.getElementById('galleryImg');const caption=document.querySelector('.gallery-caption');const thumbs=document.querySelectorAll('.gallery-thumb');const prevBtn=document.getElementById('galleryPrev');const nextBtn=document.getElementById('galleryNext');
    function updateGallery(index){currentIndex=(index+5)%5;thumbs.forEach((t,i)=>t.classList.toggle('active',i===currentIndex));const data=galleryData[currentIndex];caption.querySelector('span').textContent=`0${currentIndex+1} / 05`;caption.querySelector('h3').textContent=data.title;caption.querySelector('p').textContent=data.desc;const base='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500"%3E%3Crect width="800" height="500" fill="%23c9c5ba"/%3E%3Crect x="40" y="40" width="720" height="420" fill="%23d7c8ad" opacity=".4" rx="16"/%3E%3C/svg%3E';mainImg.src=base;mainImg.parentElement.classList.add('changed');setTimeout(()=>mainImg.parentElement.classList.remove('changed'),300)}
    thumbs.forEach(t=>t.addEventListener('click',()=>updateGallery(parseInt(t.dataset.index))));prevBtn.addEventListener('click',()=>updateGallery(currentIndex-1));nextBtn.addEventListener('click',()=>updateGallery(currentIndex+1));
    document.querySelectorAll('.reveal').forEach(el=>{const obs=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('visible')}})});obs.observe(el)});
    })();
  </script>
</body>
</html>