:root{
  --charcoal:      #0B2447;   /* deep royal navy, from the TJ logo — base dark */
  --charcoal-2:    #123061;   /* lighter navy step, for panels/gradients */
  --paper:         #ffffff;   /* warm off-white — light section base */
  --paper-dim:     #E2D9C2;
  --oxide:         #C7402C;   /* red — default accent (hero, materials, footer) */
  --oxide-dark:    #8F2C1E;
  --amber:         #F2B705;   
  --steel:         #4E5A6B;   
  --steel-light:   #8592A3;
  --line:          rgba(241,236,222,0.14);
  --line-dark:     rgba(11,36,71,0.12);

  --font-display:  'Rockwell', sans-serif;
  --font-sub:      'Space Grotesk', sans-serif;
  --font-body:     'Inter', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --ease: cubic-bezier(.22,.68,0,1);

  --fs-3xs:  clamp(11px, 0.85vw, 12px);   /* footer legal, brand subscript */
  --fs-2xs:  clamp(12px, 0.95vw, 13.5px); /* mono micro-labels */
  --fs-xs:   clamp(13px, 1.05vw, 14.5px); /* badges, nav links, buttons */
  --fs-sm:   clamp(14.5px, 1.15vw, 16px); /* footer copy, value-card copy */
  --fs-base: clamp(16px, 1.3vw, 18px);    /* body copy, material copy */
  --fs-md:   clamp(17px, 1.4vw, 19.5px);  /* line-step text, hero sub */
  --fs-lg:   clamp(19px, 1.6vw, 22px);    /* brand mark, value-card h3 */
  --fs-xl:   clamp(21px, 1.8vw, 24px);    /* material card h3 */
  --fs-2xl:  clamp(24px, 2.1vw, 28px);    /* footer brand */
  --fs-3xl:  clamp(26px, 2.8vw, 40px);    /* about quote */
  --fs-op:   clamp(24px, 2.6vw, 36px);    /* formula operators */
  --fs-copy: clamp(17px, 1.5vw, 21px);    /* .section-copy */
  --fs-title: clamp(36px, 4.4vw, 64px);   /* .section-title */
  --fs-hero:  clamp(42px, 8vw, 108px);    /* .hero h1 */
  --fs-pagetitle: clamp(2.4rem, 3.8vw, 4rem); /* PHP page-title banner h1 */
  --fs-crumb: clamp(0.85rem, 0.95vw, 1rem);   /* breadcrumb */
}

.welcome{            --oxide:#DB6A1E; --oxide-dark:#A6501A; }   /* orange */
.production{         --oxide:#F2B705; --amber:#F2B705; }        /* yellow, mono-accent on navy */
.service{             --oxide:#DB6A1E; --amber:#DB6A1E; }        /* orange, mono-accent on navy */
.about{               --oxide:#F2B705; }                         /* yellow */

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:70px; 
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
section{ position:relative; }
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(20px,5vw,64px);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-2xs);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--oxide);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";
  width:26px; height:2px;
  background:var(--oxide);
  display:inline-block;
}
h1,h2,h3{ font-family:var(--font-sub); font-weight:700; letter-spacing:-.01em; }
.section-title{
  font-family:var(--font-display);
  font-size:var(--fs-title);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin-bottom:22px;
}
.section-copy{
  font-size:var(--fs-copy);
  max-width:640px;
  color:var(--steel);
  line-height:1.7;
}
.dark .section-copy{ color:var(--paper-dim); }
.dark{ background:var(--charcoal); color:var(--paper); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:15px 26px;
  border:1px solid currentColor;
  background:transparent;
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn.solid{ background:var(--oxide); border-color:var(--oxide); color:var(--paper); }
.btn.solid:hover{ background:var(--oxide-dark); border-color:var(--oxide-dark); }
.btn.ghost{ color:var(--paper); }
.btn.ghost:hover{ background:var(--paper); color:var(--charcoal); }
.btn svg{ width:14px; height:14px; }

/* hazard stripe divider — signature motif */
.hazard{
  height:10px;
  background:repeating-linear-gradient(
    -45deg,
    var(--amber) 0 18px,
    var(--charcoal) 18px 36px
  );
}

html.js [data-animate]{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s);
}
html.js [data-animate].in{ opacity:1; transform:translateY(0); }
html.js [data-animate="left"]{ transform:translateX(-46px); }
html.js [data-animate="left"].in{ transform:translateX(0); }
html.js [data-animate="right"]{ transform:translateX(46px); }
html.js [data-animate="right"].in{ transform:translateX(0); }
html.js [data-animate="scale"]{ transform:scale(.88); }
html.js [data-animate="scale"].in{ transform:scale(1); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html.js [data-animate]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .ticker-track, .dust-canvas, .slide{ animation:none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,48px);
  background:#0b244700;
  transition:padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid var(--line);
}
.nav.solid{
  padding:12px clamp(20px,5vw,48px);
  box-shadow:0 8px 24px rgba(11,36,71,.28);
  backdrop-filter:blur(10px);
  background: var(--paper);
}
.brand{
  font-family:var(--font-display);
  font-size:var(--fs-lg);
  color:var(--paper);
  letter-spacing:-.01em;
  display:flex; align-items:baseline; gap:8px;
}
.brand span{ font-family:var(--font-mono); font-size:var(--fs-3xs); color:var(--amber); letter-spacing:.16em; }
.brand-mark{
  height:clamp(65px, 6vw, 85px);   /* scale ikut screen size — kecik kat mobile, besar kat desktop */
  width:auto;                       /* jaga aspect ratio asal, tak stretch/leper */
  display:block;
}
.brand-mark--solid{ display:none; }
.nav.solid .brand-mark--solid{ display:block; }
.nav.solid .brand-mark--transparent{ display:none; }
.nav.solid .brand-mark{
  height:clamp(30px, 17vw, 80px);   /* sikit lagi kecik bila dah scroll (nav jadi compact) */
}
.nav-links{ display:flex; gap:34px; list-style:none; padding:0; margin:0; }
.nav-links > li{ position:relative; list-style:none; }
.nav-links a{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em;
  text-transform:uppercase; color:var(--paper-dim); position:relative; padding-bottom:4px;
  display:inline-flex; align-items:center; gap:6px;
}
.nav.solid .nav-links a {
  color: var(--charcoal); /* ← GELAP bila solid */
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--amber); transition:width .3s var(--ease);
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--paper); background:var(--oxide); padding:10px 18px;
}

/* dropdown caret */
.has-dropdown > a .caret{ width:7px; height:7px; border-right:1px solid currentColor; border-bottom:1px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .25s var(--ease); }

/* level 2 / level 3 flyouts (desktop) */
.nav-links .dropdown{
  list-style:none; position:absolute; top:calc(100% + 16px); left:0; min-width:230px;
  background:#ffffff; border:1px solid var(--line); padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  z-index:50;
}
.nav-links .dropdown .dropdown{ top:-9px; left:calc(100% + 1px); }
.nav-links > li:hover > .dropdown,
.nav-links li.dd-open > .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.nav-links .dropdown li{ position:relative; list-style:none; }
.nav-links .dropdown a{ display:flex; padding:11px 20px; font-size:var(--fs-2xs); letter-spacing:.08em; white-space:nowrap; }
.nav-links .dropdown a:hover{ color:var(--amber); }
.nav-links .dropdown a::after{ display:none; }
.nav-links > li > a.active::after{
  width:100%;
}
.nav-links .dropdown a.active{
  color:var(--amber);
}

.burger{ display:none; width:26px; height:18px; position:relative; cursor:pointer; z-index:210;}
.burger span{ position:absolute; left:0; right:0; height:2px; background:var(--paper); transition:.3s var(--ease); }
.nav.solid .burger span{  background:var(--charcoal); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
.nav-open .burger span:nth-child(1){ top:8px; transform:rotate(45deg); }
.nav-open .burger span:nth-child(2){ opacity:0; }
.nav-open .burger span:nth-child(3){ top:8px; transform:rotate(-45deg); }
.nav.nav-open{
  background: var(--paper);
  backdrop-filter:none;   /* elak containing-block bug yang kita fix tadi */
}
.nav.solid.nav-open .burger span{  background:var(--paper); }

@media (max-width:900px){
  .nav-links, .nav-cta{ display:none; }
  .burger{ display:block; }
  .nav-open .nav-links{
    display:flex; flex-direction:column; position:fixed; inset:0; padding:110px 32px 40px;
    background:var(--charcoal); gap:8px; overflow-y:auto;
  }
  .nav.solid .nav-links a{ color: var(--paper-dim); }
  .nav-open .nav-links > li{ border-bottom:1px solid var(--line); }
  .nav-open .nav-links a{ font-size:19px; padding:16px 0; }
  .nav-open .nav-cta{ display:inline-flex; position:fixed; bottom:32px; left:32px; right:32px; justify-content:center; z-index:205; }
  .has-dropdown.dd-open > a .caret{ transform:rotate(225deg); }
  /* on mobile, dropdowns stack inline instead of flying out */
  .nav-links .dropdown, .nav-links .dropdown .dropdown{
    position:static; opacity:1; visibility:visible; transform:none; min-width:0;
    max-height:0; overflow:hidden; border:none; background:transparent; padding:0;
    transition:max-height .35s var(--ease);
  }
  .nav-links li.dd-open > .dropdown{ max-height:1000px; padding:0 0 10px 18px; }
  .nav-links .dropdown a{ padding:12px 0; font-size:15px; color:var(--steel-light); }
  .nav-open .nav-links > li > a.active::after{
    width:100%;
  }
}

/*BANNER SUB*/

/* ---------- PHP PAGE-TITLE BANNER SUB (page-title / overlay-white / bread-crumb) ---------- */
.page-title{
  position:relative;
  background-color: #241410;
  background-size: cover;
  background-position: center;
  overflow:hidden;
  padding: 150px 0 70px;
}
/* dark clay wash over the dynamic $bannersub image so text stays legible */
.page-title .overlay-white{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(36,20,16,0.80) 0%, rgba(36,20,16,0.60) 60%, rgba(36,20,16,0.75) 100%);
  z-index:1;
}
.page-title .auto-container{
  max-width:1180px; margin:0 auto; padding:0 6vw;
  position:relative; z-index:2;
}
.page-title .content-box{ position:relative; }
.page-title .title h1{
  color: #FAF5EA !important;
  font-family:'Zilla Slab', serif;
  font-size: var(--fs-pagetitle);
  max-width:20ch;
  opacity:0; transform:translateY(20px);
  animation: rise 0.75s 0.15s ease forwards;
}
.page-title .bread-crumb{
  list-style:none; display:flex; align-items:center; gap:10px;
  margin-top:16px; padding:0;
  font-family:'IBM Plex Mono', monospace;
  font-size:var(--fs-crumb); letter-spacing:0.05em; text-transform:uppercase;
  opacity:0; transform:translateY(14px);
  animation: rise 0.7s 0.05s ease forwards;
}
.page-title .bread-crumb li{ color: #DE9256 !important; position:relative; padding-right:18px; }
.page-title .bread-crumb li::after{
  content:"/"; position:absolute; right:4px; top:0; color:rgba(250,245,234,0.4);
}
.page-title .bread-crumb li:last-child{ padding-right:0; }
.page-title .bread-crumb li:last-child::after{ content:""; }
.page-title .bread-crumb li a{ color: #F1E7D6 !important; }
.page-title .bread-crumb li a:hover{ color: #DE9256 !important; }

@media (max-width:860px){
  .page-title{ padding:130px 0 46px; }
}

/* fade-up keyframe used by title/breadcrumb above */
@keyframes rise{ to{ opacity:1; transform:translateY(0); } }

/* ============================================================
   HERO / VIDEO BANNER SLIDER
   ============================================================ */
.hero{
  position:relative; height:100vh; min-height:640px; overflow:hidden;
  background:var(--charcoal); color:var(--paper);
  display:flex; flex-direction:column; justify-content:flex-end;
  margin-top:-70px; /* cancel body's nav-clearance padding so the hero still runs full-bleed under the nav */
}
.hero-slides{ position:absolute; inset:0; background:var(--charcoal-2); }
.slide{
  position:absolute; inset:0; opacity:0;
  background-size:cover; background-position:center;
  transition:opacity 1.4s var(--ease);
}
.slide.active{ opacity:1; z-index:1; }
.slide::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(27deg, rgb(145 160 181 / 0%), rgb(133 133 133 / 0%) 900%, rgb(0 0 0 / 0%));
  mix-blend-mode:multiply;
}
.slide.no-image{ background-image: radial-gradient(ellipse at 30% 20%, rgba(168,71,31,.35), transparent 60%), repeating-linear-gradient(100deg, #2c2a26 0 60px, #262420 60px 120px); }

.slide-dots .dot{
  width:9px; height:9px; border-radius:50%; border:1px solid var(--paper-dim);
  background:transparent; cursor:pointer; padding:0; transition:background .3s var(--ease), transform .3s var(--ease);
}
.slide-dots .dot.active{ background:var(--amber); border-color:var(--amber); transform:scale(1.2); }
@media (max-width:900px){ .slide-dots{ bottom:190px; } }
.hero video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  mix-blend-mode:luminosity; opacity:.55;
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 45% at 82% 12%, rgba(199,64,44,.28), transparent 65%),
    radial-gradient(ellipse 50% 40% at 8% 88%, rgba(242,183,5,.16), transparent 65%),
    linear-gradient(180deg, rgba(11,36,71,.4) 0%, rgba(11,36,71,.58) 55%, var(--charcoal) 100%);
}
.dust-canvas{ position:absolute; inset:0; opacity:.5; }

.ticker{
  position:relative; z-index:5;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 0; overflow:hidden; background:rgba(11,36,71,.35);
}
.ticker-track{
  display:flex; white-space:nowrap; width:max-content;
  animation:ticker 26s linear infinite;
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--amber);
}
.ticker-track span{ padding:0 28px; display:flex; align-items:center; gap:28px; }
.ticker-track span::after{ content:"◆"; font-size:8px; color:var(--oxide); }
@keyframes ticker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

.hero-content{
  position:relative; z-index:5;
  padding:0 clamp(20px,5vw,64px) 110px;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper-dim); margin-bottom:18px; opacity:.85;
}
.hero h1{
  font-family:var(--font-display);
  font-size:var(--fs-hero);
  line-height:.98;
  text-transform:uppercase;
  letter-spacing:-.01em;
  max-width:14ch;
}
.hero h1 em{ font-style:normal; color:var(--oxide); -webkit-text-stroke:0; }
.hero-sub{
  margin-top:22px; max-width:520px; color:var(--paper-dim); font-size:var(--fs-md);
}
.hero-bottom-row{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-top:40px; flex-wrap:wrap;
}
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:var(--fs-3xs); letter-spacing:.2em; text-transform:uppercase; color:var(--paper-dim);
}
.scroll-cue .line{ width:1px; height:44px; background:var(--paper-dim); position:relative; overflow:hidden; }
.scroll-cue .line::after{
  content:""; position:absolute; top:-40%; left:0; width:100%; height:40%; background:var(--amber);
  animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{top:-40%;} 100%{top:100%;} }


.hero h1{
  font-size:clamp(30px, 6.2vw, 92px);
  line-height:1;
}

@media (min-width:1024px) and (max-width:1440px){
  .hero h1{ font-size:clamp(52px, 6vw, 82px); }
  .hero-content{
    padding:0 clamp(20px,5vw,64px) 35px;
  }
}

@media (max-width:600px){
  .hero h1{ font-size:clamp(26px, 9vw, 44px); }
}

.welcome{ padding:clamp(90px,14vw,160px) 0 clamp(70px,10vw,120px); }
.welcome-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start; }
@media (max-width:860px){ .welcome-inner{ grid-template-columns:1fr; } }

.formula{
  margin-top:clamp(70px,9vw,110px);
  display:flex; align-items:center; justify-content:center; gap:clamp(8px,2vw,22px);
  flex-wrap:wrap;
}
.f-item{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:132px;
  --d:0s;
}
.f-item .icon-box{
  width:96px; height:96px; border-radius:50%;
  background:var(--charcoal); display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-dark);
}
.f-item svg{ width:46px; height:46px; }
.f-item .label{
  font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase;
  text-align:center; color:var(--steel);
}
.f-op{
  font-family:var(--font-display); font-size:var(--fs-op); color:var(--oxide);
  --d:0s;
}
.f-result{
  display:flex; flex-direction:column; align-items:center; gap:14px; width:150px; --d:0s;
}
.brickwall{
  width:110px; height:96px; border-radius:8px; overflow:hidden;
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:22px;
  border:1px solid var(--oxide-dark);
}
.brickwall .b{
  background:var(--oxide); opacity:0; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  border:1px solid rgba(11,36,71,.25);
}
.formula.in .brickwall .b{ opacity:1; transform:translateY(0); }
.formula.in .brickwall .b:nth-child(odd){ transition-delay:.9s; }
.formula.in .brickwall .b:nth-child(even){ transition-delay:1.05s; }
.f-result .label{
  font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.08em; text-transform:uppercase; text-align:center; color:var(--oxide);
}

.formula.in .f-item:nth-child(1){ --d:.05s; }
.formula.in .f-item:nth-child(3){ --d:.3s; }
.formula.in .f-item:nth-child(5){ --d:.55s; }
.formula.in .f-item:nth-child(7){ --d:.8s; }
.formula.in .f-op:nth-child(2){ --d:.2s; }
.formula.in .f-op:nth-child(4){ --d:.45s; }
.formula.in .f-op:nth-child(6){ --d:.7s; }
.formula.in .f-result{ --d:.95s; }

/* ============================================================
   PRODUCTION LINE (dark)
   ============================================================ */
.production{ padding:clamp(90px,14vw,160px) 0; background: #051327;}
.prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:860px){ .prod-grid{ grid-template-columns:1fr; } }
.compliance-row{ display:flex; gap:16px; margin-top:36px; flex-wrap:wrap; }
.badge{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.1em;
  border:1px solid var(--line); padding:12px 18px; display:flex; align-items:center; gap:10px;
  color:var(--paper-dim);
}
.badge .dot{ width:7px; height:7px; background:var(--amber); border-radius:50%; }
.line-diagram{
  border:1px solid var(--line); padding:28px; position:relative;
}
.line-step{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.line-step:last-child{ border-bottom:none; }
.line-step .num{ font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--amber); width:28px; }
.line-step .txt{ font-family:var(--font-sub); font-size:var(--fs-md); color:var(--paper); }
.line-step .bar{ flex:1; height:2px; background:var(--line); position:relative; overflow:hidden; }
.line-step .bar::after{
  content:""; position:absolute; left:-100%; top:0; bottom:0; width:100%; background:var(--oxide);
  transition:left 1.1s var(--ease);
}
.line-diagram.in .line-step:nth-child(1) .bar::after{ left:0; transition-delay:.1s; }
.line-diagram.in .line-step:nth-child(2) .bar::after{ left:0; transition-delay:.35s; }
.line-diagram.in .line-step:nth-child(3) .bar::after{ left:0; transition-delay:.6s; }
.line-diagram.in .line-step:nth-child(4) .bar::after{ left:0; transition-delay:.85s; }

/* ============================================================
   OTHER MATERIALS
   ============================================================ */
.materials{ padding:clamp(90px,14vw,160px) 0; }
.mat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:56px; background:var(--line-dark); }
@media (max-width:860px){ .mat-grid{ grid-template-columns:1fr; } }
.mat-card{
  background:var(--paper); padding:44px 32px; position:relative; overflow:hidden;
}
.mat-card .idx{
  font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--oxide); letter-spacing:.1em; margin-bottom:20px; display:block;
}
.mat-card svg{ width:52px; height:52px; margin-bottom:26px; }
.mat-card h3{ font-family:var(--font-sub); font-size:var(--fs-xl); margin-bottom:10px; }
.mat-card p{ font-size:var(--fs-base); color:var(--steel); line-height:1.65; }
.mat-card::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--oxide);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.mat-card:hover::before{ transform:scaleX(1); }

/* ============================================================
   DELIVER SERVICE (dark, value props)
   ============================================================ */
.service{ padding:clamp(90px,14vw,160px) 0; }
.value-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:56px; background:var(--line); }
@media (max-width:960px){ .value-grid{ grid-template-columns:repeat(2,1fr); } }
.value-card{ background:var(--charcoal); padding:36px 26px; }
.value-card .tag{ font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--amber); letter-spacing:.1em; text-transform:uppercase; }
.value-card h3{ font-family:var(--font-sub); font-size:var(--fs-lg); margin:14px 0 10px; color:var(--paper); }
.value-card p{ font-size:var(--fs-sm); color:var(--steel-light); line-height:1.6; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ padding:clamp(90px,14vw,160px) 0; overflow:hidden; }
.about-inner{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
@media (max-width:860px){ .about-inner{ grid-template-columns:1fr; } }
.about-quote{
  font-family:var(--font-sub); font-weight:600; font-size:var(--fs-3xl); line-height:1.25;
}
.about-quote .mark{ color:var(--oxide); }
.about-visual{
  position:relative; height:340px; border:1px solid var(--line-dark);
  background:repeating-linear-gradient(115deg, var(--paper-dim) 0 46px, #D8CBA6 46px 92px);
  display:flex; align-items:center; justify-content:center;
}
.about-visual .stamp{
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  border:2px solid var(--oxide); color:var(--oxide); padding:18px 26px; transform:rotate(-6deg);
  background:var(--paper);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--charcoal); color:var(--paper); padding:clamp(70px,10vw,110px) 0 40px; }
/*.foot-grid{ display:grid; grid-template-columns:3.4fr 2fr 1fr; gap:50px; padding-bottom:60px; border-bottom:1px solid var(--line); }*/
.foot-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line);
}

.foot-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.foot-links {
  column-count: 2;
  column-gap: 32px;
}
.foot-links a {
  display: block;
  break-inside: avoid;
  margin-bottom: 12px;
}
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; gap:36px; } }
.foot-brand{ font-family:var(--font-display); font-size:var(--fs-2xl); text-transform:uppercase; margin-bottom:14px; }
.foot-col h4{ font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin-bottom:16px; }
.foot-col p, .foot-col a{ font-size:var(--fs-sm); color:var(--paper-dim); display:block; margin-bottom:10px; }
.foot-bottom{ display:flex; justify-content:space-between; padding-top:26px; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--steel-light); flex-wrap:wrap; gap:10px; }