:root{
  --bg:#000000;
  --surface:#111214;       /* bento tiles */
  --surface-2:#1a1b1f;     /* raised controls, inputs */
  --line:#2a2c31;
  --ink:#ffffff;
  --ink-2:#c7cad1;
  --muted:#8b8f99;
  --accent:#3b8cff;        /* eyebrow + primary links */
  --accent-ink:#ffffff;
  --accent-soft:rgba(59,140,255,.14);
  --band:#000000; --band-fg:#ffffff; --band-muted:#9a9ea8;
  --gnav-bg:#ffffff; --gnav-ink:#1a1a1a; --gnav-muted:#5c5f66;
  --studio:linear-gradient(180deg,#f5f6f8 0%,#e3e6eb 100%);  /* backdrop behind white-background product shots */
  --water:#4aa3ff; --env:#3ccf7d; --chem:#c08cff; --ind:#9fb4e6; --energy:#ffaa3b;
  --ok:#3ccf7d; --warn:#ffaa3b; --err:#ff6b5e;
  --f-wide:"Lexend Exa","Lexend",ui-sans-serif,system-ui,sans-serif;
  --f-display:"Lexend",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:10px; --r-md:16px; --r-lg:24px;
  --shadow:0 20px 60px -30px rgba(0,0,0,.9);
  --logo:url(https://titan.co.mz/wp-content/uploads/2026/10/Logo-titan.webp);
  color-scheme:dark;
}
.titan-site *{box-sizing:border-box}
html{scroll-behavior:smooth}
body.titan-site{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.4vw,4.2rem);font-weight:600}
h2{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:600}
h3{font-size:1.15rem;font-weight:600}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:600 .95rem/1.3 var(--f-body);color:var(--accent);letter-spacing:0}
.lead{font-size:1.1rem;color:var(--ink-2);max-width:60ch}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons: white wide pill + dark pill with play glyph */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:999px;padding:.72em 1.4em;font:600 .92rem/1 var(--f-body);cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s,color .15s,transform .1s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#000}
.btn-primary:hover{background:#dfe1e6}
.btn-blue{background:var(--accent);color:#fff}
.btn-blue:hover{filter:brightness(1.1)}
.btn-ghost{background:var(--surface-2);color:var(--ink);border-color:transparent}
.btn-ghost:hover{background:#26282d}
.btn-dark{background:var(--ink);color:#000}
.btn-wide{min-width:min(320px,100%)}
.btn-sm{padding:.55em 1em;font-size:.84rem}
.btn svg{width:16px;height:16px;flex:none}

/* sticky product sub-bar (dark) */
.subbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(18,19,21,.86);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.subbar .wrap{display:flex;align-items:center;gap:20px;min-height:52px}
.subbar .title{font:600 1rem/1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.subbar nav{margin-left:auto;display:flex;gap:2px}
.subbar nav a{padding:.5em .75em;font-size:.85rem;color:var(--ink-2);text-decoration:none;border-radius:8px}
.subbar nav a:hover{color:var(--ink)}
.cart-btn{position:relative;flex:none}
.cart-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:#000;font:700 .72rem/20px var(--f-body);text-align:center}
@media (max-width:860px){.subbar nav{display:none}.subbar .cart-btn{margin-left:auto}}

/* sections */
section.band{padding-block:clamp(64px,9vw,120px)}
section.band.tight{padding-block:40px}
.band-dark{background:var(--band);color:var(--band-fg)}
.band-surface{background:#0a0a0b}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head > div{display:grid;gap:14px;justify-items:center;min-width:0}
.sec-head .lead{margin-inline:auto}

/* hero */
.hero{background:#000;overflow:hidden}
.hero .wrap{display:grid;justify-items:center;text-align:center;gap:18px;padding-block:clamp(56px,8vw,96px) 0}
.hero .kicker{font:600 clamp(.95rem,1.6vw,1.15rem)/1.3 var(--f-body);color:var(--ink-2)}
.hero h1{font:300 clamp(2.4rem,7.4vw,5.6rem)/1 var(--f-wide);letter-spacing:.02em;text-transform:uppercase}
.hero h1 b{font-weight:500}
.hero .tag{font:700 clamp(1.05rem,2vw,1.4rem)/1.3 var(--f-body)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:10px;width:100%}
.hero-shot{position:relative;margin-top:clamp(36px,6vw,64px);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden;aspect-ratio:21/9;max-width:100%}
.hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
.hero-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,#000 100%)}
.hero-shot .caps{position:absolute;left:0;right:0;bottom:clamp(16px,4vw,40px);z-index:1;display:flex;justify-content:center;gap:clamp(10px,3vw,36px);flex-wrap:wrap;font:500 clamp(.72rem,1.3vw,.9rem)/1 var(--f-body);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase;padding-inline:16px}
@media (max-width:600px){.hero-shot{aspect-ratio:4/3}}

/* bento for business areas */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{--c:var(--accent);position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);text-decoration:none;min-height:320px;isolation:isolate}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease}
.tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.35) 38%,rgba(0,0,0,0) 55%,rgba(0,0,0,.8) 100%)}
.tile:hover img{transform:scale(1.04)}
.tile .t-in{position:absolute;inset:0;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;justify-content:space-between}
.tile h3{font:600 clamp(1.4rem,2.4vw,2rem)/1.15 var(--f-display)}
.tile p{color:var(--ink-2);font-size:.95rem;max-width:36ch}
.tile .go{font:600 .85rem var(--f-body);color:var(--c)}
.tile.contain img{object-fit:contain;padding:12% 10% 22%;background:var(--studio)}
.tile.contain::after{background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,0) 60%,rgba(0,0,0,.8) 100%)}
.b-1{grid-column:span 4;min-height:440px}.b-2{grid-column:span 2;min-height:440px}
.b-3,.b-4,.b-5{grid-column:span 2}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.b-1{grid-column:1/-1}.b-2,.b-3,.b-4{grid-column:span 1}.b-5{grid-column:1/-1}.b-1,.b-2{min-height:360px}}
@media (max-width:540px){.bento{grid-template-columns:1fr}.tile{grid-column:1/-1!important;min-height:280px}}

/* product grid */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;margin-bottom:32px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tab{border:0;background:var(--surface-2);border-radius:999px;padding:.6em 1.1em;font:600 .86rem/1 var(--f-body);cursor:pointer;color:var(--ink-2);display:inline-flex;gap:8px;align-items:center}
.tab:hover{color:var(--ink)}
.tab .n{font:500 .74rem var(--f-body);color:var(--muted)}
.tab[aria-pressed="true"]{background:var(--ink);color:#000}
.tab[aria-pressed="true"] .n{color:#555}
.search{position:relative;flex:1 1 260px;max-width:420px}
.search input{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.7em 1em .7em 2.6em}
.search input:focus{outline:none;border-color:var(--accent)}
.search svg{position:absolute;left:1em;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{--c:var(--accent);display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r-lg);overflow:hidden;transition:transform .2s,background .2s}
.card:hover{background:#17181b;transform:translateY(-3px)}
.thumb{display:block;aspect-ratio:4/3;max-width:100%;background:var(--studio);position:relative;overflow:hidden;border-radius:var(--r-md);margin:10px 10px 0}
.thumb img{width:100%;height:100%;object-fit:contain;padding:16px;mix-blend-mode:multiply}
.thumb.art{background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--c) 28%,#16171a) 0%,#0d0e10 75%);display:grid;place-items:center;color:var(--c)}
.thumb.art svg{width:34%;height:34%;opacity:.95}
.thumb.art .tag{position:absolute;bottom:12px;left:12px;right:12px;font:600 .7rem var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.75;text-align:center}
.card .body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 .74rem/1 var(--f-body);color:var(--c)}
.card h3{font-size:1.06rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--ink-2)}
.card p{font-size:.9rem;color:var(--muted)}
.card .actions{margin-top:auto;padding-top:12px;display:flex;gap:8px;align-items:center}
.card .actions .btn{flex:1}
.empty{padding:56px 16px;text-align:center;color:var(--muted);border-radius:var(--r-lg);background:var(--surface)}

/* single product */
.crumbs{font-size:.85rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.p-hero{display:grid;justify-items:center;text-align:center;gap:14px}
.p-hero h1{font:300 clamp(1.9rem,5vw,3.6rem)/1.08 var(--f-wide);letter-spacing:.01em;max-width:22ch}
.p-hero .brandline{font:600 1rem var(--f-body);color:var(--ink-2)}
.p-stage{margin-top:clamp(28px,5vw,48px);border-radius:var(--r-lg);overflow:hidden;background:var(--studio);aspect-ratio:16/8;max-width:100%;display:grid;place-items:center}
.p-stage .thumb{margin:0;border-radius:0;width:100%;height:100%;aspect-ratio:auto}
.p-stage .thumb img{padding:clamp(20px,5vw,56px)}
@media (max-width:600px){.p-stage{aspect-ratio:1/1}}
.pdp{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;margin-top:16px}
@media (max-width:860px){.pdp{grid-template-columns:1fr}}
.pane{background:var(--surface);border-radius:var(--r-lg);padding:clamp(22px,3vw,36px);display:grid;gap:22px;align-content:start;min-width:0}
.pane .desc{font-size:1.08rem;color:var(--ink-2);line-height:1.7}
.block{display:grid;gap:12px}
.block h4{font:600 .95rem var(--f-body);color:var(--accent)}
.apps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.apps li{padding:14px 16px;border-radius:var(--r-sm);background:var(--surface-2);font-size:.92rem;color:var(--ink)}
table.specs{width:100%;border-collapse:collapse;font-size:.94rem}
table.specs th,table.specs td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.specs th{font-weight:400;color:var(--muted);width:42%;padding-right:16px}
table.specs td{color:var(--ink)}
.buybox{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center;margin-top:8px;width:100%}
.qty{display:inline-flex;align-items:center;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.qty button{width:40px;height:40px;border:0;background:none;cursor:pointer;font-size:1.1rem;color:var(--ink)}
.qty button:hover{background:#26282d}
.qty input{width:48px;height:40px;border:0;text-align:center;background:none;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button{display:none}
.side-panels{display:grid;gap:16px}
.panel{border-radius:var(--r-lg);padding:clamp(20px,3vw,28px);background:var(--surface);display:grid;gap:14px;align-content:start;min-width:0}
.panel h4.eyebrow{font-size:.95rem}
.qrbox{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.qr{width:140px;height:140px;padding:10px;background:#fff;border-radius:14px;flex:none}
.qr canvas,.qr img{width:100%!important;height:100%!important;display:block}
.qrbox .meta{display:grid;gap:10px;min-width:0;flex:1 1 160px}
.url{font:400 .78rem var(--f-mono);color:var(--muted);word-break:break-all}
.video-link{display:flex;gap:14px;align-items:center;text-decoration:none;padding:14px;border-radius:var(--r-md);background:var(--surface-2)}
.video-link:hover{background:#26282d}
.video-link .play{width:44px;height:44px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;flex:none}
.video-link .play svg{width:15px;height:15px;margin-left:2px}
.video-link small{display:block;color:var(--muted)}

/* services: alternating full stories */
.svc{--c:var(--accent);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.svc:nth-child(even) .svc-img{order:-1}
@media (max-width:820px){.svc{grid-template-columns:1fr}.svc:nth-child(even) .svc-img{order:0}}
.svc-img{border-radius:var(--r-lg);overflow:hidden;min-height:340px;background:var(--surface)}
.svc-img img{width:100%;height:100%;object-fit:cover;display:block}
.svc-img.contain{background:var(--studio)}
.svc-img.contain img{object-fit:contain;padding:28px}
.svc .txt{display:grid;gap:22px;min-width:0;background:var(--surface);border-radius:var(--r-lg);padding:clamp(24px,4vw,44px);align-content:center}
.svc .label{display:flex;gap:12px;align-items:center;font:600 .95rem var(--f-body);color:var(--c)}
.svc .label .ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 18%,transparent)}
.svc .label svg{width:20px;height:20px}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.svc li{display:grid;gap:4px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.svc li:last-child{border-bottom:0;padding-bottom:0}
.svc li b{font:600 1.15rem/1.3 var(--f-display)}
.svc li span{font-size:.92rem;color:var(--muted)}

/* about */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:820px){.split{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:760px){.values{grid-template-columns:repeat(2,minmax(0,1fr))}}
.value{padding:28px 24px;border-radius:var(--r-lg);background:var(--surface);display:grid;gap:8px;text-align:center}
.value b{font:300 1.25rem var(--f-wide);text-transform:uppercase;letter-spacing:.04em}
.value span{font-size:.9rem;color:var(--muted)}
blockquote.motto{margin:0 auto;font:600 clamp(1.5rem,3.4vw,2.6rem)/1.25 var(--f-display);max-width:28ch;text-align:center;text-wrap:balance}
.serve{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.serve span{padding:.7em 1.2em;border-radius:999px;background:var(--surface-2);font-size:.92rem;color:var(--ink-2)}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.logos div{padding:22px;border-radius:var(--r-md);background:var(--surface);font:600 1rem var(--f-display);display:grid;gap:4px;text-align:center}
.logos small{font:400 .78rem var(--f-body);color:var(--muted)}
.coverage{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:stretch}
@media (max-width:760px){.coverage{grid-template-columns:1fr}}
.prov{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:center}
.prov div{padding:20px;border-radius:var(--r-md);background:var(--surface)}
.prov b{display:block;font:600 1.05rem var(--f-display)}
.prov small{color:var(--muted)}
.mapcard{background:var(--surface);border-radius:var(--r-lg);padding:20px;display:grid;place-items:center}

/* forms */
.form{display:grid;gap:14px}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.form .row{grid-template-columns:1fr}}
.field{display:grid;gap:6px;min-width:0}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;padding:.8em .95em;border:1px solid transparent;border-radius:var(--r-sm);background:var(--surface-2)}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.note{font-size:.9rem;padding:14px 16px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--ink)}
.note.err{background:color-mix(in srgb,var(--err) 16%,transparent);color:#ffd0cb}
.note.ok{background:color-mix(in srgb,var(--ok) 16%,transparent)}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}
.cinfo{display:grid;gap:10px}
.citem{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-radius:var(--r-md);background:var(--surface)}
.citem .ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink)}
.citem .ico svg{width:19px;height:19px}
.citem small{display:block;color:var(--muted);font-size:.78rem}
.citem b{font-weight:600;user-select:all;word-break:break-word}
.citem a{text-decoration:none}
.copy{border:0;background:var(--surface-2);border-radius:999px;padding:.45em .85em;font-size:.78rem;cursor:pointer;color:var(--ink-2)}
.copy:hover{background:#2a2c31;color:var(--ink)}

/* quote cart */
.cart{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.cart{grid-template-columns:1fr}}
.lines{display:grid;gap:10px}
.line{--c:var(--accent);display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:16px;align-items:center;padding:10px 14px 10px 10px;border-radius:var(--r-md);background:var(--surface)}
.line .thumb{width:84px;height:84px;aspect-ratio:auto;margin:0;border-radius:12px}
.line .thumb img{padding:6px}
.line .nm{display:grid;gap:4px;min-width:0}
.line .nm a{text-decoration:none;font-weight:600}
.line .ctl{display:flex;gap:8px;align-items:center}
.line .rm{border:0;background:none;color:var(--muted);cursor:pointer;padding:8px;border-radius:8px}
.line .rm:hover{color:var(--err);background:var(--surface-2)}
.line .rm svg{width:18px;height:18px}
@media (max-width:520px){.line{grid-template-columns:64px minmax(0,1fr)}.line .thumb{width:64px;height:64px}.line .ctl{grid-column:1/-1;justify-content:space-between}}
.steps{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.steps span{padding:.7em 1.2em;border-radius:999px;background:var(--surface-2);font-size:.9rem;color:var(--ink-2)}
.steps span b{color:var(--ink);margin-right:8px}

/* newsletter + footer */
.newsletter{display:grid;justify-items:center;text-align:center;gap:16px}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:min(560px,100%);margin-top:8px}
.nl-form input{flex:1 1 240px;min-width:0;padding:.8em 1.2em;border-radius:999px;border:1px solid transparent;background:var(--surface-2);color:var(--ink)}
.nl-form input:focus{outline:none;border-color:var(--accent)}
.nl-form input::placeholder{color:var(--muted)}
.nl-msg{font-size:.88rem;color:var(--muted);min-height:1.4em}
footer.site{background:#0b0b0c;color:var(--muted);font-size:.88rem;border-top:1px solid #17181b}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:28px;padding-block:56px 32px}
@media (max-width:820px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:var(--ink);font:600 .9rem var(--f-body);margin-bottom:14px}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--ink)}
footer.site .flogo{width:170px;height:76px;background:var(--logo) left center/contain no-repeat;margin-bottom:14px}
footer.site .base{border-top:1px solid #1d1e22;padding-block:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.8rem}
.social{display:flex;gap:4px}
.social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:var(--muted);transition:background .15s,color .15s}
.social a:hover{background:var(--surface-2);color:var(--ink)}
.social svg{width:16px;height:16px}

/* floating whatsapp + toast */
.wa-float{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;width:54px;height:54px;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(0,0,0,.8)}
.wa-float svg{width:26px;height:26px}
.titan-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:60;background:#fff;color:#000;padding:.8em 1.2em;border-radius:999px;font-size:.9rem;font-weight:600;transition:opacity .2s,transform .2s;pointer-events:none;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.titan-toast.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ================================================================
   Elementor integration. Classes below are set in Elementor
   (Advanced → CSS Classes). Anything you change in the Elementor
   Style tab overrides these defaults.
   ================================================================ */
body.titan-site,.titan-site #page,.titan-site .site,.titan-site .site-content,.titan-site .ast-container{background:var(--bg)}
.titan-site .site-content .ast-container{display:block;max-width:none;padding:0}
.titan-site a:hover,.titan-site a:focus{color:inherit}
.titan-site .elementor-widget-text-editor{color:var(--ink-2)}
.titan-site .elementor-widget-text-editor p{margin:0 0 .8em}
.titan-site .elementor-widget-text-editor p:last-child{margin-bottom:0}
.titan-site .elementor-heading-title{line-height:1.12;letter-spacing:-.01em;text-wrap:balance}

/* text styles */
.titan-site .t-eyebrow .elementor-heading-title{font:600 .95rem/1.3 var(--f-body);color:var(--accent);letter-spacing:0}
.titan-site .t-kicker .elementor-heading-title{font:600 clamp(.95rem,1.6vw,1.15rem)/1.3 var(--f-body);color:var(--ink-2)}
.titan-site .t-hero .elementor-heading-title{font:300 clamp(2.4rem,7.4vw,5.6rem)/1 var(--f-wide);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.titan-site .t-hero .elementor-heading-title b{font-weight:500}
.titan-site .t-h1 .elementor-heading-title{font:300 clamp(1.9rem,5vw,3.6rem)/1.08 var(--f-wide);letter-spacing:.01em}
.titan-site .t-h2 .elementor-heading-title{font:600 clamp(1.9rem,4.4vw,3.4rem)/1.12 var(--f-display);color:var(--ink)}
.titan-site .t-h3 .elementor-heading-title{font:600 clamp(1.4rem,2.4vw,2rem)/1.15 var(--f-display);color:var(--ink)}
.titan-site .t-h4 .elementor-heading-title{font:600 1.15rem/1.3 var(--f-display);color:var(--ink)}
.titan-site .t-tag .elementor-heading-title{font:700 clamp(1.05rem,2vw,1.4rem)/1.3 var(--f-body);color:var(--ink)}
.titan-site .t-motto .elementor-heading-title{font:600 clamp(1.5rem,3.4vw,2.6rem)/1.25 var(--f-display);color:var(--ink)}
.titan-site .t-lead{font-size:1.1rem;color:var(--ink-2);max-width:60ch;margin-inline:auto}
.titan-site .t-muted{color:var(--muted);font-size:.92rem}
.titan-site .t-small{color:var(--muted);font-size:.9rem}
.titan-site .t-caps .elementor-heading-title{font:500 clamp(.72rem,1.3vw,.9rem)/1 var(--f-body);color:var(--ink-2);letter-spacing:.14em;text-transform:uppercase}

/* buttons */
.titan-site .elementor-button{border-radius:999px;font:600 .92rem/1 var(--f-body);padding:.95em 1.5em;transition:background .15s,color .15s,filter .15s}
.titan-site .t-btn-primary .elementor-button{background:#fff;color:#000;min-width:min(320px,100%)}
.titan-site .t-btn-primary .elementor-button:hover{background:#dfe1e6;color:#000}
.titan-site .t-btn-ghost .elementor-button{background:var(--surface-2);color:#fff}
.titan-site .t-btn-ghost .elementor-button:hover{background:#26282d;color:#fff}
.titan-site .t-btn-blue .elementor-button{background:var(--accent);color:#fff}
.titan-site .t-btn-sm .elementor-button{padding:.65em 1.1em;font-size:.84rem;min-width:0}

/* surfaces */
.titan-site .t-card{background:var(--surface);border-radius:var(--r-lg)}
.titan-site .t-card-2{background:var(--surface-2);border-radius:var(--r-md)}
.titan-site .t-pill{background:var(--surface-2);border-radius:999px}
.titan-site .t-pill .elementor-heading-title{font:400 .92rem/1.2 var(--f-body);color:var(--ink-2)}
.titan-site .t-value .elementor-heading-title{font:300 1.25rem/1.2 var(--f-wide);text-transform:uppercase;letter-spacing:.04em}
.titan-site .t-name .elementor-heading-title{font:600 1.05rem/1.3 var(--f-display);color:var(--ink)}
.titan-site .t-svc-label .elementor-heading-title{font:600 .95rem/1.3 var(--f-body)}
.titan-site .t-divider-bottom{border-bottom:1px solid var(--line)}

/* image with rounded top (hero shot) */
.titan-site .t-shot img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r-lg) var(--r-lg) 0 0;display:block;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
@media (max-width:600px){.titan-site .t-shot img{aspect-ratio:4/3}}
.titan-site .t-rounded img{border-radius:var(--r-lg);width:100%;height:100%;object-fit:cover}
.titan-site .t-studio{background:var(--studio);border-radius:var(--r-lg)}
.titan-site .t-studio img{object-fit:contain;mix-blend-mode:multiply}

/* bento tiles (containers with a background image) */
.titan-site .t-tile{position:relative;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;text-decoration:none}
.titan-site .t-tile::after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;pointer-events:none;opacity:1!important;background:linear-gradient(180deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.6) 30%,rgba(0,0,0,.1) 58%,rgba(0,0,0,.85) 100%)!important}
.titan-site .t-tile p,.titan-site .t-tile .elementor-heading-title{text-shadow:0 1px 10px rgba(0,0,0,.65)}
.titan-site .t-tile > *{position:relative;z-index:1}
.titan-site .t-tile .elementor-heading-title{color:#fff}
.titan-site .t-go .elementor-heading-title{font:600 .85rem/1 var(--f-body)}
.titan-site .t-tile:hover{filter:brightness(1.06)}

/* header + sub-bar */
.titan-site .t-gnav{background:#fff}
.titan-site .t-gnav .social a{color:var(--gnav-muted)}
.titan-site .t-gnav .social a:hover{background:#f0f1f3;color:#1a1a1a}
.titan-site .t-gnav .elementor-nav-menu--main .elementor-item{font:400 .9rem/1 var(--f-body);color:#1a1a1a;padding:.6em .8em;border-radius:8px}
.titan-site .t-gnav .elementor-nav-menu--main .elementor-item:hover,.titan-site .t-gnav .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#000;background:#f0f1f3}
.titan-site .t-gnav .elementor-nav-menu--main .elementor-item.elementor-item-active{font-weight:600}
.titan-site .t-gnav .elementor-menu-toggle{background:transparent;color:#1a1a1a}
.titan-site .t-gnav .elementor-nav-menu--dropdown{background:#fff}
.titan-site .t-gnav .elementor-nav-menu--dropdown a{color:#1a1a1a}
.titan-site .t-subbar{backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)}
.titan-area-nav{display:flex;gap:2px;justify-content:flex-end;flex-wrap:wrap}
.titan-area-nav a{padding:.5em .75em;font-size:.85rem;color:var(--ink-2);text-decoration:none;border-radius:8px}
.titan-area-nav a:hover{color:var(--ink)}
@media (max-width:860px){.titan-site .t-hide-mobile{display:none!important}}
.titan-site .t-subbar .cart-btn{color:#fff}

/* footer */
.titan-site .t-footer{color:var(--muted);font-size:.88rem}
.titan-site .t-footer .elementor-widget-text-editor{color:var(--muted);font-size:.88rem}
.titan-site .t-footer h4,.titan-site .t-footer .t-fhead .elementor-heading-title{color:#fff;font:600 .9rem/1.3 var(--f-body)}
.titan-site .t-footer a{color:var(--muted);text-decoration:none}
.titan-site .t-footer a:hover{color:#fff}
.titan-site .t-footer .elementor-icon-list-text{color:var(--muted)}
.titan-site .t-footer ul.t-links{list-style:none;margin:0;padding:0;display:grid;gap:10px}

/* product page pieces rendered inside Elementor */
.titan-site .elementor-widget-theme-post-content{color:var(--ink-2);font-size:1.08rem;line-height:1.7}
.titan-site .t-pane{display:grid;gap:22px}
.titan-site .p-stage{margin:0}
.titan-site .wa-float{color:#000}
.titan-site .elementor-widget-shortcode .sec-head{margin-bottom:clamp(32px,5vw,56px)}
.cart-btn .cart-count[hidden]{display:none}
.titan-site .t-go{font:600 .85rem/1 var(--f-body)}
.titan-site .t-go p{margin:0}
.titan-site .t-nl{width:100%}
.titan-site .t-nl .elementor-shortcode{display:grid;justify-items:center;gap:12px}
.titan-site .t-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.titan-site .t-footer .elementor-widget-text-editor p{margin:0}

/* header row sizing */
.titan-site .t-subbar>.e-con-inner>.elementor-widget,.titan-site .t-gnav>.e-con-inner>.elementor-widget{flex:0 0 auto;width:auto;max-width:none}
.titan-site .t-subbar>.e-con-inner>.e-con{width:auto;flex:1 1 0;min-width:0}
.titan-site .t-gnav .elementor-widget-nav-menu{flex:1 1 auto}

/* link colours */
.titan-site .card h3,.titan-site .card h3 a{color:#fff;text-decoration:none}
.titan-site .card h3 a:hover{color:var(--c,#3b8cff)}
.titan-site .elementor-widget-text-editor a:not(.btn){color:#fff}