/* EmmTek TI — visual adaptation of Tooplate 2147 Titan Folio.
   Shared presentation layer; content, assets and interactions stay in the site. */
:root {
  --bg:#0b101d;
  --surface:#172338;
  --text:#f3f6ff;
  --muted:#b5c3d9;
  --line:#ffffff24;
  --blue:#2866ca;
  --cyan:#8cc9ff;
  --radius:24px;
  --shadow:0 20px 60px #0003;
  --glass:linear-gradient(135deg,#ffffff0d,#ffffff05);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
}
body {
  background:radial-gradient(ellipse at 5% 12%,#30457238,transparent 35%),
    linear-gradient(145deg,#0b101d 0%,#151a2e 35%,#142944 75%,#123755 100%);
  line-height:1.65;
}
.site-header { background:#0d1728ed; backdrop-filter:blur(20px); }
.brand { letter-spacing:-.03em; }
.nav-row { min-height:88px; }
nav { gap:12px; }
nav>a:not(.button),.services-menu summary { padding:10px 14px; border:1px solid transparent; border-radius:30px; }
nav>a:not(.button):hover,nav>a[aria-current],.services-menu[open] summary {
  color:var(--cyan); background:#76a9fa12; border-color:#76a9fa60;
}
nav>a:not(.button)::after { display:none; }
.button { border-radius:50px; background:linear-gradient(135deg,#3678df,#2456b2); box-shadow:0 8px 28px #377de32b; padding:17px 28px; }
.button:hover { background:linear-gradient(135deg,#4486ed,#2d64c5); box-shadow:0 12px 32px #377de34a; }
.button-small { padding:12px 20px; }
.hero { display:flex; flex-direction:column; background:transparent; }
.hero-content { order:0; position:relative; padding-block:28px 20px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.hero-emblem { width:48px; height:48px; object-fit:contain; margin-bottom:12px; }
.hero .eyebrow { justify-content:center; margin-bottom:8px; }
.hero h1 { max-width:850px; font-size:clamp(2.3rem,4.2vw,3.6rem); font-weight:750; letter-spacing:-.045em; line-height:1.1; }
.hero-description { max-width:640px; font-size:1.12rem; }
.hero .actions { justify-content:center; margin-top:16px; }
.hero .actions>.text-link { border:1px solid #ffffff30; background:#ffffff08; border-radius:50px; padding:16px 28px; }
.hero-location { margin:0 0 16px; font-size:.9375rem; }
.hero-image { position:relative; order:1; inset:auto; z-index:auto; width:min(100% - 80px,1000px); height:100px; margin:0 auto 12px; border:1px solid #ffffff30; border-radius:24px; box-shadow:var(--shadow); }
.hero-image img { opacity:1; object-position:center; }
.hero-shade { display:none; }
.hero-bottom { order:2; border:0; justify-content:center; gap:40px; padding-block:12px 20px; }
.hero-orbits { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.hero-orbits::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 20%,#5089e62b,transparent 60%); }
.hero-orbits span { position:absolute; width:250px; height:250px; border:1px solid #8cc9ff25; border-radius:50%; background:radial-gradient(circle at 30% 30%,#76a9fa14,transparent 70%); }
.hero-orbits span:nth-child(1) { top:12%; left:-90px; }
.hero-orbits span:nth-child(2) { top:6%; right:-30px; width:180px; height:180px; border-radius:34px; transform:rotate(25deg); }
.hero-orbits span:nth-child(3) { top:48%; right:13%; width:90px; height:90px; }
.capabilities { background:transparent; border:0; padding:0 0 32px; }
.capabilities .container { gap:16px; }
.capabilities span,.capabilities span:first-child,.capabilities span:nth-child(3) { border:1px solid var(--line); background:var(--glass); border-radius:18px; padding:24px 12px; text-align:center; }
.section { padding-block:64px; }
.section-heading { flex-direction:column; align-items:center; gap:18px; text-align:center; margin-bottom:46px; }
.section-heading .eyebrow { justify-content:center; margin-bottom:14px; }
.section-heading h2 { font-size:clamp(2rem,4vw,3.25rem); letter-spacing:-.035em; }
.section-heading h2::after { content:''; display:block; width:64px; height:3px; margin:24px auto 0; border-radius:3px; background:linear-gradient(90deg,#4388eb,#87d9eb); }
.section-heading>p { max-width:620px; margin:0; }
.service-tabs { justify-content:center; flex-wrap:wrap; overflow:visible; border:0; gap:10px; }
.service-tabs a { border:1px solid var(--line); border-radius:50px; background:#ffffff06; padding:12px 23px; }
.service-tabs a[aria-selected="true"] { color:#fff; background:linear-gradient(135deg,#306bc4,#235798); border-color:#87bdff; box-shadow:0 5px 22px #387fe32b; }
.service { background:var(--glass); border-radius:var(--radius); box-shadow:var(--shadow); gap:0 40px; }
.service-photo { border-radius:18px; }
.service-icon { width:52px; height:52px; padding:12px; border-radius:16px; background:#76a9fa1a; }
.service li { font-size:.82rem; }
.approach,.projects-section { background:#ffffff03; border-color:#ffffff12; }
.approach-grid { gap:56px; align-items:center; }
.approach-photo { border:1px solid var(--line); border-radius:20px; }
.principles { padding:0; display:grid; gap:18px; }
.principles article,.principles article:first-child { border:1px solid var(--line); border-radius:20px; padding:28px; background:var(--glass); }
.principles article>span { background:#76a9fa14; border:1px solid #76a9fa35; border-radius:50%; min-width:42px; height:42px; display:grid; place-items:center; padding:0; }
/* Five steps remain in reading order, with a compact connected sequence. */
.process { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; max-width:none; padding:0; }
.process::before { content:''; position:absolute; top:42px; left:30px; right:30px; height:2px; background:#73b6ff40; }
.process li { position:relative; width:auto; padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); }
.process li:nth-child(even) { align-self:stretch; }
.process li::after { display:none; }
.process span { position:relative; background:#243c5e; border:1px solid #76a9fa60; }
.process h3 { margin:16px 0 10px; font-size:1.125rem; }
.process p { margin-bottom:0; font-size:.9375rem; }
.projects { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.project { display:flex; flex-direction:column; align-items:stretch; height:100%; gap:0; padding:0; overflow:hidden; background:var(--glass); box-shadow:var(--shadow); }
.project>.project-link { border:0; border-bottom:1px solid var(--line); border-radius:0; }
.project figcaption { padding:26px; display:flex; flex-direction:column; flex:1; }
.project h3 { font-size:1.4rem; }
.project-number { margin-bottom:16px; }
.project figcaption>.text-link { margin-top:auto; }
.project-zoom { background:#ffffff05; }
.brands { border:0; padding-block:54px; }
.brand-card { border-radius:16px; box-shadow:0 6px 22px #0002; }
.quote-section { grid-template-areas:"intro form" "support form"; align-items:start; gap:24px 48px; }
.quote-intro { grid-area:intro; }
.quote-support { grid-area:support; }
.quote-section form { grid-area:form; }
form { background:var(--glass); padding:36px; }
input,select,textarea { border-color:#ffffff30; border-radius:12px; background:#0c192e; }
.quote-photo { border-radius:20px; }
.contact-section { background:linear-gradient(135deg,#76a9fa12,#ffffff04); border-color:var(--line); }
.contact-links { gap:20px; }
.contact-links a { background:#ffffff06; border:1px solid var(--line); border-radius:18px; padding:24px; font-size:1rem; }
.portfolio-intro { text-align:left; padding-block:24px 32px; }
.portfolio-intro>.eyebrow { justify-content:start; margin:16px 0 12px; }
.portfolio-intro .muted { max-width:760px; margin:0 0 12px; font-size:1rem; }
.portfolio-intro h1 { font-size:clamp(2rem,3.4vw,3rem); font-weight:750; letter-spacing:-.035em; margin-bottom:16px; }
.portfolio-intro h1 br { display:none; }
.portfolio-intro h1 .accent::before { content:" "; }
.portfolio-cases { display:grid; gap:32px; }
.case-study { border:1px solid var(--line); padding:40px; border-radius:var(--radius); background:var(--glass); }
.case-heading { max-width:none; margin-bottom:20px; text-align:left; }
.case-heading h2 { font-size:clamp(1.65rem,2.6vw,2.2rem); margin-bottom:0; }
.case-details { margin-top:24px; gap:24px; }
.case-heading .eyebrow { justify-content:start; margin-bottom:12px; }
.case-deliverables li { border-radius:50px; background:#76a9fa0a; }
.error-page { background:radial-gradient(ellipse at 50% 35%,#376dc33b,transparent 60%),linear-gradient(135deg,#0b101d,#152b48); }
.error-page main { justify-items:center; text-align:center; }
.error-code { color:#8cc9ff; text-shadow:0 0 80px #76a9fa35; }
.error-page .actions { justify-content:center; }
/* Footer — Titan visual layer */
.site-footer { background:linear-gradient(180deg,transparent,#0d172860 8%,#0f1e35); }
.site-footer--minimal { background:#0d1728; }
.footer-glow { height:2px; background:linear-gradient(90deg,transparent,#4388eb 25%,#8cc9ff 50%,#4388eb 75%,transparent); opacity:.8; }
.footer-social-icon { border-color:#ffffff20; background:var(--glass); border-radius:14px; width:44px; height:44px; }
.footer-social-icon:hover { border-color:#8cc9ff; background:#76a9fa18; box-shadow:0 8px 24px #76a9fa1a; }
.footer-nav h3,.footer-services-col h3,.footer-contact h3 { color:#8cc9ff; font-size:.875rem; letter-spacing:.08em; }
.footer-nav a,.footer-services-col a,.footer-contact a { font-size:.9375rem; }
.footer-contact a { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); border-radius:14px; background:var(--glass); margin-bottom:0; transition:background .25s,border-color .25s,transform .25s; }
.footer-contact li { margin-bottom:10px; }
.footer-contact a:hover { border-color:#76a9fa60; background:#76a9fa12; transform:translateX(4px); }
.footer-location { font-size:.875rem; }
.footer-bottom { font-size:.875rem; }
.footer-top-link { font-size:.875rem; }
.back-to-top { border-radius:16px; background:var(--glass); border-color:#ffffff20; box-shadow:0 12px 32px #0004; }
.back-to-top:hover { background:linear-gradient(135deg,#3678df,#2456b2); border-color:#4486ed; box-shadow:0 12px 36px #377de340; }
@media (hover:hover) {
  .principles article,.project,.capabilities span { transition:transform .25s,border-color .25s,box-shadow .25s; }
  .principles article:hover,.project:hover,.capabilities span:hover { transform:translateY(-5px); border-color:#76a9fa70; box-shadow:0 15px 40px #0003; }
}
@media(min-width:761px) and (max-width:1100px) {
  nav { gap:4px; }
  nav>a:not(.button),.services-menu summary { padding:10px; }
  .projects { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project:last-child { grid-column:1/-1; max-width:580px; justify-self:center; }
  .approach-grid,.quote-section { gap:32px; }
  .contact-links { grid-template-columns:1fr 1.3fr 1fr; gap:12px; }
  .contact-links a { padding:18px; }
}
@media(max-width:760px) {
  .nav-row { min-height:76px; }
  .hero-content { padding-block:24px 16px; }
  .hero-emblem { width:44px; height:44px; margin-bottom:8px; }
  .hero h1 { font-size:clamp(2rem,7vw,2.8rem); }
  .hero-description { font-size:1rem; }
  .hero-image { width:calc(100% - 40px); height:80px; margin-bottom:8px; }
  .hero-bottom { gap:8px; flex-direction:column; align-items:center; padding-block:8px 16px; }
  .hero .actions { gap:14px; }
  .hero .actions>a { justify-content:center; }
  .capabilities .container { gap:10px; }
  .capabilities span { padding:18px 10px; }
  .section { padding-block:40px; }
  .section-heading { display:flex; margin-bottom:30px; }
  .service-tabs { gap:8px; padding-inline:0; }
  .service-tabs a { padding:10px 16px; font-size:.8rem; }
  .service { gap:0; padding:24px; }
  .service-photo { height:230px; }
  .approach-grid,.quote-section { gap:30px; }
  .principles article,.principles article:first-child { padding:22px; gap:16px; }
  .projects { grid-template-columns:1fr; }
  .project figcaption { padding:24px; }
  form { padding:24px; }
  .contact-links { grid-template-columns:1fr; gap:12px; }
  .contact-links a { padding:20px; }
  .case-study { padding:24px; }
  .portfolio-intro { padding-block:16px 24px; }
  .portfolio-intro h1 { font-size:clamp(2rem,7vw,2.6rem); }
}
@media(prefers-reduced-motion:no-preference) {
  .hero-orbits span { animation:orbit-entry 3s ease-out both; }
  @keyframes orbit-entry { from { opacity:0; translate:0 28px; } to { opacity:1; translate:0 0; } }
}
@media print {
  body { background:white; color:black; }
  .hero-orbits,.hero-emblem { display:none; }
  .process li { break-inside:avoid; }
}

/* Readable supporting text and direct access to the service catalogue. */
.eyebrow,.brands .eyebrow { font-size:.875rem; letter-spacing:.08em; }
.hero-services { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; margin-bottom:16px; }
.hero-services a { font-size:.9375rem; color:var(--cyan); padding:4px 0; text-decoration:underline; text-underline-offset:4px; }
.hero h1 { margin-bottom:16px; }
.hero-description { margin-bottom:8px; font-size:1rem; }
.service li,.service>p,.project figcaption>p,.principles p,.case-details p { font-size:.9375rem; }
.service ul { gap:10px 18px; }
label,label span,.form-help,#quote-status,.quote-note p,.project-zoom,
.project small,.project-number,.project-stats dt,.case-details span,.case-deliverables li,
.contact-links span,.footer-bottom,.footer-top p,.social-links,.hero-bottom { font-size:.875rem; }
.button,.text-link { font-size:.9375rem; }
.service-tabs a { font-size:.9375rem; }
.project-number { margin-bottom:10px; }
.project figcaption { padding:24px; }
.project-artwork { margin:0 24px 24px; border-top:1px solid var(--line); }
.project-artwork summary { cursor:pointer; padding:16px 0; font-size:.9375rem; color:var(--cyan); }
.project-artwork summary:focus-visible { outline:3px solid var(--cyan); outline-offset:4px; }
.project-artwork .project-link { border-radius:12px; }
.project-artwork img { width:100%; height:auto; aspect-ratio:3/2; object-fit:contain; }
.case-study .project-artwork { margin:20px 0; }
.case-study .project-artwork .project-link { max-width:800px; margin-inline:auto; }
@media(max-width:1100px) {
  .process { grid-template-columns:1fr; gap:12px; }
  .process::before { top:24px; bottom:24px; left:39px; width:2px; height:auto; }
  .process li { display:grid; grid-template-columns:38px 1fr; gap:0 16px; padding:16px 20px; }
  .process span { grid-row:span 2; }
  .process h3 { margin:0 0 6px; }
}
@media(max-width:760px) {
  .quote-section { grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "form" "support"; gap:20px; }
  .quote-intro h2 { font-size:1.8rem; margin-bottom:12px; }
  .quote-intro .eyebrow { margin-bottom:12px; }
  .quote-intro .muted { margin-bottom:0; font-size:.9375rem; }
  .service ul { grid-template-columns:1fr; }
  .hero-bottom span:last-child { text-align:center; }
  .portfolio-intro>.eyebrow { margin-top:12px; }
  .case-details { gap:16px; }
  .case-details h3 { margin:8px 0; }
  .case-study { padding:20px; }
}