branding

src/pages/About.jsx

@@ -67,6 +67,23 @@ const capabilities = [
   'Disaster recovery planning',
 ]
 
+const nameMeanings = [
+  {
+    title: 'Queue',
+    desc: 'Rooted in technology that works - proven, stable, and repeatable. We focus on environments that behave predictably in real production conditions.',
+    icon: Cpu,
+    border: 'border-t-primary-blue',
+    iconWrap: 'bg-sky-50 text-primary-blue',
+  },
+  {
+    title: 'North',
+    desc: 'A responsible direction forward - evaluating and adopting new technology carefully, with governance, security, and long-term ownership in mind.',
+    icon: Compass,
+    border: 'border-t-teal-500',
+    iconWrap: 'bg-teal-50 text-teal-600',
+  }
+]
+
 const About = () => {
   return (
     <>
@@ -142,14 +159,45 @@ const About = () => {
         </div>
       </section>
 
+      {/* Name */}
+      <section className="bg-white py-16 lg:py-24 border-b border-border">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid grid-cols-1 lg:grid-cols-[0.78fr_1.22fr] gap-10 lg:gap-14 items-start">
+            <div>
+              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">The name</p>
+              <h2 className="mt-3 text-4xl font-bold leading-tight text-primary-navy md:text-5xl">Queue North</h2>
+              <p className="mt-4 text-xl font-semibold text-soft-text">Where Stability Meets Direction</p>
+              <p className="mt-6 text-lg leading-relaxed text-soft-text">
+                The name reflects how we approach technology: dependable systems first, then a responsible path forward.
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
+              {nameMeanings.map((item) => {
+                const Icon = item.icon
+                return (
+                  <div key={item.title} className={`rounded-md border border-border border-t-[3px] bg-background p-7 shadow-sm ${item.border}`}>
+                    <span className={`flex h-12 w-12 items-center justify-center rounded-md ${item.iconWrap}`}>
+                      <Icon className="h-6 w-6" aria-hidden="true" />
+                    </span>
+                    <h3 className="mt-6 text-3xl font-bold text-primary-navy">{item.title}</h3>
+                    <p className="mt-4 text-base leading-relaxed text-soft-text">{item.desc}</p>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* Operating Model */}
       <section className="bg-background py-16 lg:py-24">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-10 lg:gap-14 items-start">
             <div>
-              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">How we work</p>
+              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">In practice</p>
               <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
-                We bridge strategy, deployment, and long-term ownership.
+                Stability first, then the right path forward.
               </h2>
               <p className="mt-5 text-lg leading-relaxed text-soft-text">
                 Many businesses are asked to pick platforms before anyone has mapped the operational reality. Queue North starts with the environment, the people using it, and the support model that has to carry it after launch.
@@ -176,42 +224,8 @@ const About = () => {
         </div>
       </section>
 
-      {/* Meaning */}
-      <section className="bg-white py-16 lg:py-24 border-y border-border">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14 items-start">
-            <div>
-              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">The name</p>
-              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
-                Queue is stability. North is responsible progress.
-              </h2>
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-              <div className="rounded-md border border-border border-t-[3px] border-t-primary-blue bg-background p-6">
-                <span className="flex h-12 w-12 items-center justify-center rounded-md bg-sky-50 text-primary-blue">
-                  <Cpu className="h-6 w-6" aria-hidden="true" />
-                </span>
-                <h3 className="mt-5 text-xl font-semibold text-primary-navy">Queue</h3>
-                <p className="mt-3 text-sm leading-relaxed text-soft-text">
-                  Proven, repeatable technology that behaves predictably when customers, staff, and operations depend on it.
-                </p>
-              </div>
-              <div className="rounded-md border border-border border-t-[3px] border-t-teal-500 bg-background p-6">
-                <span className="flex h-12 w-12 items-center justify-center rounded-md bg-teal-50 text-teal-600">
-                  <Compass className="h-6 w-6" aria-hidden="true" />
-                </span>
-                <h3 className="mt-5 text-xl font-semibold text-primary-navy">North</h3>
-                <p className="mt-3 text-sm leading-relaxed text-soft-text">
-                  A clear direction forward, with security, governance, supportability, and long-term ownership built into the plan.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
       {/* Capabilities */}
-      <section className="bg-background py-16 lg:py-24">
+      <section className="bg-white py-16 lg:py-24 border-y border-border">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-[0.75fr_1.25fr] gap-10 lg:gap-14 items-start">
             <div>

src/pages/Contact.jsx

@@ -329,6 +329,7 @@ const Contact = () => {
                     <option value="infrastructure-cabling">Infrastructure Cabling</option>
                     <option value="wireless-access">Wireless Access</option>
                     <option value="local-networking">Local Networking</option>
+                    <option value="other">Other</option>
                   </Select>
                 </div>