@font-face {
      font-family: "Tilda Sans";
      src: url("https://static.tildacdn.com/fonts/tildasans/TildaSans-VF.woff2") format("woff2");
      font-style: normal;
      font-weight: 100 900;
      font-display: swap;
    }

    :root {
      --red: #bd2207;
      --dark: #1c1c1c;
      --white: #fff;
      --guide: #d32719;
      --muted: #b1b0b0;
      --content: 1400px;
      --gap: 32px;
      --section-pad: 40px;
      --hero-h: 851px;
      --top-strip: 55px;
      --visible: 4;
      --guide-left: max(calc((100vw - var(--content)) / 2), 20px);
      --guide-right: var(--guide-left);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--white);
      background: var(--dark);
      font-family: "Tilda Sans", Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    h1,h2,h3,p,ul { margin: 0; }
    ul { padding-left: 1.18em; }

    .top-strip { height: 60px; background: var(--dark); }
    .shell { width: min(var(--content), calc(100% - 40px)); margin-inline: auto; }

    /* HERO */
    .hero {
      position: relative;
      height: var(--hero-h);
      overflow: hidden;
      background: var(--red);
      isolation: isolate;
    }
    /*
      Направляющие hero разделены на два слоя намеренно:
      верхние горизонтали проходят ЗА портретом, а вертикали и
      нижняя desktop-линия — ПЕРЕД ним. Все координаты завязаны
      на те же --guide-left / --guide-right, что и текст и метаданные.
    */
    .hero-guides-back,
    .hero-guides-front {
      position:absolute;
      inset:0;
      width:100%;
      pointer-events:none;
    }
    .hero-guides-back { z-index:2; }
    .hero-guides-front { z-index:4; }
    .hero-guides-back::before,
    .hero-guides-back::after,
    .hero-lower-line {
      content:"";
      position:absolute;
      left:0;
      right:0;
      height:1px;
      background:var(--guide);
    }
    .hero-guides-back::before { top:36px; }
    .hero-guides-back::after { top:49px; }
    .hero-lower-line { bottom:85px; }
    .hero-guide-v {
      position:absolute;
      top:0;
      bottom:0;
      width:1px;
      background:var(--guide);
    }
    .hero-guide-v.left { left:var(--guide-left); }
    .hero-guide-v.right { right:var(--guide-right); }

    .hero-meta {
      position: absolute;
      inset-inline: 0;
      top: 36px;
      z-index: 6;
      pointer-events: none;
    }
    .hero-meta-inner {
      width: auto;
      margin-left: var(--guide-left);
      margin-right: var(--guide-right);
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 14px;
    }
    .hero-meta img { width: 25px; height: 13px; object-fit: contain; }
    .hero-meta span {
      font-size: 14px;
      line-height: 1.2;
      font-weight: 400;
      white-space: nowrap;
    }
    .meta-mobile { display: none; }

    .hero-brand {
      position: absolute;
      width: min(953px, 52vw);
      left: calc(50% - 520px);
      top: 82px;
      z-index: 1;
      user-select: none;
      pointer-events: none;
    }
    .hero-portrait {
      position: absolute;
      height: 100%;
      width: auto;
      max-width: none;
      left: calc(50% - 242px);
      top: 0;
      z-index: 3;
      user-select: none;
      pointer-events: none;
      --portrait-shift-x: 0px;
      --portrait-shift-y: 0px;
      transform: translate3d(var(--portrait-shift-x), var(--portrait-shift-y), 0);
      transform-origin: 50% 58%;
      will-change: transform;
    }

    .hero-copy {
      position: absolute;
      left: var(--guide-left);
      bottom: 85px;
      width: min(900px, calc(100vw - 40px));
      z-index: 5;
    }
    .hero-intro {
      position: relative;
      z-index: 6;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .hero-title {
      position: relative;
      z-index: 6;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 80px;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .hero-title .break-tablet { display: none; }
    .hero-description {
      position: relative;
      z-index: 6;
      max-width: 760px;
      margin-top: 32px;
      font-size: 18px;
      line-height: 1.25;
      font-weight: 400;
    }
    .hero-actions {
      position: relative;
      z-index: 6;
      display: flex;
      gap: 30px;
      align-items: center;
      margin-top: 32px;
    }
    .asset-button {
      display: inline-block;
      line-height: 0;
      border: 0;
      padding: 0;
      background: none;
      cursor: pointer;
    }
    .asset-button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

    /* Main CTA states: second visual slides in from the left. */
    .wipe-button {
      position: relative;
      display: inline-block;
      height: 50px;
      overflow: hidden;
      line-height: 0;
      flex: 0 0 auto;
      transition: transform .14s ease;
    }
    .wipe-button.projects { width: 233px; }
    .wipe-button.cv { width: 192px; }
    .wipe-button > img,
    .wipe-button .wipe-layer img {
      display:block;
      height:50px;
      width:auto;
      max-width:none;
    }
    .wipe-layer {
      position:absolute;
      inset:0 auto 0 0;
      width:0;
      overflow:hidden;
      pointer-events:none;
      transition:width .28s cubic-bezier(.22,1,.36,1);
    }
    .wipe-button:hover .wipe-layer,
    .wipe-button:focus-visible .wipe-layer,
    .wipe-button.touch-active .wipe-layer,
    .wipe-button:active .wipe-layer { width:100%; }
    .wipe-button:active,
    .wipe-button.touch-active { transform:scale(.975); }
    .cv-hover-text { background:#fff; color:var(--dark); line-height:1; }
    .cv-hover-inner {
      width:192px;
      height:50px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:18px;
      font-size:18px;
      line-height:1;
      font-weight:700;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .cv-hover-arrow { font-size:17px; font-weight:700; transform:translateY(-1px); }

    /* Entrance motion: the page is deliberately "assembled" in stages. */
    .hero-guides-back::before,
    .hero-guides-back::after,
    .hero-lower-line {
      transform:scaleX(0);
      transform-origin:left center;
      animation:guide-x .72s cubic-bezier(.22,1,.36,1) forwards;
    }
    .hero-guides-back::after { animation-delay:.10s; }
    .hero-lower-line { transform-origin:right center; animation-delay:.18s; }
    .hero-guide-v {
      transform:scaleY(0);
      transform-origin:top center;
      animation:guide-y .78s cubic-bezier(.22,1,.36,1) .08s forwards;
    }

    .hero-brand {
      opacity:0;
      transform:translateX(-24px);
      animation:brand-in .48s cubic-bezier(.22,1,.36,1) .78s forwards;
    }
    .hero-brand-base { width:100%; height:auto; }
    .hero-brand-glitch {
      position:absolute;
      inset:0;
      background:url("../images/brand-distorted.webp") center / 100% 100% no-repeat;
      opacity:0;
      pointer-events:none;
      mix-blend-mode:screen;
    }
    .glitch-a {
      filter:drop-shadow(7px 0 0 rgba(0,255,255,.95));
      animation:glitch-a .72s steps(1,end) 1.08s 1;
    }
    .glitch-b {
      filter:drop-shadow(-7px 0 0 rgba(255,35,20,.95));
      animation:glitch-b .72s steps(1,end) 1.08s 1;
    }

    .hero-portrait {
      opacity:0;
      translate:0 28px;
      animation:portrait-in .72s cubic-bezier(.22,1,.36,1) 1.62s forwards;
    }

    /* Main message loads after the visual construction. */
    .hero-intro, .hero-title, .hero-description, .hero-actions, .hero-meta, .hero-year-bottom {
      opacity:0;
      translate:0 16px;
      animation:copy-in .52s cubic-bezier(.22,1,.36,1) forwards;
    }
    .hero-intro { animation-delay:2.12s; }
    .hero-title { animation-delay:2.26s; }
    .hero-description { animation-delay:2.45s; }
    .hero-actions { animation-delay:2.68s; }
    .hero-meta { animation-delay:2.92s; }
    .hero-year-bottom { animation-delay:2.98s; }

    @keyframes guide-x { to { transform:scaleX(1); } }
    @keyframes guide-y { to { transform:scaleY(1); } }
    @keyframes portrait-in { to { opacity:1; translate:0 0; } }
    @keyframes copy-in { to { opacity:1; translate:0 0; } }
    @keyframes brand-in { to { opacity:1; transform:translateX(0); } }
    @keyframes glitch-a {
      0%,100% { opacity:0; clip-path:inset(0 0 0 0); transform:translate(0); }
      12% { opacity:.9; clip-path:inset(8% 0 68% 0); transform:translate(13px,-2px); }
      28% { opacity:.75; clip-path:inset(44% 0 32% 0); transform:translate(-10px,1px); }
      43% { opacity:.95; clip-path:inset(70% 0 8% 0); transform:translate(16px,0); }
      58% { opacity:.7; clip-path:inset(24% 0 54% 0); transform:translate(-7px,2px); }
      74% { opacity:.85; clip-path:inset(53% 0 22% 0); transform:translate(9px,-1px); }
      88% { opacity:.45; clip-path:inset(12% 0 78% 0); transform:translate(-4px,0); }
    }
    @keyframes glitch-b {
      0%,100% { opacity:0; clip-path:inset(0 0 0 0); transform:translate(0); }
      12% { opacity:.65; clip-path:inset(67% 0 12% 0); transform:translate(-11px,1px); }
      28% { opacity:.9; clip-path:inset(20% 0 57% 0); transform:translate(14px,-1px); }
      43% { opacity:.6; clip-path:inset(48% 0 30% 0); transform:translate(-15px,0); }
      58% { opacity:.9; clip-path:inset(7% 0 72% 0); transform:translate(8px,-2px); }
      74% { opacity:.6; clip-path:inset(76% 0 6% 0); transform:translate(-9px,1px); }
      88% { opacity:.4; clip-path:inset(37% 0 45% 0); transform:translate(5px,0); }
    }

    /* Experience builds in: rule first, then label, cards, controls. */
    .section-marker { position:relative; border-top:0 !important; color:var(--red); }
    .section-marker::before {
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:0;
      height:1px;
      background:var(--red);
      transform:scaleX(1);
      transform-origin:left center;
    }
    .motion-ready .experience .section-marker::before { transform:scaleX(0); }
    .motion-ready .experience .section-marker span,
    .motion-ready .experience .job,
    .motion-ready .experience .experience-footer {
      opacity:0;
      transform:translateY(16px);
    }
    .motion-ready .experience.is-visible .section-marker::before {
      transform:scaleX(1);
      transition:transform 1.25s cubic-bezier(.22,1,.36,1) .48s;
    }
    .motion-ready .experience.is-visible .section-marker span,
    .motion-ready .experience.is-visible .job,
    .motion-ready .experience.is-visible .experience-footer {
      opacity:1;
      transform:translateY(0);
      transition:opacity .46s ease, transform .56s cubic-bezier(.22,1,.36,1);
    }
    .motion-ready .experience .section-marker span { transform:translateY(24px); }
    .motion-ready .experience.is-visible .section-marker span {
      transition:opacity .85s ease .5s, transform 1.05s cubic-bezier(.22,1,.36,1) .5s;
    }
    .motion-ready .experience.is-visible .job:nth-child(1) { transition-delay:.62s; }
    .motion-ready .experience.is-visible .job:nth-child(2) { transition-delay:.78s; }
    .motion-ready .experience.is-visible .job:nth-child(3) { transition-delay:.94s; }
    .motion-ready .experience.is-visible .job:nth-child(4) { transition-delay:1.10s; }
    .motion-ready .experience.is-visible .experience-footer { transition-delay:1.24s; }

    /* The TRGGR chapter assembles section by section as it enters the viewport. */
    @media (prefers-reduced-motion: no-preference) {
      .motion-ready .trggr-intro .section-marker::before {
        transform: scaleX(0);
      }
      .motion-ready .trggr-intro .section-marker span,
      .motion-ready .trggr-intro-copy,
      .motion-ready .trggr-intro-visual,
      .motion-ready .trggr-scene-brand,
      .motion-ready .trggr-scene-stage,
      .motion-ready .trggr-visual-system-overview .trggr-visual-system-title,
      .motion-ready .trggr-visual-system-overview .trggr-visual-system-elements,
      .motion-ready .trggr-visual-system-statement-copy,
      .motion-ready .trggr-visual-system-structure h2,
      .motion-ready .trggr-visual-system-logotype,
      .motion-ready .trggr-touchpoints-top .trggr-touchpoints-title,
      .motion-ready .trggr-touchpoints-top .trggr-touchpoints-showcase,
      .motion-ready .trggr-touchpoints-top .trggr-touchpoints-showcase-caption,
      .motion-ready .trggr-social-shell .trggr-social-track,
      .motion-ready .trggr-social-shell .trggr-social-caption,
      .motion-ready .trggr-social-shell .trggr-social-controls,
      .motion-ready .trggr-social-shell .trggr-touchpoints-outcome h2,
      .motion-ready .trggr-social-shell .trggr-touchpoints-outcome p,
      .motion-ready .trggr-social-shell .trggr-behance-link {
        opacity: 0;
        transform: translateY(18px);
      }

      .motion-ready .trggr-intro.is-visible .section-marker::before {
        transform: scaleX(1);
        transition: transform 1.25s cubic-bezier(.22,1,.36,1) .48s;
      }
      .motion-ready .trggr-intro.is-visible .section-marker span,
      .motion-ready .trggr-intro.is-visible .trggr-intro-copy,
      .motion-ready .trggr-intro.is-visible .trggr-intro-visual,
      .motion-ready .trggr-scene.is-visible .trggr-scene-brand,
      .motion-ready .trggr-scene.is-visible .trggr-scene-stage,
      .motion-ready .trggr-visual-system-overview.is-visible .trggr-visual-system-title,
      .motion-ready .trggr-visual-system-overview.is-visible .trggr-visual-system-elements,
      .motion-ready .trggr-visual-system-statement.is-visible .trggr-visual-system-statement-copy,
      .motion-ready .trggr-visual-system-structure.is-visible h2,
      .motion-ready .trggr-visual-system-structure.is-visible .trggr-visual-system-logotype,
      .motion-ready .trggr-touchpoints-top.is-visible .trggr-touchpoints-title,
      .motion-ready .trggr-touchpoints-top.is-visible .trggr-touchpoints-showcase,
      .motion-ready .trggr-touchpoints-top.is-visible .trggr-touchpoints-showcase-caption,
      .motion-ready .trggr-social-shell.is-visible .trggr-social-track,
      .motion-ready .trggr-social-shell.is-visible .trggr-social-caption,
      .motion-ready .trggr-social-shell.is-visible .trggr-social-controls,
      .motion-ready .trggr-social-shell.is-visible .trggr-touchpoints-outcome h2,
      .motion-ready .trggr-social-shell.is-visible .trggr-touchpoints-outcome p,
      .motion-ready .trggr-social-shell.is-visible .trggr-behance-link {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .48s ease, transform .62s cubic-bezier(.22,1,.36,1);
      }

      .motion-ready .trggr-intro .section-marker span { transform: translateY(24px); }
      .motion-ready .trggr-intro.is-visible .section-marker span {
        transition: opacity .85s ease .5s, transform 1.05s cubic-bezier(.22,1,.36,1) .5s;
      }
      .motion-ready .trggr-intro.is-visible .trggr-intro-copy { transition-delay: .56s; }
      .motion-ready .trggr-intro.is-visible .trggr-intro-visual { transition-delay: .72s; }
      .motion-ready .trggr-scene.is-visible .trggr-scene-brand { transition-delay: .04s; }
      .motion-ready .trggr-scene.is-visible .trggr-scene-stage { transition-delay: .18s; }
      .motion-ready .trggr-visual-system-overview.is-visible .trggr-visual-system-elements { transition-delay: .16s; }
      .motion-ready .trggr-visual-system-statement.is-visible .trggr-visual-system-statement-copy { transition-delay: .08s; }
      .motion-ready .trggr-visual-system-structure.is-visible .trggr-visual-system-logotype { transition-delay: .16s; }
      .motion-ready .trggr-touchpoints-top.is-visible .trggr-touchpoints-showcase { transition-delay: .15s; }
      .motion-ready .trggr-touchpoints-top.is-visible .trggr-touchpoints-showcase-caption { transition-delay: .26s; }
      .motion-ready .trggr-social-shell.is-visible .trggr-social-caption { transition-delay: .12s; }
      .motion-ready .trggr-social-shell.is-visible .trggr-social-controls { transition-delay: .22s; }
      .motion-ready .trggr-social-shell.is-visible .trggr-touchpoints-outcome h2 { transition-delay: .30s; }
      .motion-ready .trggr-social-shell.is-visible .trggr-touchpoints-outcome p { transition-delay: .40s; }
      .motion-ready .trggr-social-shell.is-visible .trggr-behance-link { transition-delay: .50s; }
    }

    .hero-year-bottom {
      position: absolute;
      bottom: 83px;
      right: var(--guide-right);
      z-index: 6;
      font-size: 14px;
      line-height: 1.2;
      white-space: nowrap;
    }

    /* EXPERIENCE */
    .experience {
      background: var(--dark);
      padding: var(--section-pad) 0 40px;
      min-height: 767px;
    }
    .experience-shell { width: min(var(--content), calc(100% - 40px)); margin-inline: auto; position:relative; }
    .section-marker {
      padding-top: 12px;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
    }
    .experience-carousel { margin-top: 78px; }
    .experience-track {
      display: flex;
      gap: var(--gap);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scrollbar-width: none;
      /* Reserve real breathing room for the hover panel without moving the text grid.
         The negative margin keeps the first/last text edges on the original columns. */
      padding: 14px;
      margin: -14px;
    }
    .experience-track::-webkit-scrollbar { display: none; }
    .job {
      position: relative;
      flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
      min-width: 0;
      isolation: isolate;
      transition: transform .24s cubic-bezier(.22,1,.36,1);
    }
    .job::before {
      content:"";
      position:absolute;
      inset:-14px;
      z-index:-1;
      background:rgba(255,255,255,0);
      border:1px solid rgba(255,255,255,0);
      transition:background-color .24s ease, border-color .24s ease, box-shadow .24s ease;
      pointer-events:none;
    }
    @media (hover:hover) {
      .job:hover { transform:translateY(-2px); }
      .job:hover::before {
        background:rgba(255,255,255,.045);
        border-color:rgba(255,255,255,.08);
        box-shadow:0 10px 34px rgba(0,0,0,.12);
      }
    }
    .job h2 {
      font-size: 24px;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
    }
    .job-meta {
      margin-top: 12px;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 400;
    }
    .job-role {
      margin-top: 8px;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 700;
    }
    .job-copy {
      margin-top: 32px;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 400;
    }
    .job-copy ul { margin-top: 0; }
    .experience-footer {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: var(--gap);
      align-items: end;
      margin-top: 42px;
      min-height: 50px;
    }
    .cv-desktop { grid-column: 4; justify-self: end; }
    .cv-responsive { display: none; }
    .carousel-controls { display: none; }
    .carousel-arrows { display: flex; gap: 12px; justify-content: flex-end; }
    .arrow-button {
      width:50px;
      height:50px;
      border:0;
      padding:0;
      background:transparent;
      cursor:pointer;
      line-height:0;
      transition:background-color .2s ease, transform .12s ease;
    }
    .arrow-button img { width:50px; height:50px; transition:filter .2s ease, opacity .2s ease; }
    .arrow-button.next img { transform:rotate(180deg); }
    @media (hover:hover) {
      .arrow-button:hover:not(:disabled) { background:#fff; }
      .arrow-button:hover:not(:disabled) img { filter:invert(1); }
    }
    .arrow-button:active:not(:disabled),
    .arrow-button.touch-active:not(:disabled) { background:#fff; transform:scale(.94); }
    .arrow-button:active:not(:disabled) img,
    .arrow-button.touch-active:not(:disabled) img { filter:invert(1); }
    .arrow-button:disabled { cursor:default; }
    .arrow-button:disabled img { opacity:.38; }
    .arrow-button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
    .carousel-count {
      width:112px;
      margin-top: 12px;
      text-align: center;
      font-size: 14px;
      line-height: 1.2;
    }

    /* Large desktop / 2K */
    @media (min-width: 1921px) {
      :root { --content: min(1680px, calc(100vw - 240px)); --hero-h: clamp(851px, 44.3vw, 1080px); --trggr-scene-max:2599px; }
      .hero-brand { width: min(1100px, 48vw); left: calc(50% - 590px); top: 9%; }
      .hero-copy { left: var(--guide-left); bottom: 10%; }
      .hero-title { font-size: clamp(80px, 4.2vw, 102px); }
      .hero-portrait { height: 100%; left: calc(50% - 260px); }
      .experience { min-height: 800px; }
    }

    /* iPad Pro / tablets landscape-ish: 3 cards */
    @media (max-width: 1199px) {
      :root { --top-strip:50px; --hero-h:794px; --visible:3; --section-pad:40px; --guide-left:60px; --guide-right:60px; }
      .shell { width:calc(100% - 120px); }
      .experience-shell { width:calc(100% - 110px); min-height:548px; display:flex; flex-direction:column; }

      /* В адаптивах эта пара линий находится на одинаковой высоте. */
      .hero-guides-back::before { top:59px; }
      .hero-guides-back::after { top:72px; }
      .hero-meta { top:59px; }
      /* Нижняя горизонталь есть только в desktop-макете. */
      .hero-lower-line { display:none; }

      .hero-brand { width:800px; left:100px; top:112px; }
      .hero-portrait { height:100%; left:210px; top:44px; }
      .hero-copy { left:var(--guide-left); bottom:131px; width:560px; }
      .hero-title { font-size:52px; white-space:normal; max-width:520px; }
      .hero-title .break-tablet { display:block; }
      .hero-intro { font-size:18px; margin-bottom:4px; }
      .hero-description { max-width:342px; margin-top:24px; font-size:16px; }
      .hero-actions { margin-top:32px; }
      .hero-actions .cv-hero { display:none; }
      .hero-year-bottom { display:none; }
      .meta-desktop { display:none; }
      .meta-mobile { display:inline; }

      /* 844 → 1552 = 708 px ровно по макетам. */
      .experience { min-height:628px; padding:40px 0; }
      .experience-carousel { margin-top:48px; }
      /* Footer держится в нижней зоне макета, но никогда не заезжает на текст. */
      .experience-footer {
        position:static;
        grid-template-columns:1fr auto;
        align-items:start;
        margin-top:auto;
        padding-top:32px;
      }
      .cv-desktop { display:none; }
      .cv-responsive { display:block; grid-column:1; justify-self:start; }
      .carousel-controls { display:block; grid-column:2; justify-self:end; }
    }

    /* iPad mini: 2 cards */
    @media (max-width: 900px) {
      :root { --visible:2; --guide-left:80px; --guide-right:80px; }
      .shell { width:calc(100% - 160px); }
      .experience-shell { width:calc(100% - 154px); }
      .hero-brand { display:none; }
      .hero-portrait { left:0; }
      .hero-copy { left:var(--guide-left); bottom:131px; width:560px; }
      .hero-title { font-size:52px; max-width:520px; }
      .hero-intro { font-size:18px; }
      .hero-description { max-width:342px; }
      .job h2 { font-size:20px; }
      .job-meta, .job-role { font-size:12px; }
      .job-copy { margin-top:24px; font-size:16px; }
    }

    /* phones: 1 card */
    @media (max-width: 600px) {
      :root { --visible:1; --gap:24px; --section-pad:30px; --guide-left:21px; --guide-right:21px; --hero-h:calc(100svh - 60px); }
      .shell { width:calc(100% - 42px); }
      .experience-shell { width:calc(100% - 50px); }
      .experience { min-height:0; padding:var(--section-pad) 0; }
      .hero-portrait { left:-155px; }
      .hero-copy { left:var(--guide-left); right:var(--guide-right); width:auto; bottom:131px; }
      .hero-intro { font-size:18px; margin-bottom:4px; white-space:nowrap; }
      .hero-title { font-size:52px; line-height:1.2; max-width:350px; }
      .hero-description { margin-top:24px; max-width:342px; font-size:16px; line-height:1.4; }
      .hero-actions { margin-top:32px; }
      .hero-actions .asset-button img { height:50px; }
      .section-marker { font-size:12px; }
      .job h2 { font-size:18px; line-height:1.2; }
      .job-meta, .job-role { font-size:12px; }
      .job-copy { margin-top:24px; font-size:16px; }
      .carousel-count { font-size:12px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      .hero-guides-back::before, .hero-guides-back::after, .hero-lower-line, .hero-guide-v,
      .hero-brand, .hero-brand-glitch, .hero-portrait, .hero-meta, .hero-intro, .hero-title, .hero-description, .hero-actions, .hero-year-bottom {
        animation:none !important;
        opacity:1 !important;
        transform:none !important;
        translate:none !important;
        filter:none !important;
      }
      .motion-ready .experience .section-marker::before,
      .motion-ready .experience .section-marker span,
      .motion-ready .experience .job,
      .motion-ready .experience .experience-footer {
        opacity:1; transform:none; transition:none;
      }
      .wipe-layer { transition:none; }
    }


    /* Pointer parallax: desktop/fine pointers only; JS updates the variables. */
    @media (prefers-reduced-motion: reduce) {
      .hero-portrait {
        --portrait-shift-x: 0px !important;
        --portrait-shift-y: 0px !important;
        transform: translate3d(0,0,0) !important;
      }
    }

    /* TRGGR / BLOCK 05 ---------------------------------------------------
       Brand touchpoints, a self-nudging site preview and social carousel. */
    .trggr-touchpoints {
      overflow: hidden;
      background: #f3f1ec;
      color: #1c1c1c;
    }
    .trggr-touchpoints-top {
      padding-top: 40px;
    }
    .trggr-touchpoints-shell,
    .trggr-social-shell {
      width: min(73.958333vw, 1420px);
      margin-inline: auto;
    }
    .trggr-touchpoints-title,
    .trggr-touchpoints-outcome h2 {
      margin: 0;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
    }
    .trggr-touchpoints-title {
      font-size: 60px;
      line-height: 1.1;
      white-space: nowrap;
    }
    .trggr-touchpoints-break-mobile,
    .trggr-touchpoints-break-tablet {
      display: none;
    }
    .trggr-touchpoints-showcase {
      display: grid;
      grid-template-columns: 1fr 1fr;
      margin-top: 40px;
      overflow: visible;
      align-items: start;
    }
    .trggr-touchpoints-media {
      display: grid;
      min-width: 0;
      margin: 0;
      grid-template-rows: min(56.458333vw, 1084px) auto;
    }
    .trggr-media-caption {
      display: flex;
      min-width: 0;
      margin-top: 20px;
      padding-top: 12px;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      border-top: 1px solid #b7b4ad;
      color: #696761;
      font-size: 14px;
      line-height: 1.2;
    }
    .trggr-media-caption span:last-child {
      flex: 0 0 auto;
      text-align: right;
      white-space: nowrap;
    }
    .trggr-touchpoints-showcase-caption { width: 100%; }
    .trggr-touchpoints-blue {
      position: relative;
      min-width: 0;
      overflow: hidden;
      background: #b6d9fa;
    }
    .trggr-touchpoints-piece {
      position: absolute;
      height: auto;
      max-width: none;
    }
    .trggr-touchpoints-piece-about {
      top: 4.4%;
      left: 4.2%;
      width: 84%;
      transform: rotate(-9deg);
      transform-origin: 50% 50%;
    }
    .trggr-touchpoints-piece-moments {
      top: 31.5%;
      left: 10.5%;
      width: 84%;
      transform: rotate(7deg);
      transform-origin: 50% 50%;
    }
    .trggr-touchpoints-piece-type {
      top: 71.2%;
      left: 4.3%;
      width: 82%;
    }
    .trggr-site-preview {
      position: relative;
      min-width: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-color: #6a6a6a #e6e3dc;
      scrollbar-width: thin;
      background: #f3f1ec;
      cursor: ns-resize;
    }
    .trggr-site-preview::-webkit-scrollbar { width: 8px; }
    .trggr-site-preview::-webkit-scrollbar-track { background: #e6e3dc; }
    .trggr-site-preview::-webkit-scrollbar-thumb {
      border: 2px solid #e6e3dc;
      border-radius: 999px;
      background: #6a6a6a;
    }
    .trggr-site-preview:focus-visible {
      outline: 2px solid #1c1c1c;
      outline-offset: -2px;
    }
    .trggr-site-preview img {
      display: block;
      width: 100%;
      height: auto;
      max-width: none;
    }

    .trggr-social-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: calc((100% - 72px) / 4);
      gap: 24px;
      margin-top: 40px;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .trggr-social-track::-webkit-scrollbar { display: none; }
    .trggr-social-card {
      margin: 0;
      scroll-snap-align: start;
    }
    .trggr-social-card img {
      display: block;
      width: 100%;
      height: auto;
    }
    .trggr-social-controls {
      display: flex;
      float: right;
      width: max-content;
      margin-left: auto;
      flex-direction: column;
      align-items: flex-end;
      margin-top: 0;
    }
    .trggr-social-arrows {
      display: flex;
      gap: 12px;
    }
    .trggr-social-arrow {
      display: grid;
      width: 48px;
      height: 48px;
      padding: 0;
      place-items: center;
      border: 1px solid #a9a7a2;
      border-radius: 0;
      color: #1c1c1c;
      background: transparent;
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
    }
    .trggr-social-arrow:hover,
    .trggr-social-arrow:focus-visible {
      color: #f3f1ec;
      background: #1c1c1c;
      outline: none;
    }
    .trggr-social-arrow:disabled {
      opacity: .32;
      cursor: default;
      color: #1c1c1c;
      background: transparent;
    }
    .trggr-social-count {
      width: 100%;
      min-width: 0;
      margin-top: 10px;
      text-align: right;
      font-size: 14px;
      line-height: 1;
    }
    .trggr-touchpoints-outcome {
      position: relative;
      z-index: 3;
      margin-top: 40px;
      padding-bottom: 40px;
    }
    .trggr-touchpoints-outcome h2 {
      max-width: none;
      font-size: 60px;
      line-height: 1.1;
    }
    .trggr-touchpoints-outcome h2 span {
      display: block;
      white-space: nowrap;
    }
    .trggr-touchpoints-outcome p {
      width: 760px;
      max-width: 100%;
      margin: 48px 0 0;
      font-size: 18px;
      line-height: 1.4;
    }
    .trggr-touchpoints-outcome-mobile { display: none; }
    .trggr-behance-link {
      display: inline-flex;
      min-width: 250px;
      min-height: 52px;
      margin-top: 32px;
      padding: 0 26px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      border: 1px solid #77746f;
      font-size: 14px;
      line-height: 1;
      text-transform: uppercase;
      transition: color .2s ease, background-color .2s ease;
    }
    .trggr-behance-link:hover,
    .trggr-behance-link:focus-visible {
      color: #f3f1ec;
      background: #1c1c1c;
      outline: none;
    }

    /* 1024 / large tablet. */
    @media (max-width: 1199px) {
      .trggr-touchpoints-top { padding-top: 58px; }
      .trggr-touchpoints-shell,
      .trggr-social-shell { width: 90%; }
      .trggr-touchpoints-title {
        font-size: 40px;
        line-height: 1.1;
      }
      .trggr-touchpoints-showcase {
        margin-top: 40px;
      }
      .trggr-touchpoints-media {
        grid-template-rows: 69.628906vw auto;
      }
      .trggr-touchpoints-piece-about {
        top: 4%;
        left: 3.5%;
        width: 86%;
      }
      .trggr-touchpoints-piece-moments {
        top: 30%;
        left: 10%;
        width: 87%;
      }
      .trggr-touchpoints-piece-type {
        top: 70%;
        left: 3.5%;
        width: 84%;
      }
      .trggr-social-track {
        grid-auto-columns: calc((100% - 48px) / 3);
        margin-top: 40px;
      }
      .trggr-social-controls { float: right; margin-top: 0; }
      .trggr-touchpoints-outcome {
        margin-top: 30px;
      }
      .trggr-touchpoints-outcome h2 { font-size: 36px; }
      .trggr-touchpoints-outcome p {
        width: 520px;
        margin-top: 22px;
        font-size: 13px;
      }
      .trggr-behance-link {
        min-width: 220px;
        min-height: 50px;
        margin-top: 40px;
        font-size: 13px;
      }
    }

    /* 744 / narrow tablet: the long site moves out of the composition. */
    @media (max-width: 900px) {
      .trggr-touchpoints-top {
        padding-top: 25px;
        padding-bottom: 40px;
        background: #b6d9fa;
      }
      .trggr-touchpoints-shell,
      .trggr-social-shell {
        width: 78.629032%;
      }
      .trggr-touchpoints-title {
        font-size: 36px;
        line-height: 1.05;
        white-space: normal;
      }
      .trggr-touchpoints-break-tablet { display: block; }
      .trggr-touchpoints-showcase {
        display: block;
        height: auto;
        margin-top: 40px;
        overflow: visible;
      }
      .trggr-touchpoints-blue {
        overflow: visible;
        background: transparent;
      }
      .trggr-touchpoints-media {
        display: block;
      }
      .trggr-touchpoints-site-media { display: none; }
      .trggr-touchpoints-piece {
        position: static;
        display: block;
        width: 100%;
        max-width: 100%;
        transform: none;
      }
      .trggr-touchpoints-piece + .trggr-touchpoints-piece { margin-top: 8px; }
      .trggr-social-track {
        grid-auto-columns: calc((100% - 24px) / 2);
        margin-top: 0;
      }
      .trggr-social-controls { float: none; margin-top: 4px; }
      .trggr-social-arrow {
        width: 48px;
        height: 48px;
      }
      .trggr-social-count {
        font-size: 13px;
      }
      .trggr-touchpoints-outcome {
        margin-top: 46px;
      }
      .trggr-touchpoints-outcome h2 {
        font-size: 36px;
      }
      .trggr-touchpoints-outcome-desktop { display: none; }
      .trggr-touchpoints-outcome-mobile { display: block; }
      .trggr-touchpoints-outcome p {
        width: 540px;
        max-width: 100%;
        margin-top: 22px;
        font-size: 13px;
        line-height: 1.45;
      }
      .trggr-behance-link {
        min-width: 250px;
        min-height: 50px;
        margin-top: 35px;
        font-size: 13px;
      }
    }

    /* 390 / mobile. */
    @media (max-width: 600px) {
      .trggr-touchpoints-top {
        padding-top: 30px;
        padding-bottom: 30px;
      }
      .trggr-touchpoints-shell,
      .trggr-social-shell {
        width: calc(100% - 40px);
      }
      .trggr-touchpoints-title {
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
      }
      .trggr-touchpoints-break-mobile { display: block; }
      .trggr-touchpoints-showcase { margin-top: 30px; }
      .trggr-touchpoints-piece + .trggr-touchpoints-piece { margin-top: 8px; }
      .trggr-social-track {
        grid-auto-columns: 100%;
        margin-top: 0;
      }
      .trggr-social-controls { margin-top: 12px; }
      .trggr-media-caption {
        gap: 10px;
        margin-top: 12px;
        font-size: 12px;
      }
      .trggr-social-count { display: block; }
      .trggr-touchpoints-outcome {
        margin-top: 30px;
      }
      .trggr-touchpoints-outcome h2 {
        max-width: none;
        font-size: clamp(26px, 7.5vw, 29px);
        line-height: 1.06;
      }
      .trggr-touchpoints-outcome p {
        width: 330px;
        max-width: 100%;
        margin-top: 32px;
        font-size: 16px;
        line-height: 1.4;
      }
      .trggr-behance-link {
        min-width: 250px;
        min-height: 52px;
        margin-top: 32px;
      }
      .trggr-touchpoints-outcome { padding-bottom: 30px; }
    }

    /* TRGGR / BLOCK 01 ---------------------------------------------------
       The marker reuses the approved Experience component. The editorial
       composition below follows the dedicated 1920 / 1024 / 744 / 390
       layouts instead of inheriting a generic card/grid treatment. */
    .trggr-intro {
      background: #f0efec;
      color: var(--dark);
      padding: 40px 0;
      overflow: hidden;
    }
    .trggr-shell {
      width: min(var(--content), calc(100% - 40px));
      margin-inline: auto;
    }
    .trggr-marker::before { background: var(--red); }

    .trggr-intro-layout {
      display: grid;
      grid-template-columns: 470px minmax(0, 1fr);
      gap: 24px;
      align-items: center;
      margin-top: 40px;
    }
    .trggr-intro-copy { min-width: 0; }
    .trggr-intro-title {
      max-width: 470px;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 60px;
      line-height: 1.1;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .trggr-intro-title span {
      display: block;
      white-space: nowrap;
    }
    .trggr-intro-text {
      max-width: 470px;
      margin-top: 48px;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 400;
    }
    .trggr-intro-visual {
      position: relative;
      margin: 0;
      min-width: 0;
    }
    .trggr-intro-visual-art {
      position: relative;
      /* Visible alpha bounds of Digital System: x 46..1000, y 78..653.
         The wrapper therefore represents only the 954 × 575 opaque scene. */
      aspect-ratio: 954 / 575;
    }
    .trggr-intro-visual-art img {
      position: absolute;
      display: block;
      width: 113.312%; /* 1081 / 954 */
      height: auto;
      max-width: none;
      left: -4.822%;   /* 46 / 954 */
      top: -13.565%;   /* 78 / 575 */
      object-fit: contain;
    }

    /* 1024-ish state: mobile typography/spacing, desktop composition. */
    @media (max-width: 1199px) {
      .trggr-shell { width: calc(100% - 110px); }
      .trggr-intro-layout {
        grid-template-columns: 354px minmax(0, 1fr);
        gap: 20px;
        margin-top: 48px;
      }
      .trggr-intro-title {
        max-width: 354px;
        font-size: 40px;
        line-height: 1.2;
      }
      .trggr-intro-text {
        max-width: 354px;
        margin-top: 32px;
        font-size: 16px;
        line-height: 1.4;
      }
    }

    /* 744-ish state: preserve two columns, but let the visual reach the
       outer screen margin exactly as in the approved layout. */
    @media (max-width: 900px) and (min-width: 601px) {
      .trggr-shell { width: calc(100% - 154px); }
      .trggr-intro-layout {
        width: calc(100% + 57px);
        grid-template-columns: 270px minmax(0, 1fr);
        gap: 20px;
      }
      .trggr-intro-title,
      .trggr-intro-text { max-width: 270px; }
      .trggr-intro-visual { width: calc(100% - 10px); justify-self: end; }
    }

    /* 390-ish state: the visual leads, then the copy flows below it. */
    @media (max-width: 600px) {
      .trggr-intro { padding: 30px 0; }
      .trggr-shell { width: calc(100% - 50px); }
      .trggr-intro-layout {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 0;
        margin-top: 30px;
      }
      .trggr-intro-visual {
        order: 1;
        align-self: flex-start;
        width: calc(100% + 28px);
        margin-left: -14px;
      }
      .trggr-intro-visual .trggr-media-caption {
        width: calc(100% - 28px);
        margin-inline: 14px;
      }
      .trggr-intro-copy {
        order: 2;
        width: 100%;
        margin-top: 24px;
      }
      .trggr-intro-title {
        max-width: 100%;
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
      }
      .trggr-intro-text {
        max-width: 100%;
        margin-top: 32px;
        font-size: 16px;
        line-height: 1.4;
      }
    }

    /* TRGGR / BLOCK 02 ---------------------------------------------------
       SVG-based composition: the TRGGR wordmark and the main figure scene
       are independent vector layers, so the desktop caption can be anchored
       to the scene itself. The role always stays exactly two lines. */
    .trggr-scene {
      /* Compensate the portrait's 32px transparent top and the wordmark's
         20px transparent bottom, so their visible edges overlap as drawn. */
      --scene-lift: calc(min(1.666666667vw, 32px) + var(--scene-brand-width) * 20 / 873);
      --scene-brand-width: min(46.25vw, 652px);
      --scene-brand-gap: 12px;
      position: relative;
      background: #f0efec;
      color: var(--dark);
      padding: 0 0 40px;
      /* Remove the SVG's transparent bottom canvas from the visual interval. */
      margin-bottom: max(-2.6041667vw, -50px);
      overflow: hidden;
    }
    .trggr-scene-shell {
      width: 100%;
      margin: 0 auto;
    }
    .trggr-scene-brand {
      width: var(--scene-brand-width);
      margin: 0 auto calc(0px - var(--scene-brand-gap) - var(--scene-lift));
    }
    .trggr-scene-brand img,
    .trggr-scene-stage,
    .trggr-scene-image {
      display: block;
      width: 100%;
    }
    .trggr-scene-brand img,
    .trggr-scene-image {
      height: auto;
    }
    .trggr-scene-image {
      /* Keep the approved 1920 × 1342 composition inside the expanded SVG.
         Its original artwork starts at x=350 on the new 2599px canvas. */
      aspect-ratio: 1920 / 1342;
      object-fit: cover;
      object-position: 51.54639175% 50%;
    }
    .trggr-scene-art {
      position: relative;
      width: 100%;
      margin: 0;
    }
    .trggr-scene-stage {
      position: relative;
      margin: 0;
    }
    .trggr-scene-role-anchor {
      position: absolute;
      right: var(--guide-right);
      bottom: 21.6%;
      z-index: 2;
      width: 0;
      height: 0;
    }
    .trggr-scene-role {
      position: absolute;
      left: 0;
      bottom: 0;
      display: inline-block;
      color: #f0efec;
      font-size: 14px;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
      white-space: nowrap;
      /* Approved positioning: keep this transform out of reveal animations. */
      transform: rotate(-90deg);
      transform-origin: 0 100%;
    }
    .trggr-scene-role span { display: block; }

    @media (min-width: 1921px) {
      /* Only large monitors show the expanded canvas without side cropping. */
      .trggr-scene-image { aspect-ratio: 2599 / 1342; object-fit: contain; }
      .trggr-scene { --scene-lift: calc(min(1.231242786vw, 32px) + var(--scene-brand-width) * 20 / 873); }
    }

    /* Tablet and mobile: move the caption below the artwork as one compact group. */
    @media (max-width: 1199px) {
      .trggr-scene {
        --scene-brand-width: min(calc(100vw - 286px), 518px);
        --scene-brand-gap: 8px;
        margin-bottom: 0;
      }
      .trggr-scene-brand {
        width: var(--scene-brand-width);
      }
      .trggr-scene-role-anchor {
        position: static;
        width: auto;
        height: auto;
        /* The SVG canvas has 50px of transparent space below its visible
           artwork at a 1920px source width. Compensate it proportionally so
           the visual gap from the last opaque pixel stays at 12px. */
        margin-top: calc(12px - 2.6041667%);
        margin-left: 9.4%;
      }
      .trggr-scene-role {
        position: static;
        color: var(--dark);
        font-size: 12px;
        line-height: 1.2;
        transform: none;
        transform-origin: initial;
      }
    }

    /* 744: caption stays below the artwork and aligns to the tablet gutter. */
    @media (max-width: 900px) and (min-width: 601px) {
      .trggr-scene { --scene-brand-width: min(calc(100vw - 198px), 420px); --scene-brand-gap: 6px; }
      .trggr-scene-brand {
        width: var(--scene-brand-width);
      }
      .trggr-scene-role-anchor { margin-left: 77px; }
    }

    /* 390: same group logic, aligned with the mobile gutter. */
    @media (max-width: 600px) {
      .trggr-scene {
        --scene-brand-width: min(calc(100vw - 102px), 385px);
        --scene-brand-gap: 4px;
        padding-bottom: 30px;
      }
      .trggr-scene-brand {
        width: var(--scene-brand-width);
        max-width: 385px;
      }
      .trggr-scene-role-anchor { margin-left: 25px; }
    }

    /* TRGGR / BLOCK 03 ---------------------------------------------------
       The asset wrappers model the opaque artwork bounds, not the PNG
       canvases. Desktop artwork alpha bounds: 57 0 2048 991.
       Mobile artwork alpha bounds: 60 34 1081 1734. */
    .trggr-visual-system {
      overflow: hidden;
      background: #f0efec;
      color: var(--dark);
    }
    .trggr-visual-system-overview {
      padding-top: 0;
      padding-bottom: 27px;
    }
    .trggr-visual-system-title,
    .trggr-visual-system-structure h2 {
      margin: 0;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0;
    }
    .trggr-visual-system-title {
      margin-left: 12.97vw;
      margin-bottom: 50px;
      font-size: 60px;
      line-height: 1.1;
      white-space: nowrap;
    }
    .trggr-visual-system-title span {
      display: inline;
    }
    .trggr-visual-system-elements {
      position: relative;
      width: 77.95vw;
      aspect-ratio: 1991 / 991;
      margin: 0 0 0 12.97vw;
    }
    .trggr-visual-system-elements picture,
    .trggr-visual-system-elements img {
      display: block;
    }
    .trggr-visual-system-elements img {
      position: absolute;
      top: 0;
      left: -2.862883%;
      width: 102.862883%;
      max-width: none;
      height: auto;
    }
    .trggr-visual-system-statement {
      min-height: 0;
      background: #f7a7c0;
      padding: 40px 0;
    }
    .trggr-visual-system-statement-copy {
      width: 300px;
      margin-left: 12.97vw;
    }
    .trggr-visual-system-statement h3 {
      margin: 0;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 700;
    }
    .trggr-visual-system-statement p {
      margin: 24px 0 0;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 400;
    }
    .trggr-visual-system-structure {
      padding: 40px 0 calc(40px - 1.979vw);
    }
    .trggr-visual-system-structure h2 {
      margin-left: 13.54vw;
      font-size: 60px;
      line-height: 1.1;
      white-space: nowrap;
    }
    .trggr-structure-primary,
    .trggr-structure-final {
      display: inline;
    }
    .trggr-visual-system-logotype {
      width: 92.1875vw;
      margin: 32px auto 0;
    }
    .trggr-visual-system-logotype img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* 1024 layout. */
    @media (max-width: 1199px) {
      .trggr-visual-system-overview {
        padding-top: 0;
        padding-bottom: 26px;
      }
      .trggr-visual-system-title {
        margin-left: 4.66vw;
        margin-bottom: 29px;
        font-size: 40px;
        line-height: 1.1;
      }
      .trggr-visual-system-elements {
        width: 88.53vw;
        margin-left: 4.66vw;
      }
      .trggr-visual-system-statement {
        min-height: 192px;
        padding: 32px 0 0;
      }
      .trggr-visual-system-statement-copy {
        width: 300px;
        margin-left: 7.52vw;
      }
      .trggr-visual-system-statement h3 {
        font-size: 18px;
        line-height: 1.2;
      }
      .trggr-visual-system-statement p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.4;
      }
      .trggr-visual-system-structure {
        padding: 40px 0 45px;
      }
      .trggr-visual-system-structure h2 {
        margin-left: 5.02vw;
        font-size: 40px;
        line-height: 1.1;
        white-space: normal;
      }
      .trggr-structure-primary,
      .trggr-structure-final {
        display: block;
      }
      .trggr-visual-system-logotype {
        width: 103.125vw;
        margin-top: 41px;
        margin-left: -1.5625vw;
      }
    }

    /* 744 layout: the mobile artwork rearranges the same visual system. */
    @media (max-width: 900px) and (min-width: 601px) {
      .trggr-visual-system-overview {
        padding-top: 0;
        padding-bottom: 31px;
      }
      .trggr-visual-system-title {
        margin-left: 10.19vw;
        margin-bottom: 49px;
        font-size: 36px;
        line-height: 1.2;
      }
      .trggr-visual-system-elements {
        width: 79.63vw;
        aspect-ratio: 1021 / 1700;
        margin-left: 10.19vw;
      }
      .trggr-visual-system-elements img {
        top: -2%;
        left: -5.876592%;
        width: 105.974535%;
      }
      .trggr-visual-system-statement {
        min-height: 224px;
        padding-top: 28px;
      }
      .trggr-visual-system-statement-copy {
        width: 270px;
        margin-left: 8.95vw;
      }
      .trggr-visual-system-statement h3 {
        width: 300px;
        font-size: 18px;
      }
      .trggr-visual-system-statement p {
        margin-top: 24px;
        font-size: 16px;
      }
      .trggr-visual-system-structure {
        padding: 34px 0 26px;
      }
      .trggr-visual-system-structure h2 {
        margin-left: 10.35vw;
        font-size: 32px;
      }
      .trggr-visual-system-logotype {
        width: 101vw;
        margin-top: 46px;
        margin-left: -0.5vw;
      }
    }

    /* 390 layout. */
    @media (max-width: 600px) {
      .trggr-visual-system-overview {
        padding-top: 0;
        padding-bottom: 18px;
      }
      .trggr-visual-system-title {
        max-width: 340px;
        margin-left: 5.13vw;
        margin-bottom: 33px;
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
        white-space: normal;
      }
      .trggr-visual-system-title span {
        display: block;
      }
      .trggr-visual-system-elements {
        width: 90.51vw;
        aspect-ratio: 1021 / 1700;
        margin-left: 4.38vw;
      }
      .trggr-visual-system-elements img {
        top: -2%;
        left: -5.876592%;
        width: 105.974535%;
      }
      .trggr-visual-system-statement {
        min-height: 0;
        padding: 30px 0;
      }
      .trggr-visual-system-statement-copy {
        width: 270px;
        margin-left: 5.13vw;
      }
      .trggr-visual-system-statement h3 {
        width: 300px;
        font-size: 18px;
      }
      .trggr-visual-system-statement p {
        margin-top: 24px;
        font-size: 16px;
      }
      .trggr-visual-system-structure {
        padding: 30px 0 calc(30px - 2.212vw);
      }
      .trggr-visual-system-structure h2 {
        margin-left: 5.13vw;
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
      }
      .trggr-structure-primary span {
        display: block;
      }
      .trggr-visual-system-logotype {
        width: 103.08vw;
        margin-top: 44px;
        margin-left: -1.54vw;
      }
    }

    /* TRGGR / BLOCK 04 ---------------------------------------------------
       Brand Images is a single editorial collage. It always scales as one
       scene; text follows the four approved 1920 / 1024 / 744 / 390 states. */
    .trggr-world {
      position: relative;
      height: calc(185px + 82.5804vw);
      overflow: hidden;
      background: #1c1c1c;
      color: #fafafa;
    }
    .trggr-world-title {
      position: absolute;
      z-index: 3;
      top: 40px;
      left: var(--guide-left);
      margin: 0;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 60px;
      line-height: 1.1;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .trggr-world-title span { display: inline; }
    .trggr-world-collage {
      position: absolute;
      z-index: 1;
      top: 145px;
      left: 13.020833vw;
      width: 76.145833vw;
      aspect-ratio: 1462 / 1590;
      margin: 0;
    }
    .trggr-world-photo-layer,
    .trggr-world-cube-layer {
      position: absolute;
      inset: 0;
    }
    .trggr-world-photo-layer { z-index: 1; }
    .trggr-world-cube-layer {
      z-index: 2;
      pointer-events: none;
    }
    .trggr-world-piece,
    .trggr-world-cube-wrap {
      position: absolute;
    }
    .trggr-world-piece,
    .trggr-world-cube {
      display: block;
      height: auto;
      max-width: none;
    }
    .trggr-world-photo-model {
      top: 33.899371%;
      left: 32.010944%;
      width: 30.232558%;
      --reveal-delay: .05s;
    }
    .trggr-world-photo-cherry {
      top: 17.798742%;
      left: 0;
      width: 30.232558%;
      --reveal-delay: .1s;
    }
    .trggr-world-photo-red-texture {
      top: 0;
      left: 32.010944%;
      width: 30.164159%;
      --reveal-delay: 0s;
    }
    .trggr-world-photo-green-texture {
      top: 35.849057%;
      left: 64.158687%;
      width: 30.02736%;
      --reveal-delay: .15s;
    }
    .trggr-world-photo-box {
      top: 54.150943%;
      left: 0;
      width: 32.010944%;
      --reveal-delay: .2s;
    }
    .trggr-world-photo-candle {
      top: 76.981132%;
      left: 32.010944%;
      width: 30.232558%;
      --reveal-delay: .24s;
    }
    .trggr-world-photo-splash {
      z-index: 2;
      top: 4.339623%;
      left: 53.077975%;
      width: 46.922025%;
      --reveal-delay: .29s;
    }
    .trggr-world-cube-wrap {
      display: block;
      height: auto;
      --cube-x: 0px;
      --cube-y: 0px;
      --cube-rotate: 0deg;
    }
    .trggr-world-cube {
      width: 100%;
      transform: translate3d(var(--cube-x), var(--cube-y), 0) rotate(var(--cube-rotate));
      transform-origin: var(--cube-origin-x, 50%) var(--cube-origin-y, 50%);
      will-change: transform;
    }
    .trggr-world-cube-green {
      top: 25.09434%;
      left: 56.361149%;
      width: 12.4487%;
      --reveal-delay: .45s;
      --cube-origin-x: 46.2%;
      --cube-origin-y: 50.5%;
    }
    .trggr-world-cube-orange {
      top: 88.867925%;
      left: 25.0342%;
      width: 12.106703%;
      --reveal-delay: .53s;
      --cube-origin-x: 48%;
      --cube-origin-y: 48.3%;
    }
    .trggr-world-cube-brown {
      top: 72.515723%;
      left: 58.891929%;
      width: 11.491108%;
      --reveal-delay: .61s;
      --cube-origin-x: 44.3%;
      --cube-origin-y: 49.7%;
    }
    .trggr-world-cube-clear {
      top: 48.867925%;
      left: 21.819425%;
      width: 11.627907%;
      --reveal-delay: .69s;
      --cube-origin-x: 47.1%;
      --cube-origin-y: 49.4%;
    }
    .trggr-world-cube-red {
      top: 3.522013%;
      left: 25.102599%;
      width: 12.106703%;
      --reveal-delay: .77s;
      --cube-origin-x: 46.9%;
      --cube-origin-y: 48.6%;
    }
    @media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
      .motion-ready .trggr-world-photo {
        opacity: 0;
        transform: translate3d(0, 28px, 0) scale(.985);
        transition: opacity .72s ease var(--reveal-delay), transform .86s cubic-bezier(.2,.75,.25,1) var(--reveal-delay);
      }
      .motion-ready .trggr-world-cube-wrap {
        opacity: 0;
        transform: translate3d(0, 20px, 0) scale(.84);
        transition: opacity .55s ease var(--reveal-delay), transform .72s cubic-bezier(.18,.8,.25,1.15) var(--reveal-delay);
      }
      .motion-ready .trggr-world.is-visible .trggr-world-photo,
      .motion-ready .trggr-world.is-visible .trggr-world-cube-wrap {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }
    .trggr-world-copy,
    .trggr-world-summary {
      position: absolute;
      z-index: 2;
      margin: 0;
      font-family: "Tilda Sans", Arial, sans-serif;
      font-size: 18px;
      line-height: 1.4;
      font-weight: 400;
    }
    .trggr-world-copy h3 {
      margin: 0 0 4px;
      font-family: "Tilda Sans", Arial, sans-serif;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 700;
    }
    .trggr-world-copy p { margin: 0; }
    .trggr-material-break-tablet { display: none; }
    .trggr-material-space-tablet { display: none; }
    .trggr-world-metaphor {
      /* Upper text edge stays clear of the red portrait below. */
      top: calc(145px + 14.739583vw - 117px);
      left: var(--guide-left);
    }
    .trggr-world-material {
      /* The visible capitals align with the top of the central image. */
      top: 139px;
      left: 61.822917vw;
    }
    .trggr-world-character {
      top: calc(145px + 70.989583vw);
      left: 61.875vw;
      width: 22.864583vw;
    }
    .trggr-world-summary {
      position: static;
      width: 100%;
    }
    .trggr-world-copy p.trggr-world-summary { margin-top: 32px; }

    @media (min-width: 1921px) {
      .trggr-world { height: calc(185px + var(--content) * 1.084503206); }
      .trggr-world-collage { left: var(--guide-left); width: var(--content); }
      .trggr-world-metaphor { top: calc(145px + var(--content) * .193570448 - 117px); }
      .trggr-world-material,
      .trggr-world-character { left: calc(var(--guide-left) + var(--content) * .64158687); }
      .trggr-world-character {
        top: calc(145px + var(--content) * .932284541);
        width: calc(var(--content) * .3002736);
      }
    }

    /* 1024 layout. */
    @media (max-width: 1199px) {
      .trggr-world {
        height: calc(130px + 102.727vw);
      }
      .trggr-world-title {
        top: 30px;
        left: var(--guide-left);
        font-size: 36px;
        line-height: 1.1;
      }
      .trggr-world-collage {
        top: 100px;
        left: 4.980469vw;
        width: 94.726563vw;
      }
      .trggr-world-copy,
      .trggr-world-summary {
        font-size: 16px;
        line-height: 1.4;
      }
      .trggr-world-copy h3 {
        font-size: 18px;
      }
      .trggr-world-metaphor {
        top: calc(100px + 10.449219vw);
        left: var(--guide-left);
      }
      .trggr-world-material {
        top: calc(100px - .390625vw);
        left: 65.429688vw;
      }
      .trggr-world-character {
        top: calc(100px + 85.15625vw);
        left: 65.755208vw;
        width: 28.445313vw;
      }
      .trggr-world-summary {
        width: 100%;
      }
      .trggr-world-copy p.trggr-world-summary { margin-top: 24px; }
    }

    /* 744 layout. */
    @media (max-width: 900px) and (min-width: 601px) {
      .trggr-world {
        height: calc(111.290323vw + 256.35px);
      }
      .trggr-world-title {
        top: 5.376344vw;
        left: var(--guide-left);
        white-space: normal;
      }
      .trggr-world-title span { display: block; }
      .trggr-world-collage {
        top: 16.935484vw;
        left: 10.349462vw;
        width: 84.408602vw;
      }
      .trggr-world-metaphor,
      .trggr-world-material,
      .trggr-world-character {
        top: 111.290323vw;
      }
      .trggr-world-metaphor { left: var(--guide-left); }
      .trggr-world-material { left: 43.145161vw; }
      .trggr-world-character {
        left: 66.666667vw;
        width: 190px;
      }
      .trggr-material-break-tablet { display: inline; }
      .trggr-material-break-default { display: none; }
      .trggr-material-space-default { display: none; }
      .trggr-material-space-tablet { display: inline; }
      .trggr-world-summary {
        width: 100%;
      }
    }

    /* 390 layout. */
    @media (max-width: 600px) {
      .trggr-world {
        height: calc(188.205128vw + 190.0625px);
      }
      .trggr-world-title {
        top: 30px;
        left: var(--guide-left);
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
        white-space: normal;
      }
      .trggr-world-title span { display: block; }
      .trggr-world-collage {
        top: 32.820513vw;
        left: 3.846154vw;
        width: 97.179487vw;
      }
      .trggr-world-copy,
      .trggr-world-summary {
        font-size: 16px;
      }
      .trggr-world-copy { left: 5.641026vw; }
      .trggr-world-metaphor,
      .trggr-world-summary { left: var(--guide-left); }
      .trggr-world-copy h3 {
        font-size: 18px;
        line-height: 1.25;
      }
      .trggr-world-metaphor { top: 147.692308vw; }
      .trggr-world-material { top: 167.948718vw; }
      .trggr-world-character {
        top: 188.205128vw;
        left: var(--guide-left);
        width: calc(100% - var(--guide-left) - var(--guide-right));
      }
      .trggr-world-summary {
        width: 300px;
        max-width: 100%;
      }
    }

    /* PROJECTS / BLOCK 04 ---------------------------------------------- */
    .portfolio-projects {
      overflow: hidden;
      padding: 40px 0;
    }
    .portfolio-projects-selected {
      color: var(--white);
      background: var(--dark);
      padding: 40px 0;
    }
    .portfolio-projects-more {
      color: var(--white);
      background: var(--dark);
      padding-top: 40px;
    }
    .portfolio-projects-shell {
      width: min(var(--content), calc(100% - 40px));
      margin-inline: auto;
    }
    .portfolio-selected-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 48px;
      row-gap: 48px;
      align-items: flex-start;
      margin-top: 40px;
    }
    .portfolio-more-carousel { margin-top: 0; }
    .portfolio-more-track {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 32px;
    }
    .portfolio-card { min-width: 0; }
    .portfolio-card-media {
      display: block;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      background: #0b0413;
    }
    .portfolio-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .55s cubic-bezier(.22,1,.36,1), filter .4s ease;
    }
    .portfolio-card-copy {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid currentColor;
    }
    .portfolio-projects-selected .portfolio-card-copy { border-color: rgba(255,255,255,.72); }
    .portfolio-projects-more .portfolio-card-copy { border-color: rgba(255,255,255,.72); }
    .portfolio-card-title {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: start;
    }
    .portfolio-card-title h2 {
      min-width: 0;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 42px;
      line-height: 1.08;
      font-weight: 700;
      text-transform: uppercase;
    }
    .portfolio-projects-selected .portfolio-card-title h2 {
      font-size: clamp(30px, 2.5vw, 42px);
    }
    .portfolio-card-title h2 span { display: block; }
    .portfolio-projects-more .portfolio-card-title h2 {
      font-size: 30px;
      line-height: 1.08;
    }
    .portfolio-card-arrow {
      display: inline-block;
      font-size: 24px;
      line-height: 1;
      transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
    .portfolio-card-copy p {
      max-width: 620px;
      margin-top: 28px;
      font-size: 18px;
      line-height: 1.45;
    }
    .portfolio-projects-more .portfolio-card-copy p {
      margin-top: 22px;
      font-size: 16px;
    }
    .portfolio-card-media:focus-visible,
    .portfolio-card-title:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
    }
    @media (hover: hover) {
      .portfolio-card-media:hover img,
      .portfolio-card:has(.portfolio-card-title:hover) .portfolio-card-media img {
        transform: scale(1.025);
        filter: brightness(1.06) saturate(1.04);
      }
      .portfolio-card-title:hover .portfolio-card-arrow { transform: translate(4px, -4px); }
    }
    .portfolio-carousel-controls {
      display: none;
      width: max-content;
      margin-left: auto;
      align-items: flex-end;
    }
    .portfolio-carousel-controls[hidden] { display: none !important; }
    .portfolio-carousel-buttons { width: max-content; }

    @media (max-width: 1199px) {
      .portfolio-projects-shell { width: calc(100% - 110px); }
      .portfolio-more-carousel { margin-top: 0; }
      .portfolio-selected-grid { gap: 48px; }
      .portfolio-more-track { gap: 20px; }
      .portfolio-selected-grid,
      .portfolio-more-track {
        display: flex;
        margin-inline: -8px;
        padding: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
      }
      .portfolio-selected-grid { margin-top: 64px; }
      .portfolio-selected-grid::-webkit-scrollbar,
      .portfolio-more-track::-webkit-scrollbar { display: none; }
      .portfolio-selected-grid .portfolio-card {
        flex: 0 0 calc((100% - 48px) / 2);
        scroll-snap-align: start;
      }
      .portfolio-more-track .portfolio-card {
        flex: 0 0 calc((100% - 20px) / 2);
        scroll-snap-align: start;
      }
      .portfolio-carousel-controls {
        display: flex;
        margin-top: 28px;
        flex-direction: column;
        align-items: flex-end;
      }
      .portfolio-projects-selected .portfolio-carousel-controls {
        margin-top: 32px;
      }
      .portfolio-carousel-count {
        width: 100%;
        min-width: 0;
        margin-top: 10px;
        text-align: right;
        font-size: 12px;
        line-height: 1;
      }
      .portfolio-carousel-buttons { display: flex; gap: 12px; }
      .portfolio-carousel-button {
        display: grid;
        width: 48px;
        height: 48px;
        padding: 0;
        place-items: center;
        border: 1px solid rgba(255,255,255,.62);
        border-radius: 0;
        color: var(--white);
        background: transparent;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
        transition: color .2s ease, background-color .2s ease, transform .12s ease;
      }
      .portfolio-carousel-button:hover:not(:disabled),
      .portfolio-carousel-button:focus-visible,
      .portfolio-carousel-button.touch-active:not(:disabled) {
        color: var(--dark);
        background: var(--white);
        outline: none;
      }
      .portfolio-carousel-button:active:not(:disabled),
      .portfolio-carousel-button.touch-active:not(:disabled) { transform: scale(.94); }
      .portfolio-carousel-button:disabled { opacity: .28; cursor: default; }
      .portfolio-card-title h2 { font-size: 34px; }
      .portfolio-projects-selected .portfolio-card-title h2 { font-size: 30px; }
      .portfolio-projects-more .portfolio-card-title h2 { font-size: 25px; }
      .portfolio-card-copy p { font-size: 16px; }
      .portfolio-projects-more .portfolio-card-copy p { font-size: 14px; }
    }

    @media (max-width: 900px) {
      .portfolio-projects {
        padding: 40px 0;
      }
      .portfolio-projects-selected { padding: 40px 0; }
      .portfolio-projects-more { padding-top: 40px; }
      .portfolio-projects-shell { width: calc(100% - 154px); }
      .portfolio-selected-grid {
        gap: 24px;
        margin-top: 56px;
      }
      .portfolio-more-carousel { margin-top: 0; }
      .portfolio-more-track {
        gap: 24px;
      }
      .portfolio-selected-grid .portfolio-card,
      .portfolio-more-track .portfolio-card {
        flex: 0 0 100%;
        scroll-snap-align: start;
      }
      .portfolio-card-copy { margin-top: 16px; padding-top: 14px; }
      .portfolio-card-title h2,
      .portfolio-projects-more .portfolio-card-title h2 { font-size: 30px; }
      .portfolio-card-copy p,
      .portfolio-projects-more .portfolio-card-copy p {
        margin-top: 16px;
        font-size: 15px;
      }
      .portfolio-projects-selected .portfolio-card-copy p { margin-top: 24px; }
    }

    @media (max-width: 600px) {
      .portfolio-projects-shell { width: calc(100% - 50px); }
      .portfolio-projects {
        padding-top: 30px;
        padding-bottom: 30px;
      }
      .portfolio-projects-selected { padding: 30px 0; }
      .portfolio-projects-more { padding-top: 30px; }
      .portfolio-selected-grid { margin-top: 30px; }
      .portfolio-more-carousel { margin-top: 0; }
      .portfolio-selected-grid {
        width: 100%;
        margin-inline: 0;
        padding: 0;
        gap: 24px;
      }
      .portfolio-card-title { gap: 10px; }
      .portfolio-card-title h2,
      .portfolio-projects-more .portfolio-card-title h2 {
        font-size: 27px;
        line-height: 1.08;
      }
      .portfolio-projects-selected .portfolio-card-title h2 {
        font-size: 27px;
        line-height: 1.08;
      }
      .portfolio-card-arrow { font-size: 18px; }
      .portfolio-card-copy p,
      .portfolio-projects-more .portfolio-card-copy p {
        font-size: 14px;
        line-height: 1.45;
      }
      .portfolio-projects-selected .portfolio-card-copy p { margin-top: 24px; }
    }

    @media (prefers-reduced-motion: no-preference) {
      .motion-ready .portfolio-projects .section-marker::before {
        transform: scaleX(0);
      }
      .motion-ready .portfolio-projects .section-marker span,
      .motion-ready .portfolio-projects .portfolio-card,
      .motion-ready .portfolio-projects .portfolio-carousel-controls {
        opacity: 0;
        transform: translateY(26px);
      }
      .motion-ready .portfolio-projects.is-visible .section-marker::before {
        transform: scaleX(1);
        transition: transform 1.25s cubic-bezier(.22,1,.36,1) .48s;
      }
      .motion-ready .portfolio-projects.is-visible .section-marker span,
      .motion-ready .portfolio-projects.is-visible .portfolio-card,
      .motion-ready .portfolio-projects.is-visible .portfolio-carousel-controls {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .55s ease, transform .72s cubic-bezier(.22,1,.36,1);
      }
      .motion-ready .portfolio-projects.is-visible .section-marker span { transition-delay: .5s; }
      .motion-ready .portfolio-projects-selected.is-visible .portfolio-card:nth-child(1) { transition-delay: .56s; }
      .motion-ready .portfolio-projects-selected.is-visible .portfolio-card:nth-child(2) { transition-delay: .66s; }
      .motion-ready .portfolio-projects-selected.is-visible .portfolio-carousel-controls { transition-delay: .74s; }
      .motion-ready .portfolio-projects-more.is-visible .portfolio-card:nth-child(1) { transition-delay: .12s; }
      .motion-ready .portfolio-projects-more.is-visible .portfolio-card:nth-child(2) { transition-delay: .22s; }
      .motion-ready .portfolio-projects-more.is-visible .portfolio-card:nth-child(3) { transition-delay: .32s; }
      .motion-ready .portfolio-projects-more.is-visible .portfolio-carousel-controls { transition-delay: .4s; }
    }

    /* ABOUT / BLOCK 05 -------------------------------------------------- */
    .about-portfolio {
      overflow: hidden;
      padding: 40px 0;
      color: var(--dark);
      background: #f0efec;
    }
    .about-portfolio-shell {
      width: min(var(--content), calc(100% - 40px));
      margin-inline: auto;
    }
    .about-portfolio-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
      gap: 80px;
      margin-top: 40px;
      align-items: start;
    }
    .about-portfolio-copy { min-width: 0; }
    .about-portfolio-copy h2 {
      max-width: 700px;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 60px;
      line-height: 1.1;
      font-weight: 700;
      text-transform: uppercase;
    }
    .about-portfolio-intro {
      width: 493px;
      max-width: 100%;
      margin-top: 48px;
      font-size: 18px;
      line-height: 1.45;
    }
    .about-portfolio-intro p,
    .about-portfolio-lettering p { margin: 0; }
    .about-portfolio-lettering {
      width: 493px;
      max-width: 100%;
      margin-top: 60px;
      font-size: 18px;
      line-height: 1.45;
    }
    .about-portfolio-lettering h3 {
      margin: 0 0 24px;
      font-size: 24px;
      line-height: 1.2;
      font-weight: 700;
    }
    .about-portfolio-link {
      display: inline-flex;
      min-width: 360px;
      min-height: 54px;
      margin-top: 34px;
      padding: 0 26px;
      align-items: center;
      justify-content: center;
      gap: 18px;
      border: 1px solid rgba(28,28,28,.65);
      font-size: 16px;
      line-height: 1;
      text-transform: uppercase;
      transition: color .25s ease, background-color .25s ease, transform .14s ease;
    }
    .about-portfolio-link:hover,
    .about-portfolio-link:focus-visible {
      color: #f0efec;
      background: var(--dark);
      outline: none;
    }
    .about-portfolio-link:active { transform: scale(.98); }
    .about-portfolio-visual {
      min-width: 0;
      margin: 0;
      align-self: start;
      overflow: visible;
    }
    .about-portfolio-visual img {
      display: block;
      width: 100%;
      height: auto;
    }
    .about-portfolio-visual > .about-portfolio-collage {
      display: block;
      width: 100%;
      max-width: none;
      height: auto;
    }

    @media (min-width: 901px) {
      .about-portfolio { padding-bottom: 0; }
      .about-portfolio-visual {
        /* The poster occupies x=556..1154 in the supplied SVG.
           Anchor its right edge to the content guide; the dog extends left. */
        width: 192.976589%;
        margin-left: -92.976589%;
      }
    }

    @media (min-width: 1921px) {
      .about-portfolio-visual { width: 135.083612%; margin-left: -35.083612%; }
    }

    @media (max-width: 1199px) {
      .about-portfolio-shell { width: calc(100% - 110px); }
      .about-portfolio-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 40px;
        margin-top: 40px;
      }
      .about-portfolio-copy { padding-bottom: 30px; }
      .about-portfolio-copy h2 { font-size: 32px; line-height: 1.06; }
      .about-portfolio-intro,
      .about-portfolio-lettering {
        width: 348px;
        font-size: 16px;
        line-height: 1.4;
      }
      .about-portfolio-intro { margin-top: 32px; }
      .about-portfolio-lettering { margin-top: 40px; }
      .about-portfolio-visual { width: 165%; margin-left: -65%; align-self: end; }
      .about-portfolio-lettering h3 { font-size: 18px; margin-bottom: 24px; }
      .about-portfolio-link {
        min-width: 0;
        max-width: 100%;
        margin-top: 32px;
        font-size: 13px;
      }
    }

    @media (max-width: 900px) {
      .about-portfolio { padding: 40px 0; }
      .about-portfolio-shell { width: calc(100% - 154px); }
      .about-portfolio-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 40px;
      }
      .about-portfolio-copy { display: contents; }
      .about-portfolio-copy h2 { order: 1; max-width: 560px; font-size: 40px; line-height: 1.1; }
      .about-portfolio-intro,
      .about-portfolio-lettering { line-height: 1.45; }
      .about-portfolio-lettering h3 { font-size: 20px; margin-bottom: 18px; }
      .about-portfolio-intro { order: 2; width: 430px; margin-top: 32px; }
      .about-portfolio-visual {
        order: 3;
        align-self: start;
        width: 100vw;
        margin-top: 54px;
        margin-left: calc(-2 * var(--guide-left));
      }
      .about-portfolio-lettering { order: 4; width: 430px; margin-top: 40px; }
      .about-portfolio-link { order: 5; align-self: flex-start; min-width: 300px; font-size: 14px; margin-top: 32px; }
    }

    @media (max-width: 600px) {
      .about-portfolio {
        padding: 30px 0;
      }
      .about-portfolio-shell { width: calc(100% - 50px); }
      .about-portfolio-layout {
        margin-top: 30px;
      }
      .about-portfolio-copy h2 {
        width: 100%;
        max-width: 100%;
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
      }
      .about-portfolio-intro,
      .about-portfolio-lettering {
        width: 348px;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.45;
      }
      .about-portfolio-intro { margin-top: 32px; }
      .about-portfolio-visual {
        width: 146vw;
        margin-top: 32px;
        margin-left: calc(100vw - var(--guide-left) - 146vw);
      }
      .about-portfolio-lettering { margin-top: 30px; }
      .about-portfolio-link {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        margin-top: 32px;
        padding-inline: 18px;
        font-size: 13px;
      }
    }

    @media (prefers-reduced-motion: no-preference) {
      .motion-ready .about-portfolio .section-marker::before {
        transform: scaleX(0);
      }
      .motion-ready .about-portfolio .section-marker span,
      .motion-ready .about-portfolio-copy h2,
      .motion-ready .about-portfolio-intro,
      .motion-ready .about-portfolio-lettering,
      .motion-ready .about-portfolio-link,
      .motion-ready .about-portfolio-visual {
        opacity: 0;
        transform: translateY(26px);
      }
      .motion-ready .about-portfolio.is-visible .section-marker::before {
        transform: scaleX(1);
        transition: transform 1.25s cubic-bezier(.22,1,.36,1) .48s;
      }
      .motion-ready .about-portfolio.is-visible .section-marker span,
      .motion-ready .about-portfolio.is-visible .about-portfolio-copy h2,
      .motion-ready .about-portfolio.is-visible .about-portfolio-intro,
      .motion-ready .about-portfolio.is-visible .about-portfolio-lettering,
      .motion-ready .about-portfolio.is-visible .about-portfolio-link,
      .motion-ready .about-portfolio.is-visible .about-portfolio-visual {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .72s ease, transform .9s cubic-bezier(.22,1,.36,1);
      }
      .motion-ready .about-portfolio.is-visible .section-marker span { transition-delay: .5s; }
      .motion-ready .about-portfolio.is-visible .about-portfolio-copy h2 { transition-delay: .7s; }
      .motion-ready .about-portfolio.is-visible .about-portfolio-intro { transition-delay: .84s; }
      .motion-ready .about-portfolio.is-visible .about-portfolio-visual { transition-delay: .88s; }
      .motion-ready .about-portfolio.is-visible .about-portfolio-lettering { transition-delay: 1s; }
      .motion-ready .about-portfolio.is-visible .about-portfolio-link { transition-delay: 1.12s; }
    }

    /* CONTACTS / BLOCK 06 ---------------------------------------------- */
    .contact-portfolio {
      position: relative;
      overflow: hidden;
      padding: 40px 0 0;
      color: #fff;
      background: var(--red);
    }
    .contact-portfolio .section-marker::before { background: rgba(255,255,255,.82); }
    .contact-portfolio .section-marker span { color: #fff; }
    .contact-portfolio-shell {
      width: min(var(--content), calc(100% - 40px));
      margin-inline: auto;
    }
    .contact-portfolio-layout {
      position: relative;
      display: block;
      grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
      gap: clamp(56px, 7vw, 120px);
      min-height: 650px;
      margin-top: 40px;
      align-items: start;
    }
    .contact-portfolio-copy {
      position: relative;
      z-index: 5;
      width: min(650px, 48%);
      min-width: 0;
    }
    .contact-portfolio-copy h2 {
      margin: 0;
      max-width: 760px;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 60px;
      line-height: 1.1;
      font-weight: 700;
      text-transform: uppercase;
    }
    .contact-portfolio-note {
      max-width: 610px;
      margin-top: 40px;
      font-size: 18px;
      line-height: 1.4;
      color: #fff;
    }
    .contact-portfolio-prompt {
      margin-top: 48px;
      font-size: 18px;
      line-height: 1.2;
      font-weight: 700;
    }
    .contact-portfolio-links {
      display: grid;
      width: max-content;
      max-width: 100%;
      justify-items: start;
      gap: 12px;
      margin-top: 16px;
      padding: 0;
      background: transparent;
    }
    .contact-portfolio-links a {
      display: inline-flex;
      max-width: 100%;
      align-items: baseline;
      gap: 18px;
      font-family: Oswald, "Arial Narrow", sans-serif;
      font-size: 32px;
      line-height: 1.12;
      font-weight: 700;
      text-transform: uppercase;
      transition: opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
    }
    .contact-portfolio-links a:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
    }
    @media (hover: hover) {
      .contact-portfolio-links a:hover {
        opacity: .58;
        transform: translateX(6px);
      }
    }
    .contact-portfolio-visual {
      position: absolute;
      z-index: 3;
      right: -2vw;
      bottom: 0;
      width: min(58vw, 900px);
      min-width: 0;
      margin: 0;
      pointer-events: none;
    }
    .contact-portfolio-visual img {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: auto;
      object-fit: contain;
      transform: translate3d(var(--contact-x,0),var(--contact-y,0),0) rotate(var(--contact-r,0deg));
      transform-origin: 55% 58%;
      will-change: transform;
    }
    .contact-portfolio-connect {
      position: absolute;
      z-index: 2;
      left: 24%;
      bottom: 22px;
      width: min(52vw, 720px);
      height: auto;
      pointer-events: none;
    }
    .contact-portfolio-footer {
      position: relative;
      z-index: 8;
      display: flex;
      width: 100vw;
      min-height: 112px;
      margin: 0 0 0 calc(50% - 50vw);
      padding: 38px var(--guide-right) 38px var(--guide-left);
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      border: 0;
      color: #f0efec;
      background: var(--dark);
      font-size: 12px;
      line-height: 1.2;
      font-weight: 700;
      text-transform: uppercase;
    }

    @media (max-width: 1199px) {
      .contact-portfolio-shell { width: calc(100% - 110px); }
      .contact-portfolio-layout {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr);
        gap: 48px;
        min-height: 700px;
      }
      .contact-portfolio-copy { width: 52%; }
      .contact-portfolio-copy h2 { font-size: 48px; width: calc(100vw - 120px); max-width: none; }
      .contact-portfolio-note { font-size: 16px; }
      .contact-portfolio-prompt { font-size: 16px; }
      .contact-portfolio-links a { font-size: 27px; }
      .contact-portfolio-visual { right: -10vw; width: min(72vw, 820px); }
      .contact-portfolio-connect { left: 22%; width: 58vw; }
    }

    @media (max-width: 900px) {
      .contact-portfolio { padding: 40px 0 0; }
      .contact-portfolio-shell { width: calc(100% - 154px); }
      .contact-portfolio-layout {
        grid-template-columns: 1fr;
        gap: 48px;
        min-height: 760px;
        margin-top: 40px;
      }
      .contact-portfolio-copy { order: 2; width: 72%; }
      .contact-portfolio-visual {
        order: 1;
        margin-inline: auto;
        right: -30vw;
        width: 112vw;
      }
      .contact-portfolio-copy h2 {
        font-size: 40px;
        line-height: 1.1;
        width: auto;
        max-width: 100%;
      }
      .contact-portfolio-links { margin-top: 16px; }
      .contact-portfolio-connect { left: 18%; bottom: 20px; width: 62vw; }
    }

    @media (max-width: 600px) {
      .contact-portfolio { padding-top: 30px; }
      .contact-portfolio-shell { width: calc(100% - 50px); }
      .contact-portfolio-layout { min-height: 652px; margin-top: 30px; }
      .contact-portfolio-copy { width: 100%; }
      .contact-portfolio-copy h2 {
        width: 340px;
        max-width: 100%;
        font-size: clamp(26px, 8.2vw, 32px);
        line-height: 1.06;
      }
      .contact-portfolio-note {
        width: 345px;
        max-width: 100%;
        margin-top: 32px;
        font-size: 16px;
        line-height: 1.4;
      }
      .contact-portfolio-prompt { display: none; }
      .contact-portfolio-links {
        position: absolute;
        z-index: 7;
        top: 280px;
        left: 0;
        margin: 0;
        padding: 0;
      }
      .contact-portfolio-links a {
        gap: 18px;
        font-size: 29px;
      }
      .contact-portfolio-visual {
        z-index: 3;
        top: 90px;
        right: -54vw;
        bottom: auto;
        width: 148vw;
      }
      .contact-portfolio-connect { display: none; }
      .contact-portfolio-footer {
        flex-direction: column;
        gap: 8px;
        min-height: 0;
        padding-top: 30px;
        padding-bottom: 30px;
      }
      .contact-portfolio-footer span:last-child { display: none; }
    }

    @media (prefers-reduced-motion: no-preference) {
      .motion-ready .contact-portfolio .section-marker::before {
        transform: scaleX(0);
      }
      .motion-ready .contact-portfolio .section-marker span,
      .motion-ready .contact-portfolio-copy h2,
      .motion-ready .contact-portfolio-note,
      .motion-ready .contact-portfolio-prompt,
      .motion-ready .contact-portfolio-links,
      .motion-ready .contact-portfolio-visual,
      .motion-ready .contact-portfolio-footer {
        opacity: 0;
        transform: translateY(26px);
      }
      .motion-ready .contact-portfolio.is-visible .section-marker::before {
        transform: scaleX(1);
        transition: transform 1.25s cubic-bezier(.22,1,.36,1) .48s;
      }
      .motion-ready .contact-portfolio.is-visible .section-marker span,
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-copy h2,
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-note,
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-prompt,
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-links,
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-visual,
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-footer {
        opacity: 1;
        transform: translateY(0);
        transition: opacity .72s ease, transform .9s cubic-bezier(.22,1,.36,1);
      }
      .motion-ready .contact-portfolio.is-visible .section-marker span { transition-delay: .5s; }
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-copy h2 { transition-delay: .7s; }
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-visual { transition-delay: .76s; }
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-note { transition-delay: .86s; }
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-prompt { transition-delay: .96s; }
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-links { transition-delay: 1.06s; }
      .motion-ready .contact-portfolio.is-visible .contact-portfolio-footer { transition-delay: 1.12s; }
    }

    /* GLOBAL CONTENT GUIDES --------------------------------------------
       Every regular content container uses the same left/right anchors as
       the red Hero grid at all four approved breakpoints. Editorial artwork
       may remain full-bleed, but its headings and supporting copy use these
       common guides. */
    .experience-shell,
    .trggr-shell,
    .trggr-touchpoints-shell,
    .trggr-social-shell,
    .portfolio-projects-shell,
    .about-portfolio-shell,
    .contact-portfolio-shell {
      width: auto;
      margin-left: var(--guide-left);
      margin-right: var(--guide-right);
    }

    .trggr-visual-system-title,
    .trggr-visual-system-statement-copy,
    .trggr-visual-system-structure h2 {
      margin-left: var(--guide-left);
    }

    @media (max-width: 1199px) {
      .experience-shell,
      .trggr-shell,
      .trggr-touchpoints-shell,
      .trggr-social-shell,
      .portfolio-projects-shell,
      .about-portfolio-shell,
      .contact-portfolio-shell {
        width: auto;
        margin-left: var(--guide-left);
        margin-right: var(--guide-right);
      }
    }

    @media (max-width: 600px) {
      .experience-shell,
      .trggr-shell,
      .trggr-touchpoints-shell,
      .trggr-social-shell,
      .portfolio-projects-shell,
      .about-portfolio-shell,
      .contact-portfolio-shell {
        width: auto;
        margin-left: var(--guide-left);
        margin-right: var(--guide-right);
      }

    }

/* VERIFIED SHARED RULES
   Navigation is defined here once. The remaining TRGGR corrections are
   intentionally kept late because they coordinate several independently
   authored case-study components across the approved breakpoints. */

/* Navigation ---------------------------------------------------------- */
.site-menu {
  position: fixed;
  z-index: 1000;
  inset: 0 0 auto;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 var(--guide-right) 0 var(--guide-left);
  color: #f0efec;
  background: rgba(28,28,28,.97);
  border-bottom: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.site-menu-name {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}
.site-menu-links {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: clamp(20px, 2.2vw, 42px);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}
.site-menu-contact {
  margin-left: clamp(28px, 3.5vw, 64px);
  font-size: inherit;
  font-weight: 800;
}
@media (hover:hover) {
  .site-menu a:hover { opacity: .62; }
}

/* TRGGR corrections --------------------------------------------------- */
@media (min-width: 901px), (max-width: 600px) {
  .trggr-scene,
  .trggr-visual-system-overview { margin-top: -1px; }
}
.trggr-scene-art,
.trggr-scene-stage,
.trggr-scene-image {
  max-width: var(--trggr-scene-max, 1920px);
  margin-inline: auto;
}
.trggr-touchpoints,
.trggr-social-shell { overflow: visible; }
.trggr-outcome-cube {
  position: absolute;
  z-index: 5;
  right: 7vw;
  bottom: -95px;
  width: 360px;
  max-width: none;
  height: auto;
  filter: grayscale(1) contrast(1.12);
  transform: translate3d(var(--outcome-cube-x,0),var(--outcome-cube-y,0),0) rotate(var(--outcome-cube-r,-8deg));
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}

/* Large tablet: 901–1199 --------------------------------------------- */
@media (max-width:1199px) {
  .trggr-outcome-cube {
    right: 4vw;
    bottom: -92px;
    width: 429px;
  }
}

/* Phone: <=600 -------------------------------------------------------- */
@media (max-width: 900px) {
  .trggr-outcome-cube { display: none; }
}
@media (max-width:600px) {
  .site-menu { display:flex; }
  .site-menu-links { gap: 0; }
  .site-menu-links a:not(.site-menu-contact) { display:none; }
  .site-menu-contact { margin-left: 16px; }
  .top-strip { height:60px; }
  .trggr-media-caption,
  .trggr-touchpoints-showcase-caption {
    width: 100%;
    margin-left: 0;
  }
}