{"id":13911,"date":"2026-07-26T22:40:31","date_gmt":"2026-07-26T22:40:31","guid":{"rendered":"https:\/\/www.bespokecareers.com\/?page_id=13911"},"modified":"2026-07-29T03:11:33","modified_gmt":"2026-07-29T03:11:33","slug":"global-panel","status":"publish","type":"page","link":"https:\/\/www.bespokecareers.com\/global-panel\/","title":{"rendered":"Global Panel"},"content":{"rendered":"\n\n\t<!-- #gph | Global Panel Homepage | Bespoke Careers | Beaver Builder paste-in -->\n<style>\n@font-face {\n  font-family: 'F37 Ginger';\n  src: url('https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/themes\/af-custom-child\/assets\/fonts\/f37ginger-regular-webfont.ttf') format('truetype');\n  font-weight: 400;\n  font-display: swap;\n}\n@font-face {\n  font-family: 'F37 Ginger';\n  src: url('https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/themes\/af-custom-child\/assets\/fonts\/f37ginger-bold-webfont.ttf') format('truetype');\n  font-weight: 700;\n  font-display: swap;\n}\n#gph, #gph *, #gph *::before, #gph *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n#gph {\n  --lime: #97D422;\n  --ink: #0F0F0F;\n  --paper: #111110;\n  font-family: 'F37 Ginger', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  background: #fff;\n  color: #fff;\n  -webkit-font-smoothing: antialiased;\n}\n\/* =========================================================\n   HERO - full-bleed dark wrapper + inner max-width grid\n   ========================================================= *\/\n#gph .gph-hero-bg {\n  width: 100%;\n  background: linear-gradient(160deg, #3c3c3b 0%, #2a2a29 100%);\n  position: relative;\n}\n\/* subtle grid texture overlay *\/\n#gph .gph-hero-bg::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image:\n    linear-gradient(rgba(151,212,34,.045) 1px, transparent 1px),\n    linear-gradient(to right, rgba(151,212,34,.045) 1px, transparent 1px);\n  background-size: 64px 64px;\n  pointer-events: none;\n  z-index: 0;\n}\n\/* no fade - hard edge between hero and white grid *\/\n#gph .gph-hero {\n  max-width: 1440px;\n  margin: 0 auto;\n  padding: clamp(56px, 8vw, 120px) clamp(24px, 5vw, 80px) clamp(56px, 6vw, 100px);\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 32px 56px;\n  align-items: center;\n  position: relative;\n  z-index: 2;\n}\n#gph .gph-hero-content {\n  position: relative;\n  z-index: 1;\n}\n#gph .gph-globe-wrap {\n  position: relative;\n  z-index: 1;\n  width: 100%;\n  overflow: hidden;\n}\n#gph #gph-globe-canvas {\n  display: block;\n  width: 100%;\n  aspect-ratio: 1;\n  border-radius: 50%;           \/* clips canvas to a circle, looks clean *\/\n}\n\/* Title *\/\n#gph .gph-title {\n  font-size: clamp(2.8rem, 7vw, 7.5rem);\n  font-weight: 700;\n  line-height: .94;\n  letter-spacing: -.04em;\n  padding-bottom: 0.12em;\n  margin-bottom: 36px;\n}\n#gph .gph-title-line {\n  display: block;\n  color: #fff;\n  clip-path: inset(0 0 110% 0);\n  animation: gph-slide-v .85s cubic-bezier(.16,1,.3,1) forwards;\n  overflow: visible;\n}\n#gph .gph-title-line:nth-child(1) { animation-delay: .14s; }\n#gph .gph-title-line:nth-child(2) { animation-delay: .24s; }\n#gph .gph-title-line--grad {\n  background: linear-gradient(90deg, #97d422 0%, #ddff9b 100%);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n  padding-bottom: .06em;\n}\n@keyframes gph-slide-v {\n  to { clip-path: inset(0 0 -20% 0); }\n}\n\/* Hero footer - stats + desc stacked *\/\n#gph .gph-hero-foot {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  \/* border-top removed *\/\n  padding-top: 28px;\n  opacity: 0;\n  animation: gph-fade .9s ease .55s forwards;\n}\n@keyframes gph-fade { to { opacity: 1; } }\n#gph .gph-stats {\n  display: flex;\n  gap: 40px;\n  flex-wrap: wrap;\n}\n#gph .gph-stat-num {\n  display: block;\n  font-size: clamp(2rem, 3vw, 2.8rem);\n  font-weight: 700;\n  line-height: 1;\n  letter-spacing: -.03em;\n  color: #fff;\n}\n#gph .gph-stat-lbl {\n  display: block;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.8);\n  margin-top: 6px;\n}\n#gph .gph-hero-desc {\n  font-size: clamp(.95rem, 1.3vw, 1.1rem);\n  line-height: 1.7;\n  color: rgba(255,255,255,.85);\n  max-width: 48ch;\n}\n\/* =========================================================\n   MARQUEE\n   ========================================================= *\/\n#gph .gph-ticker {\n  background: #0a0a09;\n  overflow: hidden;\n  padding: 20px 0;\n  border-top: 1px solid rgba(255,255,255,.06);\n  border-bottom: 1px solid rgba(255,255,255,.06);\n  user-select: none;\n}\n#gph .gph-ticker-track {\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  animation: gph-march 36s linear infinite;\n}\n#gph .gph-ticker-track:hover { animation-play-state: paused; }\n@keyframes gph-march { to { transform: translateX(-50%); } }\n#gph .gph-ticker-item {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: .15em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.72);\n  padding: 0 28px;\n}\n#gph .gph-ticker-dot {\n  width: 5px; height: 5px;\n  border-radius: 50%;\n  background: var(--lime);\n  flex-shrink: 0;\n  margin: 0 0 0 28px;\n}\n\/* =========================================================\n   GRID - single column\n   ========================================================= *\/\n#gph .gph-grid {\n  position: relative; \/* SVG and snake line anchor to this *\/\n  max-width: 1440px;\n  margin: 0 auto;\n  padding: clamp(32px, 4vw, 64px) clamp(16px, 3vw, 40px) 0;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  position: relative;   \/* anchor for the absolute SVG *\/\n  overflow: visible;\n}\n\/* \u2500\u2500 snake scroll line \u2500\u2500 *\/\n#gph .gph-b-svg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 10;\n  overflow: visible;\n  will-change: contents; \/* hint GPU layer *\/\n}\n#gph .gph-b-path {\n  fill: none;\n  stroke-linecap: round;\n  stroke-linejoin: round;\n}\n\/* Hide snake on mobile - too glitchy with the scale animation *\/\n@media (max-width: 700px) {\n  #gph .gph-b-svg { display: none; }\n}\n#gph .gph-row {\n  display: grid;\n  grid-template-columns: 1fr;\n  will-change: transform, opacity;\n  transform-origin: center center;\n  position: relative;\n  z-index: 1;         \/* rows sit above the svg line *\/\n}\n#gph .gph-row.gph-row--focus .gph-num-bg {\n  color: rgba(255,255,255,.22) !important;\n}\n\/* =========================================================\n   CARD\n   ========================================================= *\/\n#gph .gph-card {\n  display: block;\n  text-decoration: none;\n  position: relative;\n  overflow: hidden;\n  background: #111110;\n  color: #fff;\n  aspect-ratio: 16 \/ 6.5;\n  will-change: transform, opacity;\n}\n#gph .gph-photo {\n  position: absolute;\n  inset: 0;\n  width: 100%; height: 100%;\n  object-fit: cover;\n  transition: transform 1s cubic-bezier(.16,1,.3,1);\n  will-change: transform;\n}\n#gph .gph-card:hover .gph-photo { transform: scale(1.07); }\n#gph .gph-overlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    to top,\n    rgba(8,8,6,.96) 0%,\n    rgba(8,8,6,.52) 38%,\n    rgba(8,8,6,.14) 66%,\n    transparent 100%\n  );\n}\n#gph .gph-card-body {\n  position: absolute;\n  inset: 0;\n  padding: clamp(20px, 2.5vw, 40px);\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  gap: 10px;\n}\n#gph .gph-ep {\n  font-size: 10px;\n  font-weight: 700;\n  letter-spacing: .18em;\n  text-transform: uppercase;\n  color: var(--lime);\n}\n#gph .gph-card-title {\n  font-size: clamp(1.4rem, 3.2vw, 2.8rem);\n  font-weight: 700;\n  line-height: 1.1;\n  letter-spacing: -.03em;\n  max-width: 24ch;\n  color: #fff;\n}\n#gph .gph-cta {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 4px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: .12em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.72);\n  transition: color .25s ease;\n}\n#gph .gph-card:hover .gph-cta { color: var(--lime); }\n#gph .gph-cta svg {\n  width: 13px; height: 13px;\n  flex-shrink: 0;\n  transition: transform .35s cubic-bezier(.16,1,.3,1);\n}\n#gph .gph-card:hover .gph-cta svg { transform: translate(4px,-4px); }\n#gph .gph-num-bg {\n  position: absolute;\n  top: 14px; right: 24px;\n  font-size: clamp(5rem, 10vw, 11rem);\n  font-weight: 700;\n  letter-spacing: -.05em;\n  line-height: 1;\n  color: rgba(255,255,255,.1);\n  pointer-events: none;\n  transition: color .4s ease;\n  user-select: none;\n}\n#gph .gph-card:hover .gph-num-bg { color: rgba(151,212,34,.24); }\n\/* =========================================================\n   CTA BUTTON\n   ========================================================= *\/\n#gph .gph-ask-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  width: 100%;\n  padding: 30px 24px;\n  margin-top: 12px;\n  background: linear-gradient(90deg, #97d422 0%, #ddff9b 100%);\n  color: #0F0F0F;\n  font-family: inherit;\n  font-size: clamp(.95rem, 1.3vw, 1.1rem);\n  font-weight: 700;\n  letter-spacing: .14em;\n  text-transform: uppercase;\n  text-decoration: none;\n  border: none;\n  cursor: pointer;\n  transition: filter .2s ease, transform .15s ease;\n}\n#gph .gph-ask-btn:hover {\n  filter: brightness(1.06);\n  transform: translateY(-1px);\n}\n#gph .gph-ask-btn svg {\n  width: 15px; height: 15px;\n  flex-shrink: 0;\n  transition: transform .3s cubic-bezier(.16,1,.3,1);\n}\n#gph .gph-ask-btn:hover svg { transform: translate(4px,-4px); }\n\/* bottom spacer after the button *\/\n#gph .gph-bottom-spacer {\n  height: clamp(60px, 8vw, 120px);\n}\n\/* =========================================================\n   RESPONSIVE\n   ========================================================= *\/\n@media (max-width: 900px) {\n  #gph .gph-hero {\n    grid-template-columns: 1fr;\n    gap: 0;\n  }\n  #gph .gph-globe-wrap { display: none; }\n  #gph .gph-card { aspect-ratio: 16 \/ 8; }\n}\n@media (max-width: 600px) {\n  #gph .gph-stats { gap: 24px; }\n}\n\/* =========================================================\n   BUTTON LAYERING + GLOW - button sits above the SVG line\n   ========================================================= *\/\n#gph .gph-ask-btn {\n  position: relative;\n  z-index: 15;          \/* above svg (z-index 10) so line passes behind *\/\n}\n#gph .gph-ask-btn--electric {\n  box-shadow:\n    0 0 50px  rgba(151,212,34,0.80),\n    0 0 120px rgba(151,212,34,0.45),\n    0 0 220px rgba(151,212,34,0.20);\n  transition: box-shadow 0.5s ease;\n}\n<\/style>\n  <!-- =================== HERO =================== -->\n    <!-- Left: text -->\n      <h1>\n        Architecture &amp; Design\n        Global Panel\n      <\/h1>\n    <!-- Right: globe -->\n      <canvas id=\"gph-globe-canvas\"><\/canvas>\n  <!-- \/gph-hero-bg -->\n  <!-- =================== GRID =================== -->\n    <!-- b-letter scroll line (built by JS) -->\n    <!-- Q09 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/who-shaped-your-career\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/Copy-of-GLOBAL-PANEL.jpg\" alt=\"\" loading=\"lazy\"\/>\n        09\n          Question 09\n          Who shaped your career?\n          Read the panel \n      <\/a>\n    <!-- Q08 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/what-was-your-first-project\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/imgi_7_GLOBAL-PANEL-3.jpeg\" alt=\"\" loading=\"lazy\"\/>\n        08\n          Question 08\n          What was your first project?\n          Read the panel \n      <\/a>\n    <!-- Q07 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/when-did-you-fail-and-what-did-you-learn\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/GLOBAL-PANEL-1.webp\" alt=\"\" loading=\"lazy\"\/>\n        07\n          Question 07\n          When did you fail? What did you learn?\n          Read the panel \n      <\/a>\n    <!-- Q06 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/when-did-you-fail-and-what-did-you-learn-copy\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/imgi_2_Untitled-design-2.jpeg\" alt=\"\" loading=\"lazy\"\/>\n        06\n          Question 06\n          Should the function of architecture be protected?\n          Read the panel \n      <\/a>\n    <!-- Q05 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/what-advice-would-you-tell-your-younger-self\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/GLOBAL-PANEL-4.jpg\" alt=\"\" loading=\"lazy\"\/>\n        05\n          Question 05\n          What advice would you tell your younger self?\n          Read the panel \n      <\/a>\n    <!-- Q04 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/would-you-encourage-your-child-to-pursue-a-career-in-architecture-and-design\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/GLOBAL-PANEL-5.jpg\" alt=\"\" loading=\"lazy\"\/>\n        04\n          Question 04\n          Would you encourage your child to pursue architecture?\n          Read the panel \n      <\/a>\n    <!-- Q03 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/how-do-you-lead-others-with-confidence\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/GLOBAL-PANEL-6.jpg\" alt=\"\" loading=\"lazy\"\/>\n        03\n          Question 03\n          How do you lead with confidence when you&#8217;re still learning?\n          Read the panel \n      <\/a>\n    <!-- Q02 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/hybrid-work\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/GLOBAL-PANEL-7.jpg\" alt=\"\" loading=\"lazy\"\/>\n        02\n          Question 02\n          Is hybrid work holding back early-career architects?\n          Read the panel \n      <\/a>\n    <!-- Q01 -->\n      <a href=\"https:\/\/www.bespokecareers.com\/global-panel\/what-do-global-design-leaders-think-about-ai-and-the-future-of-the-profession\/\">\n        <img decoding=\"async\" src=\"https:\/\/cdn-01.cms-eu-v2i.applyflow.com\/bespoke\/wp-content\/uploads\/2026\/07\/imgi_2_Untitled-design-2-1.jpeg\" alt=\"\" loading=\"lazy\"\/>\n        01\n          Question 01\n          What do global design leaders think about AI?\n          Read the panel \n      <\/a>\n    <!-- CTA BUTTON -->\n    <a href=\"https:\/\/forms.bespokecareers.com\/what-should-we-ask\">\n      What should we ask next?\n    <\/a>\n  <!-- \/gph-grid -->\n<!-- \/gph -->\n\n","protected":false},"excerpt":{"rendered":"<p>Architecture &amp; Design Global Panel 09 Question 09 Who shaped your career? Read the panel 08 Question 08 What was your first project? Read the panel 07 Question 07 When did you fail? What did you learn? Read the panel 06 Question 06 Should the function of architecture be protected? Read the panel 05 Question&hellip;<\/p>\n","protected":false},"author":20,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","footnotes":""},"class_list":["post-13911","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/13911","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/comments?post=13911"}],"version-history":[{"count":30,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/13911\/revisions"}],"predecessor-version":[{"id":14194,"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/pages\/13911\/revisions\/14194"}],"wp:attachment":[{"href":"https:\/\/www.bespokecareers.com\/af-api\/wp\/v2\/media?parent=13911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}