/*
Theme Name: SDB Engineering
Theme URI: https://sdbengineering.co.uk/
Author: SDB Engineering Services Ltd
Description: Custom website theme for SDB Engineering Services Ltd.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: sdb-engineering
*/

:root { --background:#071018; --foreground:#f4f7f9; --primary:#ffb800; --muted:#9fb0bc; --border:#213340; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--foreground); font-family:Arial,Helvetica,sans-serif; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }

.site-header { position:fixed; inset:0 0 auto; z-index:50; height:78px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:42px; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid #ffffff1f; background:#060f17e8; backdrop-filter:blur(16px); }
.brand { width:250px; height:54px; display:flex; align-items:center; text-decoration:none; }
.brand img { display:block; width:100%; height:auto; }
.footer-brand { width:280px; height:64px; margin-bottom:22px; }
.nav-links { justify-self:end; display:flex; align-items:center; gap:32px; }
.nav-links a { color:#cfdae0; text-decoration:none; font-size:.9rem; font-weight:700; }
.nav-links a:hover { color:#fff; }
.header-cta { border:0; background:var(--primary); color:#071018; padding:13px 18px; font-weight:900; text-transform:uppercase; font-size:.78rem; letter-spacing:.06em; clip-path:polygon(0 0,92% 0,100% 30%,100% 100%,8% 100%,0 70%); }
.menu-button { display:none; color:#fff; border:0; background:transparent; }

.hero { min-height:840px; height:100svh; position:relative; display:flex; align-items:center; overflow:hidden; background:#071018; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,#040c13fa 0%,#040c13e0 38%,#040c1357 72%,#040c1329 100%),linear-gradient(0deg,#040c13e6 0%,transparent 45%); }
.technical-grid { position:absolute; inset:0; opacity:.16; background-image:linear-gradient(#4db8eb59 1px,transparent 1px),linear-gradient(90deg,#4db8eb59 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(90deg,#000 0%,transparent 70%); }
.hero-content { position:relative; z-index:2; padding-top:72px; }
.eyebrow,.kicker { text-transform:uppercase; font-size:.78rem; line-height:1; letter-spacing:.18em; font-weight:900; color:var(--primary); }
.eyebrow { display:flex; align-items:center; gap:12px; }
.eyebrow span { width:42px; height:2px; background:var(--primary); }
.hero h1 { max-width:780px; margin:24px 0; font-size:clamp(3.7rem,7.2vw,7rem); line-height:.88; letter-spacing:-.065em; text-transform:uppercase; font-weight:900; }
.hero-copy { max-width:680px; margin:0; color:#c6d3da; font-size:clamp(1.05rem,1.6vw,1.3rem); line-height:1.65; }
.hero-actions { display:flex; gap:14px; margin-top:36px; }
.button { min-height:52px; padding:0 22px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:14px; color:inherit; font-weight:900; text-transform:uppercase; text-decoration:none; letter-spacing:.06em; font-size:.8rem; }
.button svg,.text-link svg,.service-card button svg,.capability-strip button svg { width:18px; height:18px; }
.button.primary { background:var(--primary); color:#071018; }
.button.primary:hover { background:#ffc933; }
.button.ghost { background:#0a19249e; border-color:#ffffff4d; color:#fff; backdrop-filter:blur(10px); }
.button.ghost:hover { border-color:#fff; }
.hero-proof { display:flex; margin-top:70px; }
.hero-proof div { min-width:170px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; padding-right:24px; margin-right:24px; border-right:1px solid #ffffff3d; }
.hero-proof div:last-child { border-right:0; }
.hero-proof strong { font-size:2.4rem; line-height:1; color:#fff; }
.hero-proof span { max-width:110px; color:#a9bac5; font-size:.73rem; line-height:1.35; text-transform:uppercase; letter-spacing:.06em; }
.scroll-cue { position:absolute; z-index:3; right:4vw; bottom:38px; display:flex; gap:8px; align-items:center; color:#c9d5db; text-decoration:none; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; transform:rotate(90deg); transform-origin:right center; }
.scroll-cue svg { width:17px; }

.section { padding:118px 0; }
.section-heading { max-width:760px; margin-bottom:54px; }
.section-heading h2,.about-copy h2,.contact-intro h2 { margin:16px 0 0; font-size:clamp(2.5rem,4.8vw,4.4rem); line-height:.98; letter-spacing:-.055em; text-transform:uppercase; }
.split-heading { max-width:none; display:grid; grid-template-columns:1.25fr .75fr; gap:80px; align-items:end; }
.split-heading p:last-child { margin:0 0 4px; color:#6e8290; font-size:1.08rem; line-height:1.7; }
.services-section { color:#09141c; background:#f4f7f8; }
.service-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #cdd8de; border-left:1px solid #cdd8de; }
.service-card { min-height:570px; display:flex; flex-direction:column; padding:36px; border-right:1px solid #cdd8de; border-bottom:1px solid #cdd8de; background:#f8fafb; transition:transform .2s ease,background .2s ease; }
.service-card:hover { background:#fff; transform:translateY(-4px); box-shadow:0 18px 45px #0a1f2c17; }
.service-top { display:flex; justify-content:space-between; color:#667c8a; font:700 .75rem/1 Arial; letter-spacing:.12em; }
.service-top svg { width:32px; height:32px; color:#148fc9; stroke-width:1.5; }
.service-code { color:#148fc9; font-size:.78rem; font-weight:900; letter-spacing:.12em; }
.service-card h3 { margin:34px 0 14px; max-width:460px; font-size:1.55rem; line-height:1.15; text-transform:uppercase; letter-spacing:-.02em; }
.service-card p { margin:0; color:#60737f; line-height:1.65; }
.service-card ul { display:grid; gap:10px; margin:26px 0 30px; padding:24px 0 0; border-top:1px solid #dce4e8; list-style:none; }
.service-card li { display:flex; align-items:flex-start; gap:10px; color:#405762; font-size:.91rem; line-height:1.45; }
.service-card li svg { width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:#1289bd; }
.service-card button { margin-top:auto; padding:20px 0 0; display:flex; align-items:center; gap:10px; border:0; background:transparent; color:#0b6f9e; font-size:.78rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }

.about-section { position:relative; overflow:hidden; background:#09141c; }
.about-section:before { content:""; position:absolute; inset:0; opacity:.16; background:radial-gradient(circle at 18% 50%,#137eb8 0,transparent 38%); }
.about-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.about-visual { position:relative; min-height:540px; display:grid; place-items:center; }
.diagram-ring { position:absolute; border:1px solid #68c9f447; border-radius:50%; }
.ring-one { width:470px; height:470px; }
.ring-two { width:330px; height:330px; border-style:dashed; }
.process-triangle { position:absolute; inset:0; z-index:1; width:100%; height:100%; overflow:visible; }
.process-triangle polygon { fill:none; stroke:#68c9f475; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.process-triangle circle { fill:var(--primary); stroke:#09141c; stroke-width:7; vector-effect:non-scaling-stroke; }
.diagram-core { position:relative; z-index:2; width:250px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 0 30px #128fc947); }
.diagram-core img { display:block; width:100%; height:auto; }
.diagram-label { position:absolute; z-index:3; color:#a8bfcc; font-size:.65rem; letter-spacing:.2em; text-shadow:0 2px 10px #071018; }
.label-one { top:14px; left:50%; transform:translateX(-50%); }.label-two { left:2%; bottom:122px; }.label-three { right:-4%; bottom:122px; }
.about-copy .lead { margin:30px 0; color:#a9bac5; font-size:1.1rem; line-height:1.75; }
.principles { display:grid; gap:16px; }
.principles div { display:flex; gap:14px; align-items:flex-start; color:#9eb0bb; line-height:1.55; }
.principles svg { flex:0 0 auto; width:20px; color:var(--primary); margin-top:2px; }
.principles strong { display:block; color:#fff; }
.text-link { margin-top:36px; padding:0 0 8px; display:inline-flex; gap:12px; align-items:center; border:0; border-bottom:2px solid var(--primary); background:transparent; color:#fff; font-size:.8rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }

.projects-section { background:#0d1c26; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.project-card { min-height:330px; padding:30px; display:flex; flex-direction:column; border:1px solid #213642; background:linear-gradient(145deg,#122631,#0b1820); }
.project-index { margin-left:auto; color:#486271; font-size:.75rem; letter-spacing:.15em; }
.project-sector { margin-top:auto; color:var(--primary); text-transform:uppercase; font-size:.72rem; font-weight:900; letter-spacing:.14em; }
.project-card h3 { margin:12px 0; font-size:1.55rem; text-transform:uppercase; }
.project-card p:last-child { margin:0; color:#9eb0ba; line-height:1.6; }
.capability-strip { margin-top:16px; padding:25px 28px; display:grid; grid-template-columns:auto 1fr auto; gap:22px; align-items:center; background:var(--primary); color:#071018; }
.capability-strip>svg { width:32px; height:32px; }
.capability-strip p { margin:0; line-height:1.5; }
.capability-strip button { display:flex; align-items:center; gap:10px; border:0; background:transparent; color:#071018; font-weight:900; text-transform:uppercase; font-size:.78rem; }

.contact-section { background:#f4f7f8; color:#09141c; }
.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; align-items:start; }
.contact-intro>p:not(.kicker) { color:#60737f; font-size:1.05rem; line-height:1.7; }
.contact-links { margin-top:26px; display:grid; gap:14px; }
.contact-link { display:inline-flex; align-items:center; gap:12px; color:#0c6e9c; font-size:1.1rem; font-weight:900; text-decoration:none; }
.contact-link svg { width:22px; height:22px; }
.contact-note { margin-top:50px; padding-top:22px; border-top:1px solid #ced8de; display:flex; gap:12px; align-items:flex-start; color:#60737f; line-height:1.5; }
.contact-note svg { flex:0 0 auto; color:#0c7ead; }
.request-form { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:36px; background:#fff; box-shadow:0 24px 60px #0c243219; }
.form-honey { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.field { display:grid; gap:8px; }.field.full { grid-column:1/-1; }
.field label { color:#293f4b; font-size:.76rem; text-transform:uppercase; font-weight:900; letter-spacing:.06em; }
.field input,.field select,.field textarea { width:100%; border:1px solid #c9d5dc; border-radius:0; background:#f8fafb; color:#0a151c; padding:14px; outline:0; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#168fc6; box-shadow:0 0 0 3px #168fc61f; }
.submit-button { grid-column:1/-1; justify-self:start; border:0; }.form-note { grid-column:1/-1; margin:-8px 0 0; color:#6e818c; font-size:.78rem; }

footer { padding:76px 0 24px; background:#050c12; color:#d6e0e5; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:70px; }
.footer-grid>div:first-child p { max-width:260px; color:#718896; line-height:1.6; }
.footer-grid h3 { margin:0 0 20px; color:#fff; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; }
.footer-grid a,.footer-grid>div>p { display:block; margin:0 0 12px; color:#8399a6; text-decoration:none; font-size:.88rem; line-height:1.6; }
.footer-grid a:hover { color:#fff; }
.footer-bottom { margin-top:62px; padding-top:22px; border-top:1px solid #172733; display:flex; justify-content:space-between; color:#5d7583; font-size:.75rem; }

@media(max-width:920px){
  .site-header{grid-template-columns:1fr auto;padding:0 24px}.header-cta{display:none}.menu-button{display:block}.nav-links{position:absolute;inset:78px 0 auto;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px 24px 24px;background:#071018;border-bottom:1px solid #243844}.nav-links.open{display:flex}.nav-links a{padding:16px 0;border-bottom:1px solid #1c303c}
  .split-heading,.about-grid,.contact-grid{grid-template-columns:1fr;gap:56px}.service-grid{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.project-card{min-height:260px}.about-visual{min-height:440px}.footer-grid{grid-template-columns:1.4fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2}
}
@media(max-width:620px){
  .shell{width:min(calc(100% - 32px),1180px)}.brand{width:220px;height:50px}.footer-brand{width:260px;height:60px}.hero{min-height:760px;height:auto;padding:130px 0 64px}.hero-image{object-position:62% center}.hero-shade{background:linear-gradient(90deg,#040c13f5,#040c13b3),linear-gradient(0deg,#040c13f2,transparent)}.hero h1{font-size:clamp(3.2rem,15vw,4.5rem)}.hero-actions{flex-direction:column;align-items:stretch}.hero-proof{margin-top:48px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-proof div{min-width:0;display:block;margin:0;padding:0 9px;text-align:center;border:0}.hero-proof strong{display:block;font-size:2rem}.hero-proof span{display:block;margin-top:6px;font-size:.59rem}.scroll-cue{display:none}
  .section{padding:82px 0}.split-heading{gap:24px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0;padding:28px}.about-visual{min-height:350px;transform:scale(.78);margin:-45px 0}.capability-strip{grid-template-columns:auto 1fr}.capability-strip button{grid-column:2}.request-form{grid-template-columns:1fr;padding:24px}.field,.field.full,.submit-button,.form-note{grid-column:1}.submit-button{width:100%}.footer-grid{grid-template-columns:1fr 1fr;gap:42px 28px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column;gap:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}