/* Pit-Mark — Architectural editorial direction */
:root {
    --paper:#f4f1eb;
    --paper-light:#faf8f4;
    --ink:#252521;
    --muted:#73716a;
    --line:#d5d1c8;
    --red:#c91919;
    --primary:var(--red);
    --primary-dark:#a81313;
    --navy:var(--ink);
    --gray-50:#eeebe5;
    --gray-100:#e7e3da;
    --gray-200:#d9d5cc;
    --gray-600:#66635b;
    --radius:0;
    --radius-lg:0;
    --font-en:'DM Sans',sans-serif;
    --font-jp:'Noto Sans JP',sans-serif;
    --serif:'Instrument Serif',Georgia,serif;
    --serif-jp:'Noto Serif JP',serif;
    --page-gutter:clamp(24px,5.4vw,104px)
}
html {
    scroll-padding-top:120px
}
body {
    background:var(--paper);
    color:var(--ink);
    font-size:14px;
    -webkit-font-smoothing:antialiased
}
h1,h2,h3,h4,h5,h6 {
    color:var(--ink);
    font-family:var(--font-jp);
    font-weight:500
}
a {
    color:inherit;
    text-decoration:none
}
button,a {
    -webkit-tap-highlight-color:transparent
}
a,button {
    touch-action:manipulation
}
img {
    max-width:100%;
    height:auto
}
button {
    font:inherit
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
    outline:2px solid var(--red);
    outline-offset:6px
}
button:focus:not(:focus-visible) {
    outline:none
}
[hidden] {
    display:none!important
}
::selection {
    background:var(--red);
    color:#fff
}
.red {
    color:var(--red)
}
.mobile-only {
    display:none
}
.section-wrap {
    padding:88px var(--page-gutter)
}
.eyebrow,.drawing-code,.breadcrumb-link {
    font:500 10px/1.5 var(--font-en);
    letter-spacing:.13em
}
.eyebrow {
    color:var(--red)
}
.drawing-code {
    color:var(--muted);
    font-size:9px
}
.section-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:16px;
    border-top:1px solid var(--line);
    margin-bottom:58px;
    position:relative
}
.section-top:before {
    content:'+';
    position:absolute;
    top:-12px;
    left:-7px;
    font:18px var(--font-en);
    color:#9b978e
}
.display-title {
    font:400 clamp(52px,5.3vw,86px)/1.05 var(--serif);
    letter-spacing:-.025em;
    margin:0 0 20px
}
.serif-title {
    font:500 clamp(28px,2.65vw,43px)/1.85 var(--serif-jp);
    letter-spacing:.03em
}
.section-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:48px
}
.section-heading p {
    margin:0;
    color:var(--muted);
    font-size:13px;
    letter-spacing:.08em
}
.line-link {
    display:inline-flex;
    align-items:center;
    gap:32px;
    font:500 11px/1.5 var(--font-en);
    letter-spacing:.08em;
    white-space:nowrap;
    padding:8px 0
}
.round-arrow {
    display:inline-grid;
    place-items:center;
    width:38px;
    height:38px;
    border:1px solid var(--line);
    border-radius:50%;
    font:21px/1 var(--font-en);
    transition:background .25s,color .25s,transform .25s
}
.line-link:hover .round-arrow,a:hover>.round-arrow {
    background:var(--red);
    color:#fff;
    border-color:var(--red);
    transform:rotate(45deg)
}
.skip-link {
    position:fixed;
    top:-80px;
    left:16px;
    z-index:2000;
    background:var(--ink);
    color:white;
    padding:12px 20px
}
.skip-link:focus {
    top:12px
}

/* Header and navigation */
.site-header {
    height:108px;
    padding:0 var(--page-gutter);
    display:flex;
    align-items:center;
    gap:44px;
    position:relative;
    z-index:100;
    background:var(--paper)
}
.brand {
    margin-right:auto;
    display:block;
    width:174px;
    flex-shrink:0
}
.brand img {
    display:block;
    width:174px;
    height:auto;
    mix-blend-mode:multiply
}
.desktop-nav {
    display:flex;
    gap:34px;
    align-items:center
}
.desktop-nav a {
    font:500 11px/1.5 var(--font-en);
    letter-spacing:.07em;
    position:relative;
    padding:16px 0
}
.desktop-nav a:after {
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:8px;
    height:1px;
    background:var(--red);
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .25s
}
.desktop-nav a:hover:after,.desktop-nav a[aria-current]:after {
    transform:scaleX(1)
}
.desktop-nav a[aria-current] {
    color:var(--red)
}
.header-contact {
    background:var(--red);
    color:#fff;
    display:flex;
    align-items:center;
    gap:12px;
    padding:17px 23px;
    font:500 11px/1.5 var(--font-en);
    letter-spacing:.08em;
    transition:background .2s
}
.header-contact:hover {
    background:var(--primary-dark);
    color:#fff
}
.header-contact svg {
    width:18px;
    height:16px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.2
}
.contact-arrow {
    margin-left:13px;
    font-size:18px
}
.menu-toggle {
    display:none
}
.mobile-menu {
    display:none
}

/* Prominent response details and security policy immediately after the hero. */
.security-highlight {
    margin:88px var(--page-gutter) 0;
    padding:24px 28px 26px;
    border:1px solid var(--line);
    border-left:4px solid var(--red);
    background:var(--paper-light)
}
.security-highlight + .studio-section {
    padding-top:88px
}
.security-highlight-heading {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px 16px;
    margin-bottom:20px
}
.security-priority {
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--red);
    color:#fff;
    padding:7px 12px;
    font-size:11px;
    font-weight:500;
    line-height:1.5
}
.security-priority svg {
    width:16px;
    height:16px;
    stroke:currentColor;
    stroke-width:1.5;
    flex-shrink:0
}
.security-completed {
    color:#315b46;
    font-size:11px;
    font-weight:500
}
.security-highlight time {
    margin-left:auto;
    font:10px var(--font-en);
    color:var(--muted)
}
.security-highlight-layout {
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:36px
}
.security-response h2 {
    font:500 clamp(19px,1.65vw,25px)/1.7 var(--serif-jp);
    margin:0 0 14px
}
.security-highlight p {
    font-size:12px;
    line-height:2.1;
    color:var(--gray-600);
    margin:0;
    overflow-wrap:anywhere
}
.security-response strong {
    font-weight:600;
    color:var(--ink)
}
.security-highlight-links {
    display:flex;
    flex-wrap:wrap;
    gap:12px 28px;
    margin-top:18px;
    font-size:11px
}
.security-highlight-links a {
    padding:3px 0;
    border-bottom:1px solid var(--line)
}
.security-highlight-links a>span[aria-hidden] {
    margin-left:10px
}
.security-highlight-links a:hover {
    color:var(--red);
    border-color:var(--red)
}
.security-commitment {
    border-left:1px solid var(--line);
    padding-left:32px
}
.security-commitment .eyebrow {
    font-size:8px
}
.security-commitment h3 {
    font:500 16px/1.8 var(--serif-jp);
    margin:12px 0
}
@media(max-width:900px) {
    .security-highlight-layout {
        grid-template-columns:1fr;
        gap:24px
    }
    .security-commitment {
        border-left:0;
        border-top:1px solid var(--line);
        padding:20px 0 0
    }
}
@media(max-width:767px) {
    .security-highlight {
        margin-top:60px;
        margin-bottom:0;
        padding:20px 18px 22px
    }
    .security-highlight + .studio-section {
        padding-top:60px
    }
    .security-highlight-heading {
        gap:10px 12px;
        margin-bottom:18px
    }
    .security-priority,.security-completed {
        font-size:10px
    }
    .security-highlight time {
        flex-basis:100%;
        margin-left:0;
        font-size:9px
    }
    .security-response h2 {
        font-size:19px
    }
    .security-highlight-links {
        gap:10px 20px;
        font-size:10px
    }
    .security-commitment h3 {
        font-size:15px
    }
}
.latest-news {
    margin:0 var(--page-gutter);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    min-height:76px;
    display:flex;
    align-items:center;
    gap:36px;
    font-size:11px
}
.latest-news>.eyebrow {
    padding-right:30px;
    border-right:1px solid var(--line);
    white-space:nowrap
}
.latest-news time {
    font:11px var(--font-en);
    color:var(--muted)
}
.latest-news>a:not(.news-all) {
    display:flex;
    gap:50px;
    align-items:center
}
.latest-news a:hover {
    color:var(--red)
}
.latest-news .news-all {
    font:9px var(--font-en);
    letter-spacing:.1em;
    margin-left:auto;
    white-space:nowrap
}

/* Philosophy */
.studio-section {
    padding-top:108px;
    padding-bottom:116px
}
.philosophy-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8%
}
.philosophy-layout .serif-title {
    margin-bottom:40px
}
.handwritten {
    display:inline-block;
    font:italic 27px/1.2 var(--serif);
    color:#8d897f;
    transform:rotate(-7deg);
    margin-left:32px
}
.philosophy-body p {
    font-size:12px;
    line-height:2.4;
    color:#6d6961;
    margin-bottom:22px
}
.philosophy-body .lead-copy {
    font-family:var(--serif-jp);
    font-weight:500;
    font-size:20px;
    color:var(--ink);
    line-height:1.9;
    margin:0 0 24px
}
.philosophy-body .line-link {
    margin-top:10px
}

/* Selected works — compact project index */
.works-section {
    background:var(--paper-light);
    padding-top:64px;
    padding-bottom:64px
}
.works-section .section-top {
    margin-bottom:36px
}
.selected-works-heading {
    margin-bottom:30px
}
.selected-works-heading h2 {
    font:400 46px/1.1 var(--serif);
    letter-spacing:-.02em;
    margin:0 0 10px
}
/* Individual projects */
.portfolio-index {
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:44px
}
.portfolio-index>li {
    border-top:1px solid var(--line)
}
.portfolio-index>li:nth-last-child(-n+2) {
    border-bottom:1px solid var(--line)
}
.portfolio-entry {
    display:grid;
    grid-template-columns:120px minmax(0,1fr) 18px;
    align-items:center;
    gap:22px;
    padding:24px 0;
    min-height:144px
}
.portfolio-media {
    width:120px;
    height:84px;
    overflow:hidden;
    background:#ece8e0
}
.portfolio-media .project-visual {
    width:100%;
    height:100%;
    aspect-ratio:auto
}
.portfolio-media .samurai-type {
    display:none
}
.portfolio-type {
    display:block;
    font:400 8px/1.7 var(--font-en);
    letter-spacing:.07em;
    color:var(--muted);
    margin-bottom:7px
}
.portfolio-copy h3 {
    font:500 18px/1.5 var(--font-jp);
    letter-spacing:-.02em;
    margin:0 0 7px;
    transition:color .2s
}
.portfolio-copy p {
    font-size:10px;
    line-height:1.9;
    color:var(--muted);
    margin:0
}
.portfolio-entry-arrow {
    font:400 21px/1 var(--font-en);
    align-self:start;
    padding-top:5px;
    transition:color .2s,transform .2s
}
.portfolio-entry:hover h3,.portfolio-entry:focus-visible h3 {
    color:var(--red)
}
.portfolio-entry:hover .portfolio-entry-arrow {
    color:var(--red);
    transform:translate(2px,-2px)
}
.portfolio-app-icon {
    display:grid;
    place-items:center;
    background:transparent
}
.portfolio-app-icon>img {
    width:64px;
    height:64px;
    border-radius:14px
}
.project-main-image {
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover
}
.holog-brand {
    position:absolute;
    top:8%;
    left:7%;
    width:26%;
    height:auto
}
.hpmaking-brand {
    position:absolute;
    top:18%;
    left:52%;
    width:45%;
    height:auto;
    mix-blend-mode:multiply
}
.visual-hpmaking .project-main-image {
    object-fit:contain
}
.legal-expertise {
    margin-top:64px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:36px 0;
    display:grid;
    grid-template-columns:180px minmax(0,1fr) auto;
    gap:36px;
    align-items:start
}
.legal-expertise-label>span {
    display:block
}
.legal-expertise-label>span+span {
    font:9px/1.8 var(--font-en);
    letter-spacing:.08em;
    color:var(--muted);
    margin-top:14px
}
.legal-expertise-copy h3 {
    font:500 23px/1.8 var(--serif-jp);
    margin:0 0 18px
}
.legal-expertise-copy p {
    color:var(--muted);
    font-size:12px;
    line-height:2.2;
    max-width:580px;
    margin:0 0 20px
}
.legal-expertise-copy ul {
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:8px 22px;
    padding:0;
    margin:0;
    font-size:10px
}
.legal-expertise-copy li:before {
    content:'+';
    color:var(--red);
    margin-right:7px
}
.project-visual {
    position:relative;
    isolation:isolate;
    aspect-ratio:1.45;
    overflow:hidden;
    transition:filter .3s;
    background:#e7e8e2
}
.case-visual-link:hover .project-visual  {
    filter:brightness(.97)
}
.visual-index {
    position:absolute;
    top:22px;
    left:26px;
    font:9px var(--font-en);
    letter-spacing:.14em;
    color:#667b78;
    z-index:3
}
.visual-holog {
    background:#232f2d
}
.browser-frame {
    width:74%;
    max-width:850px;
    background:#fff;
    box-shadow:0 20px 38px #264c3e15;
    transform:rotate(-2deg);
    transition:transform .5s
}
.case-visual-link:hover .browser-frame  {
    transform:rotate(0)
}
.browser-bar {
    height:29px;
    display:flex;
    gap:4px;
    align-items:center;
    padding:0 12px;
    border-bottom:1px solid #e8e8e8
}
.browser-bar i {
    width:4px;
    height:4px;
    border-radius:50%;
    background:#ccc
}
.browser-bar span {
    margin:0 auto;
    font:8px var(--font-en);
    letter-spacing:.08em;
    color:#777;
    transform:translateX(-10px)
}
.browser-frame img {
    width:100%;
    display:block
}
.visual-caption {
    position:absolute;
    bottom:18px;
    right:24px;
    font:8px var(--font-en);
    letter-spacing:.13em;
    color:#526e63
}
.visual-hpmaking {
    background:#fff
}
.making-art {
    position:absolute;
    width:52%;
    height:83%;
    object-fit:cover;
    right:-4%;
    top:5%;
    transform:rotate(15deg);
    box-shadow:0 20px 20px #1e11151a;
    transition:transform .5s
}
.case-visual-link:hover .making-art  {
    transform:rotate(9deg)
}
.making-type {
    position:absolute;
    left:8%;
    top:28%;
    z-index:2
}
.making-type>span {
    font:400 clamp(21px,2.3vw,38px)/1.15 var(--serif);
    color:#5b3a36
}
.making-type strong {
    display:block;
    margin-top:28px;
    font:600 clamp(25px,3.4vw,49px) var(--font-en);
    color:#1e1d1b;
    letter-spacing:-.06em
}
.making-type strong>span {
    font-weight:400
}
.making-type b {
    font-size:25px;
    margin-left:8px;
    color:var(--red)
}
.visual-hpsamurai {
    background:#e9e6de
}
.samurai-art {
    position:absolute;
    right:-1%;
    top:-6%;
    width:68%;
    height:112%;
    object-fit:cover;
    object-position:top;
    mix-blend-mode:multiply;
    transition:transform .5s
}
.case-visual-link:hover .samurai-art  {
    transform:scale(1.03)
}
.samurai-type {
    position:absolute;
    left:9%;
    top:22%;
    z-index:2
}
.samurai-type>span {
    font:500 clamp(19px,2vw,32px)/1.65 var(--serif-jp);
    letter-spacing:.08em
}
.samurai-type strong {
    font:500 clamp(34px,4.5vw,64px)/1.5 var(--serif-jp);
    display:block;
    margin-top:12px
}
.samurai-type strong span {
    color:var(--red)
}
.samurai-type small {
    font:7px var(--font-en);
    letter-spacing:.07em;
    display:block;
    margin-top:10px
}



/* Service floor plans */
.service-floors {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border:1px solid var(--line)
}
.service-floor {
    padding:30px 32px 38px;
    position:relative;
    min-width:0
}
.service-floor+.service-floor {
    border-left:1px solid var(--line)
}
.floor-number {
    font:400 36px var(--serif);
    display:flex;
    align-items:center;
    justify-content:space-between
}
.floor-number>span {
    font:8px var(--font-en);
    letter-spacing:.1em;
    color:var(--muted)
}
.floor-drawing {
    height:100px;
    max-width:200px;
    position:relative;
    margin:26px auto 34px;
    color:#99958a;
    transition:color .3s
}
.floor-drawing i {
    display:block;
    position:absolute;
    border:1px solid currentColor
}
.floor-drawing:before,.floor-drawing:after {
    content:'';
    position:absolute;
    background:currentColor;
    opacity:.4
}
.floor-drawing:before {
    height:1px;
    left:0;
    right:0;
    top:50%
}
.floor-drawing:after {
    width:1px;
    top:0;
    bottom:0;
    left:50%
}
.drawing-plan i {
    width:43px;
    height:43px;
    transform:rotate(45deg);
    top:28px
}
.drawing-plan i:nth-child(1) {
    left:10px
}
.drawing-plan i:nth-child(2) {
    left:77px;
    border-color:var(--red)
}
.drawing-plan i:nth-child(3) {
    left:145px
}
.drawing-design i:nth-child(1) {
    inset:4px 20px
}
.drawing-design i:nth-child(2) {
    left:34px;
    right:34px;
    top:20px;
    height:12px;
    border-color:var(--red)
}
.drawing-design i:nth-child(3) {
    left:34px;
    right:34px;
    top:45px;
    height:36px;
    background:linear-gradient(31deg,transparent 49%,#a7a298 50%,transparent 51%),linear-gradient(-31deg,transparent 49%,#a7a298 50%,transparent 51%)
}
.drawing-dev i {
    width:48px;
    height:34px;
    top:32px
}
.drawing-dev i:nth-child(1) {
    left:8px
}
.drawing-dev i:nth-child(2) {
    left:77px;
    top:6px;
    border-color:var(--red)
}
.drawing-dev i:nth-child(3) {
    left:145px
}
.service-floor:hover .floor-drawing {
    color:var(--red)
}
.service-floor h3 {
    font:400 45px var(--serif);
    margin:0 0 20px
}
.service-floor h3>span {
    font:500 12px var(--serif-jp);
    margin-left:18px
}
.service-floor p {
    font-size:11px;
    color:var(--muted);
    line-height:2.1
}
.floor-tags {
    font:7px var(--font-en);
    letter-spacing:.06em
}
.floor-arrow {
    position:absolute;
    bottom:30px;
    right:28px;
    color:var(--red);
    font-size:25px
}
.service-footnote {
    display:flex;
    gap:16px;
    align-items:center;
    padding:24px 0
}
.service-footnote>.red {
    font-size:23px
}
.service-footnote p {
    font-size:11px;
    color:var(--muted);
    margin:0
}
.service-footnote .drawing-code {
    margin-left:auto
}

/* Contact and footer */
.contact-section {
    padding:64px var(--page-gutter) 76px;
    border-top:1px solid var(--line);
    background:#eae6de;
    position:relative
}
.contact-top {
    display:flex;
    justify-content:space-between;
    margin-bottom:38px
}
.contact-invitation {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.contact-invitation p {
    font:500 21px/1.7 var(--serif-jp);
    letter-spacing:.07em;
    margin:0 0 10px
}
.contact-invitation h2 {
    font:400 clamp(90px,11vw,170px)/.95 var(--serif);
    letter-spacing:-.04em;
    margin:0
}
.contact-circle {
    display:grid;
    place-items:center;
    width:130px;
    height:130px;
    border:1px solid #b6afa2;
    border-radius:50%;
    font:400 66px var(--font-en);
    transition:background .3s,color .3s,border-color .3s;
    flex-shrink:0
}
.contact-invitation:hover .contact-circle {
    color:white;
    background:var(--red);
    border-color:var(--red)
}
.contact-note {
    font-size:11px;
    color:#777168;
    margin:26px 0 0;
    line-height:2
}
.site-footer {
    padding:60px var(--page-gutter) 24px;
    background:var(--paper)
}
.footer-main {
    display:grid;
    grid-template-columns:1.4fr .55fr 1fr;
    gap:40px;
    padding-bottom:60px
}
.footer-identity img {
    width:158px;
    mix-blend-mode:multiply;
    margin-bottom:20px
}
.footer-identity p {
    color:var(--muted);
    font-size:10px;
    line-height:2;
    margin-bottom:12px
}
.footer-email {
    font:11px var(--font-en)
}
.footer-links {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
    font:500 10px var(--font-en);
    letter-spacing:.08em
}
.footer-links a:hover,.footer-bottom a:hover {
    color:var(--red)
}
.footer-statement {
    font:italic 28px/1.3 var(--serif);
    padding-top:6px
}
.footer-statement span {
    display:block;
    font:9px var(--font-jp);
    letter-spacing:.05em;
    color:var(--muted);
    margin-top:18px
}
.footer-bottom {
    border-top:1px solid var(--line);
    padding-top:22px;
    display:flex;
    gap:28px;
    align-items:center;
    font:8px var(--font-en);
    letter-spacing:.07em;
    color:var(--muted)
}
.footer-bottom small {
    font-size:8px
}
.footer-bottom>div {
    display:flex;
    gap:24px;
    margin-left:auto
}
.back-top {
    margin-left:18px;
    color:var(--ink)
}

/* Interior pages */
.editorial-hero {
    padding-top:32px;
    padding-bottom:58px
}
.editorial-hero .section-top {
    margin-bottom:64px
}
.breadcrumb-link {
    color:var(--muted);
    font-size:9px
}
.editorial-hero>.eyebrow {
    margin-bottom:24px
}
.editorial-hero h1 {
    font:400 clamp(64px,8vw,126px)/1.04 var(--serif);
    letter-spacing:-.035em;
    margin:0 0 50px
}
.editorial-hero-bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    align-items:center
}
.editorial-hero-bottom h2 {
    font:500 clamp(18px,2vw,29px)/1.9 var(--serif-jp);
    margin:0
}
.editorial-hero-bottom p {
    font-size:12px;
    line-height:2.2;
    color:var(--muted);
    margin:0
}
.works-hero h1 sup {
    font:400 14px var(--font-en);
    letter-spacing:0;
    display:inline-block;
    margin-left:22px;
    vertical-align:top;
    top:1em
}
.works-toolbar {
    padding-top:0;
    padding-bottom:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:0
}
.work-filters {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;
    gap:36px;
    flex:1;
    align-items:center;
    height:78px
}
.work-filters button {
    border:none;
    background:none;
    padding:22px 0;
    position:relative;
    font:500 11px var(--font-en);
    letter-spacing:.05em;
    color:var(--muted)
}
.work-filters button[aria-pressed=true] {
    color:var(--red)
}
.work-filters button[aria-pressed=true]:after {
    content:'';
    position:absolute;
    bottom:0;
    height:2px;
    background:var(--red);
    left:0;
    right:0
}
.work-filters button sup {
    font-size:8px;
    margin-left:6px
}
.works-result {
    height:78px;
    display:flex;
    align-items:center;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    white-space:nowrap
}
.web-case-studies {
    padding-top:12px;
    padding-bottom:40px
}
.case-study {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:6%;
    padding:54px 0;
    border-bottom:1px solid var(--line);
    align-items:center;
    scroll-margin-top:36px
}
.case-study:last-child {
    border-bottom:0
}
.case-study .project-visual {
    aspect-ratio:1.35
}
.case-study .browser-frame {
    width:86%
}
.case-copy {
    padding:10px 0
}
.case-meta {
    display:flex;
    justify-content:space-between;
    gap:16px;
    font:8px/1.5 var(--font-en);
    letter-spacing:.08em;
    color:var(--muted);
    margin-bottom:20px
}
.case-copy h2 {
    font:500 33px var(--font-jp);
    letter-spacing:-.02em;
    margin:0 0 20px
}
.case-copy h3 {
    font:500 17px/1.8 var(--serif-jp);
    margin:0 0 18px
}
.case-copy>p {
    font-size:12px;
    line-height:2.2;
    color:var(--muted);
    margin-bottom:22px
}
.project-tags {
    display:flex;
    gap:8px;
    padding:0;
    list-style:none;
    flex-wrap:wrap;
    margin-bottom:20px
}
.project-tags li {
    font-size:9px;
    padding:5px 10px;
    border:1px solid var(--line);
    color:var(--muted)
}
.case-copy .line-link {
    gap:20px
}
.ios-projects {
    background:var(--paper-light)
}
.ios-intro {
    color:var(--muted);
    font-size:12px;
    line-height:2.1;
    margin-bottom:38px
}
.featured-apps {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-bottom:70px
}
.featured-app {
    min-width:0
}
.app-screen-wrap {
    aspect-ratio:.72;
    background:#ede7dc;
    overflow:hidden;
    padding:22px 16%;
    display:flex;
    justify-content:center;
    align-items:center
}
.app-screen-wrap img {
    height:100%;
    width:auto;
    object-fit:contain;
    box-shadow:0 6px 14px #443a2c1a;
    transition:transform .4s;
    border-radius:7px
}
.featured-app a:hover .app-screen-wrap img {
    transform:translateY(-6px)
}
.app-title-row {
    display:flex;
    align-items:center;
    gap:14px;
    margin:22px 0 16px
}
.app-title-row>img {
    width:48px;
    height:48px;
    border-radius:11px;
    flex-shrink:0
}
.app-title-row>div {
    min-width:0
}
.app-title-row>div>span,.app-category {
    font:8px var(--font-en);
    letter-spacing:.1em;
    color:var(--muted)
}
.app-title-row h3 {
    font-size:16px;
    font-weight:500;
    line-height:1.5;
    margin:6px 0 0
}
.app-title-row>span:last-child {
    margin-left:auto;
    font-size:23px
}
.featured-app>p {
    font-size:11px;
    line-height:2.1;
    color:var(--muted)
}
.app-store-link {
    font-size:10px;
    border-bottom:1px solid var(--line);
    padding-bottom:5px;
    display:inline-block
}
.app-store-link:hover {
    color:var(--red)
}
.app-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0 34px
}
.app-item {
    padding:28px 0;
    border-top:1px solid var(--line)
}
.app-item>a {
    position:relative;
    display:grid;
    grid-template-columns:66px 1fr;
    column-gap:17px;
    min-height:66px;
    padding-right:22px;
    align-content:center
}
.app-item img {
    grid-row:1/3;
    width:66px;
    height:66px;
    border-radius:15px
}
.app-category {
    align-self:end;
    line-height:1.5
}
.app-item h3 {
    font-size:13px;
    line-height:1.7;
    align-self:start;
    margin:6px 0 0
}
.app-item-arrow {
    position:absolute;
    top:0;
    right:0;
    font-size:21px
}
.app-item p {
    font-size:11px;
    line-height:2.1;
    color:var(--muted);
    margin:17px 0 0
}
.app-item>a:hover h3,.app-item>a:hover .app-item-arrow {
    color:var(--red)
}
.app-archive-note {
    display:flex;
    gap:14px;
    border-top:1px solid var(--line);
    padding-top:24px;
    margin-top:32px;
    align-items:center
}
.app-archive-note>.red {
    font-size:22px
}
.app-archive-note p {
    font-size:11px;
    color:var(--muted);
    margin:0
}
.app-archive-note a {
    border-bottom:1px solid var(--line)
}

/* Services / company */
.business-services {
    padding-top:0;
    padding-bottom:32px
}
.business-detail {
    position:relative;
    display:grid;
    grid-template-columns:52px minmax(0,1fr) minmax(0,.9fr);
    gap:42px;
    padding:60px 0;
    border-top:1px solid var(--line);
    scroll-margin-top:30px
}
.business-number {
    font:400 36px/1 var(--serif);
    color:#918a7e
}
.business-legal .business-number {
    color:var(--red)
}
.business-copy .eyebrow {
    margin-bottom:20px
}
.business-copy h2 {
    font:500 27px/1.8 var(--serif-jp);
    margin:0 0 24px
}
.business-copy>p:not(.eyebrow) {
    font-size:12px;
    line-height:2.3;
    color:var(--muted);
    margin-bottom:20px
}
.business-copy .line-link {
    font-size:11px;
    letter-spacing:0;
    gap:20px
}
.business-capabilities h3 {
    font:500 14px/1.8 var(--serif-jp);
    margin:0 0 22px
}
.business-capabilities ul {
    list-style:none;
    padding:0;
    margin:0
}
.business-capabilities li {
    padding:17px 0;
    border-top:1px solid var(--line)
}
.business-capabilities strong {
    display:block;
    font-size:12px;
    font-weight:500;
    margin-bottom:8px
}
.business-capabilities li>span {
    display:block;
    font-size:11px;
    line-height:2;
    color:var(--muted)
}
.business-related {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    font-size:10px;
    color:var(--muted);
    margin:26px 0 0
}
.business-related a {
    color:var(--ink);
    border-bottom:1px solid var(--line)
}
.business-related a:hover {
    color:var(--red)
}
.business-anchor {
    position:absolute;
    top:0;
    left:0
}
.service-detail {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px 8%;
    border-top:1px solid var(--line);
    scroll-margin-top:20px
}
.service-detail-number {
    grid-column:1/-1;
    font:400 43px var(--serif);
    display:flex;
    align-items:center;
    gap:24px
}
.service-detail-number small {
    font:9px var(--font-en);
    letter-spacing:.12em;
    color:var(--red)
}
.service-detail .serif-title {
    margin-bottom:24px
}
.service-detail>div>p:not(.eyebrow) {
    font-size:12px;
    color:var(--muted);
    line-height:2.3;
    max-width:480px
}
.capability-list {
    list-style:none;
    padding:0;
    margin:26px 0
}
.capability-list li {
    font-size:11px;
    padding:12px 0;
    border-bottom:1px solid var(--line)
}
.capability-list li:before {
    content:'+';
    color:var(--red);
    margin-right:16px
}
.blueprint-panel {
    background-color:#eeebe3;
    background-image:linear-gradient(#9590870e 1px,transparent 1px),linear-gradient(90deg,#9590870e 1px,transparent 1px);
    background-size:24px 24px;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:370px;
    align-self:stretch
}
.blueprint-panel>span {
    font:8px/1.8 var(--font-en);
    letter-spacing:.1em;
    color:var(--muted)
}
.blueprint-panel>p {
    text-align:center;
    font:400 13px var(--serif-jp)!important;
    color:var(--muted);
    margin:0
}
.plan-diagram {
    display:flex;
    gap:14px;
    align-items:center;
    justify-content:center
}
.plan-diagram i {
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    border:1px solid #a9a397;
    font:10px var(--font-en);
    transform:rotate(-4deg)
}
.plan-diagram i:nth-of-type(2) {
    border-color:var(--red);
    color:var(--red)
}
.plan-diagram b {
    font-size:16px;
    font-weight:400;
    color:#999
}
.wireframe-diagram {
    width:75%;
    margin:30px auto;
    border:1px solid #928c80;
    padding:20px;
    display:grid;
    gap:12px;
    grid-template-columns:repeat(3,1fr)
}
.wireframe-diagram i {
    grid-column:1/-1;
    display:block;
    height:16px;
    border-bottom:1px solid var(--red);
    margin-bottom:8px
}
.wireframe-diagram b {
    height:75px;
    display:block;
    border:1px solid #a39c90;
    background:linear-gradient(53deg,transparent 49%,#a39c90 50%,transparent 51%)
}
.code-panel pre {
    font:12px/2 var(--font-en);
    margin:30px auto;
    max-width:100%
}
.code-panel pre span {
    color:var(--red)
}
.code-panel pre em {
    font-style:normal;
    color:#737564
}
.process-section {
    background:var(--paper-light)
}
.process-section>p {
    font-size:12px;
    color:var(--muted)
}
.process-list {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    list-style:none;
    gap:28px;
    padding:0;
    margin:48px 0 0
}
.process-list li {
    border-top:1px solid var(--line);
    padding-top:18px
}
.process-list li>span {
    font:10px var(--font-en);
    color:var(--red)
}
.process-list h3 {
    font:400 38px var(--serif);
    margin:24px 0 18px
}
.process-list h3 small {
    display:block;
    font:11px var(--font-jp);
    margin-top:12px
}
.process-list p {
    font-size:11px;
    color:var(--muted);
    line-height:2
}
.company-concept {
    margin:0 var(--page-gutter);
    padding:22px;
    background:#ece8df
}
.company-concept>img {
    width:100%;
    display:block;
    mix-blend-mode:multiply
}
.company-concept figcaption {
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:18px 0 2px;
    color:var(--muted);
    font-size:9px
}
.company-concept figcaption>span:first-child {
    font-family:var(--font-en);
    letter-spacing:.08em
}
.company-philosophy {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px 8%
}
.company-philosophy>.eyebrow {
    grid-column:1/-1
}
.company-philosophy p {
    color:var(--muted);
    font-size:12px;
    line-height:2.4;
    margin-bottom:22px
}
.company-information {
    background:var(--paper-light);
    display:grid;
    grid-template-columns:1fr 1.3fr;
    gap:6%
}
.company-information .display-title {
    margin-top:25px
}
.company-information>div>p {
    color:var(--muted);
    font-size:12px
}
.company-table {
    margin:0
}
.company-table>div {
    display:grid;
    grid-template-columns:100px 1fr;
    gap:24px;
    border-top:1px solid var(--line);
    padding:24px 0;
    font-size:12px
}
.company-table dt {
    font-weight:400;
    color:var(--muted)
}
.company-table dd {
    margin:0;
    line-height:2.2
}
.company-table dd small {
    font:10px var(--font-en);
    color:var(--muted)
}
.company-table a {
    border-bottom:1px solid var(--line);
    font-size:11px
}
.company-table a:hover {
    color:var(--red)
}

/* Existing form / legal content shares the new design system */
.page-hero {
    padding:32px 0 52px;
    background-image:none!important;
    border-bottom:1px solid var(--line)
}
.page-hero-overlay {
    display:none
}
.page-hero-content h1 {
    font:500 clamp(28px,4vw,48px)/1.5 var(--serif-jp);
    padding-top:35px;
    margin-bottom:20px
}
.page-hero-content>p {
    font-size:12px
}
.breadcrumb {
    font-family:var(--font-en)
}
.breadcrumb-item a,.breadcrumb-item.active {
    font-size:10px
}
.card {
    background:var(--paper-light);
    border:1px solid var(--line);
    box-shadow:none;
    border-radius:0
}
.card:hover {
    box-shadow:none
}
.card .card {
    background:var(--paper)
}
.bg-gray {
    background-color:#eeebe5!important
}
.bg-navy {
    background:var(--ink)!important
}
.btn-primary,.btn-outline-navy,.btn-outline-white {
    border-radius:0;
    font-size:12px;
    padding:14px 24px
}
.btn-primary {
    --bs-btn-active-bg:var(--primary-dark);
    --bs-btn-active-border-color:var(--primary-dark)
}
.btn-outline-navy {
    border-width:1px
}
.form-control,.form-select {
    background:#fffefb;
    border-radius:0;
    font-size:13px;
    border-color:var(--line);
    color:var(--ink)
}
.form-label {
    font-size:12px
}
.category-tag,.tech-tag {
    border-radius:0;
    font-size:10px
}
.fade-in-up {
    opacity:1;
    transform:none
}
.legal-content {
    font-size:13px
}
.legal-content h2 {
    font-family:var(--serif-jp);
    font-weight:500
}
.news-list-item {
    display:grid;
    grid-template-columns:140px 1fr;
    gap:30px;
    border-top:1px solid var(--line);
    padding:35px 0
}
.news-list-item time {
    font:12px var(--font-en);
    color:var(--muted)
}
.news-list-item h2 {
    font:500 20px/1.8 var(--serif-jp);
    margin:0 0 20px
}
.news-list-item p {
    font-size:12px;
    line-height:2.3;
    color:var(--muted)
}
.news-list-item .category-tag {
    margin-bottom:18px
}
.news-list-item a {
    color:var(--red);
    text-decoration:underline;
    text-underline-offset:4px
}
.news-list {
    padding-top:12px
}
.step-number {
    border-radius:0
}
.page-contact .card .h6 {
    font-weight:500
}
.page-contact .form-check-label {
    font-size:12px
}
@media(max-width:1100px) {
    .portfolio-index {
        column-gap:30px
    }
    .portfolio-entry {
        grid-template-columns:100px minmax(0,1fr) 16px;
        gap:16px
    }
    .portfolio-media {
        width:100px;
        height:76px
    }
    .portfolio-copy h3 {
        font-size:16px
    }
    .legal-expertise {
        grid-template-columns:140px minmax(0,1fr);
        gap:22px
    }
    .legal-expertise>.line-link {
        grid-column:2
    }
    .business-detail {
        grid-template-columns:32px minmax(0,1fr) minmax(0,.9fr);
        gap:26px
    }
    .business-copy h2 {
        font-size:24px
    }
    .site-header {
        height:94px;
        gap:24px
    }
    .desktop-nav {
        gap:22px
    }
    .brand,.brand img {
        width:150px
    }
    .header-contact {
        padding:15px 18px
    }
    .philosophy-layout {
        gap:5%
    }
    .service-floor {
        padding:26px 22px 34px
    }
    .floor-drawing {
        transform:scale(.85)
    }
    .floor-number>span {
        font-size:7px
    }
    .floor-tags {
        font-size:6px
    }
    .service-floor h3 {
        font-size:37px
    }
    .service-floor h3>span {
        margin-left:10px;
        font-size:11px
    }
    .service-floor p {
        font-size:10px
    }
    .case-meta {
        flex-direction:column;
        gap:7px
    }
    .case-copy h2 {
        font-size:28px
    }
    .case-copy h3 {
        font-size:15px
    }
    .case-copy>p {
        font-size:11px
    }
    .featured-apps {
        gap:20px
    }
    .app-title-row {
        gap:9px
    }
    .app-title-row h3 {
        font-size:13px
    }
    .app-grid {
        gap:0 22px
    }
    .app-item>a {
        grid-template-columns:54px 1fr;
        column-gap:12px
    }
    .app-item img {
        width:54px;
        height:54px
    }
    .app-category {
        font-size:7px
    }
    .app-item h3 {
        font-size:12px
    }
    .plan-diagram {
        gap:9px
    }
    .plan-diagram i {
        width:56px;
        height:56px
    }
    .blueprint-panel {
        padding:25px
    }
    .footer-statement {
        font-size:24px
    }
}
@media(max-width:767px) {
    .portfolio-index {
        grid-template-columns:1fr
    }
    .portfolio-index>li:nth-last-child(2) {
        border-bottom:0
    }
    .portfolio-entry {
        padding:20px 0;
        min-height:116px
    }
    .portfolio-type {
        font-size:7px
    }
    .portfolio-copy h3 {
        font-size:16px
    }
    .portfolio-copy p {
        font-size:10px
    }
    .selected-works-heading h2 {
        font-size:40px
    }
    .legal-expertise {
        grid-template-columns:1fr;
        margin-top:40px;
        padding:28px 0;
        gap:22px
    }
    .legal-expertise-label {
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px
    }
    .legal-expertise-label>span+span {
        font-size:7px;
        margin:0
    }
    .legal-expertise-copy h3 {
        font-size:21px
    }
    .legal-expertise-copy p {
        font-size:11px
    }
    .legal-expertise-copy ul {
        font-size:9px;
        gap:8px 15px
    }
    .legal-expertise>.line-link {
        grid-column:1
    }
    .business-services {
        padding-top:0;
        padding-bottom:0
    }
    .business-detail {
        grid-template-columns:1fr;
        gap:22px;
        padding:38px 0
    }
    .business-number {
        font-size:30px
    }
    .business-copy h2 {
        font-size:25px;
        margin-bottom:20px
    }
    .business-copy .eyebrow {
        font-size:8px;
        margin-bottom:16px
    }
    .business-copy>p:not(.eyebrow) {
        font-size:11px
    }
    .business-capabilities h3 {
        font-size:13px
    }
    .business-capabilities strong {
        font-size:12px
    }
    .works-section .section-top {
        margin-bottom:28px
    }
    .selected-works-heading h2 {
        font-size:40px;
        margin-bottom:8px
    }
    :root {
        --page-gutter:24px
    }
    html {
        scroll-padding-top:25px
    }
    body {
        font-size:13px
    }
    .mobile-only {
        display:initial
    }
    .section-wrap {
        padding:60px var(--page-gutter)
    }
    .site-header {
        height:84px;
        gap:20px
    }
    .brand,.brand img {
        width:134px
    }
    .desktop-nav {
        display:none
    }
    .header-contact {
        padding:12px 13px;
        gap:8px;
        font-size:9px;
        letter-spacing:.03em
    }
    .header-contact svg {
        width:14px
    }
    .contact-arrow {
        display:none
    }
    .menu-toggle {
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;
        width:26px;
        height:40px;
        padding:0;
        border:0;
        background:transparent;
        z-index:3
    }
    .menu-toggle span {
        width:24px;
        height:1px;
        background:var(--ink);
        transition:transform .25s
    }
    .menu-toggle[aria-expanded=true] span:first-child {
        transform:translateY(3.5px) rotate(45deg)
    }
    .menu-toggle[aria-expanded=true] span:last-child {
        transform:translateY(-3.5px) rotate(-45deg)
    }
    .mobile-menu:not([hidden]) {
        display:flex;
        flex-direction:column;
        position:absolute;
        left:0;
        right:0;
        top:84px;
        padding:18px 24px 32px;
        background:var(--paper);
        box-shadow:0 20px 24px #24231d12;
        max-height:calc(100svh - 84px);
        overflow:auto;
        border-top:1px solid var(--line)
    }
    .mobile-menu a {
        font:500 19px var(--font-en);
        padding:17px 0;
        border-bottom:1px solid var(--line);
        display:flex;
        align-items:center;
        justify-content:space-between;
        letter-spacing:.03em
    }
    .mobile-menu small {
        font:10px var(--font-jp);
        color:var(--muted)
    }
    .mobile-menu a[aria-current] {
        color:var(--red)
    }
    .latest-news {
        min-height:110px;
        padding:18px 0;
        display:grid;
        grid-template-columns:auto 1fr;
        gap:12px 20px;
        font-size:10px
    }
    .latest-news>.eyebrow {
        font-size:8px;
        padding-right:20px
    }
    .latest-news time {
        font-size:10px
    }
    .latest-news>a:not(.news-all) {
        grid-column:1/-1;
        gap:10px;
        justify-content:space-between
    }
    .latest-news .news-all {
        display:none
    }
    .section-top {
        margin-bottom:38px;
        padding-top:14px
    }
    .section-top .eyebrow {
        font-size:8px
    }
    .drawing-code {
        font-size:7px;
        letter-spacing:.07em
    }
    .section-top>.drawing-code {
        max-width:45%;
        text-align:right
    }
    .serif-title {
        font-size:28px;
        line-height:1.85
    }
    .philosophy-layout {
        grid-template-columns:1fr;
        gap:38px
    }
    .philosophy-layout .serif-title {
        margin-bottom:20px
    }
    .handwritten {
        font-size:24px;
        margin-left:auto;
        display:block;
        width:max-content;
        margin-right:15px
    }
    .philosophy-body p {
        font-size:11px;
        line-height:2.3
    }
    .philosophy-body br {
        display:none
    }
    .philosophy-body .lead-copy {
        font-size:19px
    }
    .philosophy-body .lead-copy br {
        display:initial
    }
    .display-title {
        font-size:46px;
        margin-bottom:15px
    }
    .section-heading {
        display:block;
        margin-bottom:30px
    }
    .section-heading>div>p {
        font-size:11px
    }
    .section-heading>.line-link {
        margin-top:17px
    }
    .line-link {
        font-size:9px;
        gap:24px
    }
    .round-arrow {
        width:33px;
        height:33px;
        font-size:20px
    }
    .project-visual  {
        aspect-ratio:1.38
    }
    .visual-index {
        top:16px;
        left:18px;
        font-size:8px
    }
    .visual-caption {
        font-size:6px;
        bottom:15px;
        right:15px
    }
    .browser-bar {
        height:22px
    }
    .making-type>span {
        font-size:28px
    }
    .making-type strong {
        font-size:33px;
        margin-top:20px
    }
    .samurai-type>span {
        font-size:23px
    }
    .samurai-type strong {
        font-size:46px
    }
    .samurai-type small {
        font-size:6px
    }
    .service-floors {
        grid-template-columns:1fr
    }
    .service-floor {
        padding:28px 26px 32px
    }
    .service-floor+.service-floor {
        border-left:0;
        border-top:1px solid var(--line)
    }
    .floor-number {
        font-size:36px
    }
    .floor-number>span {
        font-size:8px
    }
    .floor-drawing {
        position:absolute;
        right:14px;
        top:58px;
        margin:0;
        width:140px;
        transform:scale(.65);
        transform-origin:right top
    }
    .service-floor h3 {
        font-size:41px;
        margin-top:24px
    }
    .service-floor h3>span {
        font-size:11px;
        margin-left:16px
    }
    .service-floor p {
        font-size:11px
    }
    .floor-tags {
        font-size:7px
    }
    .service-footnote {
        align-items:flex-start;
        gap:10px
    }
    .service-footnote>.red {
        line-height:1.5
    }
    .service-footnote p {
        font-size:10px;
        line-height:2
    }
    .service-footnote .drawing-code {
        display:none
    }
    .contact-section {
        padding:40px 24px 48px
    }
    .contact-top {
        margin-bottom:28px
    }
    .contact-top .eyebrow {
        font-size:8px
    }
    .contact-top .drawing-code {
        font-size:7px
    }
    .contact-invitation {
        gap:18px;
        align-items:flex-end
    }
    .contact-invitation p {
        font-size:17px;
        line-height:1.7
    }
    .contact-invitation h2 {
        font-size:80px
    }
    .contact-circle {
        height:62px;
        width:62px;
        font-size:31px;
        margin-bottom:3px
    }
    .contact-note {
        font-size:10px;
        line-height:2.2;
        margin-top:24px
    }
    .site-footer {
        padding:42px 24px 24px
    }
    .footer-main {
        grid-template-columns:1fr auto;
        gap:28px;
        padding-bottom:30px
    }
    .footer-identity img {
        width:133px;
        margin-bottom:18px
    }
    .footer-identity p {
        font-size:9px;
        max-width:230px
    }
    .footer-email {
        font-size:10px
    }
    .footer-links {
        gap:15px;
        font-size:9px;
        padding-top:8px
    }
    .footer-statement {
        grid-column:1/-1;
        font-size:26px
    }
    .footer-statement span {
        font-size:9px;
        margin-top:12px
    }
    .footer-bottom {
        flex-wrap:wrap;
        gap:18px;
        font-size:7px
    }
    .footer-bottom>div {
        margin:0;
        gap:16px
    }
    .footer-bottom small {
        font-size:7px;
        order:2
    }
    .back-top {
        margin-left:auto;
        font-size:7px
    }
    .editorial-hero {
        padding-top:18px;
        padding-bottom:40px
    }
    .editorial-hero .section-top {
        margin-bottom:45px
    }
    .editorial-hero>.eyebrow {
        font-size:8px;
        margin-bottom:20px
    }
    .editorial-hero h1 {
        font-size:clamp(48px,12vw,74px);
        line-height:1.05;
        letter-spacing:-.025em;
        margin-bottom:32px
    }
    .editorial-hero-bottom {
        grid-template-columns:1fr;
        gap:18px
    }
    .editorial-hero-bottom h2 {
        font-size:20px
    }
    .editorial-hero-bottom p {
        font-size:11px;
        line-height:2.1
    }
    .works-hero h1 {
        font-size:clamp(42px,10.6vw,70px)
    }
    .works-hero h1 sup {
        font-size:10px;
        margin-left:10px
    }
    .works-toolbar {
        padding-top:0;
        padding-bottom:0;
        gap:0
    }
    .work-filters {
        gap:22px;
        height:66px
    }
    .work-filters button {
        font-size:9px;
        padding:24px 0;
        letter-spacing:0;
        white-space:nowrap
    }
    .work-filters button sup {
        font-size:7px;
        margin-left:3px
    }
    .works-result {
        height:66px;
        font-size:6px;
        margin-left:0
    }
    .web-case-studies {
        padding-top:0;
        padding-bottom:12px
    }
    .case-study {
        grid-template-columns:1fr;
        gap:25px;
        padding:34px 0
    }
    .case-study .project-visual {
        aspect-ratio:1.3
    }
    .case-meta {
        flex-direction:row;
        gap:10px;
        font-size:7px;
        margin-bottom:16px
    }
    .case-copy {
        padding:0
    }
    .case-copy h2 {
        font-size:26px;
        margin-bottom:15px
    }
    .case-copy h3 {
        font-size:16px;
        line-height:1.8
    }
    .case-copy>p {
        font-size:11px
    }
    .project-tags {
        margin-bottom:14px
    }
    .project-tags li {
        font-size:8px
    }
    .ios-intro {
        font-size:11px;
        margin-bottom:28px
    }
    .featured-apps {
        grid-template-columns:1fr;
        gap:35px;
        margin-bottom:42px
    }
    .app-screen-wrap {
        aspect-ratio:.88;
        padding:24px 17%
    }
    .app-title-row {
        margin:20px 0 14px;
        gap:14px
    }
    .app-title-row>img {
        width:48px;
        height:48px
    }
    .app-title-row h3 {
        font-size:17px
    }
    .featured-app>p {
        font-size:11px
    }
    .app-store-link {
        font-size:10px
    }
    .app-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .app-item {
        padding:25px 0
    }
    .app-item>a {
        grid-template-columns:64px 1fr;
        gap:0 18px;
        min-height:64px
    }
    .app-item img {
        width:64px;
        height:64px;
        border-radius:14px
    }
    .app-category {
        font-size:8px
    }
    .app-item h3 {
        font-size:15px
    }
    .app-item p {
        margin-top:16px;
        font-size:11px
    }
    .app-archive-note {
        align-items:flex-start;
        gap:10px
    }
    .app-archive-note p {
        font-size:10px;
        line-height:2
    }
    .service-detail {
        grid-template-columns:1fr;
        gap:26px
    }
    .service-detail-number {
        font-size:36px
    }
    .service-detail-number small {
        font-size:8px
    }
    .service-detail>div>p:not(.eyebrow) {
        font-size:11px;
        max-width:none
    }
    .blueprint-panel {
        min-height:290px;
        padding:24px
    }
    .blueprint-panel>span {
        font-size:7px
    }
    .plan-diagram i {
        width:60px;
        height:60px
    }
    .process-list {
        grid-template-columns:1fr 1fr;
        gap:28px 20px;
        margin-top:30px
    }
    .process-list h3 {
        font-size:33px;
        margin:18px 0 15px
    }
    .process-list p {
        font-size:10px
    }
    .company-concept {
        padding:10px;
        margin:0 14px
    }
    .company-concept figcaption {
        font-size:7px;
        padding-top:12px;
        flex-direction:column;
        gap:6px
    }
    .company-philosophy {
        grid-template-columns:1fr;
        gap:25px
    }
    .company-philosophy .serif-title {
        font-size:24px
    }
    .company-philosophy p {
        font-size:11px;
        line-height:2.4
    }
    .company-information {
        grid-template-columns:1fr;
        gap:30px
    }
    .company-table>div {
        grid-template-columns:76px 1fr;
        gap:16px;
        padding:20px 0;
        font-size:11px
    }
    .company-table a {
        font-size:10px
    }
    .page-hero {
        padding:15px 12px 35px
    }
    .page-hero-content h1 {
        font-size:27px;
        padding-top:20px
    }
    .page-hero-content>p {
        font-size:10px;
        line-height:2
    }
    .step-label {
        font-size:10px
    }
    .step-line {
        width:22px
    }
    .step-number {
        width:27px;
        height:27px;
        font-size:11px
    }
    .page-contact .container {
        padding-right:24px;
        padding-left:24px
    }
    .page-contact .card-body {
        padding:24px!important
    }
    .news-list-item {
        grid-template-columns:1fr;
        gap:18px;
        padding:25px 0
    }
    .news-list-item h2 {
        font-size:18px
    }
    .news-list-item p {
        font-size:11px
    }
    .news-list {
        padding-top:6px
    }
    .legal-content {
        font-size:12px
    }
    .legal-content h2 {
        font-size:18px
    }
}
@media(max-width:374px) {
    :root {
        --page-gutter:20px
    }
    .site-header {
        padding:0 20px;
        gap:14px
    }
    .brand,.brand img {
        width:120px
    }
    .header-contact {
        font-size:8px;
        padding:10px
    }
    .header-contact svg {
        display:none
    }
    .work-filters {
        gap:15px
    }
    .works-result {
        display:none
    }
    .display-title {
        font-size:40px
    }
    .contact-invitation h2 {
        font-size:69px
    }
    .contact-circle {
        width:54px;
        height:54px
    }
    .case-meta {
        font-size:6px
    }
    .floor-tags {
        font-size:6px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}