/* neutraltools / Adobe identity proposal. Local review only. */
:root {
  --paper:#f4f3ef; --ink:#333333; --muted:#666863; --line:#d7dcd9;
  --cobalt:#3e5bd6; --clay:#c47b5e; --mineral:#b7c7be;
  --gutter:clamp(24px,5vw,88px); --page-max:1440px;
}
html {scroll-padding-top:32px}
body {font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-weight:400;letter-spacing:-.008em;font-synthesis:none;color:var(--ink);text-rendering:optimizeLegibility;background:var(--paper)}
.home-opening h1,.detail-main .page-opening h1,.contact-intro h2,.process-copy h2,.studio-columns h2 {font-family:"neue-haas-grotesk-display",Arial,sans-serif;font-weight:600;letter-spacing:-.012em}
.headline-phrase {display:inline-block;max-width:100%;white-space:normal}
.project-model {white-space:nowrap}
h1,h2 {overflow-wrap:anywhere}
::selection {background:#dce2fa;color:var(--ink)}
a,button {touch-action:manipulation}
a:focus-visible,button:focus-visible {outline:2px solid var(--cobalt);outline-offset:7px}
.contact-section a:focus-visible,.contact-section button:focus-visible,footer a:focus-visible {outline-color:var(--paper)}
.masthead {width:min(calc(100% - 2*var(--gutter)),var(--page-max));margin:0 auto;padding:32px 0 48px;align-items:flex-start;gap:32px}
.identity {flex-shrink:0;gap:0}
.logo-image {display:block;width:128px;height:auto;margin:0;filter:none}
.byline {font-size:12px;line-height:1.35;letter-spacing:0;color:var(--muted);margin-top:13px}
.header-links {display:flex;gap:36px;align-items:center;padding-top:4px}
.header-links>a {font-size:16px;line-height:1.25;min-height:44px;padding:0;position:relative}
.header-links>a:hover {text-decoration:none;color:var(--cobalt)}
.header-links>a[aria-current=page]::after {content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor}
.header-links .contact-link {color:var(--cobalt);margin-left:18px}
main {width:min(calc(100% - 2*var(--gutter)),var(--page-max));margin:0 auto;padding:0}
.home-opening {border:0;padding:8px 0 72px;position:relative}
.hero-eyebrow,.detail-kicker {font-size:15px;line-height:1.4;margin:0 0 28px;color:var(--muted);letter-spacing:0}
.home-opening h1 {color:var(--ink);font-size:clamp(40px,4.6vw,66px);font-weight:600;line-height:1.1;letter-spacing:-.012em;max-width:1140px;margin:0 0 28px;text-wrap:balance}
.home-opening>p:not(.hero-eyebrow) {font-size:20px;line-height:1.5;max-width:690px;margin:0 0 17px;letter-spacing:-.006em}
.text-link {display:inline-flex;align-items:center;gap:25px;min-height:44px;font-size:17px;line-height:1.35;color:var(--cobalt);text-decoration:none}
.text-link:hover {text-decoration:underline;text-underline-offset:6px}
.hero-expertise:after {display:none}
.collection-bar {padding:24px 0 30px;border-color:var(--line);align-items:center}
.collection-bar h2 {font-size:20px;line-height:1.25;font-weight:400;letter-spacing:-.01em}
.collection-bar sup {font-size:12px;color:var(--muted);margin-left:9px}
.collection-note {font-size:14px;color:var(--muted)}
.project-grid {gap:72px 38px}
.project-picture {aspect-ratio:1.23;background:var(--paper)}
.project-picture img {object-fit:contain;transition:transform .65s cubic-bezier(.2,.6,.2,1)}
.project-card:hover img {transform:scale(1.013)}
.project-caption {font-family:"neue-haas-grotesk-display",Arial,sans-serif;font-weight:500;display:grid;grid-template-columns:1fr;gap:6px;padding-top:22px;font-size:22px;line-height:1.22;letter-spacing:-.012em}
.project-caption .number {display:none}
.project-caption .type {font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-weight:400;font-size:15px;color:var(--muted);text-align:left;letter-spacing:0;line-height:1.35}
.open-indicator {border-radius:0;background:var(--paper);color:var(--cobalt);width:42px;height:42px;right:20px;bottom:20px;font-size:24px}
.detail-main {margin:0 auto;border:0;padding:4px 0 0}
.page-opening {max-width:1120px;margin:0 0 80px}
.detail-main .page-opening h1 {font-weight:600;font-size:clamp(40px,4vw,60px);line-height:1.1;letter-spacing:-.012em;margin:0;max-width:1040px;text-wrap:balance}
.detail-lead {font-size:20px;line-height:1.5;max-width:710px;letter-spacing:-.006em;margin:32px 0 0}
.process-list {border:0}
.process-row {grid-template-columns:1fr 1fr;gap:clamp(52px,7vw,112px);padding:90px 0;border-bottom:1px solid var(--line)}
.process-row:first-child {padding-top:0}
.process-row:nth-child(even) figure {grid-column:1;grid-row:1}
.process-row:nth-child(even) .process-copy {grid-column:2;grid-row:1}
.process-row img {aspect-ratio:1.5;object-fit:contain;background:var(--paper)}
.process-row figcaption {font-size:13px;line-height:1.45;margin-top:16px;color:var(--muted)}
.process-number {font-size:15px;line-height:1.35;color:var(--cobalt);margin:0 0 28px}
.process-copy h2 {font-size:clamp(32px,2.7vw,42px);line-height:1.1;letter-spacing:-.012em;margin:0 0 28px;font-weight:600}
.process-copy>p:not(.process-number) {font-size:19px;line-height:1.55;max-width:520px;margin:0 0 22px}
.process-copy .deliverables {display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding-top:0;padding-right:0;padding-bottom:0;margin-bottom:0;font-size:16px!important;line-height:1.5;color:var(--muted);border-left:2px solid var(--mineral);padding-left:18px;margin-top:28px!important}
.approach-note {font-size:21px;line-height:1.5;max-width:850px;padding-top:56px}
.draft-image-note {font-size:14px;line-height:1.5;color:var(--muted)}
.studio-opening {display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.85fr);gap:70px;max-width:none;align-items:start}
.studio-opening-copy {min-width:0}
.studio-opening .detail-lead {font-size:20px;line-height:1.5;max-width:670px;margin:34px 0 0}
.studio-portrait {width:100%;max-width:440px;justify-self:end;margin:0}
.studio-portrait img {width:100%;height:auto;aspect-ratio:3/4;background:var(--paper);object-fit:contain}
.studio-columns {gap:clamp(58px,9vw,150px);padding:58px 0;border-color:var(--line);font-size:18px;line-height:1.55}
.studio-columns>div {max-width:600px}
.studio-columns h2 {font-size:33px;font-weight:600;line-height:1.15;letter-spacing:-.012em;margin:0 0 26px}
.studio-columns p {margin:0 0 23px}
.studio-bottom {margin-top:0}
div.studio-bottom:not(.studio-columns) {padding-top:48px;max-width:850px;font-size:18px;line-height:1.55}
div.studio-bottom:not(.studio-columns) h2 {font-size:27px;font-weight:400;line-height:1.2;letter-spacing:-.014em;margin:0 0 25px}
.contact-section {width:100%;margin:120px 0 0;padding:94px max(var(--gutter),calc((100vw - var(--page-max))/2)) 86px;grid-template-columns:1.4fr .8fr;gap:clamp(52px,8vw,120px);border:0;background:var(--ink);color:var(--paper)}
.contact-section .contact-intro .contact-eyebrow {font-size:15px;line-height:1.4;color:#c7cbc5;margin:0 0 33px;max-width:none}
.contact-intro h2 {font-size:clamp(40px,4vw,60px);font-weight:600;line-height:1.09;letter-spacing:-.015em;margin:0 0 25px}
.contact-intro>p:last-child {font-size:18px;line-height:1.45;color:#c7cbc5;max-width:430px}
.contact-action {align-self:end;max-width:375px;margin-left:auto;width:100%;padding-bottom:3px}
.contact-note {font-size:17px;line-height:1.45;color:#c7cbc5;margin:0 0 30px}
.send-button {display:flex;align-items:center;justify-content:space-between;gap:48px;min-width:230px;min-height:58px;padding:16px 24px;background:var(--paper);border:1px solid var(--paper);color:var(--ink);font-size:18px;line-height:1.2;transition:background .2s,color .2s,border-color .2s}
.send-button span {margin:0;color:var(--cobalt)}
.send-button:hover {background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.send-button:hover span {color:#fff}
footer {width:100%;margin:0;padding:34px max(var(--gutter),calc((100vw - var(--page-max))/2)) 40px;background:var(--ink);border-color:#51534e;color:var(--paper);font-size:14px;align-items:center}
.footer-identity {display:flex;align-items:center;gap:26px}
.footer-identity>img {display:block;width:86px;height:auto}
.footer-byline {font-size:14px;color:#c7cbc5;margin:0}
footer>a {font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:18px}
.proposal-label {display:none}
@media(min-width:1800px) {.project-grid {gap:90px 46px}.project-picture {aspect-ratio:1.23}}
@media(max-width:1000px) {
 .header-links {gap:24px}.header-links .contact-link {margin-left:0}
 .home-opening {padding-top:8px;padding-bottom:64px}.home-opening h1 {color:var(--ink);font-size:clamp(40px,4.6vw,66px)}
 .hero-expertise:after {bottom:91px}.project-grid {gap:60px 30px}
 .studio-opening {grid-template-columns:minmax(0,1.3fr) minmax(250px,.8fr);gap:42px}
 .studio-opening .detail-lead {font-size:20px}.studio-columns {gap:56px}
 .process-row {gap:44px}.process-copy h2 {font-size:32px}.process-copy>p:not(.process-number) {font-size:18px}
}
@media(max-width:760px) {
 .masthead {padding-top:28px;padding-bottom:42px;align-items:flex-start;gap:28px;flex-wrap:wrap}
 .logo-image {width:108px}.byline {font-size:12px;margin-top:13px}
 .header-links {display:grid;grid-template-columns:repeat(2,auto);gap:0 24px;padding-top:0}
 .header-links>a {font-size:14px;min-height:44px}.header-links>a[aria-current=page]::after {bottom:0}
 .header-links .contact-link {margin-left:0}
 .home-opening {padding:8px 0 48px}
 .hero-eyebrow,.detail-kicker {font-size:14px;margin-bottom:25px}
 .home-opening h1 {color:var(--ink);font-size:38px;line-height:1.1;letter-spacing:-.012em;margin-bottom:26px;text-wrap:pretty}
 .home-opening>p:not(.hero-eyebrow) {font-size:18px;line-height:1.5;max-width:580px;margin-bottom:23px}
 .hero-expertise:after {display:none}.text-link {font-size:16px;gap:18px}
 .collection-bar {align-items:flex-start;padding:23px 0 30px;gap:10px;flex-direction:column}
 .collection-bar h2 {font-size:19px}.collection-note {font-size:13px}
 .project-grid {grid-template-columns:1fr;gap:46px}.project-picture {aspect-ratio:1.16}
 .project-caption {font-size:22px;padding-top:18px;gap:7px}.project-caption .type {font-size:15px}
 .open-indicator {opacity:1;transform:none;right:14px;bottom:14px;width:36px;height:36px;font-size:22px}
 .detail-main {padding-top:4px}.page-opening {margin-bottom:62px}
 .detail-main .page-opening h1 {font-size:38px;line-height:1.1;max-width:630px;text-wrap:pretty}
 .detail-lead {font-size:18px;line-height:1.5;margin-top:29px}
 .process-row {grid-template-columns:1fr;gap:30px;padding:54px 0}
 .process-row:nth-child(even) figure,.process-row:nth-child(even) .process-copy {grid-column:auto;grid-row:auto}
 .process-number {font-size:14px;margin-bottom:22px}
 .process-copy h2 {font-size:34px;margin-bottom:25px}
 .process-copy>p:not(.process-number) {font-size:18px;line-height:1.5;max-width:none}
 .process-copy .deliverables {display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;padding-top:0;padding-right:0;padding-bottom:0;margin-bottom:0;font-size:16px!important;margin-top:25px!important}
 .process-row figcaption {font-size:12px;margin-top:13px}
 .approach-note {font-size:20px;padding-top:36px}.draft-image-note {font-size:13px}
 .studio-opening {grid-template-columns:1fr;gap:40px;margin-bottom:60px}
 .studio-opening .detail-lead {font-size:18px;line-height:1.5;margin-top:29px}
 .studio-portrait {max-width:440px;justify-self:start}
 .studio-columns {grid-template-columns:1fr;gap:37px;padding:40px 0;font-size:18px;line-height:1.5}
 .studio-columns h2 {font-size:30px;margin-bottom:24px}
 div.studio-bottom:not(.studio-columns) {padding-top:34px;font-size:17px;line-height:1.55}
 div.studio-bottom:not(.studio-columns) h2 {font-size:25px}
 .contact-section {grid-template-columns:1fr;margin-top:72px;padding-top:57px;padding-bottom:52px;gap:36px}
 .contact-section .contact-intro .contact-eyebrow {font-size:14px;max-width:290px;margin-bottom:25px}
 .contact-intro h2 {font-size:clamp(32px,9.7vw,38px);margin-bottom:25px}
 .contact-intro>p:last-child {font-size:17px}.contact-action {max-width:none;margin:0;padding:0}
 .contact-note {font-size:16px;max-width:330px;margin-bottom:24px}.send-button {min-height:56px;font-size:17px;min-width:225px}
 footer {padding-top:27px;padding-bottom:33px;gap:20px}
 .footer-identity {align-items:flex-start;flex-direction:column;gap:14px}.footer-byline {font-size:12px}.footer-identity>img {width:78px}
 footer>a {font-size:14px}
 .proposal-label {font-size:10px;right:10px;bottom:10px;padding:6px 8px}
}
@media(max-width:360px) {.masthead {gap:16px}.header-links {gap:0 17px}.logo-image {width:105px}.home-opening h1 {color:var(--ink);font-size:36px}.contact-intro h2 {font-size:32px}}
/* On touch screens, the link cue belongs to the caption, leaving the image uninterrupted. */
@media(max-width:760px){
 .open-indicator{display:none}
 .project-caption{grid-template-columns:minmax(0,1fr) auto;column-gap:18px}
 .project-caption>span:first-child{grid-column:1;grid-row:1}
 .project-caption .type{grid-column:1/-1;grid-row:2}
 .project-caption::after{content:"↗";grid-column:2;grid-row:1;justify-self:end;align-self:center;font-family:"neue-haas-grotesk-text",Arial,sans-serif;font-size:20px;line-height:1;color:var(--cobalt)}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*:before,*:after {transition:none!important;animation:none!important}}
@media print {.proposal-label {display:none}}

/* Image planes follow the supplied photography rather than a uniform grey mat. */
.project-card[href*="nokia-touch-one"] .project-picture,
.project-card[href*="uno-50"] .project-picture,
.project-card[href*="oxo-steel"] .project-picture,
.project-card[href*="troika-wallet"] .project-picture {background:#fff}
.project-card[href*="iona-home-max"] .project-picture {background:#181818}
.project-card[href*="c-lounge"] .project-picture,
.project-card[href*="high-dome"] .project-picture {aspect-ratio:1.5;background:var(--paper)}

@media(max-width:760px){.detail-main .studio-opening h1{font-size:clamp(27px,8.3vw,39px);line-height:1.1}}

/* Tablet compositions retain readable line lengths before changing to one column. */
@media(min-width:761px) and (max-width:900px){
 .studio-opening{grid-template-columns:1.3fr .9fr;gap:30px 44px}
 .studio-opening-copy{display:contents}
 .studio-opening .detail-kicker,.studio-opening h1{grid-column:1/-1}
 .studio-opening .detail-kicker{margin-bottom:0}
 .detail-main .studio-opening h1{font-size:42px;line-height:1.1;margin:0}
 .studio-opening .detail-lead{grid-column:1;grid-row:3;margin:0;font-size:20px;line-height:1.5}
 .studio-portrait{grid-column:2;grid-row:3;max-width:none;align-self:start}
 .studio-columns{grid-template-columns:1fr;gap:40px}
}
/* On small screens, introduce the discipline and then show the work before detailed prose. */
@media(max-width:760px){
 .process-row{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .process-copy{display:contents}
 .process-number{order:0;margin-bottom:18px}
 .process-copy h2{order:1;margin-bottom:26px;font-size:31px;line-height:1.12}
 .process-row figure{order:2;margin:0 0 28px}
 .process-copy>p:not(.process-number){order:3;margin:0 0 20px}
 .process-copy .deliverables{order:4;margin:4px 0 0!important}
 .page-opening{margin-bottom:52px}
}

/* An own-brand system forms the portfolio's first wide feature, preserving project order. */
@media(min-width:761px){
 .project-entry:has(a[href*="iona-home-max"]){grid-column:1 / -1}
 .project-card[href*="iona-home-max"] .project-picture{aspect-ratio:16 / 9}
 .project-card[href*="iona-home-max"] .project-caption{grid-template-columns:1fr auto;align-items:baseline}
 .project-card[href*="iona-home-max"] .project-caption .type{text-align:right}
}

/* The smaller closing archival photograph forms an intentional final portfolio row. */
@media(min-width:761px){
 .project-entry:has(a[href*="energy-50"]){grid-column:auto;max-width:none;width:100%;justify-self:stretch}
}

@media(prefers-reduced-motion:reduce){
 .project-card:hover img,.project-navigation a:hover .project-navigation-arrow{transform:none!important}
}

/* Small labels retain the font's natural spacing; optical tightening belongs to headings. */
.byline,.header-links>a,.hero-eyebrow,.detail-kicker,.collection-note,.process-number,.process-row figcaption,.draft-image-note,.footer-byline,.project-location,.project-category,.project-references,.project-navigation a>span:first-child {letter-spacing:0}

.process-copy .deliverables li {margin:0;max-width:100%;text-wrap:pretty}

@media(max-width:760px){
 body:not(.project-page) .contact-section .contact-eyebrow,body:not(.project-page) .contact-intro>p:last-child{display:none}
 body:not(.project-page) .contact-section{gap:30px}
 body:not(.project-page) .contact-note{margin-bottom:24px}
}

/* Tablet stages introduce a full-width title before paired copy and imagery. */
@media(min-width:761px) and (max-width:900px){.process-row{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto min-content minmax(0,1fr);column-gap:44px;row-gap:24px;padding:50px 0;align-items:start}.process-copy{display:contents}.process-number{grid-column:1/-1;grid-row:1;margin:0;font-size:14px}.process-copy h2{grid-column:1/-1;grid-row:2;margin:0;font-size:31px;line-height:1.12;max-width:none}.process-copy>p:not(.process-number){grid-column:1;grid-row:3;margin:0;font-size:18px;line-height:1.5}.process-copy .deliverables{grid-column:1;grid-row:4;margin:0!important;padding:0;border-left:0;display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;font-size:16px!important}.process-row figure,.process-row:nth-child(even) figure{grid-column:2;grid-row:3/span 2;margin:0;align-self:start}.process-row figcaption{font-size:12px;margin-top:13px}}

/* Mobile action arrows use the same crisp vector as portfolio links. */
@media (max-width:760px) {
 .text-link > span[aria-hidden="true"],
 .send-button > span[aria-hidden="true"],
 .contact-link > span[aria-hidden="true"] {
  display:inline-block;flex:none;width:18px;height:18px;font-size:0;line-height:0;vertical-align:middle;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center/contain no-repeat;
 }
 .contact-link > span[aria-hidden="true"] {transform:rotate(90deg)}
}

/* Centre the child and lantern within the portfolio crop. */
.project-card[href*='dlight-s1'] .project-picture img{object-fit:cover;object-position:20% 50%!important}