/* Homepage only. Retained pages keep their existing stylesheets. */
.portfolio {
  --paper:#f6f7f3;
  --ink:#182321;
  --green:#466b59;
  --soft:#e8ede5;
  --line:#cbd1c9;
  --muted:#53615a;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.65 Manrope,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}

.portfolio * {
  box-sizing:border-box}
.portfolio h1,.portfolio h2,.portfolio h3,.portfolio p,.portfolio figure {
  margin:0}
.portfolio a {
  color:inherit;
  text-underline-offset:5px}
.portfolio svg {
  display:block}
.portfolio img {
  display:block;
  max-width:100%}
.portfolio :focus-visible {
  outline:3px solid var(--green);
  outline-offset:6px}
.portfolio section[id],.portfolio article[id] {
  scroll-margin-top:30px}
.portfolio .wrap {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto}
.portfolio .skip-link {
  position:absolute;
  left:24px;
  top:-100px;
  padding:12px;
  background:var(--ink);
  color:white;
  z-index:20}
.portfolio .skip-link:focus {
  top:10px}

.portfolio .masthead {
  height:112px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line)}
.portfolio .brand {
  display:flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  font-size:23px;
  font-weight:800;
  letter-spacing:-1px;
  line-height:1.15}
.portfolio .brand svg {
  width:35px;
  height:35px;
  fill:none;
  stroke:var(--green);
  stroke-width:2.5}
.portfolio .brand-small {
  display:block;
  font-size:12px;
  font-weight:500;
  letter-spacing:1.5px;
  margin-top:5px}
.portfolio nav {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:14px;
  font-weight:600}
.portfolio nav a {
  text-decoration:none}
.portfolio nav a:hover {
  text-decoration:underline}
.portfolio .nav-contact {
  border-bottom:1px solid var(--green);
  padding-block:10px}
.portfolio .nav-contact span {
  margin-left:18px}

.portfolio .hero {
  padding-top:48px;
  padding-bottom:66px}
.portfolio .intro-line {
  font-size:14px;
  color:var(--muted);
  margin-bottom:28px}
.portfolio h1 {
  font-size:clamp(48px,6.65vw,96px);
  font-weight:500;
  line-height:1.075;
  letter-spacing:-.065em;
  max-width:1100px}
.portfolio .hero-bottom {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-top:36px}
.portfolio .hero-bottom p {
  max-width:660px;
  font-size:18px;
  line-height:1.7}
.portfolio .text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--green);
  padding-bottom:7px;
  white-space:nowrap}
.portfolio .text-link:hover {
  color:var(--green)}

.portfolio .services {
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink)}
.portfolio .service {
  padding:38px 44px 40px 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start}
.portfolio .service+.service {
  border-left:1px solid var(--line);
  padding-left:44px;
  padding-right:0}
.portfolio .service-heading {
  display:flex;
  gap:22px;
  align-items:flex-start}
.portfolio .service-heading svg {
  width:36px;
  height:36px;
  flex:none;
  stroke:var(--green);
  stroke-width:1.5;
  fill:none;
  margin-top:7px}
.portfolio .service h2 {
  font-size:30px;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-1px}
.portfolio .service>p {
  margin-top:24px;
  max-width:440px;
  color:var(--muted)}
.portfolio .service ul {
  padding:0;
  margin:24px 0 30px;
  list-style:none;
  font-size:14px}
.portfolio .service li {
  padding:4px 0}
.portfolio .service li:before {
  content:'+';
  display:inline-block;
  width:22px;
  color:var(--green)}
.portfolio .service .text-link {
  margin-top:auto}

.portfolio .work {
  padding-top:100px;
  padding-bottom:90px}
.portfolio .section-heading {
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:flex-end;
  margin-bottom:40px}
.portfolio .section-heading h2,.portfolio .about h2 {
  font-size:clamp(36px,3.8vw,52px);
  line-height:1.15;
  letter-spacing:-2px;
  font-weight:500}
.portfolio .section-heading>p {
  color:var(--muted);
  font-size:15px;
  max-width:440px}
.portfolio .project {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  border-top:1px solid var(--line);
  padding-block:42px;
  align-items:center}
.portfolio .project:last-child {
  border-bottom:1px solid var(--line)}
.portfolio .project-type {
  font-size:12px;
  font-weight:700;
  color:var(--green);
  margin-bottom:15px}
.portfolio .project h3 {
  font-size:29px;
  line-height:1.25;
  letter-spacing:-1px;
  font-weight:500;
  margin-bottom:20px}
.portfolio .project-copy>p:not(.project-type) {
  font-size:15px;
  color:var(--muted);
  max-width:540px}
.portfolio .project-copy .attribution {
  font-size:12px!important;
  margin-top:12px}
.portfolio .scope {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin-top:24px}
.portfolio .workflow {
  background:var(--soft);
  min-height:278px;
  padding:26px 30px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
  border-radius:2px}
.portfolio figcaption {
  font-size:12px;
  color:var(--muted);
  text-align:right;
  margin-top:auto;
  padding-top:20px}
.portfolio .config-drawing {
  max-width:370px;
  width:100%;
  margin:auto}
.portfolio .config-drawing svg {
  fill:none;
  stroke:var(--green);
  stroke-width:2}
.portfolio .config-drawing .table-top {
  fill:#d2ddcd}
.portfolio .config-drawing .dimension {
  stroke:#8d9f8e;
  stroke-width:1;
  stroke-dasharray:3 4}
.portfolio .choice-line {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  border-top:1px solid #b2c0b0;
  padding-top:13px;
  gap:8px}
.portfolio .loop-diagram {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:48px;
  font-size:13px;
  line-height:1.5}
.portfolio .loop-diagram span {
  padding:13px 7px;
  border-top:1px solid #94a48f;
  border-bottom:1px solid #94a48f;
  flex:1;
  text-align:center}
.portfolio .loop-diagram i {
  font-style:normal;
  color:var(--green)}
.portfolio .loop-return {
  margin:16px 35px 0;
  border:1px solid #94a48f;
  border-top:0;
  height:33px;
  text-align:center;
  color:var(--green);
  font-size:23px;
  line-height:54px}
.portfolio .catalog-diagram {
  display:flex;
  align-items:center;
  gap:20px;
  margin:auto 0;
  font-size:12px}
.portfolio .catalog-source {
  flex:1}
.portfolio .paper-lines {
  margin-top:15px;
  padding:16px 12px;
  border:1px solid #a9b8a6;
  transform:rotate(-4deg);
  background:var(--paper)}
.portfolio .paper-lines b {
  display:block;
  height:1px;
  background:#adbba9;
  margin:10px 0}
.portfolio .paper-lines b:last-child {
  width:65%}
.portfolio .catalog-target {
  flex:1.5}
.portfolio .catalog-items {
  display:flex;
  gap:7px;
  margin-top:15px}
.portfolio .catalog-items svg {
  width:30%;
  fill:#c7d5c1;
  stroke:var(--green);
  stroke-width:1.2}
.portfolio .knowledge-inputs,.portfolio .inventory-sources {
  display:flex;
  gap:8px;
  justify-content:center;
  font-size:12px}
.portfolio .knowledge-inputs span,.portfolio .inventory-sources span {
  padding:10px 12px;
  border:1px solid #a9b8a6;
  background:var(--paper)}
.portfolio .knowledge-route {
  text-align:center;
  color:var(--green);
  line-height:1.6;
  font-size:19px}
.portfolio .knowledge-gate,.portfolio .knowledge-output {
  font-size:12px;
  text-align:center;
  padding:12px;
  border:1px solid #a9b8a6;
  margin-inline:24px}
.portfolio .knowledge-gate {
  background:var(--green);
  color:white;
  border-color:var(--green)}
.portfolio .knowledge-output {
  margin-inline:60px;
  background:var(--paper)}
.portfolio .review-slip {
  width:85%;
  margin:auto;
  background:var(--paper);
  padding:16px 20px;
  border:1px solid #b4c0af}
.portfolio .review-slip>span {
  display:block;
  color:var(--muted);
  font-size:12px}
.portfolio .review-slip strong {
  font-size:15px;
  font-weight:500;
  display:block;
  margin-block:4px 12px}
.portfolio .review-rule {
  height:1px;
  background:var(--line)}
.portfolio .review-slip small {
  font-size:12px;
  color:var(--muted)}

.portfolio .workbench {
  background:#e9ede6;
  padding-block:75px 65px}
.portfolio .tool-list article {
  display:grid;
  grid-template-columns:1fr 1.3fr .65fr;
  gap:35px;
  padding:26px 0;
  border-top:1px solid #bcc7b8;
  align-items:center}
.portfolio .tool-list article:last-child {
  border-bottom:1px solid #bcc7b8}
.portfolio .tool-list h3 {
  font-size:19px;
  letter-spacing:-.5px;
  font-weight:600}
.portfolio .tool-list article>div>span {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:4px}
.portfolio .tool-list p {
  font-size:14px;
  color:var(--muted);
  max-width:410px}
.portfolio .tool-list a {
  font-size:12px;
  justify-self:end;
  font-weight:600;
  white-space:nowrap}
.portfolio .about {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:110px;
  padding-block:100px;
  align-items:center}
.portfolio .portrait {
  max-width:300px}
.portfolio .portrait img {
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
  filter:grayscale(100%);
  border-radius:2px}
.portfolio .portrait p {
  font-size:14px;
  margin-top:18px;
  font-weight:600}
.portfolio .portrait span {
  font-size:12px;
  color:var(--muted);
  font-weight:400}
.portfolio .about-copy p {
  margin-top:22px;
  color:var(--muted);
  font-size:16px;
  max-width:610px}
.portfolio .contact {
  background:var(--ink);
  color:var(--paper);
  padding-block:70px 80px}
.portfolio .contact-inner {
  display:flex;
  justify-content:space-between;
  gap:50px;
  align-items:flex-end}
.portfolio .contact h2 {
  font-size:clamp(44px,5vw,68px);
  letter-spacing:-3px;
  line-height:1.1;
  font-weight:500;
  margin-top:22px}
.portfolio .contact-inner>div>p {
  font-size:14px;
  color:#bbc8bc}
.portfolio .contact-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:23px}
.portfolio .button {
  display:flex;
  gap:48px;
  justify-content:space-between;
  align-items:center;
  padding:16px 22px;
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  text-decoration:none}
.portfolio .button:hover {
  background:#dfe9d9}
.portfolio .email {
  font-size:15px}
.portfolio .contact .contact-actions p {
  font-size:12px;
  color:#bbc8bc}
.portfolio .footer {
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-block:26px;
  font-size:12px;
  color:var(--muted)}
.portfolio .footer a {
  white-space:nowrap}

@media(min-width:1500px) {
  .portfolio h1 {
  font-size:100px}
}

@media(max-width:1000px) {
  .portfolio .wrap {
  width:calc(100% - 64px)}
.portfolio .hero-bottom {
  align-items:flex-start}
.portfolio .hero-bottom p {
  font-size:16px;
  max-width:490px}
.portfolio .hero-bottom .text-link {
  margin-top:6px}
.portfolio .service {
  padding-right:28px}
.portfolio .service+.service {
  padding-left:28px}
.portfolio .service h2 {
  font-size:26px}
.portfolio .service-heading {
  gap:14px}
.portfolio .project {
  gap:30px}
.portfolio .project h3 {
  font-size:25px}
.portfolio .workflow {
  padding-inline:18px}
.portfolio .knowledge-inputs {
  font-size:12px;
  gap:5px}
.portfolio .knowledge-inputs span {
  padding:8px}
.portfolio .about {
  gap:60px}
.portfolio .tool-list article {
  grid-template-columns:1fr 1.4fr;
  gap:20px}
.portfolio .tool-list a {
  grid-column:2;
  justify-self:start}
}

@media(max-width:700px) {
  .portfolio .wrap {
  width:calc(100% - 40px)}
.portfolio .masthead {
  height:88px}
.portfolio .brand {
  font-size:19px;
  gap:8px}
.portfolio .brand svg {
  width:27px;
  height:30px}
.portfolio .brand-small {
  font-size:11px;
  letter-spacing:1px}
.portfolio nav {
  gap:16px;
  font-size:12px}
.portfolio .nav-contact span {
  margin-left:4px}
.portfolio .hero {
  padding-top:34px;
  padding-bottom:40px}
.portfolio .intro-line {
  font-size:12px;
  margin-bottom:26px}
.portfolio h1 {
  font-size:clamp(40px,8.9vw,62px);
  letter-spacing:-.06em;
  line-height:1.12}
.portfolio .desktop-break {
  display:none}
.portfolio .hero-bottom {
  display:block;
  margin-top:26px}
.portfolio .hero-bottom p {
  font-size:16px}
.portfolio .hero-bottom .text-link {
  margin-top:24px}
.portfolio .services {
  grid-template-columns:1fr}
.portfolio .service,.portfolio .service+.service {
  padding:30px 0;
  border-left:0}
.portfolio .service+.service {
  border-top:1px solid var(--line)}
.portfolio .service h2 {
  font-size:27px}
.portfolio .service>p {
  margin-top:20px}
.portfolio .service ul {
  margin:18px 0 22px;
  font-size:13px}
.portfolio .section-heading {
  display:block;
  margin-bottom:30px}
.portfolio .section-heading h2,.portfolio .about h2 {
  font-size:36px;
  letter-spacing:-1.5px}
.portfolio .section-heading>p {
  margin-top:22px;
  font-size:14px}
.portfolio .work {
  padding-top:60px;
  padding-bottom:50px}
.portfolio .project {
  grid-template-columns:1fr;
  padding-block:30px;
  gap:26px}
.portfolio .project h3 {
  font-size:27px}
.portfolio .project-type {
  font-size:12px}
.portfolio .project-copy>p:not(.project-type) {
  font-size:15px}
.portfolio .scope {
  margin-top:18px;
  font-size:12px}
.portfolio .workflow {
  min-height:255px;
  padding:22px 24px 14px}
.portfolio .knowledge-inputs {
  font-size:12px}
.portfolio .knowledge-inputs span {
  padding:9px}
.portfolio .workbench {
  padding-block:50px}
.portfolio .tool-list article {
  display:block;
  padding-block:23px}
.portfolio .tool-list p {
  margin-top:14px}
.portfolio .tool-list a {
  display:inline-block;
  margin-top:16px}
.portfolio .about {
  display:flex;
  flex-direction:column-reverse;
  gap:32px;
  padding-block:60px;
  align-items:flex-start}
.portfolio .portrait {
  display:flex;
  align-items:center;
  gap:20px;
  max-width:none}
.portfolio .portrait img {
  width:90px}
.portfolio .portrait p {
  margin:0}
.portfolio .about-copy p {
  font-size:15px;
  margin-top:18px}
.portfolio .contact {
  padding-block:48px}
.portfolio .contact-inner {
  display:block}
.portfolio .contact h2 {
  font-size:48px;
  letter-spacing:-2px}
.portfolio .contact-actions {
  margin-top:36px}
.portfolio .footer {
  display:block;
  font-size:12px}
.portfolio .footer a {
  display:inline-block;
  margin-top:14px}
}

@media(prefers-reduced-motion:no-preference) {
  html {
  scroll-behavior:smooth}
.portfolio a {
  transition:color .15s ease,background-color .15s ease}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
}

/* Keep illustrations inside narrow mobile columns. */
.portfolio .project>* {
  min-width:0}

@media(max-width:400px) {
  .portfolio .workflow {
  padding-inline:16px}
.portfolio .loop-diagram {
  gap:5px;
  font-size:12px}
.portfolio .loop-diagram span {
  min-width:0;
  padding-inline:3px}
.portfolio .knowledge-inputs {
  font-size:12px;
  gap:4px}
.portfolio .knowledge-inputs span {
  padding:8px 6px}
.portfolio .inventory-sources {
  font-size:12px}
.portfolio .inventory-sources span {
  padding:8px}
.portfolio .knowledge-gate {
  margin-inline:8px}
.portfolio .knowledge-output {
  margin-inline:30px}
.portfolio .catalog-diagram {
  gap:10px;
  font-size:12px}
.portfolio .review-slip {
  width:100%}
.portfolio .review-slip strong {
  font-size:13px}
.portfolio nav {
  gap:12px;
  font-size:12px}
.portfolio .brand {
  font-size:18px}
.portfolio .brand svg {
  width:24px}
}

.portfolio .portrait img { height: auto; aspect-ratio: 1; }
@media(max-width:700px) { .portfolio .portrait img { height: 90px; flex: 0 0 90px; } }

/* Featured collaboration and hands-on training. */
.portfolio .training-signpost { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:24px; color:var(--muted); font-size:14px; }
.portfolio .foxwell-feature { background:var(--ink); color:var(--paper); padding:48px; margin-block:22px 42px; }
.portfolio .foxwell-intro { display:grid; grid-template-columns:1fr 1fr; gap:18px 60px; }
.portfolio .foxwell-feature .project-type { grid-column:1/-1; color:#bdcebd; margin:0; }
.portfolio .foxwell-feature h3 { font-size:38px; line-height:1.15; letter-spacing:-1.5px; font-weight:500; }
.portfolio .training { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding-block:90px; border-bottom:1px solid var(--line); }
.portfolio .training h2 { font-size:clamp(36px,3.8vw,52px); line-height:1.15; letter-spacing:-2px; font-weight:500; }
.portfolio .training-title .text-link { margin-top:32px; }
.portfolio .training h3 { font-size:25px; font-weight:500; line-height:1.3; letter-spacing:-.7px; }
.portfolio .training-copy p { margin-top:18px; color:var(--muted); font-size:15px; }
.portfolio .training ul { padding-left:18px; margin:22px 0 0; color:var(--muted); font-size:14px; }
.portfolio .training li { padding-block:4px; }
@media(max-width:1000px) {
.portfolio .foxwell-feature { padding:32px; }
.portfolio .foxwell-intro,.portfolio .training { gap:30px; }
.portfolio .foxwell-feature h3 { font-size:32px; }
}
@media(max-width:700px) {
.portfolio .masthead { height:auto; min-height:88px; flex-wrap:wrap; gap:18px; padding-block:22px; }
.portfolio nav { width:100%; justify-content:space-between; }
.portfolio .training-signpost { display:block; font-size:13px; padding-block:22px; }
.portfolio .training-signpost .text-link { margin-top:12px; }
.portfolio .foxwell-feature { padding:26px 22px; margin-block:12px 30px; }
.portfolio .foxwell-intro,.portfolio .training { grid-template-columns:1fr; gap:24px; }
.portfolio .foxwell-feature h3 { font-size:31px; }
.portfolio .training { padding-block:54px; gap:32px; }
.portfolio .training h2 { font-size:36px; letter-spacing:-1.5px; }
.portfolio .training-title .text-link { margin-top:24px; }
}

.portfolio .foxwell-public h4 { font-size:23px; line-height:1.3; font-weight:500; margin:0 0 16px; letter-spacing:-.5px; }
.portfolio .foxwell-public p { font-size:15px; color:#d0d9cf; margin-bottom:18px; }
.portfolio .foxwell-public .text-link { border-color:#9fb69f; margin-top:6px; }

/* Separate owned business, with a schematic rather than customer imagery. */
.portfolio .product-feature { padding:10px 0 90px; }
.portfolio .product-heading { border-top:1px solid var(--ink); padding-top:38px; display:grid; grid-template-columns:1fr 1fr; gap:12px 60px; }
.portfolio .product-heading .project-type { grid-column:1/-1; }
.portfolio .product-heading h2 { font-size:clamp(44px,4.5vw,64px); line-height:1.1; letter-spacing:-3px; font-weight:500; }
.portfolio .product-deck { font-size:27px; line-height:1.3; letter-spacing:-1px; }
.portfolio .product-body { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-top:38px; align-items:center; }
.portfolio .product-copy>p { color:var(--muted); font-size:16px; margin-bottom:20px; max-width:540px; }
.portfolio .product-copy>p:first-child { color:var(--ink); font-size:21px; line-height:1.5; }
.portfolio .product-copy .scope { font-size:12px; }
.portfolio .product-copy .text-link { margin-top:8px; }
.portfolio .postcanary-workflow { background:#ede9dc; padding:32px; }
.portfolio .postcard { background:var(--paper); border:1px solid #c5c0ae; display:grid; grid-template-columns:1fr 1fr; padding:20px; gap:20px; transform:rotate(-3deg); max-width:400px; margin:4px auto 30px; }
.portfolio .postcard-art { background:#d5dfce; display:flex; align-items:center; }
.portfolio .postcard-art svg { width:100%; fill:none; stroke:var(--green); stroke-width:2; }
.portfolio .postcard-address { border-left:1px solid #cbcdbf; padding-left:16px; }
.portfolio .postcard-address span { display:block; width:22px; height:26px; border:1px dashed #94a48f; margin:0 0 22px auto; }
.portfolio .postcard-address i { display:block; height:1px; background:#b4bcae; margin-top:10px; }
.portfolio .postcanary-workflow ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:16px; font-size:12px; }
.portfolio .postcanary-workflow li { border-top:1px solid #bdbba9; padding-top:12px; }
.portfolio .postcanary-workflow b { display:block; color:var(--green); font-size:12px; margin-bottom:4px; }
@media(max-width:1000px) { .portfolio .product-heading,.portfolio .product-body { gap:30px; } }
@media(max-width:700px) {
.portfolio .product-feature { padding-bottom:55px; }
.portfolio .product-heading,.portfolio .product-body { grid-template-columns:1fr; gap:22px; }
.portfolio .product-heading { padding-top:30px; }
.portfolio .product-heading .project-type { margin:0; }
.portfolio .product-heading h2 { font-size:48px; letter-spacing:-2px; }
.portfolio .product-deck { font-size:25px; }
.portfolio .product-body { margin-top:28px; gap:30px; }
.portfolio .product-copy>p { font-size:15px; }
.portfolio .product-copy>p:first-child { font-size:19px; }
.portfolio .postcanary-workflow { padding:24px; }
.portfolio .postcard { padding:14px; gap:12px; }
}

/* Creative pipeline schematic: abstract ad frames, no client artwork. */
.portfolio .creative-steps { display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:12px; }
.portfolio .creative-steps span { flex:1; text-align:center; padding:8px 4px; border-top:1px solid #94a48f; border-bottom:1px solid #94a48f; }
.portfolio .creative-steps i { font-style:normal; color:var(--green); }
.portfolio .ad-frames { display:flex; justify-content:center; align-items:flex-end; gap:16px; margin-top:26px; }
.portfolio .ad-frame { position:relative; width:86px; aspect-ratio:4/5; background:var(--paper); border:1px solid #a9b8a6; padding:8px; display:flex; flex-direction:column; gap:5px; }
.portfolio .ad-frame.tall { width:72px; aspect-ratio:9/16; }
.portfolio .ad-frame b { display:block; flex:1; background:#d2ddcd; }
.portfolio .ad-frame i { display:block; height:3px; background:#adbba9; }
.portfolio .ad-frame i+i { width:65%; }
.portfolio .ad-frame em { display:block; height:9px; width:55%; background:var(--green); }
.portfolio .ad-frame .hold { position:absolute; top:-10px; right:-14px; background:var(--ink); color:var(--paper); font-size:12px; font-weight:700; line-height:1; padding:5px 7px; }

/* Own stores: three systems, no store names. */
.portfolio .stores { padding:0 0 90px; }
.portfolio .stores-heading { border-top:1px solid var(--ink); padding-top:38px; display:grid; grid-template-columns:1.35fr 1fr; gap:12px 60px; align-items:end; }
.portfolio .stores-heading .project-type { grid-column:1/-1; }
.portfolio .stores-heading h2 { font-size:clamp(36px,3.8vw,52px); line-height:1.15; letter-spacing:-2px; font-weight:500; }
.portfolio .stores-heading>p:last-child { color:var(--muted); font-size:16px; max-width:480px; }
.portfolio .store-systems { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:44px; }
.portfolio .store-systems article { border-top:1px solid var(--line); padding-top:20px; }
.portfolio .store-systems span { display:block; font-size:12px; font-weight:700; color:var(--green); }
.portfolio .store-systems h3 { font-size:22px; line-height:1.3; font-weight:500; letter-spacing:-.5px; margin:8px 0 12px; }
.portfolio .store-systems p { font-size:15px; color:var(--muted); }
@media(max-width:1000px) { .portfolio .stores-heading { gap:30px; } .portfolio .store-systems { gap:24px; } }
@media(max-width:700px) {
.portfolio .stores { padding-bottom:55px; }
.portfolio .stores-heading { grid-template-columns:1fr; gap:18px; padding-top:30px; }
.portfolio .stores-heading .project-type { margin:0; }
.portfolio .stores-heading h2 { font-size:36px; letter-spacing:-1.5px; }
.portfolio .stores-heading>p:last-child { font-size:15px; }
.portfolio .store-systems { grid-template-columns:1fr; margin-top:30px; }
}
@media(max-width:400px) {
.portfolio .creative-steps { gap:3px; }
.portfolio .creative-steps span { padding-inline:1px; letter-spacing:-.2px; }
.portfolio .ad-frames { gap:12px; }
}
.portfolio .project-copy>p:not(.project-type)+p { margin-top:12px; }

/* Training formats: 1:1, group, company. */
.portfolio .training-formats { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.portfolio .training-formats article { border-top:1px solid var(--line); padding-top:20px; }
.portfolio .training-formats span { display:block; font-size:12px; font-weight:700; color:var(--green); }
.portfolio .training-formats h3 { font-size:22px; line-height:1.3; letter-spacing:-.5px; margin:8px 0 12px; }
.portfolio .training-formats p { font-size:15px; color:var(--muted); }
@media(max-width:1000px) { .portfolio .training-formats { gap:24px; } }
@media(max-width:700px) { .portfolio .training-formats { grid-template-columns:1fr; } }

/* Company brain: proof on the left, qualities on the right. */
.portfolio .brain { padding:0 0 90px; }
.portfolio .brain-heading { border-top:1px solid var(--ink); padding-top:38px; display:grid; grid-template-columns:1.35fr 1fr; gap:12px 60px; align-items:end; }
.portfolio .brain-heading .project-type { grid-column:1/-1; }
.portfolio .brain-heading h2 { font-size:clamp(36px,3.8vw,52px); line-height:1.15; letter-spacing:-2px; font-weight:500; }
.portfolio .brain-heading>p:last-child { color:var(--muted); font-size:16px; max-width:500px; }
.portfolio .brain-body { display:grid; grid-template-columns:1.35fr 1fr; gap:60px; margin-top:44px; align-items:start; }
.portfolio .brain-body h3 { font-size:22px; line-height:1.3; font-weight:500; letter-spacing:-.5px; margin-bottom:8px; }
.portfolio .brain-body ul { list-style:none; padding:0; margin:0 0 28px; }
.portfolio .brain-builds li { border-top:1px solid var(--line); padding:16px 0; font-size:15px; color:var(--muted); }
.portfolio .brain-builds li:last-child { border-bottom:1px solid var(--line); }
.portfolio .brain-builds b { display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }
.portfolio .brain-traits { background:var(--soft); padding:30px 32px; }
.portfolio .brain-traits li { position:relative; padding:10px 0 10px 24px; font-size:15px; border-bottom:1px solid #cdd5ca; }
.portfolio .brain-traits li:before { content:'+'; position:absolute; left:0; color:var(--green); }
@media(max-width:1000px) { .portfolio .brain-heading,.portfolio .brain-body { gap:30px; } }
@media(max-width:700px) {
.portfolio .brain { padding-bottom:55px; }
.portfolio .brain-heading,.portfolio .brain-body { grid-template-columns:1fr; }
.portfolio .brain-heading { gap:18px; padding-top:30px; }
.portfolio .brain-heading .project-type { margin:0; }
.portfolio .brain-heading h2 { font-size:36px; letter-spacing:-1.5px; }
.portfolio .brain-heading>p:last-child { font-size:15px; }
.portfolio .brain-body { margin-top:30px; gap:32px; }
.portfolio .brain-traits { padding:24px 20px; }
}