/* Klikx website prototype: shared styles for every page.
   Dark view (Option A) always on load; light view (Option B) on request.
   Layout: 12-column editorial grid, eyebrow in columns 1-2, content from column 3. */

/* fonts are served from this website (no request to Google); both are open-licence variable fonts. Latin covers English and Bahasa Malaysia; latin-ext covers accented names. */
@font-face { font-family:"Archivo"; font-style:normal; font-weight:300 700; font-stretch:100% 125%; font-display:swap; src:url("fonts/archivo-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:300 700; font-stretch:100% 125%; font-display:swap; src:url("fonts/archivo-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap; src:url("fonts/inter-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Inter"; font-style:normal; font-weight:400 600; font-display:swap; src:url("fonts/inter-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --charcoal:#1C1D1F; --grey:#4D555A; --mute:#8A9096; --mist:#F3F4F5; --white:#FFFFFF; --soft:#B9BEC3; --pale:#D5D8DB;
  --purple:#720F8F; --red:#FD2843; --teal:#2A9F97; --orange:#FD9417; --hair:#E3E4E6; --hair2:#D9DCDF; --field:#34373B; --edge:#5A5F64;
  --display:"Archivo", "Arial Narrow", Arial, sans-serif; --dvar:"wdth" 112; --dw:500;
  --body:"Inter", "Segoe UI", Arial, sans-serif;
  --logo-on-dark:url("klikx-logo-white.png?v=00bdc503"); --logo-on-light:url("klikx-logo-grey.png?v=264de61c");
  --m:80px; --head:84px; --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; }
html, body { background:var(--white); color:var(--charcoal); font-family:var(--body); -webkit-font-smoothing:antialiased; }
body { overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button, input, select, textarea { font:inherit; color:inherit; }
/* every scroll the site makes (section links, arriving at a section, a form field after an error) stops below the fixed header */
html { scroll-padding-top:var(--head); }
:where(section[id], footer[id]) { scroll-margin-top:0; }   /* no weight, so section-specific spacing below always applies */
input, textarea, select { scroll-margin-top:110px; }   /* keeps the question above a field in view */
.d { font-family:var(--display); font-variation-settings:var(--dvar); font-weight:var(--dw); }
.eyebrow { font:500 12px/16px var(--body); letter-spacing:.16em; text-transform:uppercase; }
.num { font:500 13px/16px var(--body); font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.rule { display:flex; } .rule i { display:block; width:12px; height:2px; }
.rule i:nth-child(1), .progress i:nth-child(1), .rule-full i:nth-child(1) { background:var(--red); }
.rule i:nth-child(2), .progress i:nth-child(2), .rule-full i:nth-child(2) { background:var(--orange); }
.rule i:nth-child(3), .progress i:nth-child(3), .rule-full i:nth-child(3) { background:var(--purple); }
.rule i:nth-child(4), .progress i:nth-child(4), .rule-full i:nth-child(4) { background:var(--teal); }
.logo { display:block; aspect-ratio:2507/993; background:var(--logo-on-light) center/contain no-repeat; }
.logo.white { background-image:var(--logo-on-dark); }
.ar { width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.5; flex:none; transition:transform .35s var(--ease); }
/* the focus outline is purple on light grounds and white on dark ones: purple on charcoal is only 1.75:1, and a
   focus outline needs 3:1 against what is around it */
:root { --focus:var(--purple); }
.site-head, .menu-panel, .hero, .page-hero, .panel, .partnership, .site-foot, .contact-hero { --focus:var(--white); }
html[data-view="light"] :is(.site-head, .menu-panel, .hero, .page-hero, .panel, .partnership, .site-foot, .contact-hero) { --focus:var(--purple); }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }

/* buttons and links */
.btn-line { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:40px; padding:0 16px; font:500 13px/1 var(--body); border:1px solid var(--edge); background:none; cursor:pointer; transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease), transform .15s ease; }
.btn-line:hover { border-color:currentColor; }
.btn-line:active, .btn-solid:active, .to-top:active { transform:scale(.96); }
.icon-btn { width:40px; padding:0; }
.icon-btn svg { width:15px; height:15px; transition:transform .5s var(--ease); }
.theme-toggle[aria-pressed="true"] svg { transform:rotate(180deg); }
.text-link { position:relative; display:inline-flex; align-items:center; gap:8px; font:500 14px/1 var(--body); padding-bottom:7px; }
.text-link::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:left; transition:transform .45s var(--ease); }
.text-link:hover::after { transform:scaleX(.35); }
.text-link:hover .ar, .site-foot .big:hover .ar, .role:hover .ar { transform:translate(3px, -3px); }
.btn-solid { display:inline-flex; align-items:center; gap:12px; height:60px; padding:0 30px; background:var(--charcoal); color:var(--white); border:0; font:500 16px/1 var(--body); cursor:pointer; transition:background-color .3s var(--ease), transform .15s ease; }
.btn-solid:hover { background:var(--purple); }
.btn-solid:hover .ar { transform:translate(3px, -3px); }

/* header: fixed, transparent over the dark top of each page, solid once the page scrolls */
.site-head { position:fixed; top:0; left:0; right:0; z-index:40; height:calc(var(--head) + env(safe-area-inset-top, 0px)); padding:env(safe-area-inset-top, 0px) var(--m) 0; display:flex; align-items:center; justify-content:space-between; color:var(--pale); transition:background-color .35s var(--ease), color .35s var(--ease); }
.site-head.solid { background:var(--charcoal); }
.site-head .logo { width:120px; }
.site-head .right { display:flex; align-items:center; gap:48px; }
.site-head nav { display:flex; gap:34px; font:500 13px/1 var(--body); }
.site-head nav a { position:relative; display:inline-flex; align-items:baseline; gap:7px; padding:8px 0; transition:color .25s ease; }
.site-head nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.site-head nav a:hover::after, .site-head nav a.active::after, .site-head nav a[aria-current="page"]::after { transform:scaleX(1); transform-origin:left; }
.site-head nav a .n { font-size:11px; letter-spacing:.06em; font-variant-numeric:tabular-nums; color:var(--mute); transition:color .25s ease; }
.site-head nav a:hover, .site-head nav a.active, .site-head nav a[aria-current="page"], .site-head nav a.active .n, .site-head nav a[aria-current="page"] .n { color:var(--white); }
.site-head .tools { display:flex; align-items:center; gap:12px; }
.menu-btn { display:none; }
.progress { position:absolute; left:0; right:0; bottom:0; height:2px; display:flex; clip-path:inset(0 calc(100% - var(--p, 0%)) 0 0); }
.progress i { flex:1; }

/* back to top: appears after scrolling, bottom right */
.to-top { position:fixed; right:28px; bottom:calc(28px + env(safe-area-inset-bottom, 0px)); z-index:45; width:52px; height:52px; display:grid; place-items:center; background:var(--charcoal); color:var(--white); border:1px solid var(--edge); cursor:pointer; opacity:0; visibility:hidden; transform:translateY(14px); transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s linear .4s, background-color .3s var(--ease), border-color .3s var(--ease); }
.to-top.show { opacity:1; visibility:visible; transform:none; transition:opacity .4s var(--ease), transform .4s var(--ease), visibility 0s, background-color .3s var(--ease), border-color .3s var(--ease); }
.to-top::before { content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px; background:linear-gradient(90deg, var(--red) 0 25%, var(--orange) 25% 50%, var(--purple) 50% 75%, var(--teal) 75% 100%); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.to-top:hover::before, .to-top:focus-visible::before { transform:scaleX(1); }
.to-top svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; transition:transform .35s var(--ease); }
.to-top:hover svg { transform:translateY(-3px); }

/* full-screen menu for tablets and phones */
.menu-panel { position:fixed; inset:0; z-index:50; background:var(--charcoal); color:var(--white); padding:calc(16px + env(safe-area-inset-top, 0px)) var(--m) 32px; display:flex; flex-direction:column; overflow-y:auto; animation:fade .35s var(--ease); }
.menu-panel .bar { display:flex; justify-content:space-between; align-items:center; height:56px; }
.menu-panel .bar .logo { width:104px; }
.menu-panel .links { margin-top:56px; display:flex; flex-direction:column; gap:18px; }
.menu-panel .links a { display:flex; align-items:baseline; gap:16px; font-size:40px; line-height:1.05; letter-spacing:-.03em; animation:rise .5s var(--ease) both; }
.menu-panel .links a:nth-child(2) { animation-delay:.04s; } .menu-panel .links a:nth-child(3) { animation-delay:.08s; }
.menu-panel .links a:nth-child(4) { animation-delay:.12s; } .menu-panel .links a:nth-child(5) { animation-delay:.16s; }
.menu-panel .links a .n { font:500 13px/1 var(--body); color:var(--mute); letter-spacing:.06em; }
.menu-panel .foot { margin-top:auto; padding-top:40px; color:var(--soft); font:400 14px/22px var(--body); }

/* home hero */
.hero { position:relative; height:900px; background:var(--charcoal); color:var(--white); overflow:hidden; }
.hero svg.desk, .hero svg.mob { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.hero svg.mob { display:none; }
.hero svg.desk .lines { mask:url(#clear-header); }
.gridlines { display:none; }
.hero h1 { position:absolute; left:var(--m); top:280px; width:min(820px, 58vw); font-size:clamp(56px, 6.4vw, 92px); line-height:.98; letter-spacing:-.035em; z-index:2; text-wrap:balance; }
.hero .sub { position:absolute; left:var(--m); top:620px; width:min(520px, 48vw); font:400 18px/29px var(--body); color:var(--soft); z-index:2; }
.hero .meta { position:absolute; left:var(--m); right:var(--m); bottom:40px; display:flex; justify-content:space-between; align-items:flex-end; color:var(--mute); z-index:2; }
.hero .meta .stack { display:flex; gap:56px; }
.hero .meta .stack div span { display:block; color:var(--pale); margin-top:6px; font:400 14px/20px var(--body); letter-spacing:0; text-transform:none; }
.hero .meta .text-link { color:var(--white); }

/* title band at the top of Careers, Contact and Privacy */
.page-hero { position:relative; background:var(--charcoal); color:var(--white); padding:calc(var(--head) + 132px) var(--m) 104px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; overflow:hidden; }
.page-hero .eyebrow { grid-column:1 / span 2; color:var(--mute); padding-top:22px; position:relative; z-index:1; }
.page-hero .in { grid-column:3 / span 7; position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(48px, 6.6vw, 96px); line-height:.98; letter-spacing:-.04em; text-wrap:balance; }
.page-hero .in > p { margin-top:28px; max-width:560px; font:400 18px/29px var(--body); color:var(--soft); }
.page-hero > svg { position:absolute; right:0; top:var(--head); height:calc(100% - var(--head)); width:auto; z-index:0; }
/* Careers (Agnes, 7 Oct): the lounge's sofa group as a faint background behind the title band, like the Contact page.
   She found a thin slice of an office photo "meaningless", did not want a photo box, and wants the sofas whole
   ("not cut off photo"). From 700 px the photo is the full width of the lounge photo with the sofa group in the
   middle, and the band is at least 42.5vw tall below the header, so cover never trims into the group (it needs
   42.3vw). Narrower screens use the 4:5 lounge photo, which shows the whole group at phone shapes.
   Strengths and text colours follow the Contact page (4.5:1 or better on every line). */
.careers-hero { isolation:isolate; }
.careers-hero::before { content:""; position:absolute; top:calc(var(--head) + env(safe-area-inset-top, 0px)); left:0; right:0; bottom:0; z-index:-1; background:url(office/office-careers.jpg?v=c67e47e9) center / cover no-repeat; opacity:.2; pointer-events:none; }
.careers-hero .eyebrow { color:var(--soft); }
@media (min-width:700px) { .careers-hero { min-height:calc(var(--head) + 42.5vw); align-content:center; } }
@media (min-width:1024px) { .careers-hero { padding-top:calc(var(--head) + 72px); padding-bottom:72px; } }
@media (max-width:699px) { .careers-hero::before { background-image:url(office/office-lounge.jpg?v=a9cc2465); background-position:center 62%; } }

/* company statement */
.statement { padding:160px var(--m) 0; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; }
.statement .eyebrow { grid-column:1 / span 2; color:var(--grey); padding-top:14px; }
.statement p { grid-column:3 / span 9; font-size:clamp(28px, 3.5vw, 50px); line-height:1.14; letter-spacing:-.02em; font-weight:400; text-wrap:pretty; }
.statement p em { font-style:normal; color:var(--mute); }

/* approach */
.approach { padding:140px var(--m) 160px; }   /* the space above belongs to this section, so the Approach link lands with room under the header */
.sec-head { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:end; padding-bottom:56px; border-bottom:1px solid var(--hair); }
.sec-head .eyebrow { grid-column:1 / span 2; color:var(--grey); }
.sec-head h2 { grid-column:3 / span 7; font-size:clamp(34px, 3.9vw, 56px); line-height:1.02; letter-spacing:-.03em; text-wrap:balance; }
.sec-head .aside { grid-column:10 / span 3; font:400 15px/24px var(--body); color:var(--grey); }
.track { position:relative; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); margin-top:72px; }
.track .line { position:absolute; left:0; right:0; top:7px; height:2px; display:flex; }
.track .line i { flex:1; display:block; }
.stage { position:relative; padding-right:32px; }
.stage .dot { width:16px; height:16px; background:var(--white); border:2px solid var(--charcoal); transform:rotate(45deg); position:relative; z-index:1; transition:background-color .3s var(--ease); }
.stage:hover .dot, .stage:last-child .dot { background:var(--charcoal); }
.stage .num { display:block; margin-top:36px; color:var(--grey); }
.stage h3 { margin-top:14px; font-size:24px; line-height:1.15; letter-spacing:-.015em; }
.stage p { margin-top:12px; font:400 15px/24px var(--body); color:var(--grey); }

/* sectors: a list that reveals descriptions in place; nothing links away */
.sectors { background:var(--mist); padding:140px var(--m); }
.sectors .sec-head { border:0; padding-bottom:40px; }
.index { display:grid; grid-template-columns:minmax(0,1fr) 440px; gap:56px; margin-top:24px; }
.row { width:100%; display:grid; grid-template-columns:72px minmax(0,1fr) 28px; align-items:center; min-height:76px; text-align:left; background:none; border:0; border-bottom:1px solid var(--hair2); cursor:pointer; transition:background-color .3s var(--ease), box-shadow .3s var(--ease); }
.row:first-child { border-top:1px solid var(--hair2); }
.row .t { font-size:clamp(20px, 2.1vw, 30px); letter-spacing:-.02em; padding-block:12px; transition:transform .4s var(--ease); }
.row:hover .t { transform:translateX(8px); }
.row .num { color:var(--mute); transition:color .3s ease; }
.row .pm { position:relative; width:14px; height:14px; justify-self:end; color:var(--mute); transition:transform .4s var(--ease), color .3s ease; }
.row:hover .pm { transform:rotate(90deg); color:var(--charcoal); }
.row .pm::before, .row .pm::after { content:""; position:absolute; background:currentColor; }
.row .pm::before { left:0; right:0; top:6.5px; height:1.5px; }
.row .pm::after { top:0; bottom:0; left:6.5px; width:1.5px; transition:transform .3s var(--ease); }
.row .desc { display:none; grid-column:2 / -1; padding:0 28px 20px 0; font:400 15px/24px var(--body); color:var(--grey); animation:rise .4s var(--ease) both; }
.row.on { background:var(--white); box-shadow:-24px 0 0 var(--white), 24px 0 0 var(--white); }
.row.on .num, .row.on .pm { color:var(--charcoal); }
.row.on .pm { transform:none; }
.row.on .pm::after { transform:scaleY(0); }
.panel { position:relative; align-self:stretch; background:var(--charcoal); color:var(--white); overflow:hidden; --accent:var(--red); }
.panel svg { position:absolute; inset:0; width:100%; height:100%; }
.panel .accent { stroke:var(--accent); transition:stroke .4s var(--ease); }
.panel .cap { position:absolute; left:36px; right:36px; bottom:36px; }
.panel .cap h3 { font-size:30px; line-height:1.1; letter-spacing:-.02em; margin:12px 0 10px; }
.panel .cap p { font:400 15px/24px var(--body); color:var(--soft); max-width:340px; }
.panel .cap.swap h3, .panel .cap.swap p { animation:rise .45s var(--ease) both; }

/* partnership */
.partnership { position:relative; background:var(--charcoal); color:var(--white); padding:160px var(--m); overflow:hidden; }
.partnership blockquote { position:relative; z-index:1; width:min(1060px, 74%); font-size:clamp(30px, 4vw, 58px); line-height:1.08; letter-spacing:-.03em; text-wrap:pretty; }
.partnership .eyebrow { position:relative; z-index:1; color:var(--mute); margin-bottom:40px; }
.partnership svg { position:absolute; right:0; top:0; height:100%; width:auto; }

/* careers page */
.openings { padding:140px var(--m) 120px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; }
.openings > .eyebrow { grid-column:1 / span 2; color:var(--grey); padding-top:18px; }
.roles-wrap { grid-column:3 / span 10; min-width:0; }
.filters { border:0; padding:0; margin:0 0 40px; }
.filters .tile .ct { margin-left:10px; font:500 12px/1 var(--body); color:var(--mute); font-variant-numeric:tabular-nums; position:relative; z-index:1; }
.roles { border-top:1px solid var(--hair); }
.role { display:grid; grid-template-columns:72px minmax(0,1fr) 150px 170px 90px; align-items:center; gap:16px; min-height:104px; padding:18px 0; border-bottom:1px solid var(--hair); transition:background-color .3s var(--ease), box-shadow .3s var(--ease); }
.role .num { color:var(--mute); }
.role .t { font-size:clamp(24px, 2.6vw, 36px); letter-spacing:-.025em; transition:transform .4s var(--ease); }
.role .t small { display:block; margin-top:8px; font:400 14px/20px var(--body); letter-spacing:0; color:var(--grey); }
.role .team, .role .where { font:400 15px/24px var(--body); color:var(--grey); }
.role .go { justify-self:end; display:inline-flex; align-items:center; gap:8px; font:500 14px/1 var(--body); }
.role:hover { background:var(--mist); box-shadow:-24px 0 0 var(--mist), 24px 0 0 var(--mist); }
.role:hover .t { transform:translateX(8px); }
.role.enter { animation:rise .5s var(--ease) both; }


.apply { padding:0 var(--m) 160px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; }
.apply > .eyebrow { grid-column:1 / span 2; color:var(--grey); padding-top:6px; }
.apply .in { grid-column:3 / span 10; min-width:0; }
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px; }
.steps li { display:flex; flex-direction:column; gap:12px; padding-top:28px; border-top:1px solid var(--hair2); position:relative; }
.steps li::before { content:""; position:absolute; top:-1px; left:0; width:48px; height:2px; }
.steps li:nth-child(1)::before { background:var(--red); } .steps li:nth-child(2)::before { background:var(--orange); } .steps li:nth-child(3)::before { background:var(--purple); }
.steps .qn { font:500 12px/1 var(--body); letter-spacing:.06em; color:var(--mute); }
.steps h2 { font-size:clamp(22px, 2vw, 28px); line-height:1.15; letter-spacing:-.02em; }
.steps p { font:400 16px/26px var(--body); color:var(--grey); max-width:34ch; }
.steps .copy-mail { margin-top:10px; }
.steps .copy-mail .addr { font-size:clamp(22px, 1.9vw, 26px); }
.apply .more { margin-top:88px; max-width:760px; font-size:clamp(24px, 2.4vw, 34px); line-height:1.25; letter-spacing:-.02em; font-weight:400; }
.apply .keep { margin-top:24px; font:400 14px/22px var(--body); color:var(--mute); }
.apply .keep a { color:var(--purple); border-bottom:1px solid currentColor; }

/* contact page: choose a topic, then answer a few labelled questions; no placeholder text */
.enquiry { padding:120px var(--m) 160px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:start; }
.copy-mail { display:flex; flex-direction:column; align-items:flex-start; gap:12px; background:none; border:0; padding:0; text-align:left; cursor:pointer; }
.copy-mail .addr { font-size:clamp(26px, 2.4vw, 34px); line-height:1.1; letter-spacing:-.025em; position:relative; padding-bottom:6px; }
.copy-mail .addr::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform-origin:left; transition:transform .45s var(--ease); }
.copy-mail:hover .addr::after { transform:scaleX(.3); }
.copy-mail .state { display:inline-flex; align-items:center; gap:8px; font:500 13px/1 var(--body); color:var(--grey); }
.copy-mail .state::before { content:""; width:8px; height:8px; border:1.5px solid currentColor; transform:rotate(45deg); transition:background-color .25s ease; }
.copy-mail.copied .state { color:var(--charcoal); }
.copy-mail.copied .state::before { background:currentColor; }
.clock { font-variant-numeric:tabular-nums; }

.enquiry form, .enquiry .done { grid-column:6 / span 7; }
.q { border:0; margin:0 0 56px; padding:0; min-width:0; }
.q legend, .q > label, .pair label { display:flex; align-items:baseline; gap:14px; padding:0; margin-bottom:8px; font-family:var(--display); font-variation-settings:var(--dvar); font-weight:var(--dw); font-size:clamp(20px, 1.8vw, 24px); letter-spacing:-.015em; }
.qn { font:500 12px/1 var(--body); letter-spacing:.06em; color:var(--mute); font-variant-numeric:tabular-nums; min-width:20px; }
.opt { font:400 13px/1 var(--body); letter-spacing:0; color:var(--mute); }
.tiles { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.tile { position:relative; display:inline-flex; align-items:center; min-height:56px; padding:0 22px 0 46px; border:1px solid var(--hair2); cursor:pointer; transition:border-color .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.tile input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.tile .tl { font-size:18px; white-space:nowrap; letter-spacing:-.015em; transition:transform .4s var(--ease); }
.tile::after { content:""; position:absolute; left:21px; top:calc(50% - 5px); width:10px; height:10px; border:1.5px solid var(--mute); transform:rotate(45deg); transition:background-color .3s ease, border-color .3s ease; }
.tile:hover { border-color:var(--charcoal); }
.tile:hover .tl { transform:translateX(4px); }
.tile:has(input:checked) { background:var(--charcoal); border-color:var(--charcoal); color:var(--white); }
.tile:has(input:checked)::after { background:var(--white); border-color:var(--white); }
.tile:has(input:focus-visible) { outline:2px solid var(--purple); outline-offset:3px; }
.topic-note { margin-top:18px; font:400 15px/24px var(--body); color:var(--grey); }
.topic-note a { color:var(--purple); border-bottom:1px solid currentColor; }
.sub-q { margin-top:28px; }
.sub-q label { display:block; font:500 12px/16px var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }

.field { position:relative; }
.field::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--purple); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); pointer-events:none; }
.field:focus-within::after { transform:scaleX(1); }
.field input, .field textarea, .field select { width:100%; font:400 20px/1.4 var(--body); color:var(--charcoal); background:none; border:0; border-bottom:1px solid var(--hair2); border-radius:0; padding:8px 0 12px; outline:none; }
.field textarea { min-height:132px; resize:vertical; line-height:1.55; }
.field select { -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:28px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234D555A' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center / 12px no-repeat; }
.field.bad input, .field.bad textarea { border-bottom-color:var(--red); }
.err { margin-top:10px; font:500 14px/20px var(--body); color:var(--charcoal); display:flex; gap:10px; align-items:center; }
.err::before { content:""; width:7px; height:7px; background:var(--red); transform:rotate(45deg); flex:none; }
.pair { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:32px; }
.pair label .qn { visibility:hidden; }
.pair > div:first-child label .qn { visibility:visible; }
.consent { display:flex; gap:14px; align-items:flex-start; font:400 15px/24px var(--body); color:var(--grey); cursor:pointer; }
.consent input { -webkit-appearance:none; appearance:none; flex:none; width:22px; height:22px; margin-top:1px; border:1px solid var(--grey); background:var(--white) center/14px no-repeat; cursor:pointer; transition:background-color .25s ease, border-color .25s ease; }
.consent input:checked { background-color:var(--charcoal); border-color:var(--charcoal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E"); }
.consent.bad input { border-color:var(--red); }
.consent a { color:var(--purple); border-bottom:1px solid currentColor; }
.send { margin-top:44px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.send-err { margin-top:18px; }   /* shown only if the live form could not send */
.send small { font:400 13px/20px var(--body); color:var(--mute); }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.done { animation:rise .6s var(--ease) both; }
.done h2 { font-size:clamp(40px, 5vw, 72px); line-height:1; letter-spacing:-.035em; }
.done p { margin-top:24px; max-width:560px; font:400 18px/29px var(--body); color:var(--grey); }
.done small { display:block; margin-top:20px; font:400 13px/20px var(--body); color:var(--mute); }
.done .again { margin-top:36px; }

/* privacy page */
.notices { padding:120px var(--m) 160px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; }
.notice { grid-column:3 / span 7; scroll-margin-top:56px; }
.notice + .notice { margin-top:96px; padding-top:96px; border-top:1px solid var(--hair); scroll-margin-top:-40px; }   /* its heading lands where the English one does */
.notice h2 { font-size:clamp(26px, 2.6vw, 36px); letter-spacing:-.025em; }
.notice .updated { margin-top:12px; font:400 14px/20px var(--body); color:var(--grey); }
.notice dl { margin-top:40px; }
.notice dt { font:600 15px/24px var(--body); margin-top:28px; display:flex; gap:14px; }
.notice dt span { color:var(--mute); font-weight:500; font-variant-numeric:tabular-nums; min-width:22px; }
.notice dd { margin:6px 0 0 36px; font:400 16px/27px var(--body); color:var(--grey); max-width:640px; }
.page-hero .lang { display:flex; gap:28px; margin-top:36px; font:500 14px/1 var(--body); }
.page-hero .lang a { color:var(--pale); }

/* closing block: contact details and footer in one */
.site-foot { position:relative; background:var(--charcoal); color:var(--white); }
.rule-full { display:flex; height:3px; } .rule-full i { flex:1; }
.foot-in { padding:120px var(--m) 40px; }
.site-foot .eyebrow { color:var(--mute); }
.site-foot .big { display:inline-flex; align-items:center; gap:.2em; margin-top:28px; font-size:clamp(44px, 8.3vw, 120px); line-height:1; letter-spacing:-.045em; }
.site-foot .big .ar { width:.7em; height:.7em; stroke-width:1.2; }
.site-foot .cols { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; margin-top:96px; padding-top:40px; border-top:1px solid var(--field); }
.site-foot .cols .eyebrow { margin-bottom:14px; }
.site-foot .cols p { font:400 16px/26px var(--body); color:var(--pale); overflow-wrap:anywhere; }
.site-foot .base { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); align-items:center; gap:24px; margin-top:96px; font:400 13px/18px var(--body); color:var(--mute); }
.site-foot .base .logo { width:104px; }
.site-foot .base nav { display:flex; gap:28px; justify-self:start; }
.site-foot .base > span:last-child { grid-column:3 / span 2; justify-self:start; }   /* under Enquiries, leaving the corner clear for the back-to-top button */
.site-foot .base nav a { position:relative; padding-bottom:4px; transition:color .25s ease; }
.site-foot .base nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
.site-foot .base nav a:hover { color:var(--white); }
.site-foot .base nav a:hover::after { transform:scaleX(1); transform-origin:left; }
.site-foot.compact .foot-in { padding-top:48px; }
.site-foot.compact .base { margin-top:0; }

/* ===== Motion: measured, never looping; switched off for reduced motion ===== */
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes draw { to { stroke-dashoffset:0; } }
@keyframes fill-x { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes fill-y { from { clip-path:inset(0 0 100% 0); } to { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:no-preference) {
  .hero .lines line, .page-hero .lines line { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.3s var(--ease) .1s forwards; }
  .hero .lines line:nth-child(2), .page-hero .lines line:nth-child(2) { animation-delay:.22s; }
  .hero .lines line:nth-child(3), .page-hero .lines line:nth-child(3) { animation-delay:.34s; }
  .hero .lines line:nth-child(4), .page-hero .lines line:nth-child(4) { animation-delay:.46s; }
  .hero h1, .page-hero h1 { animation:rise 1s var(--ease) .15s both; }
  .hero .sub, .page-hero .in > p, .page-hero .lang { animation:rise 1s var(--ease) .35s both; }
  .hero .meta, .page-hero .eyebrow { animation:rise 1s var(--ease) .5s both; }
  @supports (animation-timeline: view()) {
    .reveal { animation:rise linear both; animation-timeline:view(); animation-range:entry 0% cover 22%; }
    .stage.reveal:nth-child(3) { animation-range:entry 4% cover 26%; }
    .stage.reveal:nth-child(4) { animation-range:entry 8% cover 30%; }
    .stage.reveal:nth-child(5) { animation-range:entry 12% cover 34%; }
    .stage.reveal:nth-child(6) { animation-range:entry 16% cover 38%; }
    .track .line { animation:fill-x linear both; animation-timeline:view(); animation-range:entry 30% cover 60%; }
  }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } }

/* ===== Light view (Option B), switched on by the toggle for this visit only ===== */
html[data-view="light"] { --dw:400; }
html[data-view="light"] .site-head { color:var(--grey); }
html[data-view="light"] .site-head.solid { background:var(--white); box-shadow:0 1px 0 var(--hair); }
html[data-view="light"] .site-head nav a:hover, html[data-view="light"] .site-head nav a.active, html[data-view="light"] .site-head nav a[aria-current="page"], html[data-view="light"] .site-head nav a.active .n, html[data-view="light"] .site-head nav a[aria-current="page"] .n { color:var(--charcoal); }
html[data-view="light"] .btn-line { border-color:var(--charcoal); color:var(--charcoal); }
html[data-view="light"] .logo.white { background-image:var(--logo-on-light); }
html[data-view="light"] .to-top { background:var(--white); color:var(--charcoal); border-color:var(--hair2); }
html[data-view="light"] .hero, html[data-view="light"] .page-hero { background:var(--white); color:var(--charcoal); border-bottom:1px solid var(--hair); }
html[data-view="light"] .gridlines { display:inline; }
html[data-view="light"] .xh { stroke:#C9CCCF; }
html[data-view="light"] .hero h1 { font-weight:300; font-size:clamp(60px, 6.8vw, 98px); letter-spacing:-.045em; }
html[data-view="light"] .page-hero h1 { font-weight:300; letter-spacing:-.05em; }
html[data-view="light"] .hero .sub, html[data-view="light"] .page-hero .in > p { color:var(--grey); }
html[data-view="light"] .careers-hero::before { opacity:.4; }
html[data-view="light"] .page-hero.careers-hero .eyebrow, html[data-view="light"] .page-hero.careers-hero .in > p { color:var(--charcoal); }
html[data-view="light"] .page-hero .eyebrow { color:var(--grey); }
html[data-view="light"] .page-hero .lang a { color:var(--charcoal); }
html[data-view="light"] .hero .meta .stack div span, html[data-view="light"] .hero .meta .text-link { color:var(--charcoal); }
html[data-view="light"] .statement p, html[data-view="light"] .apply .more { font-weight:300; }
html[data-view="light"] .sec-head h2 { font-weight:300; letter-spacing:-.035em; }
html[data-view="light"] .stage h3 { font-weight:400; }
html[data-view="light"] .row .t, html[data-view="light"] .role .t { font-weight:300; }
html[data-view="light"] .panel { background:var(--white); color:var(--charcoal); border:1px solid var(--hair); }
html[data-view="light"] .panel .field { stroke:var(--hair); }
html[data-view="light"] .panel .cap h3 { font-weight:400; } html[data-view="light"] .panel .cap p { color:var(--grey); }
html[data-view="light"] .partnership { background:var(--white); color:var(--charcoal); border-top:1px solid var(--hair); }
html[data-view="light"] .partnership blockquote { font-weight:300; letter-spacing:-.035em; } html[data-view="light"] .partnership .eyebrow { color:var(--grey); }
html[data-view="light"] .site-foot { background:var(--mist); color:var(--charcoal); }
html[data-view="light"] .site-foot .big { font-weight:300; }
html[data-view="light"] .site-foot .eyebrow, html[data-view="light"] .site-foot .base { color:var(--grey); }
html[data-view="light"] .site-foot .cols { border-color:var(--hair2); }
html[data-view="light"] .site-foot .cols p { color:var(--charcoal); }
html[data-view="light"] .site-foot .base nav a:hover { color:var(--charcoal); }
html[data-view="light"] .menu-panel { background:var(--white); color:var(--charcoal); }
html[data-view="light"] .menu-panel .foot { color:var(--grey); }

/* ===== Small laptops ===== */
@media (max-width:1279px) {
  :root { --m:64px; }
  .hero h1 { font-size:5.4vw; } html[data-view="light"] .hero h1 { font-size:5.8vw; }
  .site-head nav { gap:24px; } .site-head .right { gap:36px; }
  .index { grid-template-columns:minmax(0,1fr) 360px; gap:40px; }
}

/* ===== Tablets and phones ===== */
@media (max-width:1023px) {
  :root { --m:40px; --head:72px; }
  .site-head nav { display:none; }
  .menu-btn { display:inline-flex; }
  .hero { height:820px; }
  .hero svg.desk { display:none; } .hero svg.mob { display:block; }
  .hero h1, html[data-view="light"] .hero h1 { top:340px; width:auto; right:var(--m); font-size:clamp(46px, 7.4vw, 64px); line-height:1; }
  .hero .sub { top:auto; bottom:170px; width:auto; right:var(--m); font-size:17px; line-height:27px; }
  .hero .meta .text-link { display:none; }
  .page-hero { padding-top:calc(var(--head) + 96px); padding-bottom:80px; }
  .page-hero .eyebrow, .page-hero .in { grid-column:1 / -1; }
  .page-hero .eyebrow { padding-top:0; }
  .page-hero > svg { opacity:.35; }
  .statement { padding:112px var(--m) 0; }
  .statement .eyebrow, .statement p { grid-column:1 / -1; }
  .statement .eyebrow { padding-top:0; }
  .approach { padding-top:96px; padding-bottom:112px; }
  .sec-head { grid-template-columns:minmax(0,1fr); gap:18px; padding-bottom:40px; }
  .sec-head .eyebrow, .sec-head h2, .sec-head .aside { grid-column:1 / -1; }
  .track { grid-template-columns:minmax(0,1fr); gap:40px; margin-top:48px; }
  .track .line { left:7px; right:auto; top:8px; bottom:8px; width:2px; height:auto; flex-direction:column; animation-name:fill-y !important; }
  .stage { padding:0 0 0 48px; }
  .stage .dot { position:absolute; left:0; top:2px; }
  .stage .num { margin-top:0; }
  .sectors { padding:112px var(--m); }
  .index { grid-template-columns:minmax(0,1fr); }
  .panel { display:none; }
  .row.on .desc { display:block; }
  .partnership { padding:112px var(--m); }
  .partnership blockquote { width:100%; }
  .partnership svg { opacity:.35; }
  .openings, .apply, .enquiry, .notices { padding-top:96px; }
  .openings > .eyebrow, .roles-wrap, .apply > .eyebrow, .apply .in, .notice { grid-column:1 / -1; }
  .role { grid-template-columns:56px minmax(0,1fr) 130px 90px; }
  .role .where { display:none; }
  .steps { grid-template-columns:minmax(0,1fr); gap:36px; }
  .apply .more { margin-top:64px; }
  .openings > .eyebrow, .apply > .eyebrow { padding-top:0; }
  .apply { padding-bottom:112px; }
  .foot-in { padding-top:96px; }
  .site-foot .cols { grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 24px; margin-top:64px; }
  .site-foot .base { grid-template-columns:minmax(0,1fr); justify-items:start; gap:20px; margin-top:64px; padding-right:72px; }
  .site-foot .base nav { justify-self:start; }
  .site-foot .base > span:last-child { grid-column:auto; }
}
@media (min-width:601px) and (max-width:1023px) {
  .hero svg.mob { top:112px; height:calc(100% - 112px); }
  .hero h1, html[data-view="light"] .hero h1 { top:400px; }
}

/* ===== Phones ===== */
@media (max-width:600px) {
  :root { --m:20px; }
  .site-head .logo { width:100px; }
  .to-top { right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:46px; height:46px; }
  .foot-in { padding-bottom:104px; }
  .hero { height:844px; }
  .hero h1, html[data-view="light"] .hero h1 { top:360px; font-size:46px; letter-spacing:-.04em; }
  html[data-view="light"] .hero h1 { font-size:48px; }
  .hero .sub { bottom:184px; font-size:16px; line-height:26px; }
  .hero .meta { bottom:28px; } .hero .meta .stack { flex-direction:column; gap:18px; }
  .page-hero { padding-top:calc(var(--head) + 72px); padding-bottom:64px; }
  .page-hero > svg { display:none; }
  .statement { padding:88px var(--m) 0; }
  .approach { padding-top:72px; }
  .row { grid-template-columns:44px minmax(0,1fr) 24px; min-height:60px; }
  .row .desc { padding-right:0; }
  .row.on, .role:hover { box-shadow:-12px 0 0 var(--white), 12px 0 0 var(--white); }
  .role:hover { box-shadow:-12px 0 0 var(--mist), 12px 0 0 var(--mist); }
  .role { grid-template-columns:40px minmax(0,1fr) auto; min-height:80px; }
  .role .team { grid-column:2; grid-row:2; margin-top:-8px; font-size:14px; }
  .openings { padding-bottom:72px; }
  .role .where { display:none; }
  .filters .tile .ct { margin-left:8px; }
  .role .go { grid-column:3; grid-row:1 / span 2; }
  .role .go .lbl { display:none; }
  .partnership svg { display:none; }
  .pair { grid-template-columns:minmax(0,1fr); gap:32px; }
  .pair > div + div label .qn { display:none; }
  .pair > div:first-child label .qn { visibility:visible; }
  .tile { min-height:50px; padding:0 16px 0 40px; } .tile .tl { font-size:16px; } .tile::after { left:17px; }
  .field input, .field textarea, .field select { font-size:18px; }
  .notice dd { margin-left:0; }
  .site-foot .cols { grid-template-columns:minmax(0,1fr); }
  .menu-panel .links a { font-size:34px; }
}

/* ===== Contact page v2: moving title, channels in the dark band, sound-wave send button, converging success ===== */
.contact-hero { position:relative; isolation:isolate; background:var(--charcoal); color:var(--white); padding:calc(var(--head) + 88px) 0 0; overflow:hidden; }
.contact-hero .ch-top { padding:0 var(--m); display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:baseline; }
.contact-hero .ch-top .eyebrow { grid-column:1 / span 2; color:var(--soft); }   /* --mute falls below 4.5:1 over the photo */
.contact-hero .ch-top p { grid-column:3 / span 6; font:400 18px/29px var(--body); color:var(--soft); }
/* pause for the moving title (WCAG 2.2.2, Agnes 7 Oct): a square like the light/dark button, at the right of the
   intro line; hidden for visitors who ask for reduced motion, since the title is still for them */
.contact-hero .ch-top { position:relative; }
.title-toggle { position:absolute; right:var(--m); top:-12px; color:inherit; }
.title-toggle svg { fill:currentColor; }
.title-toggle .i-play, .title-toggle[aria-pressed="true"] .i-pause { display:none; }
.title-toggle[aria-pressed="true"] .i-play { display:inline; }
.marquee { margin-top:28px; overflow:hidden; white-space:nowrap; }
.marquee .track { display:inline-flex; align-items:center; will-change:transform; }
.marquee .track span { font-size:clamp(76px, 12.5vw, 200px); line-height:1.08; letter-spacing:-.045em; padding-bottom:.06em; }
.marquee .track i { display:inline-block; width:.16em; height:.16em; margin:0 .45em; transform:rotate(45deg) translateY(-.04em); font-size:clamp(76px, 12.5vw, 200px); flex:none; }
.marquee .track i:nth-of-type(4n+1) { background:var(--red); } .marquee .track i:nth-of-type(4n+2) { background:var(--orange); }
.marquee .track i:nth-of-type(4n+3) { background:var(--purple); } .marquee .track i:nth-of-type(4n+4) { background:var(--teal); }
.channels { margin-top:56px; padding:40px var(--m) 56px; border-top:1px solid var(--field); display:grid; grid-template-columns:1.4fr 1fr 1.4fr 1fr; gap:32px; }
/* a faint photo of the Menara UAC entrance behind the whole hero, from just under the header bar (Agnes, 7 Oct);
   decorative, so it is a background, not an img. It stops at the header because the header's small grey
   numbers would fall below 4.5:1 over it. */
.contact-hero::before { content:""; position:absolute; top:calc(var(--head) + env(safe-area-inset-top, 0px)); left:0; right:0; bottom:0; z-index:-1; background:url(office/office-entrance.jpg?v=c8916a28) center top / cover no-repeat; opacity:.2; pointer-events:none; }
/* below 840 px the wide photo can't show the "Menara UAC" name in full, so narrow screens get a square photo
   centred on the name, full width at the top. The contact details band is solid there, so the photo ends at the
   line above it. Strength: .2 dark (the most that keeps grey text at 4.5:1), .4 light (text over it is charcoal). */
@media (max-width:839px) {
  .contact-hero::before { background-image:url(office/office-entrance-phone.jpg?v=808d4546); background-size:100% auto; background-position:center top; }
  .channels { background:var(--charcoal); }
  html[data-view="light"] .channels { background:var(--white); }
}
.channels .eyebrow { color:var(--soft); margin-bottom:14px; }   /* --mute falls below 4.5:1 over the photo's bright spots */
.channels p { font:400 16px/26px var(--body); color:var(--pale); }
.channels .copy-mail { margin-top:0; }
.channels .copy-mail .addr { font-size:clamp(22px, 1.9vw, 28px); color:var(--white); }
.channels .copy-mail .state { color:var(--soft); }
.channels .copy-mail.copied .state { color:var(--white); }

.enquiry { padding-top:136px; }
.enquiry > .eyebrow { grid-column:1 / span 2; color:var(--grey); padding-top:6px; }
.enquiry form, .enquiry .done { grid-column:3 / span 8; }

/* office photos: rows of four 4:5 photos, each over a thin rule in one logo colour, so every row reads as the four-colour rule */
.office { background:var(--mist); padding:120px var(--m) 136px; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:start; }
.office > .eyebrow { grid-column:1 / span 2; color:var(--grey); padding-top:10px; }
.office .in { grid-column:3 / -1; }
.office h2 { font-size:clamp(30px, 3vw, 44px); line-height:1.05; letter-spacing:-.03em; }
.office .in > p { margin-top:14px; font:400 16px/26px var(--body); color:var(--grey); }
.office .photos { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px 24px; margin-top:48px; }
.office figure { margin:0; }
.office .ph { display:block; overflow:hidden; background:var(--hair); }
.office img { display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; transition:transform 1.1s var(--ease); }
.office figcaption { display:flex; align-items:baseline; gap:12px; margin-top:16px; padding-top:14px; border-top:2px solid var(--red); font:500 15px/20px var(--body); color:var(--charcoal); transition:padding-left .4s var(--ease); }
/* pointing at a photo (computers only): it zooms in slowly inside its frame and the caption shifts 8 px, like the sector rows */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .office figure:hover img { transform:scale(1.06); }
  .office figure:hover figcaption { padding-left:8px; }
}
.office figure:nth-child(4n+2) figcaption { border-top-color:var(--orange); }
.office figure:nth-child(4n+3) figcaption { border-top-color:var(--purple); }
.office figure:nth-child(4n+4) figcaption { border-top-color:var(--teal); }
.office figcaption .num { font:400 12px/20px var(--body); color:var(--mute); }

/* topic chips fill from the left when chosen */
.tile { overflow:hidden; }
.tile::before { content:""; position:absolute; inset:0; background:var(--charcoal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); }
.tile .tl, .tile::after { z-index:1; }
.tile:has(input:checked) { background:none; }
.tile:has(input:checked)::before { transform:scaleX(1); }

/* send button with four sound-wave bars in the logo colours */
.eq { display:inline-flex; align-items:center; gap:3px; height:18px; }
.eq i { display:block; width:3px; height:6px; transition:height .4s var(--ease); }
.eq i:nth-child(1) { background:var(--red); } .eq i:nth-child(2) { background:var(--orange); }
.eq i:nth-child(3) { background:var(--purple); } .eq i:nth-child(4) { background:var(--teal); }
@keyframes wave { 0%, 100% { height:5px; } 50% { height:18px; } }
@media (prefers-reduced-motion:no-preference) {
  .btn-solid:hover .eq i, .btn-solid.sending .eq i { animation:wave 1s var(--ease) infinite; }
  .btn-solid:hover .eq i:nth-child(2), .btn-solid.sending .eq i:nth-child(2) { animation-delay:.12s; }
  .btn-solid:hover .eq i:nth-child(3), .btn-solid.sending .eq i:nth-child(3) { animation-delay:.24s; }
  .btn-solid:hover .eq i:nth-child(4), .btn-solid.sending .eq i:nth-child(4) { animation-delay:.36s; }
  .done .lines line { stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.1s var(--ease) forwards; }
  .done .lines line:nth-child(2) { animation-delay:.1s; } .done .lines line:nth-child(3) { animation-delay:.2s; } .done .lines line:nth-child(4) { animation-delay:.3s; }
  .done h2, .done p, .done small { animation:rise .8s var(--ease) both; }
  .done h2 { animation-delay:.7s; } .done p { animation-delay:.85s; } .done small { animation-delay:1s; }
}
.btn-solid.sending { background:var(--purple); cursor:progress; }
.done { animation:none; }
.done svg { display:block; width:120px; height:120px; margin-bottom:32px; }

/* light view */
html[data-view="light"] .contact-hero { background:var(--white); color:var(--charcoal); border-bottom:1px solid var(--hair); }
html[data-view="light"] .contact-hero .ch-top p { color:var(--charcoal); }
html[data-view="light"] .channels p { color:var(--grey); }
/* light view: the photo is at .4 (Agnes, 7 Oct: "slight darker", then darker again), so text over it is charcoal, not grey (4.5:1 needs it) */
html[data-view="light"] .contact-hero::before { opacity:.4; }   /* .45 is the most that keeps charcoal at 4.5:1 over pure black */
html[data-view="light"] .contact-hero .ch-top .eyebrow { color:var(--charcoal); }
html[data-view="light"] .channels .eyebrow { color:var(--grey); }
html[data-view="light"] .marquee .track span { font-weight:300; }
html[data-view="light"] .channels { border-color:var(--hair); }
html[data-view="light"] .channels .copy-mail .addr, html[data-view="light"] .channels .copy-mail.copied .state { color:var(--charcoal); }
html[data-view="light"] .office h2 { font-weight:300; letter-spacing:-.035em; }

@media (max-width:1023px) {
  .contact-hero { padding-top:calc(var(--head) + 64px); }
  .contact-hero .ch-top .eyebrow, .contact-hero .ch-top p { grid-column:1 / -1; }
  .channels { grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 24px; }
  .enquiry > .eyebrow, .enquiry form, .enquiry .done { grid-column:1 / -1; }
  .enquiry { padding-top:88px; }
  .office { padding:88px var(--m) 104px; }
  .office > .eyebrow, .office .in { grid-column:1 / -1; }
  .office > .eyebrow { padding-top:0; }
  .office .photos { grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px 24px; margin-top:36px; }
}
@media (max-width:600px) {
  .marquee { margin-top:32px; }
  .marquee .track span, .marquee .track i { font-size:64px; }
  .channels { grid-template-columns:minmax(0,1fr); margin-top:36px; }
  .office .photos { gap:28px 16px; }
  .office figcaption { margin-top:12px; padding-top:10px; font-size:14px; }
}
@media (prefers-reduced-motion:no-preference) {
  .contact-hero .ch-top { animation:rise 1s var(--ease) .1s both; }
  .contact-hero .marquee { animation:fade 1.4s var(--ease) .25s both; }
  .contact-hero .channels > div { animation:rise 1s var(--ease) both; }
  .contact-hero .channels > div:nth-child(1) { animation-delay:.45s; } .contact-hero .channels > div:nth-child(2) { animation-delay:.55s; }
  .contact-hero .channels > div:nth-child(3) { animation-delay:.65s; } .contact-hero .channels > div:nth-child(4) { animation-delay:.75s; }
}
.q .qn { transition:color .3s ease; }
.q:focus-within .qn { color:var(--purple); }
.done h2:focus { outline:none; }
html[data-view="light"] .channels .copy-mail .state { color:var(--grey); }

/* contact title: keep the approach timeline's .track spacing out of the moving title */
.marquee { margin-top:64px; }
.marquee .track { margin-top:0; gap:0; }
@media (max-width:600px) { .marquee { margin-top:40px; } }
/* from 840 px the background shows the "Menara UAC" name at its top; this room keeps the intro line below the
   letters at every width (the letters end at about 5.5% of the width, or 12.4% of the photo's height) */
@media (min-width:840px) { .contact-hero { padding-top:calc(var(--head) + max(140px, 5.6vw + 32px)); } }
/* from 840 px the contact details sit over the photo too, so in the light view their small text is charcoal */
@media (min-width:840px) { html[data-view="light"] .contact-hero .channels p, html[data-view="light"] .contact-hero .channels .eyebrow, html[data-view="light"] .contact-hero .channels .copy-mail .state, html[data-view="light"] .contact-hero .channels .mail-link { color:var(--charcoal); } }
/* under 840 px the letters of the square photo end at about 9.7% of the width */
@media (max-width:839px) { .contact-hero { padding-top:calc(var(--head) + max(64px, 9.7vw + 22px)); } }

/* home: opening moment, on the first visit and on refresh (see the script at the top of index.html). The four strokes meet, then the screen opens. */
.intro { position:fixed; inset:0; z-index:100; display:grid; place-items:center; pointer-events:none; }
.intro .half { position:absolute; left:0; right:0; height:50.5%; background:var(--charcoal); }
.intro .top { top:0; } .intro .bottom { bottom:0; }
.intro .top::after, .intro .bottom::before { content:""; position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--red) 0 25%, var(--orange) 25% 50%, var(--purple) 50% 75%, var(--teal) 75% 100%); transform:scaleX(0); }
.intro .top::after { bottom:0; } .intro .bottom::before { top:0; }
@keyframes intro-seam { to { transform:scaleX(1); } }
.intro svg { position:relative; width:88px; height:88px; }
.intro line { stroke-dasharray:1; stroke-dashoffset:1; }
.intro-seen .intro { display:none; }
@keyframes intro-mark { to { opacity:0; transform:scale(.6) rotate(45deg); } }
@keyframes intro-up { to { transform:translateY(-101%); } }
@keyframes intro-down { to { transform:translateY(101%); } }
@keyframes intro-off { to { visibility:hidden; } }
@media (prefers-reduced-motion:no-preference) {
  .intro line { animation:draw .7s var(--ease) forwards; }
  .intro line:nth-child(2) { animation-delay:.06s; } .intro line:nth-child(3) { animation-delay:.12s; } .intro line:nth-child(4) { animation-delay:.18s; }
  .intro svg { animation:intro-mark .45s var(--ease) .95s forwards; }
  .intro .top::after, .intro .bottom::before { animation:intro-seam .45s var(--ease) .7s forwards; }
  .intro .top { animation:intro-up .8s cubic-bezier(.7,0,.2,1) 1.1s forwards; }
  .intro .bottom { animation:intro-down .8s cubic-bezier(.7,0,.2,1) 1.1s forwards; }
  .intro { animation:intro-off 0s linear 1.95s forwards; }
  html:not(.intro-seen) .hero .lines line { animation-delay:1.45s; }
  html:not(.intro-seen) .hero .lines line:nth-child(2) { animation-delay:1.57s; }
  html:not(.intro-seen) .hero .lines line:nth-child(3) { animation-delay:1.69s; }
  html:not(.intro-seen) .hero .lines line:nth-child(4) { animation-delay:1.81s; }
  html:not(.intro-seen) .hero h1 { animation-delay:1.5s; }
  html:not(.intro-seen) .hero .sub { animation-delay:1.7s; }
  html:not(.intro-seen) .hero .meta { animation-delay:1.85s; }
}
@media (prefers-reduced-motion:reduce) { .intro { display:none; } }

/* home: the hero lines move in as the page scrolls and meet as the X (--k runs 0 to 1, set by script) */
.hero svg.desk { --g:20px; } .hero svg.mob { --g:10px; }
.hero svg .lines line { transform:translate(calc(var(--k, 0) * var(--gx)), calc(var(--k, 0) * var(--gy))); }
.hero svg .lines line:nth-child(1) { --gx:var(--g); --gy:var(--g); }
.hero svg .lines line:nth-child(2) { --gx:calc(var(--g) * -1); --gy:var(--g); }
.hero svg .lines line:nth-child(3) { --gx:var(--g); --gy:calc(var(--g) * -1); }
.hero svg .lines line:nth-child(4) { --gx:calc(var(--g) * -1); --gy:calc(var(--g) * -1); }

/* home: the company statement fills in word by word as it scrolls into view (opacity set by script) */
.statement p.words .w { transition:opacity .15s linear; }

/* cursor: the four-colour mark, on mouse and trackpad only */
html.has-kx-cursor, html.has-kx-cursor * { cursor:none !important; }
html.has-kx-cursor input:not([type="radio"]):not([type="checkbox"]), html.has-kx-cursor textarea { cursor:text !important; }
html.has-kx-cursor select { cursor:pointer !important; }
.kx-cursor { position:fixed; left:0; top:0; z-index:200; width:18px; height:18px; margin:-9px 0 0 -9px; pointer-events:none; opacity:0; transition:opacity .2s ease; }
.kx-cursor.on { opacity:1; }
.kx-cursor.on.text { opacity:0; }
.kx-cursor .kx-scale { display:block; width:100%; height:100%; transition:transform .35s var(--ease); }
.kx-cursor.link .kx-scale { transform:scale(1.6); }
.kx-cursor.down .kx-scale { transform:scale(.8); }
.kx-cursor svg { display:block; width:100%; height:100%; }
section[tabindex="-1"]:focus { outline:none; }
a[data-target] { cursor:pointer; }
/* footer links: a small diamond between them, so they read as two separate links */
.site-foot .base nav { align-items:center; }
.site-foot .base nav .sep { width:5px; height:5px; background:var(--edge); transform:rotate(45deg); flex:none; }
html[data-view="light"] .site-foot .base nav .sep { background:var(--hair2); }
/* careers: a one-line summary under each role, then its working terms */
.role .t small { max-width:52ch; }
.role .t small.terms { margin-top:6px; font-size:13px; color:var(--mute); }

/* phone numbers and emails are links everywhere: quiet until hovered */
.site-foot .cols a, .channels p a, .menu-panel .foot a { border-bottom:1px solid transparent; transition:border-color .3s ease; }
.site-foot .cols a:hover, .channels p a:hover, .menu-panel .foot a:hover { border-bottom-color:currentColor; }
.notice dd a { color:var(--purple); border-bottom:1px solid currentColor; }
.mail-link { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding-bottom:3px; font:500 13px/1 var(--body); color:var(--grey); border-bottom:1px solid transparent; transition:border-color .3s ease; }
.mail-link:hover { border-bottom-color:currentColor; }
.mail-link:hover .ar { transform:translate(2px,-2px); }
.channels .mail-link { color:var(--soft); }
html[data-view="light"] .channels .mail-link { color:var(--grey); }

/* readability: small grey text on white or Mist uses a darker grey (5.2:1 on white, 4.8:1 on Mist) */
.statement, .approach, .sectors, .openings, .apply, .enquiry, .office, .notices { --mute:#666D73; }
html[data-view="light"] { --mute:#666D73; }
/* footer logo links home (back to the top on the home page) */
.site-foot .base .foot-logo { justify-self:start; display:block; transition:opacity .3s ease; }
.site-foot .base .foot-logo:hover { opacity:.75; }

/* page not found: the title band fills the screen above the footer */
.page-hero.not-found { min-height:calc(100vh - 124px); min-height:calc(100svh - 124px); align-content:center; }
.page-hero .actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px 36px; margin-top:44px; }
.page-hero .btn-solid { background:var(--white); color:var(--charcoal); }
.page-hero .btn-solid:hover { background:var(--purple); color:var(--white); }
.page-hero .actions .text-link { color:var(--white); }
html[data-view="light"] .page-hero .btn-solid { background:var(--charcoal); color:var(--white); }
html[data-view="light"] .page-hero .btn-solid:hover { background:var(--purple); }
html[data-view="light"] .page-hero .actions .text-link { color:var(--charcoal); }
@media (max-width:600px) {
  .page-hero .actions { gap:22px 28px; }
  .page-hero .actions .btn-solid { width:100%; justify-content:space-between; }
}
/* enquiry form: a missed topic outlines the choices in red; the consent sentence repeats in Bahasa Malaysia beneath */
.tiles.bad .tile { border-color:var(--red); }
.consent .bm { display:block; margin-top:8px; font-size:14px; line-height:22px; }