/* ===================================================================
   United Fashion & Retail — shared stylesheet (all pages)
   =================================================================== */
:root{
  --paper:#F7F6EC;
  --paper-2:#EFEEDD;
  --white:#FFFFFF;
  --ink:#1C2116;
  --ink-soft:#4B5240;
  --matcha:#6E8F45;
  --matcha-deep:#33421F;
  --matcha-pale:#DEE6C8;
  --terracotta:#C1622D;
  --indigo:#3B4E7A;
  --mustard:#D2A028;
  --rust:#A1472E;
  --teal:#2C7A72;
  --line:rgba(28,33,22,0.14);
  --line-2:rgba(28,33,22,0.08);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;} *{animation:none !important; transition:none !important;}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:'Manrope',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Instrument Serif', serif; font-weight:400; margin:0; letter-spacing:-0.005em;}
h1 i, h2 i, h3 i{font-style:italic; color:var(--matcha);}
a{color:inherit;}
img{display:block; max-width:100%;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
@media(max-width:640px){.wrap{padding:0 20px;}}

.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--matcha-deep); display:flex; align-items:center; gap:9px; font-weight:500;
}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--matcha); display:inline-block;}

/* ===== Nav ===== */
header{position:sticky; top:0; z-index:60; background:rgba(247,246,236,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease;}
header.scrolled{box-shadow:0 8px 28px -8px rgba(28,33,22,0.14);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:17px; letter-spacing:-0.01em; text-decoration:none; color:var(--ink);}
.brand .mark{width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg, var(--matcha), var(--matcha-deep)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:'Instrument Serif',serif; font-size:19px; flex-shrink:0; transition:transform .35s ease;}
.brand:hover .mark{transform:rotate(-8deg) scale(1.08);}
.navlinks{display:none; gap:26px; list-style:none; margin:0; padding:0;}
@media(min-width:980px){.navlinks{display:flex;}}
.navlinks a{position:relative; font-size:13.5px; font-weight:600; text-decoration:none; color:var(--ink-soft); transition:color .2s;}
.navlinks a::after{content:""; position:absolute; left:0; right:100%; bottom:-5px; height:2px; background:var(--matcha-deep); transition:right .25s ease;}
.navlinks a:hover, .navlinks a.active{color:var(--matcha-deep);}
.navlinks a:hover::after, .navlinks a.active::after{right:0;}
.nav-cta{font-size:13px; font-weight:700; background:var(--matcha-deep); color:#fff; padding:11px 20px; border-radius:7px; text-decoration:none; white-space:nowrap; transition:background .2s ease, transform .2s ease;}
.nav-cta:hover{background:var(--ink); transform:translateY(-2px);}
.nav-toggle{display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:1px solid var(--line); border-radius:7px; margin-left:12px;}
@media(min-width:980px){.nav-toggle{display:none;}}
.mobile-menu{display:none; flex-direction:column; gap:2px; padding:8px 0 20px;}
.mobile-menu.open{display:flex;}
.mobile-menu a{padding:12px 4px; font-size:14.5px; font-weight:600; text-decoration:none; color:var(--ink-soft); border-top:1px solid var(--line-2);}
.mobile-menu a.active{color:var(--matcha-deep);}

/* ===== Hero (home) ===== */
.hero{position:relative; padding:96px 0 0; overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{font-size:clamp(38px,5.2vw,64px); line-height:1.05; margin-top:20px;}
.hero p.lede{margin-top:22px; font-size:17px; color:var(--ink-soft); max-width:520px;}
.hero-ctas{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}
.btn{font-size:13.5px; font-weight:700; padding:14px 24px; border-radius:8px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:transform .15s, background .15s;}
.btn:hover{transform:translateY(-2px);}
.btn-solid{background:var(--matcha-deep); color:#fff;}
.btn-solid:hover{background:var(--ink);}
.btn-line{border:1.5px solid var(--line); color:var(--ink);}
.btn-line:hover{border-color:var(--matcha-deep); color:var(--matcha-deep);}

.hero-media{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/2; box-shadow:0 30px 60px -20px rgba(28,33,22,0.35);}
.hero-media img{width:100%; height:100%; object-fit:cover;}
.hero-media .chip{
  position:absolute; left:18px; bottom:18px; right:18px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px);
  border-radius:10px; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.hero-media .chip .ico{width:38px; height:38px; border-radius:8px; background:var(--matcha); flex-shrink:0;}
.hero-media .chip strong{display:block; font-size:13px;}
.hero-media .chip span{display:block; font-size:11.5px; color:var(--ink-soft);}

.hero-strip{margin-top:76px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.hero-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); }
.hero-strip div{padding:28px 24px; border-right:1px solid var(--line);}
.hero-strip div:last-child{border-right:none;}
.hero-strip h3{font-size:32px; color:var(--matcha-deep);}
.hero-strip span{display:block; margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft);}
@media(max-width:760px){.hero-strip .wrap{grid-template-columns:repeat(2,1fr);} .hero-strip div{border-bottom:1px solid var(--line);}}

/* ===== Page hero (inner pages) ===== */
.page-hero{padding:64px 0 56px; border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(34px,4.6vw,54px); line-height:1.08; margin-top:16px;}
.page-hero p.lede{margin-top:18px; font-size:16px; color:var(--ink-soft); max-width:640px;}
.page-hero.on-dark{background:var(--matcha-deep); border-bottom:none;}
.page-hero.on-dark h1{color:#fff;}
.page-hero.on-dark p.lede{color:#D8E2C4;}
.page-hero.on-dark .eyebrow{color:#C9DD9E;}
.page-hero.on-dark .eyebrow .dot{background:#C9DD9E;}
.page-hero.on-photo{position:relative; background-size:cover; background-position:center center; border-bottom:none; padding:100px 0 90px; min-height:560px; display:flex; align-items:center; overflow:hidden;}
.page-hero.on-photo::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,13,7,0.92) 0%, rgba(10,13,7,0.8) 38%, rgba(10,13,7,0.55) 100%); z-index:1;}
.page-hero.on-photo .wrap{position:relative; z-index:2; width:100%;}
.page-hero.on-photo h1{color:#fff;}
.page-hero.on-photo h1 i{color:var(--mustard);}
.page-hero.on-photo p.lede{color:#F0F2E9;}
.page-hero.on-photo .eyebrow{color:#C9DD9E;}
.page-hero.on-photo .eyebrow .dot{background:#C9DD9E;}
.page-hero.on-photo .breadcrumb, .page-hero.on-photo .breadcrumb a{color:#D8E2C4;}
.breadcrumb{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:14px;}
.breadcrumb a{text-decoration:none; color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--matcha-deep);}

/* ===== Section scaffolding ===== */
section{padding:110px 0;}
@media(max-width:720px){section{padding:68px 0;}}
section.deep{background:var(--matcha-deep); color:#fff;}
section.deep .eyebrow{color:#C9DD9E;}
section.deep .ink-soft, section.deep p{color:#D8E2C4;}
.sec-head{display:grid; grid-template-columns:1fr 0.85fr; gap:56px; margin-bottom:58px; align-items:end;}
@media(max-width:860px){.sec-head{grid-template-columns:1fr; gap:20px;}}
.sec-head h2{font-size:clamp(30px,4vw,46px); line-height:1.08;}
.sec-head p{font-size:15.5px; color:var(--ink-soft); padding-bottom:4px;}
section.deep .sec-head p{color:#D8E2C4;}

/* ===== Business division tiles ===== */
.divisions{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden;}
@media(max-width:900px){.divisions{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.divisions{grid-template-columns:1fr;}}
.division{background:var(--white); padding:28px 26px 30px; position:relative;}
.division img{width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:10px; margin-bottom:18px;}
.division .cat-tag{position:absolute; top:44px; left:42px; background:rgba(255,255,255,0.94); backdrop-filter:blur(4px); padding:5px 11px; border-radius:20px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink); font-weight:700;}
.division .swatch{width:34px; height:34px; border-radius:9px; margin-bottom:18px;}
.division h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; margin-bottom:8px;}
.division p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.division:nth-child(1) .swatch{background:var(--terracotta);}
.division:nth-child(2) .swatch{background:var(--matcha);}
.division:nth-child(3) .swatch{background:var(--indigo);}
.division:nth-child(4) .swatch{background:var(--mustard);}
.division:nth-child(5) .swatch{background:var(--rust);}
.division:nth-child(6) .swatch{background:var(--teal);}

/* ===== Image + copy split ===== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:880px){.split{grid-template-columns:1fr; gap:32px;}}
.split img{width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:14px;}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}
.split .copy h3{font-size:clamp(24px,3vw,32px); line-height:1.15;}
.split .copy p{margin-top:16px; color:var(--ink-soft); font-size:15px;}
.checklist{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px;}
.checklist li{display:flex; gap:10px; font-size:14.5px; align-items:flex-start;}
.checklist li::before{content:"✓"; color:var(--matcha-deep); font-weight:700; flex-shrink:0;}

/* ===== AI workflow rail ===== */
.workflow{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
@media(max-width:900px){.workflow{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.workflow{grid-template-columns:1fr;}}
.wf-step{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:12px; padding:22px 18px;}
.wf-step .idx{font-family:'JetBrains Mono',monospace; font-size:11px; color:#C9DD9E; letter-spacing:0.08em;}
.wf-step h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; color:#fff; margin:12px 0 8px;}
.wf-step p{font-size:12.5px; color:#CBD6B4; margin:0;}

/* ===== United Intelligence Workflow (4x2 hover-to-expand cards) ===== */
.iw-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; position:relative;}
@media(max-width:1080px){.iw-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.iw-grid{grid-template-columns:1fr;}}

.iw-card{position:relative; z-index:1; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:20px; cursor:pointer; text-align:left; font-family:'Manrope',sans-serif; transition:box-shadow .3s ease; outline:none;}
.iw-card.iw-active{z-index:80; box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);}

.iw-face{position:relative; padding:26px 22px 24px; border-radius:20px; transition:opacity .25s ease;}
.iw-face::before{content:""; position:absolute; top:0; left:0; right:0; height:2px; border-radius:20px 20px 0 0; background:linear-gradient(90deg, transparent, #C9DD9E, transparent); opacity:0; transition:opacity .3s ease;}
.iw-card.iw-active .iw-face::before{opacity:1;}
.iw-idx{font-family:'JetBrains Mono',monospace; font-size:11px; color:#C9DD9E; letter-spacing:0.08em;}
.iw-face h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:17px; color:#fff; margin:14px 0 8px;}
.iw-short{font-size:13px; color:#CBD6B4; margin:0; line-height:1.5; padding-right:30px;}
.iw-indicator{position:absolute; bottom:20px; right:20px; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,0.3); display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; color:#C9DD9E; transition:transform .3s ease, background .3s ease;}
.iw-card.iw-active .iw-indicator{transform:rotate(45deg); background:rgba(255,255,255,0.14);}

/* Detail panel: hidden by default, revealed as an overlay on hover/active (desktop), accordion in place (mobile) */
.iw-detail{position:absolute; top:0; left:0; width:100%; background:var(--matcha-deep); border:1px solid rgba(255,255,255,0.22); border-radius:20px; padding:26px 22px; opacity:0; visibility:hidden; transform:translateY(6px) scale(0.98); transform-origin:top left; transition:opacity .3s ease, transform .3s ease, visibility .3s ease; pointer-events:none; box-shadow:0 30px 60px -18px rgba(0,0,0,0.5);}
.iw-card.iw-active .iw-detail{opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;}
.iw-detail-idx{font-family:'JetBrains Mono',monospace; font-size:11px; color:#C9DD9E; letter-spacing:0.08em;}
.iw-detail h3{font-family:'Manrope',sans-serif; font-weight:800; font-size:22px; color:#fff; margin:8px 0 6px;}
.iw-detail-short{font-family:'Instrument Serif',serif; font-style:italic; font-size:15.5px; color:#C9DD9E; margin:0 0 20px;}

@media(min-width:1081px){
  .iw-detail{width:460px; max-height:min(520px,68vh); overflow-y:auto; padding:30px 28px;}
  .iw-grid .iw-card:nth-child(-n+4) .iw-detail{top:0; bottom:auto;}
  .iw-grid .iw-card:nth-child(n+5) .iw-detail{top:auto; bottom:0; transform-origin:bottom left;}
  .iw-grid .iw-card:nth-child(4n) .iw-detail{left:auto; right:0; transform-origin:top right;}
  .iw-grid .iw-card:nth-child(4n) .iw-detail{transform-origin:top right;}
  .iw-grid .iw-card:nth-child(n+5):nth-child(4n) .iw-detail{transform-origin:bottom right;}
  .iw-detail .iw-taglist{display:flex; flex-wrap:wrap;}
}
@media(max-width:1080px) and (min-width:561px){
  .iw-detail{width:400px; max-height:min(520px,68vh); overflow-y:auto;}
  .iw-grid .iw-card:nth-child(odd) .iw-detail{left:0; right:auto;}
  .iw-grid .iw-card:nth-child(even) .iw-detail{left:auto; right:0;}
  .iw-grid .iw-card:nth-child(-n+2) .iw-detail{top:0; bottom:auto;}
  .iw-grid .iw-card:nth-child(n+3) .iw-detail{top:auto; bottom:0;}
}
@media(max-width:560px){
  .iw-card.iw-active{box-shadow:none;}
  .iw-detail{position:static; width:auto; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; border:none; border-top:1px solid rgba(255,255,255,0.15); border-radius:0; max-height:0; padding:0 22px; overflow:hidden; transition:max-height .35s ease, padding .35s ease;}
  .iw-card.iw-active .iw-detail{max-height:2000px; padding:22px 22px 26px;}
}

.iw-closing{margin:56px auto 0; padding:40px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:16px; font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(18px,2vw,22px); line-height:1.55; color:#EAF0DA; text-align:center; max-width:900px;}

.iw-section{margin-bottom:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12);}
.iw-section:first-of-type{border-top:none; padding-top:0;}
.iw-section-label{display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:#C9DD9E; font-weight:700; margin-bottom:9px;}
.iw-section-label svg{width:15px; height:15px; flex-shrink:0;}
.iw-section p{font-size:13.5px; color:#D8E2C4; margin:0; line-height:1.55;}
.iw-taglist{display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none;}
.iw-taglist li{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); padding:5px 11px; border-radius:20px; font-size:11.5px; color:#EAF0DA;}
.iw-benefits{margin:0; padding:0; list-style:none; display:grid; gap:6px;}
.iw-benefits li{display:flex; align-items:flex-start; gap:8px; font-size:13.5px; color:#D8E2C4; line-height:1.5;}
.iw-benefits li::before{content:"✓"; color:#C9DD9E; font-weight:700; flex-shrink:0;}
.iw-tools{font-size:13px; color:#EAF0DA; font-weight:600;}

/* ===== AI capability grid ===== */
.capgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
@media(max-width:900px){.capgrid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.capgrid{grid-template-columns:1fr;}}
.cap{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px 18px; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:10px;}
.cap .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.cap:nth-child(4n+1) .dot{background:var(--matcha);}
.cap:nth-child(4n+2) .dot{background:var(--terracotta);}
.cap:nth-child(4n+3) .dot{background:var(--indigo);}
.cap:nth-child(4n+4) .dot{background:var(--mustard);}
section.deep .cap{background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.16); color:#fff;}

.capcard{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:22px 20px;}
.capcard .cap-head{display:flex; align-items:center; gap:10px; margin-bottom:9px;}
.capcard .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.capcard h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; margin:0;}
.capcard p{font-size:13px; color:var(--ink-soft); margin:0; line-height:1.55;}
.capcard:nth-child(4n+1) .dot{background:var(--matcha);}
.capcard:nth-child(4n+2) .dot{background:var(--terracotta);}
.capcard:nth-child(4n+3) .dot{background:var(--indigo);}
.capcard:nth-child(4n+4) .dot{background:var(--mustard);}

/* ===== Video ===== */
.video-frame{position:relative; border-radius:20px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 30px 60px -20px rgba(28,33,22,0.35); background:#0E1209;}
.video-frame video{width:100%; height:100%; object-fit:cover; display:block;}

/* ===== Gallery ===== */
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr);}}
.gallery figure{margin:0; position:relative; overflow:hidden; border-radius:12px; aspect-ratio:1/1;}
.gallery figure img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.gallery figure:hover img{transform:scale(1.06);}
.gallery figcaption{position:absolute; left:0; bottom:0; right:0; padding:12px 14px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,0.65), rgba(0,0,0,0));}

/* ===== Why grid ===== */
.whygrid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px;}
@media(max-width:860px){.whygrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.whygrid{grid-template-columns:1fr;}}
.whyitem{border-left:3px solid var(--matcha); padding-left:18px;}
.whyitem:nth-child(2n){border-left-color:var(--terracotta);}
.whyitem:nth-child(3n){border-left-color:var(--indigo);}
.whyitem h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px; margin-bottom:8px;}
.whyitem p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* ===== CSR stat cards ===== */
.csrgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:860px){.csrgrid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.csrgrid{grid-template-columns:1fr;}}
.csrcard{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:26px;}
.csrcard h3{font-size:34px; color:var(--matcha-deep);}
.csrcard p{font-size:13px; color:var(--ink-soft); margin-top:6px;}

/* ===== Quote ===== */
.quote{padding:100px 0; text-align:center; background:var(--matcha-pale);}
.quote blockquote{font-family:'Instrument Serif',serif; font-style:italic; font-size:clamp(24px,3.4vw,38px); max-width:820px; margin:0 auto; line-height:1.4; color:var(--matcha-deep);}
.quote cite{display:block; margin-top:22px; font-style:normal; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.06em; color:var(--ink-soft);}

/* ===== Careers ===== */
.careers{position:relative; border-radius:20px; overflow:hidden; background-size:cover; background-position:center;}
.careers::before{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(51,66,31,0.94), rgba(51,66,31,0.55));}
.careers-inner{position:relative; z-index:2; padding:70px 56px; color:#fff;}
@media(max-width:640px){.careers-inner{padding:46px 26px;}}
.careers-inner h2{font-size:clamp(28px,4vw,44px); max-width:16ch;}
.careers-inner p{margin-top:16px; max-width:480px; color:#E1E8CE; font-size:15px;}

/* ===== Timeline (about page) ===== */
.timeline{display:grid; gap:0; border-left:2px solid var(--line); padding-left:32px; margin-top:8px;}
.tl-item{position:relative; padding-bottom:36px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:""; position:absolute; left:-38px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--matcha-deep); border:3px solid var(--paper);}
.tl-item .yr{font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.06em; color:var(--matcha-deep); font-weight:600;}
.tl-item h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px; margin:6px 0 6px;}
.tl-item p{font-size:13.5px; color:var(--ink-soft); margin:0; max-width:520px;}

/* ===== Careers: roles ===== */
.roles{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
@media(max-width:760px){.roles{grid-template-columns:1fr;}}
.role-card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px 26px; display:flex; flex-direction:column; gap:6px;}
.role-card h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px;}
.role-tags{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 8px;}
.role-tags span{font-family:'JetBrains Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); border:1px solid var(--line); padding:4px 10px; border-radius:20px;}
.role-card p{font-size:13.5px; color:var(--ink-soft); margin:0 0 10px;}
.role-card a{font-size:13px; font-weight:700; color:var(--matcha-deep); text-decoration:none;}
.role-card a:hover{text-decoration:underline;}

/* ===== Contact / Footer ===== */
.contact-section{background:var(--ink); color:var(--paper); padding:96px 0 60px;}
.contact-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact-form{display:grid; gap:16px;}
.contact-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:520px){.contact-form .row2{grid-template-columns:1fr;}}
.field label{display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:#9AA688; margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); border-radius:8px;
  color:#fff; font-family:'Manrope',sans-serif; font-size:14.5px; padding:12px 14px; outline:none;
}
.field input::placeholder, .field textarea::placeholder{color:#7C846E;}
.contact-form button{
  justify-self:start; margin-top:8px; font-weight:700; font-size:13.5px;
  background:var(--matcha); color:var(--ink); border:none; padding:15px 30px; border-radius:8px; cursor:pointer;
}
.contact-form button:hover{background:#fff;}
.info-block{border-top:1px solid rgba(255,255,255,0.14); padding-top:20px; margin-top:20px;}
.info-block:first-child{border-top:none; margin-top:0; padding-top:0;}
.info-block h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#9AA688; margin-bottom:10px; font-weight:400;}
.info-block p, .info-block a{font-size:14.5px; margin:2px 0; text-decoration:none; display:block;}
.markets{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.markets span{font-family:'JetBrains Mono',monospace; font-size:11px; border:1px solid rgba(255,255,255,0.16); padding:6px 12px; border-radius:20px; color:#B7C1A4;}

/* Mini footer (used on all non-contact pages) */
.site-footer{background:var(--ink); color:var(--paper); padding:64px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr; gap:32px;}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid .brand{color:#fff;}
.footer-grid p.tag{font-size:13px; color:#9AA688; margin-top:12px; max-width:260px;}
.footer-grid h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#9AA688; margin-bottom:14px; font-weight:400;}
.footer-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.footer-grid a{font-size:14px; text-decoration:none; color:#D8E2C4;}
.footer-grid a:hover{color:#fff;}
.footer-grid p{font-size:14px; color:#D8E2C4; margin:2px 0;}

.foot-bottom{margin-top:60px; border-top:1px solid rgba(255,255,255,0.14); padding:24px 0;}
.foot-bottom .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:'JetBrains Mono',monospace; font-size:11px; color:#8C9578;}

.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* ===== Above-the-fold entrance animation ===== */
@keyframes fadeInUp{from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);}}
.hero-grid > div:first-child > *, .page-hero .wrap > *{animation:fadeInUp .7s ease both;}
.hero-grid > div:first-child > *:nth-child(2){animation-delay:.08s;}
.hero-grid > div:first-child > *:nth-child(3){animation-delay:.16s;}
.hero-grid > div:first-child > *:nth-child(4){animation-delay:.24s;}
.page-hero .wrap > *:nth-child(2){animation-delay:.08s;}
.page-hero .wrap > *:nth-child(3){animation-delay:.16s;}
.page-hero .wrap > *:nth-child(4){animation-delay:.24s;}
.page-hero .wrap > *:nth-child(5){animation-delay:.32s;}
.hero-media{animation:fadeInUp .8s ease .1s both;}

/* ===== Card hover lift ===== */
.division, .csrcard, .testimonial, .process-step, .role-card, .location-card, .cap, .capcard, .contact-card{transition:transform .25s ease, box-shadow .25s ease;}
.division:hover, .csrcard:hover, .testimonial:hover, .process-step:hover, .role-card:hover, .location-card:hover, .cap:hover, .capcard:hover{transform:translateY(-5px); box-shadow:0 18px 34px -14px rgba(28,33,22,0.2);}
.contact-card:hover{transform:translateY(-3px);}
.wf-step{transition:transform .25s ease, background .25s ease;}
.wf-step:hover{transform:translateY(-4px); background:rgba(255,255,255,0.1);}
.tl-item{transition:transform .2s ease;}
.tl-item:hover{transform:translateX(4px);}
.btn{transition:transform .15s ease, background .15s ease, box-shadow .15s ease;}
.btn-solid:hover, .btn:hover{box-shadow:0 10px 24px -10px rgba(28,33,22,0.35); transform:translateY(-2px);}
.btn:active{transform:translateY(0); box-shadow:none;}

/* ===== Extra motion pass: breathing dots, image zooms, logo/link polish ===== */
@keyframes dotPulse{0%,100%{box-shadow:0 0 0 0 rgba(110,143,69,0.45);} 50%{box-shadow:0 0 0 5px rgba(110,143,69,0);}}
.eyebrow .dot{animation:dotPulse 2.2s ease-in-out infinite;}
.badge .dot{animation:dotPulse 2.2s ease-in-out infinite;}

.division img, .split img, .solutions-banner img, .headshot{transition:transform .5s ease;}
.division{overflow:hidden;}
.division:hover img{transform:scale(1.05);}
.split img:hover, .solutions-banner:hover img, .headshot:hover{transform:scale(1.04);}
.solutions-banner{overflow:hidden;}

.brand img{transition:transform .25s ease;}
.brand:hover img{transform:scale(1.04);}

.contact-card h4, .location-card h4{transition:color .2s ease;}
.contact-card:hover h4, .location-card:hover h4{color:var(--matcha-deep);}

.footer-grid a{transition:padding-left .2s ease;}
.footer-grid a:hover{padding-left:4px;}

.video-frame{transition:box-shadow .3s ease;}
.video-frame:hover{box-shadow:0 24px 48px -18px rgba(28,33,22,0.35);}

/* ===== Client logo strip ===== */
.clients{display:flex; flex-wrap:wrap; align-items:center; gap:40px; justify-content:space-between;}
.clients img{height:32px; width:auto; max-width:120px; object-fit:contain; filter:grayscale(100%); opacity:0.7; transition:opacity .2s, filter .2s;}
.clients img:hover{filter:grayscale(0%); opacity:1;}
@media(max-width:760px){.clients{justify-content:center; gap:28px;}}

/* ===== Image carousel (infinite auto-scroll) ===== */
.carousel{overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);}
.carousel-track{display:flex; gap:14px; width:max-content; animation:carousel-scroll 80s linear infinite;}
.carousel:hover .carousel-track{animation-play-state:paused;}
#fabricsTrack{animation-duration:59s;}
.carousel-track figure{margin:0; flex-shrink:0; width:280px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; position:relative;}
.carousel-track img{width:100%; height:100%; object-fit:cover; transition:transform .5s;}
.carousel-track figure:hover img{transform:scale(1.06);}
@keyframes carousel-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(prefers-reduced-motion: reduce){.carousel-track{animation:none;}}
@media(max-width:640px){.carousel-track figure{width:200px;}}

/* ===== Client logo marquee (infinite loop) ===== */
.clients.marquee{display:block; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
.marquee-track{display:flex; align-items:center; gap:48px; width:max-content; animation:marquee-scroll 26s linear infinite;}
.clients.marquee:hover .marquee-track{animation-play-state:paused;}
.logo-box{display:flex; align-items:center; justify-content:center; height:72px; width:160px; flex-shrink:0;}
.logo-box img{height:100%; width:100%; object-fit:contain; filter:grayscale(100%); opacity:0.8; transition:opacity .2s, filter .2s;}
.logo-box img:hover{filter:grayscale(0%); opacity:1;}
@media(max-width:640px){.logo-box{height:56px; width:120px;}}
@keyframes marquee-scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@media(prefers-reduced-motion: reduce){.marquee-track{animation:none;}}

/* ===== Leadership headshot card ===== */
.headshot{width:100%; aspect-ratio:1/1; object-fit:contain; background:var(--paper-2); border-radius:14px; padding:24px;}

/* ===== Solutions: light process rail ===== */
.process{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.process{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.process{grid-template-columns:1fr;}}
.process-step{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px 24px;}
.process-step .idx{font-family:'Instrument Serif',serif; font-style:italic; font-size:40px; color:var(--matcha); line-height:1; margin-bottom:12px;}
.process-step h4{font-family:'Manrope',sans-serif; font-weight:700; font-size:16.5px; margin-bottom:8px;}
.process-step p{font-size:13.5px; color:var(--ink-soft); margin:0;}

/* ===== Award badge ===== */
.badge{display:inline-flex; align-items:center; gap:8px; background:var(--matcha-pale); color:var(--matcha-deep); padding:9px 18px; border-radius:20px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700;}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--matcha-deep);}

/* ===== Photo gallery lightbox ===== */
.lightbox-overlay{position:fixed; inset:0; background:rgba(10,12,7,0.94); z-index:400; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.lightbox-overlay.is-open{opacity:1; visibility:visible;}
.lightbox-img{max-width:88vw; max-height:86vh; object-fit:contain; border-radius:8px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.6);}
.lightbox-close{position:absolute; top:24px; right:28px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.lightbox-close:hover{background:rgba(255,255,255,0.22);}
.lightbox-nav{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.lightbox-nav:hover{background:rgba(255,255,255,0.22);}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
.lightbox-counter{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#EAF0DA; font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.05em;}
.lightbox-grid figure{cursor:zoom-in;}
@media(max-width:640px){.lightbox-nav{width:42px; height:42px; font-size:20px;} .lightbox-prev{left:10px;} .lightbox-next{right:10px;} .lightbox-close{top:14px; right:14px; width:38px; height:38px;}}

/* ===== Solutions: sub-gallery labels & banner ===== */
.subgallery-label{font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--matcha-deep); margin-bottom:16px; display:block; font-weight:600;}
.solutions-banner{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:21/8; margin-bottom:0;}
.team-banner{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; box-shadow:0 30px 60px -20px rgba(28,33,22,0.35);}
.team-banner img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block;}
.solutions-banner img{width:100%; height:100%; object-fit:cover;}
@media(max-width:760px){.solutions-banner{aspect-ratio:4/3;}}

/* ===== Contact: map + location cards ===== */
.map-embed{width:100%; height:380px; border:0; border-radius:16px; display:block;}
.locations{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
@media(max-width:900px){.locations{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.locations{grid-template-columns:1fr;}}
.location-card{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:24px;}
.location-card h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--matcha-deep); margin-bottom:10px; font-weight:600;}
.location-card p{font-size:14px; color:var(--ink-soft); margin:0; line-height:1.5;}
.contact-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:20px;}
@media(max-width:560px){.contact-cards{grid-template-columns:1fr;}}
.contact-card{border:1px solid rgba(255,255,255,0.16); border-radius:14px; padding:22px;}
.contact-card h4{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:#9AA688; margin-bottom:10px; font-weight:400;}
.contact-card a, .contact-card p{font-size:15px; margin:0; text-decoration:none; color:#fff;}
.social-row{display:flex; gap:14px; margin-top:8px;}
.social-row a{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:12px; font-family:'JetBrains Mono',monospace; text-decoration:none; color:#fff;}
.social-row a:hover{background:var(--matcha); border-color:var(--matcha); color:var(--ink);}

/* ===== Employee testimonials ===== */
.testimonials{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:760px){.testimonials{grid-template-columns:1fr;}}
.testimonial{background:var(--white); border:1px solid var(--line); border-radius:14px; padding:28px;}
.testimonial .quote-text{font-family:'Instrument Serif',serif; font-style:italic; font-size:17px; line-height:1.5; color:var(--ink); margin:0 0 18px;}
.testimonial .name{font-weight:700; font-size:14px; font-family:'Manrope',sans-serif;}
.testimonial .role{font-size:12px; color:var(--ink-soft); font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:0.04em; margin-top:2px;}