/* ============================================================
PT. SUKSES GEMILANG ENGINEERING — DESIGN SYSTEM
Visual language: engineering drawing / datasheet vernacular.
Navy + brass (from the real SGE mark) + steel blue (from the
real equipment paint in the source photography).
============================================================ */
/* Fonts are loaded via + preconnect in each page's ,
not @import here — @import blocks the browser from discovering
and fetching the font files until after it downloads and parses
this entire stylesheet, which delays and can visibly flash text
on first load. Loading via lets the browser fetch fonts
in parallel with everything else. */
/* ---------- Tokens ---------- */
:root{
/* color: dark surfaces */
--navy-950:#0A1520;
--navy-900:#0D2035;
--navy-800:#12283F;
--navy-700:#1C3A57;
--navy-600:#2A4E70;
/* color: accents */
--brass-600:#9C7024;
--brass-500:#B8862E;
--brass-400:#CC9A3F;
--brass-300:#DEB865;
--brass-100:#F1E4C6;
--brass-700:#835F21; /* WCAG AA-safe (4.5:1+) brass for small text on light surfaces */
--line-strong:#8C8474; /* WCAG AA-safe (3:1+) border for form fields and functional UI edges */
--steel-600:#345678;
--steel-500:#3B6EA5;
--steel-400:#6D93BE;
--steel-200:#C4D6E8;
/* color: light surfaces */
--paper-0:#FFFFFF;
--paper-50:#F7F4EE;
--paper-100:#EFE9DC;
--paper-200:#E3DBC8;
/* color: text */
--ink-900:#1A2027;
--ink-700:#3C444C;
--ink-500:#646D76;
--ink-on-dark:#DCE3EA;
--ink-on-dark-dim:#93A2B2;
--line-light:#DDD5C1;
--line-dark:#28405A;
--success:#3E7A4F;
--error:#A8412E;
/* type */
--font-display:'Oswald', sans-serif;
--font-body:'IBM Plex Sans', sans-serif;
--font-mono:'IBM Plex Mono', monospace;
--text-xs:0.75rem;
--text-sm:0.875rem;
--text-base:1rem;
--text-md:1.125rem;
--text-lg:1.375rem;
--text-xl:1.75rem;
--text-2xl:2.25rem;
--text-3xl:2.75rem;
--text-4xl:3.75rem;
/* spacing */
--sp-1:0.25rem;
--sp-2:0.5rem;
--sp-3:0.75rem;
--sp-4:1rem;
--sp-5:1.5rem;
--sp-6:2rem;
--sp-8:3rem;
--sp-10:4rem;
--sp-12:6rem;
--sp-16:8rem;
--radius-sm:3px;
--radius-md:4px;
--container-w:1200px;
--dur-fast:150ms;
--dur-med:320ms;
--ease:cubic-bezier(.2,.65,.3,1);
}
/* Sticky-header offset for anchor jumps and keyboard focus.
Without this, any #id target (service anchors, skip link, a
keyboard-focused element scrolled into view) lands directly
behind the fixed header instead of below it. */
section[id],
#main,
.form-field input,
.form-field select,
.form-field textarea{
scroll-margin-top:100px;
}
a, button{scroll-margin-top:96px;}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto;}
*,*::before,*::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
body{margin:0;}
h1,h2,h3,h4,p,figure{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;}
button{font:inherit;}
a{color:inherit;text-decoration:none;}
input,textarea,select{font:inherit;}
svg{display:block;}
body{
font-family:var(--font-body);
color:var(--ink-900);
background:var(--paper-0);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* ---------- Skip link ---------- */
.skip-link{
position:absolute;
left:-999px;
top:0;
background:var(--brass-500);
color:var(--navy-950);
padding:12px 20px;
font-family:var(--font-mono);
font-weight:600;
z-index:1000;
border-radius:0 0 var(--radius-md) 0;
}
.skip-link:focus{left:0;}
/* ---------- Focus states ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
outline:3px solid var(--brass-400);
outline-offset:2px;
}
.on-dark a:focus-visible,
.on-dark button:focus-visible{
outline-color:var(--brass-300);
}
/* ---------- Typography ---------- */
h1,h2,h3,h4{
font-family:var(--font-display);
font-weight:600;
letter-spacing:0.01em;
line-height:1.08;
color:var(--navy-900);
}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--paper-0);}
h1{font-size:var(--text-3xl);}
h2{font-size:var(--text-2xl);}
h3{font-size:var(--text-lg);}
h4{font-size:var(--text-md);font-family:var(--font-body);font-weight:700;letter-spacing:0;}
@media(min-width:800px){
h1{font-size:var(--text-4xl);}
h2{font-size:var(--text-3xl);}
h3{font-size:var(--text-xl);}
}
p{color:var(--ink-700);}
.on-dark p{color:var(--ink-on-dark);}
.lead{font-size:var(--text-md);color:var(--ink-700);line-height:1.65;}
.on-dark .lead{color:var(--ink-on-dark);}
.mono{font-family:var(--font-mono);}
/* Eyebrow: drawing-register style section label — the recurring
structural device used throughout (real section sequence). */
.eyebrow{
display:inline-flex;
align-items:baseline;
gap:0.6em;
font-family:var(--font-mono);
font-size:var(--text-xs);
font-weight:600;
letter-spacing:0.16em;
text-transform:uppercase;
color:var(--brass-700);
margin-bottom:var(--sp-3);
}
.eyebrow .num{
font-size:var(--text-sm);
color:var(--brass-700);
border:1px solid var(--brass-500);
padding:2px 7px;
line-height:1.4;
}
.on-dark .eyebrow .num{border-color:var(--brass-400);color:var(--brass-300);}
.on-dark .eyebrow{color:var(--brass-300);}
.section-head{max-width:640px;margin-bottom:var(--sp-8);}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head p{margin-top:var(--sp-4);}
/* ---------- Layout ---------- */
.container{
max-width:var(--container-w);
margin:0 auto;
padding:0 var(--sp-5);
}
@media(min-width:900px){
.container{padding:0 var(--sp-8);}
}
.section{padding:var(--sp-12) 0;}
@media(max-width:640px){
.section{padding:var(--sp-10) 0;}
}
.section.tight{padding:var(--sp-8) 0;}
.bg-navy{background:var(--navy-900);}
.bg-navy-950{background:var(--navy-950);}
.bg-paper{background:var(--paper-0);}
.bg-paper-50{background:var(--paper-50);}
/* Blueprint grid texture — subtle, used behind dark sections only */
.blueprint{
position:relative;
background-image:
linear-gradient(rgba(180,200,220,0.055) 1px, transparent 1px),
linear-gradient(90deg, rgba(180,200,220,0.055) 1px, transparent 1px);
background-size:40px 40px;
background-position:center top;
}
.blueprint::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.035), transparent 65%);
pointer-events:none;
}
.grid{display:grid;gap:var(--sp-6);}
.grid > *{min-width:0;}
@media(min-width:700px){
.grid-2{grid-template-columns:1fr 1fr;}
.grid-3{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:900px){
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
}
.hr{border:0;border-top:1px solid var(--line-light);margin:var(--sp-8) 0;}
.on-dark .hr{border-top-color:var(--line-dark);}
/* ---------- Buttons ---------- */
.btn{
display:inline-flex;
align-items:center;
gap:0.6em;
font-family:var(--font-mono);
font-weight:600;
font-size:var(--text-sm);
letter-spacing:0.05em;
text-transform:uppercase;
padding:15px 26px;
border-radius:var(--radius-sm);
border:1.5px solid transparent;
cursor:pointer;
transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), letter-spacing var(--dur-fast) var(--ease);
white-space:nowrap;
}
.btn:hover{letter-spacing:0.07em;}
.btn:active{transform:translateY(1px);}
.btn svg{width:16px;height:16px;flex:none;}
.btn-primary{
background:var(--brass-500);
color:var(--navy-950);
border-color:var(--brass-500);
}
.btn-primary:hover{background:var(--brass-400);border-color:var(--brass-400);transform:translateY(-2px);box-shadow:0 10px 22px rgba(184,134,46,0.28);}
.btn-secondary{
background:transparent;
color:var(--navy-900);
border-color:var(--navy-900);
}
.btn-secondary:hover{background:var(--navy-900);color:var(--paper-0);transform:translateY(-2px);}
.on-dark .btn-secondary{color:var(--paper-0);border-color:var(--ink-on-dark-dim);}
.on-dark .btn-secondary:hover{background:var(--paper-0);color:var(--navy-950);border-color:var(--paper-0);}
.btn-text{
padding:10px 20px;
border-radius:var(--radius-sm);
border:1.5px solid var(--brass-500);
color:var(--navy-900);
font-size:0.78rem;
}
.on-dark .btn-text{color:var(--paper-0);border-color:var(--brass-400);}
.btn-text:hover{background:var(--brass-500);color:var(--navy-950);}
.on-dark .btn-text:hover{background:var(--brass-400);color:var(--navy-950);}
.btn-block{width:100%;justify-content:center;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;}
@media(max-width:480px){
.btn{white-space:normal;text-align:center;}
}
/* ---------- Top bar ---------- */
.topbar{
background:var(--navy-950);
color:var(--ink-on-dark-dim);
font-family:var(--font-mono);
font-size:0.75rem;
letter-spacing:0.03em;
}
body.menu-open .topbar{display:none;}
.topbar .container{
display:flex;
justify-content:flex-end;
align-items:center;
gap:var(--sp-4);
padding-top:9px;
padding-bottom:9px;
flex-wrap:wrap;
}
.topbar a{display:inline-block;padding:6px 0;color:var(--ink-on-dark-dim);transition:color var(--dur-fast);}
.lang-switch{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding-left:14px;border-left:1px solid var(--line-dark);}
.lang-switch a{padding:6px 2px;font-weight:400;}
.lang-switch a[aria-current="true"]{color:var(--brass-300);font-weight:600;}
.lang-switch span{color:var(--ink-on-dark-dim);opacity:0.5;}
.topbar a:hover{color:var(--brass-300);}
.topbar-links{display:flex;gap:var(--sp-5);flex-wrap:wrap;}
/* ---------- Header / Nav ---------- */
.site-header{
background:var(--paper-0);
border-bottom:1px solid var(--line-light);
position:sticky;
top:0;
z-index:100;
}
.nav-row{
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 0;
gap:var(--sp-5);
}
.brand{
display:flex;
align-items:center;
gap:12px;
flex:none;
}
.brand svg{width:38px;height:auto;}
.brand-text{
font-family:var(--font-display);
font-weight:600;
font-size:1.05rem;
line-height:1.15;
color:var(--navy-900);
letter-spacing:0.01em;
}
.brand-text small{
display:block;
font-family:var(--font-mono);
font-weight:500;
font-size:0.6rem;
letter-spacing:0.14em;
color:var(--brass-600);
margin-top:2px;
}
.main-nav{display:none;}
.main-nav ul{display:flex;align-items:center;gap:var(--sp-5);}
.main-nav a{
position:relative;
display:inline-block;
white-space:nowrap;
font-family:var(--font-mono);
font-size:0.74rem;
font-weight:500;
letter-spacing:0.05em;
text-transform:uppercase;
color:var(--ink-700);
padding:12px 0;
transition:color var(--dur-fast);
}
.main-nav a::after{
content:"";
position:absolute;
left:0;bottom:0;
width:100%;height:2px;
background:var(--brass-500);
transform:scaleX(0);
transform-origin:left;
transition:transform var(--dur-med) var(--ease);
}
.main-nav a:hover{color:var(--navy-900);}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.main-nav a[aria-current="page"]{color:var(--navy-900);}
/* Services dropdown */
.has-dropdown{position:relative;}
.has-dropdown > a{display:inline-flex;align-items:center;gap:5px;}
.has-dropdown .caret{width:9px;height:9px;flex:none;transition:transform var(--dur-fast);}
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret{transform:rotate(180deg);}
.has-dropdown .dropdown-menu{
display:block;
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
min-width:290px;
background:var(--paper-0);
border:1px solid var(--line-light);
box-shadow:0 16px 32px rgba(10,21,32,0.16);
padding:8px;
opacity:0;
visibility:hidden;
transform:translateX(-50%) translateY(6px);
transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
z-index:110;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.has-dropdown.force-closed .dropdown-menu{
opacity:0 !important;
visibility:hidden !important;
}
.dropdown-menu li{margin:0;}
.dropdown-menu a{
display:block;
padding:11px 14px;
font-family:var(--font-body);
font-size:0.86rem;
font-weight:500;
text-transform:none;
letter-spacing:0;
color:var(--ink-700);
border-bottom:0;
border-radius:var(--radius-sm);
}
.dropdown-menu a::after{content:none;}
.dropdown-menu a:hover,
.dropdown-menu a:focus-visible{
background:var(--paper-50);
color:var(--navy-900);
}
.dropdown-menu a[aria-current="page"]{color:var(--brass-600);background:var(--paper-50);}
.nav-cta{display:none;}
.nav-toggle{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;height:44px;
background:none;
border:1.5px solid var(--navy-900);
border-radius:var(--radius-sm);
color:var(--navy-900);
}
.nav-toggle svg{width:20px;height:20px;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}
.mobile-nav{
display:none;
position:fixed;
inset:0;
top:0;
background:var(--navy-950);
z-index:99;
padding:132px var(--sp-5) var(--sp-8);
overflow-y:auto;
}
.mobile-nav.is-open{display:block;}
.mobile-nav ul{display:flex;flex-direction:column;}
.mobile-nav a{
display:block;
font-family:var(--font-display);
font-size:1.6rem;
font-weight:500;
color:var(--paper-0);
padding:16px 0;
border-bottom:1px solid var(--line-dark);
}
.mobile-nav a[aria-current="page"]{color:var(--brass-300);}
.mobile-nav-foot{margin-top:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);}
.mobile-nav-foot a{color:var(--ink-on-dark);font-family:var(--font-mono);font-size:0.9rem;}
@media(min-width:980px){
.main-nav{display:block;}
.nav-toggle{display:none;}
.nav-cta{display:inline-flex;}
}
/* ---------- Hero ---------- */
.hero{
position:relative;
background:var(--navy-950);
color:var(--paper-0);
overflow:hidden;
padding:var(--sp-10) 0 var(--sp-12);
}
.hero::before{
content:"";
position:absolute;
top:50%;right:0;
width:900px;height:900px;
transform:translate(20%,-50%);
background:radial-gradient(circle, rgba(184,134,46,0.16) 0%, rgba(184,134,46,0.05) 40%, transparent 68%);
pointer-events:none;
z-index:0;
}
.hero::after{
content:"";
position:absolute;
inset:0;
background:radial-gradient(ellipse 60% 45% at 18% 15%, rgba(107,147,190,0.10), transparent 70%);
pointer-events:none;
z-index:0;
}
.hero-emblem{
position:absolute;
top:50%;right:-10%;
width:640px;height:640px;
transform:translateY(-50%);
opacity:0.09;
animation:spin 140s linear infinite;
pointer-events:none;
z-index:0;
}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg);}}
@media (prefers-reduced-motion: reduce){
.hero-emblem{animation:none;}
}
.hero-grid{
position:relative;
z-index:1;
display:grid;
gap:var(--sp-10);
align-items:center;
}
@media(min-width:960px){
.hero-grid{grid-template-columns:1.1fr 0.9fr;}
}
.hero h1{margin-bottom:var(--sp-5);}
.hero .lead{max-width:52ch;margin-bottom:var(--sp-6);color:var(--ink-on-dark);font-size:var(--text-md);}
.hero-plate{
position:relative;
background:var(--navy-900);
border:1px solid var(--line-dark);
padding:var(--sp-3);
}
.hero-plate img{width:100%;height:auto;}
.plate-tag{
display:flex;
justify-content:space-between;
align-items:center;
font-family:var(--font-mono);
font-size:0.7rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--ink-on-dark-dim);
padding:10px 4px 0;
}
.plate-tag b{color:var(--brass-300);font-weight:600;}
/* Corner-mark "plate" frame — signature device for real photography,
echoes alignment/crop marks used on technical drawing figures. */
.plate{
position:relative;
padding:14px;
background:var(--paper-0);
border:1px solid var(--line-light);
overflow:hidden;
transition:box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.plate::before,.plate::after,
.plate .cm-tl,.plate .cm-br{
content:"";
position:absolute;
width:14px;height:14px;
border:2px solid var(--brass-500);
z-index:2;
}
.plate::before{top:0;left:0;border-right:0;border-bottom:0;}
.plate::after{bottom:0;right:0;border-left:0;border-top:0;}
.plate img{width:100%;height:auto;display:block;transition:transform 600ms var(--ease);}
.plate:hover img{transform:scale(1.045);}
.plate:hover{box-shadow:0 12px 28px rgba(10,21,32,0.14);}
.plate figcaption{
font-family:var(--font-mono);
font-size:0.72rem;
letter-spacing:0.04em;
color:var(--ink-500);
padding-top:10px;
display:flex;
justify-content:space-between;
gap:var(--sp-3);
}
.on-dark .plate{background:var(--navy-900);border-color:var(--line-dark);}
.on-dark .plate figcaption{color:var(--ink-on-dark-dim);}
/* ---------- Credibility strip ---------- */
.cred-strip{
background:var(--paper-50);
border-bottom:1px solid var(--line-light);
}
.cred-list{
display:grid;
grid-template-columns:1fr;
gap:var(--sp-5);
padding:var(--sp-6) 0;
}
@media(min-width:700px){
.cred-list{grid-template-columns:repeat(3,1fr);}
}
@media(min-width:1000px){
.cred-list{grid-template-columns:repeat(6,1fr);}
}
.cred-item{
display:flex;
align-items:flex-start;
gap:10px;
font-family:var(--font-mono);
font-size:0.78rem;
letter-spacing:0.02em;
color:var(--ink-700);
line-height:1.4;
}
.cred-item svg{width:18px;height:18px;flex:none;color:var(--brass-500);margin-top:1px;}
/* ---------- Cards ---------- */
.card{
background:var(--paper-0);
border:1px solid var(--line-light);
padding:var(--sp-6);
display:flex;
flex-direction:column;
height:100%;
transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.card:hover{
transform:translateY(-5px);
box-shadow:0 20px 36px rgba(10,21,32,0.13);
border-color:var(--line-light);
}
.on-dark .card:hover,
.bg-navy .card:hover,
.bg-navy-950 .card:hover{box-shadow:0 20px 40px rgba(0,0,0,0.35);}
.card p.card-num{
font-family:var(--font-mono);
color:var(--brass-700);
font-size:0.8rem;
letter-spacing:0.06em;
margin-bottom:var(--sp-4);
}
.card h3{margin-bottom:var(--sp-3);}
.card p{margin-bottom:var(--sp-4);}
.card ul{margin-bottom:var(--sp-5);}
.card ul li{
position:relative;
padding-left:18px;
font-size:var(--text-sm);
color:var(--ink-700);
margin-bottom:8px;
line-height:1.5;
}
.card ul li::before{
content:"";
position:absolute;
left:0;top:9px;
width:7px;height:2px;
background:var(--brass-500);
}
/* Shared marked-list style for content lists outside cards
(service capability lists, etc.) — same dash marker language. */
.list-marked li{
position:relative;
padding-left:18px;
margin-bottom:8px;
line-height:1.5;
color:var(--ink-700);
}
.list-marked li::before{
content:"";
position:absolute;
left:0;top:9px;
width:7px;height:2px;
background:var(--brass-500);
}
.on-dark .list-marked li{color:var(--ink-on-dark);}
.card-foot{margin-top:auto;padding-top:var(--sp-5);}
.card-foot::before{content:"";display:block;height:1px;background:var(--line-light);margin-bottom:var(--sp-4);}
.card-callout .card-foot::before{display:none;}
.card-photo{
margin:calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
overflow:hidden;
border-bottom:1px solid var(--line-light);
aspect-ratio:16/10;
background:var(--navy-950);
}
.card-photo img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease);}
.card:hover .card-photo img{transform:scale(1.06);}
/* Cards are always a light (paper) surface, even when the section
around them is dark — reassert readable colors regardless of the
ancestor, since .on-dark otherwise cascades into every heading,
paragraph and text button inside. */
.card h3,.card h4{color:var(--navy-900);}
.card p{color:var(--ink-700);}
.card .btn-text{color:var(--navy-900);border-color:var(--brass-500);}
.card .btn-text:hover{background:var(--brass-500);color:var(--navy-950);}
.card .btn-secondary{color:var(--navy-900);border-color:var(--navy-900);}
.card .btn-secondary:hover{background:var(--navy-900);color:var(--paper-0);}
/* ---------- Technical table ---------- */
.tbl-wrap{
overflow-x:auto;
border:1px solid var(--line-light);
-webkit-overflow-scrolling:touch;
}
table.tech{
width:100%;
border-collapse:collapse;
min-width:560px;
font-family:var(--font-mono);
font-size:0.85rem;
background:var(--paper-0);
color:var(--ink-900);
}
table.tech caption{
text-align:left;
font-family:var(--font-mono);
font-size:0.72rem;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--ink-500);
padding:10px 16px;
background:var(--paper-50);
border-bottom:1px solid var(--line-light);
}
table.tech th,table.tech td{
text-align:left;
padding:12px 16px;
border-bottom:1px solid var(--line-light);
vertical-align:top;
}
table.tech thead th{
background:var(--navy-900);
color:var(--paper-0);
font-weight:500;
letter-spacing:0.05em;
text-transform:uppercase;
font-size:0.72rem;
}
table.tech tbody tr:nth-child(even){background:var(--paper-50);}
table.tech tbody tr:hover{background:var(--brass-100);}
table.tech td.num{color:var(--brass-700);font-weight:600;}
/* ---------- Tag / badge ---------- */
.tag{
display:inline-block;
font-family:var(--font-mono);
font-size:0.7rem;
letter-spacing:0.05em;
text-transform:uppercase;
padding:5px 10px;
border:1px solid var(--line-light);
color:var(--ink-700);
transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.tag-brass{border-color:var(--brass-500);color:var(--brass-700);}
a.tag:hover{border-color:var(--brass-500);background:var(--brass-100);transform:translateY(-1px);}
.on-dark .tag{border-color:var(--line-dark);color:var(--ink-on-dark-dim);}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;}
/* ---------- Nameplate (CTMI wordmark treatment) ---------- */
.nameplate{
display:inline-flex;
flex-direction:column;
border:1.5px solid var(--brass-500);
padding:10px 18px;
line-height:1.2;
}
.nameplate .np-main{
font-family:var(--font-display);
font-size:1.5rem;
font-weight:600;
letter-spacing:0.06em;
color:var(--navy-900);
}
.on-dark .nameplate .np-main{color:var(--paper-0);}
.nameplate .np-sub{
font-family:var(--font-mono);
font-size:0.62rem;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--ink-500);
margin-top:3px;
}
.on-dark .nameplate .np-sub{color:var(--ink-on-dark-dim);}
/* ---------- Client badges ---------- */
.client-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px;
background:var(--line-light);
border:1px solid var(--line-light);
}
@media(min-width:700px){
.client-grid{grid-template-columns:repeat(3,1fr);}
}
.client-item{
background:var(--paper-0);
padding:var(--sp-6) var(--sp-5);
display:flex;
align-items:center;
justify-content:center;
text-align:center;
min-height:110px;
}
.client-item img{
max-width:100%;
max-height:64px;
width:auto;
height:auto;
object-fit:contain;
}
/* ---------- Steps ---------- */
.steps{counter-reset:step;display:flex;flex-direction:column;}
.step{
display:grid;
grid-template-columns:auto 1fr;
gap:var(--sp-5);
padding:var(--sp-5) 0;
border-top:1px solid var(--line-light);
}
.step:last-child{border-bottom:1px solid var(--line-light);}
.step-num{
font-family:var(--font-mono);
font-size:var(--text-lg);
color:var(--brass-500);
font-weight:600;
min-width:2.4ch;
}
.step .step-title{
font-family:var(--font-body);
font-weight:700;
font-size:var(--text-md);
letter-spacing:0;
color:var(--navy-900);
margin-bottom:6px;
}
.on-dark .step .step-title{color:var(--paper-0);}
.step p{font-size:var(--text-sm);}
/* ---------- Principle rows (Why SGE) ---------- */
.principle{
display:grid;
grid-template-columns:auto 1fr;
gap:var(--sp-5);
align-items:start;
padding:var(--sp-6) 0;
border-top:1px solid var(--line-dark);
}
.principle-list .principle:last-child{border-bottom:1px solid var(--line-dark);}
.principle-num{
font-family:var(--font-mono);
font-size:var(--text-2xl);
color:var(--brass-400);
font-weight:600;
line-height:1;
}
.principle h3{margin-bottom:8px;}
/* ---------- Technician list ---------- */
.tech-people{display:flex;flex-direction:column;border-top:1px solid var(--line-light);}
.tech-person{
display:grid;
gap:4px var(--sp-6);
grid-template-columns:1fr;
padding:var(--sp-5) 0;
border-bottom:1px solid var(--line-light);
}
@media(min-width:760px){
.tech-person{grid-template-columns:1fr 1.6fr 1.6fr;align-items:baseline;}
}
.tech-person .p-name{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--navy-900);}
.tech-person .p-label{
display:block;
font-family:var(--font-mono);
font-size:0.65rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--ink-500);
margin-bottom:3px;
}
@media(min-width:760px){.tech-person .p-label{display:none;}}
.tech-person .p-exp,.tech-person .p-skill{font-size:0.88rem;color:var(--ink-700);}
/* ---------- Matrix (turbine brand experience) ---------- */
.brand-matrix{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1px;
background:var(--line-light);
border:1px solid var(--line-light);
}
@media(min-width:640px){.brand-matrix{grid-template-columns:repeat(3,1fr);}}
@media(min-width:960px){.brand-matrix{grid-template-columns:repeat(5,1fr);}}
.brand-cell{
background:var(--paper-0);
padding:var(--sp-4);
font-family:var(--font-mono);
font-size:0.85rem;
color:var(--navy-800);
display:flex;
align-items:center;
gap:8px;
transition:background var(--dur-fast);
}
.brand-cell:hover{background:var(--paper-50);}
.brand-cell svg{width:14px;height:14px;color:var(--brass-500);flex:none;}
/* ---------- CTA band ---------- */
.cta-band{
position:relative;
background:var(--navy-950);
color:var(--paper-0);
padding:var(--sp-10) 0;
text-align:center;
overflow:hidden;
}
.cta-band::before{
content:"";
position:absolute;
top:50%;left:50%;
width:1000px;height:500px;
transform:translate(-50%,-50%);
background:radial-gradient(ellipse, rgba(184,134,46,0.13) 0%, transparent 65%);
pointer-events:none;
}
.cta-band > .container{position:relative;z-index:1;}
.cta-band h2{margin-bottom:var(--sp-4);}
.cta-band .lead{max-width:56ch;margin:0 auto var(--sp-6);}
.cta-band .btn-row{justify-content:center;}
/* ---------- Contact blocks ---------- */
.contact-methods{display:flex;flex-direction:column;gap:1px;background:var(--line-light);border:1px solid var(--line-light);}
.contact-method{
background:var(--paper-0);
padding:var(--sp-5);
display:flex;
align-items:center;
gap:var(--sp-4);
min-width:0;
}
.contact-method > span{min-width:0;}
.contact-method svg{width:26px;height:26px;color:var(--brass-500);flex:none;}
.contact-method .cm-label{
font-family:var(--font-mono);
font-size:0.68rem;
letter-spacing:0.08em;
text-transform:uppercase;
color:var(--ink-500);
display:block;
margin-bottom:3px;
}
.contact-method .cm-value{font-family:var(--font-display);font-size:1.15rem;color:var(--navy-900);overflow-wrap:anywhere;}
.contact-method a.cm-value:hover{color:var(--brass-600);}
/* ---------- Form ---------- */
.form-field{margin-bottom:var(--sp-5);}
.form-field label{
display:block;
font-family:var(--font-mono);
font-size:0.72rem;
letter-spacing:0.06em;
text-transform:uppercase;
color:var(--ink-700);
margin-bottom:8px;
}
.form-field .req{color:var(--brass-600);}
.form-field input,
.form-field select,
.form-field textarea{
width:100%;
background:var(--paper-0);
border:1.5px solid var(--line-strong);
padding:13px 14px;
color:var(--ink-900);
border-radius:var(--radius-sm);
transition:border-color var(--dur-fast);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
border-color:var(--brass-500);
outline:none;
box-shadow:0 0 0 3px rgba(184,134,46,0.18);
}
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"]{
border-color:var(--error);
}
.form-field textarea{resize:vertical;min-height:120px;}
.form-field input[type="file"]{
padding:9px 12px;
cursor:pointer;
}
.form-field input[type="file"]::file-selector-button{
font-family:var(--font-mono);
font-weight:600;
font-size:0.74rem;
letter-spacing:0.03em;
text-transform:uppercase;
padding:9px 14px;
margin-right:14px;
border:0;
border-radius:var(--radius-sm);
background:var(--navy-900);
color:var(--paper-0);
cursor:pointer;
transition:background var(--dur-fast);
}
.form-field input[type="file"]::file-selector-button:hover{background:var(--brass-600);}
.form-row{display:grid;gap:var(--sp-5);}
@media(min-width:640px){.form-row-2{grid-template-columns:1fr 1fr;}}
.form-hint{font-size:0.78rem;color:var(--ink-500);margin-top:6px;}
.form-note{
font-size:0.85rem;
color:var(--ink-500);
background:var(--paper-50);
border:1px solid var(--line-light);
padding:var(--sp-4);
margin-top:var(--sp-5);
}
.form-status{
margin-top:var(--sp-5);
padding:var(--sp-4);
font-size:0.9rem;
display:none;
}
.form-status.is-visible{display:block;}
.form-status.ok{background:#EAF3EC;color:var(--success);border:1px solid #BFDCC6;}
.form-status.err{background:#F7E9E6;color:var(--error);border:1px solid #E3BDB4;}
/* ---------- Footer ---------- */
.site-footer{background:var(--navy-950);color:var(--ink-on-dark-dim);padding:var(--sp-12) 0 var(--sp-6);}
.footer-grid{
display:grid;
gap:var(--sp-8);
grid-template-columns:1fr;
padding-bottom:var(--sp-10);
}
@media(min-width:760px){
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.1fr;}
}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:var(--sp-4);}
.footer-brand svg{width:34px;height:auto;}
.footer-brand span{font-family:var(--font-display);font-weight:600;color:var(--paper-0);font-size:1rem;}
.footer-col .footer-heading{
font-family:var(--font-mono);
font-size:0.72rem;
letter-spacing:0.1em;
text-transform:uppercase;
color:var(--brass-300);
font-weight:600;
margin-bottom:var(--sp-4);
}
.footer-col ul li{margin-bottom:2px;}
.footer-col a{display:inline-block;padding:7px 0;font-size:0.9rem;transition:color var(--dur-fast);}
.footer-col a:hover{color:var(--paper-0);}
.footer-tagline{
font-family:var(--font-display);
font-size:1.05rem;
color:var(--brass-300);
border-top:1px solid var(--line-dark);
padding-top:var(--sp-6);
text-align:center;
}
.footer-bottom{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:var(--sp-3);
border-top:1px solid var(--line-dark);
margin-top:var(--sp-6);
padding-top:var(--sp-6);
font-size:0.78rem;
}
/* ---------- Floating WhatsApp ---------- */
.wa-float{
position:fixed;
right:20px;
bottom:20px;
z-index:90;
display:inline-flex;
align-items:center;
gap:10px;
background:var(--brass-500);
color:var(--navy-950);
font-family:var(--font-mono);
font-weight:600;
font-size:0.82rem;
letter-spacing:0.03em;
padding:14px 18px;
border-radius:30px;
box-shadow:0 8px 24px rgba(10,21,32,0.28);
opacity:0;
transform:translateY(8px);
pointer-events:none;
transition:transform var(--dur-fast) var(--ease), background var(--dur-fast), opacity var(--dur-med) var(--ease);
}
.wa-float.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.wa-float:hover{background:var(--brass-400);transform:translateY(-2px);}
.wa-float svg{width:20px;height:20px;flex:none;}
.wa-float .wa-text{display:none;}
@media(min-width:640px){.wa-float .wa-text{display:inline;}}
.back-to-top{
position:fixed;
left:20px;
bottom:20px;
z-index:90;
display:inline-flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
background:var(--paper-0);
color:var(--navy-900);
border:1.5px solid var(--navy-900);
border-radius:50%;
box-shadow:0 8px 20px rgba(10,21,32,0.16);
opacity:0;
transform:translateY(8px);
pointer-events:none;
transition:transform var(--dur-fast) var(--ease), background var(--dur-fast), color var(--dur-fast), opacity var(--dur-med) var(--ease);
cursor:pointer;
}
.back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.back-to-top:hover{background:var(--navy-900);color:var(--paper-0);transform:translateY(-2px);}
.back-to-top svg{width:20px;height:20px;flex:none;}
/* ---------- Breadcrumb ---------- */
.breadcrumb{
font-family:var(--font-mono);
font-size:0.75rem;
letter-spacing:0.03em;
color:var(--ink-500);
padding:var(--sp-4) 0;
}
.breadcrumb a{display:inline-block;padding:5px 0;color:var(--ink-500);}
.breadcrumb a:hover{color:var(--brass-600);}
.breadcrumb span{color:var(--ink-900);}
/* ---------- Page header (inner pages) ---------- */
.page-hero{
background:var(--navy-950);
color:var(--paper-0);
padding:var(--sp-8) 0 var(--sp-10);
position:relative;
overflow:hidden;
}
.page-hero .eyebrow{color:var(--brass-300);}
.page-hero p{max-width:60ch;}
/* ---------- Reveal-on-scroll ---------- */
.reveal{
opacity:0;
transform:translateY(16px);
transition:opacity 640ms var(--ease), transform 640ms var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
.reveal{opacity:1;transform:none;transition:none;}
}
/* ---------- Two column util ---------- */
.two-col{display:grid;gap:var(--sp-10);}
.two-col > *{min-width:0;}
@media(min-width:900px){.two-col{grid-template-columns:1fr 1fr;align-items:center;}}
.two-col.reverse{direction:rtl;}
.two-col.reverse > *{direction:ltr;}
/* ---------- misc ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.vspace > * + *{margin-top:var(--sp-4);}
.vspace-lg > * + *{margin-top:var(--sp-6);}
/* ---------- FAQ accordion (native /, no JS needed) ---------- */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line-light);}
.faq-item summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--sp-5);
padding:var(--sp-5) 0;
cursor:pointer;
font-family:var(--font-body);
font-weight:600;
font-size:var(--text-md);
color:var(--navy-900);
list-style:none;
transition:color var(--dur-fast);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";}
.faq-item summary:hover{color:var(--brass-600);}
.faq-icon{
flex:none;
width:24px;height:24px;
border:1.5px solid var(--brass-500);
border-radius:50%;
position:relative;
}
.faq-icon::before,.faq-icon::after{
content:"";
position:absolute;
top:50%;left:50%;
background:var(--brass-500);
transform:translate(-50%,-50%);
}
.faq-icon::before{width:10px;height:1.5px;}
.faq-icon::after{width:1.5px;height:10px;transition:opacity var(--dur-fast);}
.faq-item[open] .faq-icon::after{opacity:0;}
.faq-item[open] summary{color:var(--brass-700);}
.faq-answer{padding:0 var(--sp-9) var(--sp-5) 0;color:var(--ink-700);max-width:66ch;}
.on-dark .faq-item{border-color:var(--ink-on-dark-dim);}
.on-dark .faq-item summary{color:var(--paper-0);}
.on-dark .faq-item summary:hover{color:var(--brass-300);}
.on-dark .faq-item[open] summary{color:var(--brass-300);}
.on-dark .faq-answer{color:var(--ink-on-dark);}
/* ---------- Scroll progress indicator ---------- */
.scroll-progress{
position:fixed;
top:0;left:0;
width:100%;
height:3px;
z-index:110;
background:transparent;
pointer-events:none;
}
.scroll-progress-bar{
height:100%;
width:0%;
background:var(--brass-500);
transition:width 80ms linear;
}
@media (prefers-reduced-motion: reduce){
.scroll-progress-bar{transition:none;}
}
/* ---------- Fieldwork gallery (real project photos) ---------- */
.fieldwork-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:var(--sp-4);
}
.fieldwork-grid .plate{margin:0;}
.fieldwork-grid .plate-img{overflow:hidden;aspect-ratio:4/3;}
.fieldwork-grid .plate-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 600ms var(--ease);}
.fieldwork-grid .plate:hover .plate-img img{transform:scale(1.045);}
.fieldwork-grid .plate figcaption{justify-content:flex-start;}
.fw-third{grid-column:span 6;}
.fw-portrait{grid-column:span 6;}
@media(min-width:640px){
.fw-third{grid-column:span 3;}
.fw-portrait{grid-column:span 3;}
}
@media(min-width:900px){
.fw-third{grid-column:span 2;}
.fw-portrait{grid-column:span 3;}
}
.fw-portrait .plate-img{aspect-ratio:3/4;}