:root {
  --ink: #121a22;
  --ink-soft: #22313d;
  --paper: #f4f1e8;
  --white: #fffdf8;
  --amber: #f4b530;
  --cyan: #66d0c7;
  --line: rgba(18, 26, 34, 0.16);
}

.portfolio-page { background: var(--paper); color: var(--ink); font-family: Jost, sans-serif; }
.portfolio-page * { box-sizing: border-box; }
.portfolio-page h1, .portfolio-page h2, .portfolio-page h3, .portfolio-page p { margin: 0; }
.portfolio-page a { color: inherit; text-decoration: none; }
.site-header { align-items: center; background: var(--ink); color: var(--white); display: flex; justify-content: space-between; min-height: 82px; padding: 14px clamp(24px, 5vw, 80px); position: relative; z-index: 2; }
.brand { align-items: center; display: flex; font-size: 17px; font-weight: 700; gap: 12px; letter-spacing: 0; }
.brand img { border: 1px solid rgba(255,255,255,.38); height: 46px; object-fit: cover; width: 46px; }
.brand small { color: var(--cyan); display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; line-height: 1.3; margin-top: 3px; text-transform: uppercase; }
.site-header nav { display: flex; gap: clamp(18px, 2vw, 34px); }
.site-header nav a, .header-link { font-size: 13px; font-weight: 600; transition: color .2s ease; }
.site-header nav a:hover, .header-link:hover { color: var(--amber); }
.header-link { border-bottom: 1px solid var(--cyan); padding-bottom: 4px; }
.portfolio-hero { background: var(--ink); color: var(--white); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 30vw); min-height: min(710px, calc(100vh - 82px)); overflow: hidden; padding: clamp(65px, 10vw, 140px) clamp(24px, 10vw, 160px) clamp(60px, 8vw, 110px); position: relative; }
.hero-grid { background-image: linear-gradient(rgba(102,208,199,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(102,208,199,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(18,26,34,.4), rgba(18,26,34,.8)), url('../../images/sitebackground-1920x1005.jpg'); background-position: center; background-size: 34px 34px, 34px 34px, cover, cover; inset: 0; opacity: .58; position: absolute; }
.hero-content, .hero-profile { position: relative; z-index: 1; }
.hero-content { align-self: center; max-width: 760px; }
.eyebrow { color: var(--cyan); font-size: 11px; font-weight: 700; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.portfolio-hero h1 { font-size: clamp(3.4rem, 6.2vw, 6.5rem); font-weight: 700; letter-spacing: 0; line-height: .96; margin: 21px 0 26px; }
.portfolio-hero h1 em, .site-footer h2 em { color: var(--amber); font-style: normal; }
.hero-intro { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55; max-width: 610px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.button { align-items: center; display: inline-flex; font-size: 14px; font-weight: 700; gap: 22px; justify-content: space-between; min-height: 49px; padding: 0 19px; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--amber); color: var(--ink); }.button-secondary { border: 1px solid rgba(255,255,255,.55); color: var(--white); }
.hero-profile { align-self: end; border-left: 1px solid rgba(255,255,255,.35); margin-left: clamp(32px, 5vw, 80px); padding-left: 20px; }.hero-profile img { display: block; filter: grayscale(100%) contrast(1.1); height: 242px; margin-bottom: 16px; object-fit: cover; object-position: top; width: 192px; }.hero-profile span, .hero-profile strong { display: block; line-height: 1.4; }.hero-profile span { color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.hero-profile strong { font-size: 13px; font-weight: 600; margin-top: 5px; max-width: 220px; }
.credibility-strip { align-items: center; background: var(--cyan); color: var(--ink); display: grid; gap: 24px; grid-template-columns: repeat(3, auto) 1fr; padding: 24px clamp(24px, 10vw, 160px); }.credibility-strip div { border-right: 1px solid rgba(18,26,34,.22); min-width: 120px; padding-right: 25px; }.credibility-strip strong { display: block; font-size: 23px; line-height: 1; }.credibility-strip span, .credibility-strip p { font-size: 11px; font-weight: 600; line-height: 1.4; }.credibility-strip p { text-align: right; }.credibility-strip i { background: var(--ink); display: inline-block; height: 3px; margin: 0 7px 3px; width: 3px; }
.section { padding: clamp(70px, 9vw, 135px) clamp(24px, 10vw, 160px); }.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 42px; }.section-heading h2, .story-section h2, .site-footer h2 { font-size: clamp(2.3rem, 4vw, 4.5rem); font-weight: 700; letter-spacing: 0; line-height: 1; margin-top: 15px; max-width: 800px; }.text-link { border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; padding-bottom: 4px; white-space: nowrap; }.text-link span, .project-card a span { color: #e29400; margin-left: 9px; }
.project-grid { display: grid; gap: 16px; grid-template-columns: 1.35fr .65fr; }.project-card { background: var(--white); border: 1px solid var(--line); min-height: 300px; overflow: hidden; padding: 27px; position: relative; }.project-card-featured { display: grid; grid-template-columns: 1.1fr .9fr; grid-row: span 2; padding: 0; }.project-card-featured img { height: 100%; min-height: 500px; object-fit: cover; width: 100%; }.project-content { align-self: end; padding: 28px; }.project-card span, .project-card li, .project-card a { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.project-card h3 { font-size: clamp(1.65rem, 2.4vw, 2.6rem); font-weight: 700; line-height: 1.02; margin: 12px 0; }.project-card p { font-size: 15px; line-height: 1.5; }.project-card ul { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; margin: 26px 0 0; padding: 14px 0 0; }.project-number { color: var(--amber); font-size: 58px; font-weight: 700; line-height: 1; margin-bottom: 64px; }.project-card > a { bottom: 25px; position: absolute; }.project-card-image { color: var(--white); padding: 0; }.project-card-image::after { background: linear-gradient(0deg, rgba(18,26,34,.92), transparent); content: ''; inset: 0; position: absolute; }.project-card-image img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }.project-card-image div { bottom: 25px; left: 27px; position: absolute; right: 27px; z-index: 1; }.project-card-image h3 { font-size: 25px; }.project-card-image a { color: var(--cyan); }
.capability-section { background: var(--ink-soft); color: var(--white); }.capability-grid { border-top: 1px solid rgba(255,255,255,.25); display: grid; grid-template-columns: repeat(4, 1fr); }.capability-grid article { border-right: 1px solid rgba(255,255,255,.25); min-height: 290px; padding: 26px 22px 22px 0; }.capability-grid article + article { padding-left: 22px; }.capability-grid article:last-child { border: 0; }.capability-grid span { color: var(--cyan); font-size: 12px; font-weight: 700; }.capability-grid h3 { font-size: 23px; line-height: 1.08; margin: 75px 0 14px; }.capability-grid p { color: rgba(255,255,255,.77); font-size: 14px; line-height: 1.55; }
.story-section { align-items: start; background: var(--amber); display: grid; gap: 9vw; grid-template-columns: 1.2fr .8fr; padding: clamp(70px, 9vw, 135px) clamp(24px, 10vw, 160px); }.story-section .eyebrow { color: var(--ink); }.story-section p:last-child { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.5; padding-top: 38px; }
.site-footer { align-items: end; background: var(--ink); color: var(--white); display: flex; justify-content: space-between; padding: clamp(60px, 7vw, 105px) clamp(24px, 10vw, 160px) 34px; }.site-footer h2 { margin-top: 15px; }.footer-contact { align-items: flex-end; display: flex; flex-direction: column; gap: 13px; }.footer-contact a:first-child { color: var(--cyan); font-size: 20px; font-weight: 700; }.footer-contact a:nth-child(2) { font-size: 13px; font-weight: 700; }.footer-contact p { color: rgba(255,255,255,.55); font-size: 11px; margin-top: 30px; }
@media (max-width: 800px) { .site-header { min-height: 74px; }.site-header nav { display: none; }.portfolio-hero { grid-template-columns: 1fr; min-height: auto; padding-bottom: 50px; }.hero-profile { display: none; }.credibility-strip { grid-template-columns: repeat(3, 1fr); gap: 10px; }.credibility-strip div { min-width: 0; padding-right: 10px; }.credibility-strip p { display: none; }.section-heading { align-items: start; flex-direction: column; gap: 23px; }.project-grid { grid-template-columns: 1fr; }.project-card-featured { grid-row: auto; }.project-card-featured img { min-height: 250px; }.capability-grid { grid-template-columns: repeat(2, 1fr); }.capability-grid article:nth-child(2) { border-right: 0; }.capability-grid article { min-height: 240px; }.story-section { grid-template-columns: 1fr; gap: 0; }.story-section p:last-child { padding-top: 0; }.site-footer { align-items: start; flex-direction: column; gap: 48px; }.footer-contact { align-items: start; } }
@media (max-width: 480px) { .header-link { font-size: 12px; }.portfolio-hero h1 { font-size: 3rem; }.project-card-featured { display: block; }.project-card-featured img { height: 230px; }.capability-grid { grid-template-columns: 1fr; }.capability-grid article, .capability-grid article + article { border-bottom: 1px solid rgba(255,255,255,.25); border-right: 0; min-height: auto; padding: 24px 0; }.capability-grid h3 { margin-top: 35px; }.section-heading h2, .story-section h2, .site-footer h2 { font-size: 2.3rem; } }

/* Existing CV content, re-framed as the detailed portfolio view. */
.portfolio-profile { background: var(--paper); }
.portfolio-profile .navbar { background: var(--ink) !important; min-height: 82px; padding: 14px clamp(24px, 5vw, 80px); }
.portfolio-profile .navbar .navbar-brand { margin: 0; }.portfolio-profile .navbar-caption { color: var(--white) !important; font-size: 17px; font-weight: 700; line-height: 1.2; }.portfolio-profile .navbar-caption br + * { color: var(--cyan); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }.portfolio-profile .navbar .nav-link { color: var(--white) !important; font-size: 13px; font-weight: 600; padding: 10px 14px !important; }.portfolio-profile .navbar .nav-link:hover { color: var(--amber) !important; }.portfolio-profile .navbar-toggler { color: var(--white); }
.portfolio-profile .header11 { background: var(--ink) !important; min-height: 590px; padding: 145px clamp(24px, 10vw, 160px) 88px; }.portfolio-profile .header11 .mbr-overlay { background: transparent !important; }.portfolio-profile .header11 .container { max-width: 1240px; }.portfolio-profile .header11 .image-wrapper { align-self: end; border-left: 1px solid rgba(255,255,255,.35); padding: 0 0 0 24px; }.portfolio-profile .header11 .image-wrapper img { filter: grayscale(100%) contrast(1.1); max-height: 370px; object-fit: cover; object-position: top; width: min(100%, 290px); }.portfolio-profile .header11 .text-wrapper { padding: 0 0 0 clamp(20px, 5vw, 75px); text-align: left !important; }.portfolio-profile .header11 .mbr-section-title { color: var(--white); font-size: clamp(2.8rem, 5vw, 5.2rem); font-weight: 700; letter-spacing: 0; line-height: .98; margin: 0 0 28px !important; }.portfolio-profile .header11 .mbr-section-title strong:first-child, .portfolio-profile .header11 .mbr-section-title div:first-of-type { display: none; }.portfolio-profile .header11 .mbr-text { color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.65; max-width: 700px; }
.portfolio-profile .content16 { background: var(--paper); padding: 105px clamp(24px, 10vw, 160px) 0; }.portfolio-profile .content16 .container { max-width: 1240px; }.portfolio-profile .content16 .mbr-section-head { margin: 0 0 45px !important; text-align: left !important; }.portfolio-profile .content16 .mbr-section-title { color: var(--ink); font-size: clamp(2.5rem, 4vw, 4.4rem); font-weight: 700; line-height: 1; }.portfolio-profile .accordionStyles .card { background: transparent; border: 0; border-radius: 0; border-top: 1px solid var(--line); box-shadow: none; margin: 0 !important; }.portfolio-profile .accordionStyles .card-header { background: transparent; border: 0; padding: 0; }.portfolio-profile .accordionStyles .panel-title { align-items: center; display: grid; gap: 25px; grid-template-columns: 1fr auto; padding: 25px 0; }.portfolio-profile .accordionStyles .panel-title-edit { color: var(--ink); font-size: clamp(16px, 1.65vw, 21px); font-weight: 600; line-height: 1.28; }.portfolio-profile .accordionStyles .sign { color: var(--cyan); font-size: 20px; }.portfolio-profile .accordionStyles .panel-body { border-left: 3px solid var(--amber); margin: 0 0 25px; padding: 2px 0 5px 22px; }.portfolio-profile .accordionStyles .panel-text { color: var(--ink-soft); font-size: 15px; line-height: 1.65; }.portfolio-profile .content16 + .content16 { padding-top: 0; }.portfolio-profile .content16 + .content16 .accordionStyles { border-bottom: 1px solid var(--line); }
.portfolio-profile .features1 { background: var(--ink-soft); color: var(--white); padding: 105px clamp(24px, 10vw, 160px); }.portfolio-profile .features1 .container { max-width: 1240px; }.portfolio-profile .features1 .mbr-section-title { color: var(--white); font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: 1; text-align: left !important; }.portfolio-profile .features1 .row:last-child { border-top: 1px solid rgba(255,255,255,.25); margin-top: 42px; }.portfolio-profile .features1 .card { background: transparent; border: 0; border-radius: 0; color: var(--white); padding: 0 24px 0 0; }.portfolio-profile .features1 .card + .card { border-left: 1px solid rgba(255,255,255,.25); padding-left: 24px; }.portfolio-profile .features1 .card-wrapper { background: transparent; border: 0; }.portfolio-profile .features1 .iconfont-wrapper { color: var(--cyan); font-size: 26px; text-align: left; }.portfolio-profile .features1 .card-title { font-size: 19px; margin: 65px 0 14px; text-align: left; }.portfolio-profile .features1 .card-text { color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.7; text-align: left; }
.portfolio-profile .content8 { background: var(--amber); padding: 88px clamp(24px, 10vw, 160px); }.portfolio-profile .content8 .container { max-width: 1240px; }.portfolio-profile .content8 .mbr-section-title { color: var(--ink); font-size: clamp(2.3rem, 3.5vw, 3.8rem); line-height: 1; }.portfolio-profile .content8 .mbr-text { color: var(--ink); font-size: 16px; line-height: 1.6; }.portfolio-profile .content8 li { margin-bottom: 13px; }.portfolio-profile .content8 a { color: var(--ink); text-decoration: underline; }
.portfolio-profile .video3 { background: var(--paper); padding: 0 clamp(24px, 10vw, 160px) 28px; }.portfolio-profile .video3#video3-y { padding-top: 105px; }.portfolio-profile .video3 .container { max-width: 1240px; }.portfolio-profile .video3 .mbr-section-title { color: var(--ink); font-size: clamp(2.4rem, 4vw, 4.2rem); line-height: 1; }.portfolio-profile .video3 .video-wrapper { border: 1px solid var(--line); box-shadow: none; }.portfolio-profile .video3 .mbr-text { color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; padding-top: 13px !important; text-transform: uppercase; }
.portfolio-profile .contacts1 { background: var(--ink); color: var(--white); margin-top: 76px; padding: 100px clamp(24px, 10vw, 160px); }.portfolio-profile .contacts1 .container { max-width: 1240px; }.portfolio-profile .contacts1 .mbr-section-title { color: var(--white); font-size: clamp(2.6rem, 4vw, 4.3rem); line-height: 1; text-align: left !important; }.portfolio-profile .contacts1 .card { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.28); border-radius: 0; padding: 26px 0; }.portfolio-profile .contacts1 .card:first-child { padding-right: 30px; }.portfolio-profile .contacts1 .card + .card { border-left: 1px solid rgba(255,255,255,.28); padding-left: 30px; }.portfolio-profile .contacts1 .card-wrapper { background: transparent; border: 0; }.portfolio-profile .contacts1 .card-box { text-align: left !important; }.portfolio-profile .contacts1 .card-title { color: var(--white); font-size: 21px; line-height: 1; text-align: left !important; }.portfolio-profile .contacts1 .mbr-text { color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.5; }.portfolio-profile .contacts1 .link a { color: var(--cyan) !important; font-size: 15px; font-weight: 700; }.portfolio-profile .footer7 { background: var(--ink); border-top: 1px solid rgba(255,255,255,.22); padding: 24px clamp(24px, 10vw, 160px); }.portfolio-profile .footer7 .mbr-text { color: rgba(255,255,255,.6); font-size: 11px; }
@media (max-width: 767px) { .portfolio-profile .navbar .navbar-collapse { background: var(--ink); padding: 12px; }.portfolio-profile .header11 { padding-top: 120px; }.portfolio-profile .header11 .image-wrapper { border: 0; margin-bottom: 30px; padding: 0; }.portfolio-profile .header11 .image-wrapper img { max-height: 280px; width: 220px; }.portfolio-profile .header11 .text-wrapper { padding: 0; }.portfolio-profile .content16, .portfolio-profile .features1 { padding-top: 72px; }.portfolio-profile .features1 .card + .card, .portfolio-profile .contacts1 .card + .card { border-left: 0; border-top: 1px solid rgba(255,255,255,.25); margin-top: 20px; padding-left: 0; padding-top: 26px; }.portfolio-profile .features1 .card { padding-bottom: 24px; }.portfolio-profile .features1 .card-title { margin-top: 30px; }.portfolio-profile .contacts1 .card:first-child { padding-right: 0; } }