:root {
 --bg: #ffffff;
 --text: #0a0a0a;
 --muted: #f2f2f2;
 --muted2: #e9e9e9;
 --border: #e5e5e5;
 --soft: #6e6e6e;
 --card: #f3f3f3;
 --panel: #ffffff;
 --shadow: rgba(0,0,0,.08);
 --green: #21c46a;
}
html.dark {
 --bg: #0d0d0e;
 --text: #f4f4f4;
 --muted: #171718;
 --muted2: #252526;
 --border: #2b2b2d;
 --soft: #a3a3a8;
 --card: #171718;
 --panel: #111112;
 --shadow: rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { overflow-x: hidden; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: Arial, Helvetica, sans-serif;
 transition: background .25s ease, color .25s ease;
}
a { color: inherit; }
.utility-controls {
 position: fixed;
 left: 22px;
 top: 118px;
 z-index: 100;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 10px;
}
.utility-btn {
 min-width: 112px;
 border: 1px solid var(--border);
 background: color-mix(in srgb, var(--bg) 90%, transparent);
 color: var(--text);
 backdrop-filter: blur(12px);
 border-radius: 999px;
 padding: 11px 16px;
 font: inherit;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 text-decoration: none;
 text-align: center;
 transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.utility-btn:hover {
 transform: translateY(-2px);
 background: var(--muted);
}
.site-header {
 max-width: 1380px;
 margin: 0 auto;
 padding: 34px 34px 34px 190px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.logo { font-size: 20px; font-weight: 650; text-decoration: none; }
nav { display: flex; gap: 28px; }
nav a { text-decoration: none; font-size: 15px; opacity: .82; }
main { max-width: 1380px; margin: 0 auto; padding: 0 34px 120px; }
.eyebrow {
 font-size: 14px;
 letter-spacing: .02em;
 margin: 0 0 26px;
 color: var(--soft);
}
.hero { padding: 120px 0 95px; max-width: 1080px; }
.hero h1, .case-hero h1, .contact-hero h1 {
 margin: 0;
 font-weight: 500;
 letter-spacing: -.055em;
}
.hero h1 { font-size: clamp(48px, 6vw, 88px); line-height: 1.06; padding-bottom: .16em; overflow: visible; }
.hero-copy, .case-summary, .contact-intro {
 max-width: 780px;
 margin-top: 35px;
 font-size: 22px;
 line-height: 1.55;
 color: var(--soft);
}
.projects-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0,1fr));
 gap: 24px;
}
.project-card {
 background: var(--card);
 border-radius: 30px;
 min-height: 560px;
 padding: 26px;
 text-decoration: none;
 display: flex;
 flex-direction: column;
 overflow: hidden;
 transition: transform .26s ease, box-shadow .26s ease;
}
.project-card:hover { transform: translateY(-7px); box-shadow: 0 20px 55px var(--shadow); }
.project-preview {
 height: 285px;
 border-radius: 22px;
 overflow: hidden;
 background: var(--muted2);
 margin-bottom: 36px;
}
.project-preview img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.project-card:hover .project-preview img { transform: scale(1.025); }
.project-card h2 {
 font-size: 38px;
 line-height: 1.06;
 letter-spacing: -.035em;
 font-weight: 500;
 margin: 0 14px 18px;
}
.project-card p {
 font-size: 19px;
 line-height: 1.55;
 margin: 0 14px;
 color: var(--soft);
}
.project-type { margin: auto 14px 4px; padding-top: 35px; font-size: 14px; color: var(--soft); }
.about { padding: 160px 0 50px; max-width: 860px; }
.about h2, .section-title {
 font-size: clamp(42px, 5vw, 62px);
 line-height: 1.04;
 letter-spacing: -.045em;
 font-weight: 500;
 margin: 0 0 28px;
}
.about p:last-child { font-size: 21px; line-height: 1.65; color: var(--soft); }

.case-hero { padding: 110px 0 75px; max-width: 1050px; }
.case-hero h1, .contact-hero h1 { font-size: clamp(58px, 7vw, 100px); line-height: .95; }
.meta {
 display: flex;
 flex-wrap: wrap;
 gap: 13px 26px;
 padding-top: 28px;
 font-size: 14px;
 color: var(--soft);
}
.case-section { padding: 88px 0; border-top: 1px solid var(--border); }
.case-section h2 {
 font-size: clamp(38px, 4vw, 52px);
 line-height: 1.03;
 letter-spacing: -.04em;
 font-weight: 500;
 margin: 0 0 28px;
}
.case-section h3 {
 font-size: 27px;
 letter-spacing: -.025em;
 font-weight: 500;
 margin: 45px 0 15px;
}
.case-section p, .case-section li {
 max-width: 900px;
 font-size: 20px;
 line-height: 1.65;
 color: var(--soft);
}
.case-section strong { color: var(--text); }
.media-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 42px; }
.media-card { background: var(--card); border-radius: 28px; overflow: hidden; }
.media-card img { width: 100%; display: block; }
.media-caption { padding: 20px 22px 24px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.preview-image { width: 100%; border-radius: 28px; margin-top: 38px; display: block; }
.embed-shell {
 margin-top: 38px;
 background: var(--muted);
 border: 1px solid var(--border);
 border-radius: 30px;
 overflow: hidden;
 padding: 16px;
}
.embed-shell iframe { width: 100%; height: 820px; border: 0; border-radius: 20px; background: #fff; }
.site-embed iframe { height: 720px; }
.open-link {
 display: inline-flex;
 margin-top: 22px;
 text-decoration: none;
 border-bottom: 1px solid currentColor;
 padding-bottom: 4px;
}
.awaiting {
 margin-top: 34px;
 min-height: 240px;
 border-radius: 28px;
 background: var(--card);
 display: grid;
 place-items: center;
 text-align: center;
 padding: 35px;
 font-size: 18px;
 color: var(--soft);
}
.project-list { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 40px; }
.work-block {
 background: var(--card);
 border-radius: 30px;
 padding: 30px;
}
.work-block .work-top { display:grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items:center; }
.work-block img { width: 100%; border-radius: 22px; display:block; }
.work-block h3 { margin-top: 0; font-size: 34px; }
.work-block p { font-size: 18px; }
.progress-wrap { margin: 24px 0 6px; }
.progress-meta { display:flex; justify-content:space-between; font-size:14px; color:var(--soft); margin-bottom:9px; }
.progress-track { height: 12px; background: var(--muted2); border-radius:999px; overflow:hidden; }
.progress-fill { height: 100%; width: 78%; background: var(--green); border-radius:999px; }
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px; }
.mini-card { background:var(--card); border-radius:26px; overflow:hidden; }
.mini-card img { width:100%; aspect-ratio: 4/3; object-fit:cover; display:block; }
.mini-card div { padding:20px; }
.mini-card h4 { font-size:21px; margin:0 0 8px; }
.mini-card p { font-size:15px; margin:0; color:var(--soft); line-height:1.5; }

.lock-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:40px; }
.lock-card {
 position:relative; min-height:460px; border-radius:30px; overflow:hidden;
 background:#141416; color:#fff; padding:42px;
}
.lock-card h3 { font-size:42px; margin:0 0 10px; }
.lock-card p { color:#aaa; }
.lock-overlay {
 position:absolute; inset:0; display:grid; place-items:center;
 background:rgba(8,8,10,.22); backdrop-filter:blur(0px);
 transition:background .3s ease, backdrop-filter .3s ease;
}
.lock-card:hover .lock-overlay { background:rgba(8,8,10,.58); backdrop-filter:blur(5px); }
.lock-icon {
 width:84px; height:84px; border-radius:50%; background:#fff; color:#111;
 display:grid; place-items:center; font-size:34px; transform:scale(.92);
 transition:transform .3s ease;
}
.lock-card:hover .lock-icon { transform:scale(1); }
.lock-status { position:absolute; left:42px; bottom:38px; font-size:14px; color:#cfcfd2; }

.contact-hero { padding: 120px 0 75px; max-width: 1000px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding-bottom:80px; }
.contact-card {
 min-height:300px; border-radius:30px; background:var(--card); padding:42px;
 display:flex; flex-direction:column; justify-content:flex-end; text-decoration:none;
 transition:transform .25s ease, box-shadow .25s ease;
}
a.contact-card:hover { transform:translateY(-6px); box-shadow:0 18px 50px var(--shadow); }
.contact-label { margin-bottom:auto; color:var(--soft); font-size:14px; }
.contact-card h2 { font-size:32px; line-height:1.1; font-weight:500; letter-spacing:-.03em; margin:40px 0 10px; }
.contact-card p { margin:0; color:var(--soft); line-height:1.5; }

@media (max-width: 850px) {
 .utility-controls { position: static; padding: 18px 20px 0; flex-direction: row; }
 .site-header { padding: 22px 20px; }
 main { padding:0 20px 90px; }
 nav { gap:16px; }
 .projects-grid, .media-grid, .contact-grid, .lock-grid { grid-template-columns:1fr; }
 .project-card { min-height:500px; }
 .project-preview { height:240px; }
 .hero { padding:75px 0 65px; }
 .case-hero, .contact-hero { padding:70px 0 55px; }
 .work-block .work-top { grid-template-columns:1fr; }
 .mini-grid { grid-template-columns:1fr; }
 .embed-shell iframe { height:650px; }
}

.brand-icon { width: 130px; height: 70px; background: #fff; border-radius: 16px; padding: 12px 16px; display:flex; align-items:center; justify-content:center; margin-bottom: 24px; }
.brand-icon img { max-width: 100%; max-height: 100%; object-fit: contain; }

.download-button {
 display: inline-flex;
 margin-top: 24px;
 padding: 13px 18px;
 border-radius: 999px;
 background: var(--text);
 color: var(--bg);
 text-decoration: none;
 font-weight: 650;
}
.embed-note {
 max-width: 900px;
 margin-top: 18px;
 font-size: 15px !important;
 line-height: 1.55 !important;
 color: var(--soft) !important;
}
.validation-grid {
 display: grid;
 grid-template-columns: repeat(2,minmax(0,1fr));
 gap: 18px;
 margin-top: 34px;
}
.validation-card {
 background: var(--card);
 border-radius: 24px;
 padding: 28px;
 display:flex;
 flex-direction:column;
 gap:12px;
}
.validation-card strong {
 font-size: 19px;
 line-height: 1.4;
}
.validation-card span {
 color: var(--soft);
 font-size: 15px;
 line-height: 1.5;
}
.powerbi-live iframe {
 min-height: 760px;
}
.prototype-responsive iframe {
 min-height: 780px;
}
@media (max-width: 850px) {
 .validation-grid { grid-template-columns: 1fr; }
 .prototype-responsive { padding: 8px; }
 .prototype-responsive iframe {
 height: 80vh;
 min-height: 620px;
 }
 .powerbi-live iframe {
 height: 70vh;
 min-height: 560px;
 }
}


/* Bending Spoons inspired homepage treatment */
body.home-page {
 position: relative;
 isolation: isolate;
}
body.home-page::before {
 content: "";
 position: absolute;
 z-index: -1;
 inset: -24px 0 auto 0;
 height: 790px;
 pointer-events: none;
 background:
 radial-gradient(circle at 90% 3%, rgba(181, 194, 255, .58) 0%, rgba(181, 194, 255, 0) 42%),
 radial-gradient(circle at 66% 12%, rgba(227, 202, 255, .55) 0%, rgba(227, 202, 255, 0) 46%),
 radial-gradient(circle at 25% 0%, rgba(252, 245, 255, .96) 0%, rgba(252, 245, 255, 0) 56%),
 linear-gradient(120deg, #fff 4%, #fbf7ff 47%, #eef1ff 100%);
}
html.dark body.home-page::before {
 background:
 radial-gradient(circle at 88% 5%, rgba(86, 96, 179, .34) 0%, rgba(86, 96, 179, 0) 42%),
 radial-gradient(circle at 64% 12%, rgba(108, 68, 147, .28) 0%, rgba(108, 68, 147, 0) 48%),
 linear-gradient(120deg, #0d0d0e 6%, #12101a 55%, #101425 100%);
}

.animated-ombre-title {
 display: inline-block;
 padding-bottom: .08em;
 overflow: visible;
 background-image: linear-gradient(
 100deg,
 #080808 0%,
 #080808 28%,
 #282155 43%,
 #6356d9 57%,
 #7585ef 70%,
 #080808 84%,
 #080808 100%
 );
 background-size: 260% 100%;
 background-position: 0% 50%;
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
 color: transparent;
 animation: dinaOmbreSweep 7s ease-in-out infinite;
}
html.dark .animated-ombre-title {
 background-image: linear-gradient(
 100deg,
 #f4f4f4 0%,
 #f4f4f4 28%,
 #c9c4ff 44%,
 #8d83ff 58%,
 #a9b4ff 70%,
 #f4f4f4 84%,
 #f4f4f4 100%
 );
 background-size: 260% 100%;
}

@keyframes dinaOmbreSweep {
 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
 .animated-ombre-title { animation: none; background-position: 52% 50%; }
}

@media (max-width: 850px) {
 body.home-page::before { height: 620px; }
}


/* Sticky Apple inspired navigation */
.site-header {
 position: sticky;
 top: 14px;
 z-index: 1000;
 width: min(1380px, calc(100% - 28px));
 max-width: none;
 margin: 14px auto 0;
 padding: 12px 14px 12px 18px;
 min-height: 72px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
 border-radius: 30px;
 background: color-mix(in srgb, var(--bg) 82%, transparent);
 box-shadow: 0 10px 35px color-mix(in srgb, var(--shadow) 55%, transparent);
 -webkit-backdrop-filter: blur(22px) saturate(145%);
 backdrop-filter: blur(22px) saturate(145%);
 transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, color .28s ease;
}
html.dark .site-header {
 background: rgba(16,16,17,.86);
 border-color: rgba(255,255,255,.12);
 box-shadow: 0 12px 42px rgba(0,0,0,.30);
}
.header-left,.header-right { display:flex; align-items:center; }
.header-left { gap:12px; min-width:0; }
.header-right { gap:12px; }
.logo { font-size:20px; font-weight:700; letter-spacing:-.025em; white-space:nowrap; }
.site-header nav { display:flex; align-items:center; gap:8px; }
.site-header nav a {
 display:inline-flex; align-items:center; justify-content:center;
 min-height:44px; padding:0 15px; border-radius:999px;
 font-size:15px; font-weight:500; opacity:.9;
 transition:background .2s ease,color .2s ease,opacity .2s ease,transform .2s ease;
}
.site-header nav a:hover {
 background:color-mix(in srgb,var(--text) 7%,transparent);
 opacity:1; transform:translateY(-1px);
}
.header-control {
 width:44px; height:44px; flex:0 0 44px;
 display:grid; place-items:center;
 border:1px solid color-mix(in srgb,var(--text) 25%,transparent);
 border-radius:999px; background:transparent; color:var(--text);
 cursor:pointer; padding:0;
 transition:background .22s ease,color .22s ease,border-color .22s ease,transform .2s ease;
}
.header-control:hover { transform:translateY(-1px); }
.back-arrow {
 width:13px; height:13px;
 border-left:2px solid currentColor; border-bottom:2px solid currentColor;
 transform:rotate(45deg) translate(1px,-1px);
}
.theme-control { position:relative; overflow:hidden; }
.crescent-icon { position:relative; width:18px; height:18px; display:block; }
.crescent-icon::before,.crescent-icon::after {
 content:''; position:absolute; border-radius:50%;
 transition:background .22s ease,transform .28s ease;
}
.crescent-icon::before { inset:1px; background:var(--text); }
.crescent-icon::after {
 width:14px; height:14px; top:0; left:7px;
 background:color-mix(in srgb,var(--bg) 82%,transparent);
}
html.dark .crescent-icon::after { background:rgba(16,16,17,.86); }
html:not(.dark) .theme-control:hover { background:#111; border-color:#111; }
html:not(.dark) .theme-control:hover .crescent-icon::before { background:#fff; }
html:not(.dark) .theme-control:hover .crescent-icon::after { background:#111; transform:translateX(-1px); }
html.dark .theme-control:hover { background:#fff; border-color:#fff; }
html.dark .theme-control:hover .crescent-icon::before { background:#111; }
html.dark .theme-control:hover .crescent-icon::after { background:#fff; transform:translateX(-1px); }
.back-control:hover { background:var(--text); color:var(--bg); border-color:var(--text); }
.utility-controls { display:none !important; }
.hero { padding-top:92px; }
.case-hero,.contact-hero { padding-top:86px; }
@media (max-width:850px) {
 .site-header { top:8px; width:calc(100% - 16px); margin-top:8px; min-height:62px; padding:8px 10px; border-radius:24px; gap:8px; }
 .header-left { gap:8px; } .header-right { gap:6px; }
 .logo { font-size:17px; }
 .header-control { width:40px; height:40px; flex-basis:40px; }
 .site-header nav { gap:2px; }
 .site-header nav a { min-height:40px; padding:0 9px; font-size:13px; }
 .hero { padding-top:64px; }
 .case-hero,.contact-hero { padding-top:58px; }
}
@media (max-width:560px) {
 .site-header { padding-left:8px; }
 .logo { font-size:16px; }
 .site-header nav a { padding:0 7px; font-size:12.5px; }
 .header-control { width:36px; height:36px; flex-basis:36px; }
 .header-left { gap:6px; } .header-right { gap:2px; }
}


/* Gentle page load reveal */
.page-reveal {
 opacity: 0;
 transform: translateY(14px);
 filter: blur(2px);
 transition:
 opacity .72s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
 transform .72s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms),
 filter .72s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
 will-change: opacity, transform, filter;
}

.page-reveal.is-visible {
 opacity: 1;
 transform: translateY(0);
 filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
 .page-reveal,
 .page-reveal.is-visible {
 opacity: 1;
 transform: none;
 filter: none;
 transition: none;
 }
}


/* Case study refinements */

.meta-cards {
 display: grid !important;
 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
 gap: 10px !important;
 margin-top: 28px;
}

.meta-cards span {
 display: flex !important;
 flex-direction: column;
 gap: 5px;
 padding: 14px 16px;
 border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
 border-radius: 16px;
 background: color-mix(in srgb, var(--bg) 80%, transparent);
}

.meta-cards small {
 font-size: 11px;
 text-transform: uppercase;
 letter-spacing: .09em;
 opacity: .55;
}

.meta-cards strong {
 font-size: 14px;
 line-height: 1.3;
 font-weight: 600;
}

.section-kicker,
.proof-label {
 display: inline-flex;
 align-items: center;
 width: fit-content;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: color-mix(in srgb, #00a650 12%, transparent);
 color: #08783b;
 font-size: 11px;
 font-weight: 750;
 letter-spacing: .07em;
 text-transform: uppercase;
}

html.dark .section-kicker,
html.dark .proof-label {
 color: #83e6ad;
}

.conclusion-section {
 padding-bottom: 110px;
}

.risk-callout {
 margin-top: 26px;
 padding: clamp(22px, 4vw, 38px);
 border-radius: 24px;
 border: 1px solid color-mix(in srgb, #00a650 34%, transparent);
 background:
 radial-gradient(circle at 90% 10%, rgba(0,166,80,.13), transparent 36%),
 color-mix(in srgb, var(--bg) 94%, var(--text) 6%);
}

.risk-tag {
 display: inline-flex;
 margin-bottom: 14px;
 padding: 7px 10px;
 border-radius: 999px;
 background: #00a650;
 color: #fff;
 font-size: 11px;
 font-weight: 800;
 text-transform: uppercase;
 letter-spacing: .08em;
}

.risk-callout > strong {
 display: block;
 max-width: 900px;
 font-size: clamp(24px, 3.2vw, 42px);
 line-height: 1.05;
 letter-spacing: -.03em;
}

.risk-callout p {
 max-width: 900px;
 margin-top: 16px;
 opacity: .74;
}

.metric-grid {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 10px;
 margin-top: 18px;
}

.metric-grid > div {
 min-height: 118px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 18px;
 border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
 border-radius: 18px;
 background: color-mix(in srgb, var(--bg) 89%, var(--text) 3%);
}

.metric-grid strong {
 font-size: 15px;
 line-height: 1.2;
}

.metric-grid span {
 font-size: 12px;
 opacity: .56;
}

.closing-note {
 max-width: 900px;
 margin-top: 20px;
 opacity: .7;
}

.proof-card {
 margin-top: 28px;
 padding: clamp(22px, 4vw, 36px);
 border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
 border-radius: 24px;
 background: color-mix(in srgb, var(--bg) 92%, var(--text) 3%);
}

.proof-card h3 {
 margin: 14px 0 6px;
}

.download-primary {
 display: inline-flex !important;
 align-items: center;
 justify-content: center;
 margin-top: 14px;
 min-height: 48px;
 padding: 0 18px !important;
 border-radius: 999px;
 background: var(--text) !important;
 color: var(--bg) !important;
 opacity: 1 !important;
 font-weight: 700;
 text-decoration: none;
 border: 1px solid var(--text);
}

.download-primary:hover {
 transform: translateY(-1px);
 opacity: .84 !important;
}

.evidence-note {
 margin-top: 24px;
 padding: 20px 22px;
 border-radius: 18px;
 border: 1px dashed color-mix(in srgb, var(--text) 18%, transparent);
 background: color-mix(in srgb, var(--bg) 96%, var(--text) 2%);
}

.evidence-note p {
 margin: 12px 0 0;
 opacity: .68;
}

@media (max-width: 900px) {
 .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
 .metric-grid { grid-template-columns: 1fr; }
}


/* Lloyds What I explored refinement */
.explored-section .explore-grid {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 12px;
 margin-top: 22px;
 margin-bottom: 24px;
}

.explore-card {
 padding: 20px 20px 18px;
 border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
 border-radius: 18px;
 background: color-mix(in srgb, var(--bg) 92%, var(--text) 3%);
}

.explore-card h3 {
 margin: 10px 0 8px;
 font-size: 20px;
 line-height: 1.12;
}

.explore-card p {
 margin: 0;
 opacity: .72;
}

.explore-label {
 display: inline-flex;
 align-items: center;
 min-height: 26px;
 padding: 0 9px;
 border-radius: 999px;
 background: color-mix(in srgb, #00a650 12%, transparent);
 color: #08783b;
 font-size: 11px;
 font-weight: 750;
 letter-spacing: .07em;
 text-transform: uppercase;
}

html.dark .explore-label {
 color: #83e6ad;
}

.explore-grid .explore-card:last-child {
 grid-column: 1 / -1;
}

@media (max-width: 820px) {
 .explored-section .explore-grid {
 grid-template-columns: 1fr;
 }

 .explore-grid .explore-card:last-child {
 grid-column: auto;
 }
}


/* Homepage project preview icon to image crossfade */
.preview-swap {
 position: relative;
 isolation: isolate;
 background:
 radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%),
 linear-gradient(180deg, color-mix(in srgb, var(--card) 72%, var(--bg) 28%), var(--card));
}

.preview-swap img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition:
 opacity .55s ease,
 transform .65s cubic-bezier(.22,.61,.36,1),
 filter .55s ease;
}

.preview-swap .contain-preview {
 object-fit: contain;
 padding: 28px;
 background:
 radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--text) 5%, transparent), transparent 28%),
 transparent;
}

.preview-swap .preview-default {
 opacity: 1;
 transform: scale(1);
 filter: blur(0);
}

.preview-swap .preview-hover {
 opacity: 0;
 transform: scale(1.035);
 filter: blur(2px);
}

.project-card.has-swap-preview:hover .preview-default,
.project-card.has-swap-preview:focus-visible .preview-default,
.project-card.has-swap-preview:focus-within .preview-default {
 opacity: 0;
 transform: scale(.985);
 filter: blur(3px);
}

.project-card.has-swap-preview:hover .preview-hover,
.project-card.has-swap-preview:focus-visible .preview-hover,
.project-card.has-swap-preview:focus-within .preview-hover {
 opacity: 1;
 transform: scale(1);
 filter: blur(0);
}

.project-card.has-swap-preview .project-preview::after {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.04));
 pointer-events: none;
}

html.dark .preview-swap {
 background:
 radial-gradient(circle at 20% 15%, rgba(111, 129, 255, .10), transparent 32%),
 linear-gradient(180deg, rgba(18,18,20,.92), rgba(24,24,27,.98));
}

@media (prefers-reduced-motion: reduce) {
 .preview-swap img {
 transition: none;
 }
}


.image-disclaimer {
  max-width: 900px;
  margin-top: 14px;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--soft) !important;
  font-style: italic;
}


/* Homepage quiz */
.portfolio-quiz {
  padding: 8px 0 44px;
}

.quiz-shell {
  max-width: 980px;
  padding: 34px;
  border-radius: 30px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  background: color-mix(in srgb, var(--bg) 72%, rgba(255,255,255,.4) 28%);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px var(--shadow);
}

.quiz-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
}

.quiz-shell h2 {
  margin: 0;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.quiz-option {
  min-width: 88px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.quiz-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px var(--shadow);
}

.quiz-option.is-selected {
  border-color: color-mix(in srgb, var(--text) 24%, transparent);
}

.quiz-option.is-correct {
  background: #21c46a;
  border-color: #21c46a;
  color: #07150d;
}

.quiz-option.is-wrong {
  background: color-mix(in srgb, #ff6b6b 16%, var(--bg));
  border-color: color-mix(in srgb, #ff6b6b 35%, transparent);
}

.quiz-feedback {
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--soft);
}

@media (max-width: 850px) {
  .portfolio-quiz {
    padding: 2px 0 32px;
  }

  .quiz-shell {
    padding: 24px;
    border-radius: 24px;
  }

  .quiz-option {
    min-width: 72px;
    min-height: 48px;
    font-size: 16px;
  }
}


/* Lloyds prototype fitted to the page instead of forcing browser zoom */
.prototype-responsive {
  max-width: 1180px;
  height: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 14px;
  overflow: hidden;
}

.prototype-responsive iframe {
  display: block;
  width: 147.06%;
  height: 1020px;
  min-height: 0;
  max-height: none;
  transform: scale(.68);
  transform-origin: top left;
  border: 0;
}

@media (max-width: 850px) {
  .prototype-responsive {
    height: auto;
    max-width: none;
    padding: 8px;
    overflow: hidden;
  }

  .prototype-responsive iframe {
    width: 100%;
    height: 76vh;
    min-height: 560px;
    transform: none;
  }
}


/* Consistent case study metadata */
.section-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 18px 0 28px;
}
.section-meta span {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--text) 11%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
}
.section-meta small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  opacity: .55;
}
.section-meta strong {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
}


/* Lloyds and Telekonnect use one image only with a simple hover zoom */
.zoom-only-preview {
  position: relative;
  overflow: hidden;
}

.zoom-only-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1);
  transition: transform .55s cubic-bezier(.22,.61,.36,1) !important;
}

.zoom-only-card:hover .zoom-only-preview img,
.zoom-only-card:focus-visible .zoom-only-preview img {
  transform: scale(1.045);
}

@media (prefers-reduced-motion: reduce) {
  .zoom-only-preview img {
    transition: none !important;
  }

  .zoom-only-card:hover .zoom-only-preview img,
  .zoom-only-card:focus-visible .zoom-only-preview img {
    transform: none;
  }
}


/* Ramadan planner tile uses a book opening transition */
.ramadan-book-preview {
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: hidden;
}

.ramadan-book-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.18), transparent 20%, transparent 80%, rgba(0,0,0,.08));
  pointer-events: none;
  opacity: .55;
}

.ramadan-book-preview .preview-default,
.ramadan-book-preview .preview-hover {
  transition:
    transform .8s cubic-bezier(.22,.61,.36,1),
    filter .8s cubic-bezier(.22,.61,.36,1),
    opacity .2s linear;
  backface-visibility: hidden;
}

.ramadan-book-preview .preview-default {
  z-index: 2;
  transform-origin: left center;
  opacity: 1;
  filter: none;
}

.ramadan-book-preview .preview-hover {
  z-index: 1;
  opacity: 1;
  transform: scale(1.03);
  filter: none;
}

.ramadan-book-card:hover .ramadan-book-preview .preview-default,
.ramadan-book-card:focus-visible .ramadan-book-preview .preview-default,
.ramadan-book-card:focus-within .ramadan-book-preview .preview-default {
  transform: rotateY(-78deg) translateX(-8px) scale(.98);
}

.ramadan-book-card:hover .ramadan-book-preview .preview-hover,
.ramadan-book-card:focus-visible .ramadan-book-preview .preview-hover,
.ramadan-book-card:focus-within .ramadan-book-preview .preview-hover {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ramadan-book-preview .preview-default,
  .ramadan-book-preview .preview-hover {
    transition: none !important;
  }
  .ramadan-book-card:hover .ramadan-book-preview .preview-default,
  .ramadan-book-card:focus-visible .ramadan-book-preview .preview-default,
  .ramadan-book-card:focus-within .ramadan-book-preview .preview-default,
  .ramadan-book-card:hover .ramadan-book-preview .preview-hover,
  .ramadan-book-card:focus-visible .ramadan-book-preview .preview-hover,
  .ramadan-book-card:focus-within .ramadan-book-preview .preview-hover {
    transform: none;
  }
}


/* Contact page combined phone and WhatsApp actions */
.contact-combo {
  cursor: default;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.contact-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.contact-actions a:hover {
  transform: translateY(-1px);
  background: var(--text);
  color: var(--bg);
}

/* 2026 portfolio evolution update */

.work-architecture,
.section-heading,
.personality-section,
.adl-home-section,
.presentations-home-section,
.site-footer { max-width:1260px; margin:0 auto; padding-left:28px; padding-right:28px; }
.work-architecture { padding-top:56px; padding-bottom:54px; }
.work-architecture h2,
.section-heading h2,
.personality-section h2,
.adl-home-section h2,
.presentations-home-section h2 { max-width:880px; font-size:clamp(34px,5vw,68px); line-height:.98; letter-spacing:-.045em; margin:10px 0 28px; }
.discipline-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.discipline-card { min-height:230px; padding:22px; border:1px solid var(--line); border-radius:24px; text-decoration:none; color:var(--text); display:flex; flex-direction:column; transition:transform .3s ease, background .3s ease, border-color .3s ease; }
.discipline-card:hover { transform:translateY(-5px); background:var(--card); }
.discipline-card > span { font-size:11px; letter-spacing:.12em; opacity:.48; margin-bottom:auto; }
.discipline-card strong { font-size:21px; line-height:1.05; margin-bottom:10px; }
.discipline-card p { margin:0; font-size:14px; line-height:1.48; opacity:.7; }
.section-heading { padding-top:56px; padding-bottom:14px; }
.section-heading .microcopy { font-size:13px; opacity:.5; font-style:italic; }

.personality-section { position:relative; margin-top:90px; margin-bottom:80px; padding-top:100px; padding-bottom:110px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.personality-section h2 { margin-bottom:8px; }
.spencer-answer { font-size:clamp(70px,12vw,180px); line-height:.83; font-weight:900; letter-spacing:-.075em; transform:rotate(-2deg); transform-origin:left center; margin:18px 0 40px; }
.personality-lead { max-width:720px; font-size:clamp(22px,3vw,38px); line-height:1.1; letter-spacing:-.025em; }
.process-rant { display:flex; flex-wrap:wrap; gap:8px; max-width:1000px; margin-top:42px; }
.process-rant span { border:1px solid var(--line); border-radius:999px; padding:10px 14px; font-size:13px; transform:rotate(var(--tilt,0deg)); }
.process-rant span:nth-child(2n){ --tilt:1deg; }
.process-rant span:nth-child(3n){ --tilt:-1.2deg; }
.personality-chaos,.personality-note { position:absolute; font-size:12px; font-style:italic; opacity:.55; transform:rotate(-5deg); }
.chaos-a { top:44px; right:8%; }
.chaos-b { right:4%; bottom:58px; transform:rotate(4deg); }
.personality-note.note-a { right:16%; top:45%; }
.personality-note.note-b { left:54%; bottom:22px; transform:rotate(2deg); }
.personality-note.note-c { right:4%; top:20%; transform:rotate(7deg); }

.adl-home-section,.presentations-home-section { padding-top:100px; padding-bottom:100px; border-top:1px solid var(--line); }
.adl-home-section > p,.presentations-home-section > p { max-width:760px; font-size:18px; line-height:1.6; }
.adl-mini-grid { margin:38px 0 24px; }
.site-footer { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-top:38px; padding-bottom:42px; border-top:1px solid var(--line); font-size:13px; opacity:.72; }
.site-footer a { color:inherit; }
.presentation-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:34px; }
.presentation-card { color:var(--text); text-decoration:none; border:1px solid var(--line); border-radius:26px; overflow:hidden; background:var(--card); transition:transform .3s ease, box-shadow .3s ease; }
.presentation-card:hover { transform:translateY(-5px); box-shadow:0 20px 55px var(--shadow); }
.presentation-card img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-bottom:1px solid var(--line); }
.presentation-card div { padding:22px; }
.presentation-card span { font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.5; }
.presentation-card h3 { font-size:27px; letter-spacing:-.03em; margin:8px 0 8px; }
.presentation-card p { margin:0; opacity:.68; line-height:1.5; }
.microcopy { font-size:13px !important; opacity:.55; font-style:italic; }

@media(max-width:980px){
  .discipline-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .discipline-card:last-child { grid-column:span 2; }
  .presentation-gallery { grid-template-columns:1fr; }
  .personality-note,.personality-chaos { opacity:.36; }
}
@media(max-width:640px){
  .work-architecture,.section-heading,.personality-section,.adl-home-section,.presentations-home-section,.site-footer { padding-left:20px; padding-right:20px; }
  .discipline-grid { grid-template-columns:1fr; }
  .discipline-card:last-child { grid-column:auto; }
  .discipline-card { min-height:180px; }
  .theme-control { min-width:104px; padding:0 10px; font-size:9.5px; }
  .personality-section { padding-top:78px; padding-bottom:90px; }
  .spencer-answer { font-size:20vw; }
  .personality-chaos,.personality-note { position:static; display:block; margin:10px 0; transform:rotate(-1deg) !important; }
  .site-footer { align-items:flex-start; flex-direction:column; }
}