@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
    --cream:#fffcf5;
    --paper:#fff3ec;
    --plum:#382838;
    --accent:#ab352b;
    --coral:#ff897b;
    --gold:#e6c46b;
    --ink:#382838;
    --muted:#665568;
    --line:#e6cec7;
    --gutter:clamp(24px,5.5vw,96px);
    --max:1440px
}
 *{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:28px
}
.w-100 {
    width: 100%;
}
body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
      font-family: "Inter", sans-serif;
	font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
img{
    max-width:100%;
    display:block
}
h1,h2,h3,h4,p{
    margin:0
}
h1,h2,h3{
    font-weight:500;
    line-height:1.03;
    letter-spacing:-.055em
}
p+p{
    margin-top:18px
}
a,button,summary{
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible{
    outline:3px solid currentColor;
    outline-offset:7px
}
a{
    transition:color .2s,background .2s,transform .2s
}
button,summary{
    cursor:pointer
}
.skip-link{
    position:absolute;
    top:0;
    left:20px;
    z-index:20;
    background:var(--cream);
    padding:16px;
    transform:translateY(-150%)
}
.skip-link:focus{
    transform:translateY(0)
}
.section-wrap{
    max-width:var(--max);
    margin-inline:auto;
    padding:100px var(--gutter)
}
.eyebrow{
    font-size:.75rem;
    letter-spacing:.17em;
    line-height:1.5;
    text-transform:uppercase;
    font-weight:500;
    margin-bottom:25px
}
.ruled{
    display:flex;
    align-items:center;
    gap:28px
}
.ruled:after{
    content:"";
    height:1px;
    flex:1;
    background:currentColor;
    opacity:.4
}
h2{
    font-size:clamp(40px,4.5vw,68px)
}
h3{
    font-size:32px
}
.text-link{
    display:inline-flex;
    align-items:center;
    gap:26px;
    padding:9px 0;
    border-bottom:1px solid var(--gold);
    font-size:1rem;
    line-height:1.4
}
.text-link span{
    transition:transform .2s
}
.text-link:hover span{
    transform:translate(3px,-3px)
}
.text-link:hover{
    color:var(--accent)
}
.text-link.light{
    color:var(--cream)
}
.text-link.light:hover{
    color:var(--gold)
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:60px;
    margin-bottom:56px
}
.section-heading>p,.section-heading>div{
    max-width:365px
}
.section-heading p{
    color:var(--muted)
}
.section-heading>div .text-link{
    margin-top:16px
}
.opening{
    background:var(--accent);
    padding:16px 24px 0;
    color:var(--cream)
}
.header{
    max-width:1510px;
    margin:auto;
    background:var(--cream);
    color:var(--plum);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:12px 14px 12px 26px;
    position:relative;
    z-index:10
}
.wordmark{
    font-size:29px;
    font-weight:600;
    letter-spacing:-.065em;
    line-height:1
}
.brand-period{
    color:var(--coral)
}
.header nav{
    display:flex;
    gap:30px;
    align-items:center;
    font-size:.875rem
}
.header nav>a:not(.nav-cta){
    padding:10px 0
}
.header nav>a:not(.nav-cta):hover{
    color:var(--accent)
}
.nav-cta{
    background:var(--gold);
    padding:12px 22px;
    border-radius:7px;
    display:flex;
    gap:26px;
    align-items:center
}
.nav-cta:hover{
    background:var(--plum);
    color:var(--cream)
}
.menu-toggle{
    display:none
}
.hero{
    max-width:1510px;
    margin:auto;
    padding-top:48px
}
.hero-eyebrow{
    margin-left:30px;
    margin-bottom:20px
}
.hero-composition{
    position:relative;
    padding-top:0;
    display:grid;
    grid-template-columns:1fr 31%;
    grid-template-rows:auto auto
}
.hero h1{
    font-size:clamp(64px,6.8vw,108px);
    line-height:.97;
    letter-spacing:-.058em;
    position:relative;
    z-index:2;
    grid-area:1/1/3/2;
    margin:0 0 auto 26px;
    pointer-events:none;
    padding-bottom:80px;
	    padding-top: 15px;
}
.hero-intro{
    grid-area:1/2/2/3;
    padding:10px 30px 40px 5px;
    z-index:2
}
.hero-intro>p:first-child{
    font-size:19px;
    line-height:1.4;
    max-width:315px
}
.hero-small{
    font-size:.9rem;
    max-width:290px;
    margin-top:22px;
    opacity:.94
}
.hero-intro .text-link{
    margin-top:14px
}
.hero-image{
    grid-area:2/1/3/3;
    position:relative;
    overflow:hidden;
    border-radius:16px;
    min-height:510px;
    margin-top:-5px
}
.hero-image:after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(52,20,10,.42),rgba(52,20,10,.08) 57%,transparent 75%);
    pointer-events:none
}
.hero-image>img{
    width:100%;
    height:560px;
    object-fit:cover;
    object-position:center 58%
}
.image-index{
    position:absolute;
    z-index:1;
    left:30px;
    bottom:30px;
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase
}
.down-button{
    position:absolute;
    bottom:24px;
    right:24px;
    z-index:2;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid var(--cream);
    border-radius:50%;
    font-size:24px
}
.down-button:hover{
    background:var(--cream);
    color:var(--plum)
}
.feature-tiles{
    display:grid;
    grid-template-columns:1.06fr 1fr;
    gap:10px;
    padding:10px 0 16px
}
.feature-tile{
    min-height:160px;
    padding:26px 32px;
    border:1px solid #ddb29399;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden
}
.feature-tile .tile-caption {
	    margin-top: 0;
}
.feature-brand{
    background:var(--coral)
}
.feature-digital{
    background:var(--plum)
}
.tile-title{
    font-size:35px;
    line-height:1.06;
    letter-spacing:-.03em;
    position:relative;
    z-index:1
}
.tile-caption{
    font-size:.9rem;
    position:relative;
    z-index:1;
    margin-top:24px;
    display:flex;
    align-items:center;
    gap:24px
}
.feature-tile:hover .tile-caption span{
    transform:translateX(5px)
}
.parallel-lines{
    position:absolute;
    right:0;
    bottom:-100px;
    width:180px;
    height:360px;
    transform:rotate(28deg);
    background:repeating-linear-gradient(90deg,transparent,transparent 16px,#d7ad7580 17px,#d7ad7580 18px)
}
.tile-orbit{
    position:absolute;
    width:340px;
    height:340px;
    border:1px solid #c7a26670;
    border-radius:50%;
    right:-100px;
    top:-140px;
    box-shadow:0 0 0 20px #c7a26610,0 0 0 40px #c7a26610,0 0 0 60px #c7a26610
}
.about{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px 8%;
    align-items:center
}
/* .capsule-image{ */
    /* display:flex; */
    /* align-items:center */
/* } */
.capsule-image span{
    flex:1;
    height:100%;
    border-radius:100px;
    background-image:url('assets/about.webp');
    background-size:500% 100%;
    background-repeat:no-repeat
}
.capsule-image span:nth-child(1){
    background-position:0 center;
    height:91%
}
.capsule-image span:nth-child(2){
    background-position:25% center;
    height:98%
}
.capsule-image span:nth-child(3){
    background-position:50% center
}
.capsule-image span:nth-child(4){
    background-position:75% center;
    height:98%
}
.capsule-image span:nth-child(5){
    background-position:100% center;
    height:91%
}
.about-copy h2{
    margin-bottom:25px
}
.about-copy p:not(.eyebrow){
    color:var(--muted);
    max-width:480px
}
.about-copy .lede{
    font-size:21px;
    color:var(--plum)!important
}
.about-copy .text-link{
    margin-top:23px
}
.intro-note{
    grid-column:1/-1;
    border-top:1px solid var(--line);
    padding-top:28px;
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:40px;
    align-items:start
}
.intro-note .eyebrow{
    margin-top:7px;
    margin-bottom:0
}
.intro-note>p{
    font-size:23px;
    line-height:1.45;
    letter-spacing:-.02em
}
.dark-section{
    background:var(--plum);
    color:var(--cream)
}
.capabilities .section-heading>p{
    color:#e6d5bd
}
.capabilities .eyebrow{
    color:var(--gold)
}

.experience-number{
    display:flex;
    align-items:end;
    justify-content: center;
    gap:20px;
    padding-top:30px
}
.outline-type{
    font-size:clamp(80px,14.9vw,213px);
    letter-spacing:-.075em;
    line-height:1.13;
    color:transparent;
    -webkit-text-stroke:1px var(--gold);
    white-space:nowrap;
    font-weight:500
}
.experience-number p{
    font-size:.75rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    line-height:1.8;
    max-width:210px;
    padding-bottom:30px;
    color:var(--gold)
}
.project-note{
    border-top:1px solid #c7a26650;
    padding-top:16px;
    color:#e6d5bd;
    font-size:.875rem
}
.project{
    display:grid;
    grid-template-columns:1.25fr .8fr;
    gap:7%;
    align-items:center;
    margin-bottom:64px
}
.project.reverse{
    grid-template-columns:.8fr 1.25fr
}
.project.reverse .project-art{
    order:2
}
.project.reverse .project-copy{
    order:1
}
.project-art{
    border-radius:12px;
    overflow:hidden;
    min-height:auto;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    transition:transform .4s
}
.project-art:hover{
    transform:translateY(-5px)
}
.legal-art{
    background:#efe2ca;
    border:1px solid #dac4a0;
    padding:0;
    box-shadow:inset 0 0 80px #c6a16a25
}
.art-label{
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.15em;
    color:#63552f
}
.legal-art>img {
    width: 100%;
    margin: 0;
}
.art-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-size:.875rem;
    border-top:1px solid #aa8d6740;
    padding-top:15px
}
.art-bottom>span{
    font-size:24px
}
.energy-art{
    background:#f0efe8;
    padding:0
}
.energy-identity{
    padding:26px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.energy-identity>img{
    width:130px;
    height:65px;
    object-fit:contain
}
.energy-identity>span{
    font-size:.7rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:#305b4f
}
.energy-photo{
    width:100%;
    height:auto;
    object-fit:cover
}
.energy-art .art-bottom{
    padding:18px 30px;
    border:0;
    color:#275044
}
.project-copy h3{
    font-size:clamp(36px,4vw,56px);
    margin:14px 0 20px
}
.project-scope{
    font-size:18px;
    line-height:1.45;
    color:var(--muted)
}
.project-copy dl{
    font-size:.875rem;
    margin:28px 0
}
.project-copy dl>div {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 10px;
    margin: 5px 0;
}
.project-copy dt{
    color:var(--muted)
}
.project-copy dd{
    margin:0
}
.project-copy .eyebrow{
    margin-bottom:0
}
.work-index{
    padding-top:28px;
    scroll-margin-top:40px
}
.index-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:30px;
    border-bottom:1px solid var(--line);
    gap:30px
}
.index-heading .eyebrow{
    margin:0
}
.index-heading h3{
    font-size:31px
}
.work-row{
    padding:27px 0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:35px 1.3fr 1fr 1.1fr 22px;
    align-items:center;
    gap:20px
}
.row-number{
    font-size:.75rem;
    color:var(--muted)
}
.row-title{
    font-size:23px;
    letter-spacing:-.04em;
    line-height:1.2
}
.row-industry,.row-scope{
    font-size:.875rem;
    color:var(--muted)
}
.row-arrow{
    font-size:24px
}
a.work-row:hover{
    color:var(--accent);
    background:#e4cbaa30
}
.approach{
    padding-top:15px
}
.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr)
}
.process-grid article{
    padding:0 24px;
    border-left:1px solid var(--line)
}
.process-grid article:first-child{
    padding-left:0;
    border:0
}
.process-grid article:last-child{
    padding-right:0
}
.step-number{
    display:block;
    font-size:34px;
    letter-spacing:-.06em;
    color:var(--accent);
    margin-bottom:28px
}
.process-grid h3{
    font-size:28px;
    margin-bottom:24px
}
.process-grid h4{
    font-size:1rem;
    line-height:1.4;
    font-weight:500;
    margin-bottom:10px
}
.process-grid p{
    font-size:.9375rem;
    color:var(--muted);
    line-height:1.6
}
.moments{
    background:#e9d7bd
}
.moments-layout{
    display:grid;
    grid-template-columns:1fr 1.08fr;
    gap:8%
}
.moments-intro{
    margin-top:28px;
    color:var(--muted)
}
.moment-list{
    padding-top:2px
}
details summary{
    list-style:none
}
details summary::-webkit-details-marker{
    display:none
}
.moment-list details{
    border-top:1px solid #bda384
}
.moment-list details:last-child{
    border-bottom:1px solid #bda384
}
.moment-list summary{
    padding:25px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-size:22px;
    line-height:1.3;
    letter-spacing:-.035em
}
.plus{
    width:22px;
    height:22px;
    position:relative;
    flex-shrink:0
}
.plus:before,.plus:after{
    content:"";
    position:absolute;
    left:3px;
    right:3px;
    top:10px;
    height:1px;
    background:currentColor
}
.plus:after{
    transform:rotate(90deg);
    transition:transform .2s
}
details[open] .plus:after{
    transform:rotate(0)
}
.detail-content{
    padding:0 40px 26px 0;
    color:var(--muted)
}
.detail-content .text-link{
    color:var(--plum);
    margin-top:16px
}
.industry .section-heading h2{
    font-size:clamp(36px,4.2vw,60px)
}
.industry-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px 28px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:22px 0;
    font-size:.875rem;
    color:var(--muted)
}
.real-identities {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 50px 15px 0;
}

.real-identities > * {
    flex: 0 0 calc((100% - 60px) / 5);
    box-sizing: border-box;
}
.real-identities img{
    width:100%;
    max-width:230px;
    height:110px;
    object-fit:contain
}
.brand-statement .section-wrap{
    display:flex;
    justify-content:space-between;
    gap:70px;
    align-items:center;
    padding-block:75px
}
.statement-symbol{
    font-size:130px;
    line-height:1;
    color:var(--gold)
}
.brand-statement h2{
    font-size:clamp(34px,4.7vw,64px);
    max-width:800px
}
.brand-statement h2>span{
    color:var(--gold)
}
.contact{
    background:var(--accent);
    color:var(--cream);
    overflow:hidden
}
.contact .section-wrap{
    padding-top:78px;
    padding-bottom:30px
}
.contact-title-wrap {
    display: flex;
    position: relative;
    align-items: start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px;
    color: #fffcf5;
}
.contact h2{
    font-size:clamp(66px,8.4vw,118px);
    letter-spacing:-.06em;
    line-height:.96;
    position:relative;
    z-index:1
}
.contact-title-wrap>p{
    position:relative;
    z-index:1;
    max-width:270px;
    font-size:1rem;
    margin-bottom:6px
}
.contact-lines{
    position:absolute;
    width:420px;
    height:440px;
    right:20%;
    top:-60px;
    border-radius:100% 0 0 0;
    background:repeating-linear-gradient(90deg,transparent 0,transparent 25px,#ddb88755 26px,#ddb88755 27px);
    transform:rotate(-12deg);
    opacity:.8;
    pointer-events:none
}
.conversation{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    background:var(--cream);
    color:var(--plum);
    padding:25px 30px 25px 38px;
    border-radius:14px;
    font-size:clamp(27px,4.5vw,64px);
    font-weight:500;
    letter-spacing:-.055em;
    line-height:1.1
}
.circle-arrow{
    background:var(--plum);
    color:var(--cream);
    border-radius:50%;
    width:80px;
    height:80px;
    display:grid;
    place-items:center;
    flex-shrink:0;
    font-size:40px;
    font-weight:300;
    transition:transform .3s,background .3s
}
.conversation:hover .circle-arrow{
    transform:rotate(45deg);
    background:var(--accent)
}
.contact-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding-top:22px;
    font-size:.875rem
}
.contact-meta a:hover{
    text-decoration:underline
}
.footer{
    background:var(--plum);
    color:var(--cream)
}
.footer .section-wrap{
    padding-top:55px;
    padding-bottom:25px
}
.footer-main{
    display:grid;
    grid-template-columns:2.1fr 1fr 1fr .9fr;
    gap:45px
}
.footer .wordmark{
    font-size:38px
}
.footer-main>div>p{
    color:#d9c2ad;
    font-size:.875rem;
    margin-top:24px
}
.footer-col{
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:7px;
    font-size:.875rem
}
.footer-col h2{
    font-size:.75rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:14px;
    color:var(--gold)
}
.footer-col a:hover{
    color:var(--gold)
}
.footer-bottom{
    border-top:1px solid #c7a26640;
    margin-top:45px;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:.75rem;
    color:#d9c2ad
}
.review-notes{
    font-size:.75rem;
    max-width:900px;
    color:#d9c2ad;
    margin-top:23px
}
.review-notes summary{
    text-decoration:underline;
    text-underline-offset:4px;
    display:inline-block;
    padding:6px 0
}
.review-notes p{
    margin-top:12px
}
.reveal-ready{
    opacity:0;
    transform:translateY(18px);
    transition:opacity .7s,transform .7s
}
.reveal-ready.is-visible{
    opacity:1;
    transform:none
}
/* ================================
   SERVICE GRID
================================ */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}


/* ================================
   SERVICE CARD
================================ */

.service {
    background: #6a383b;
    border: 1px solid #c7a26677;
    border-radius: 12px;

    padding: 32px 26px 30px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    height: 540px;
    box-sizing: border-box;

    overflow: hidden;
    position: relative;

    isolation: isolate;
}


/* ================================
   CARD CONTENT
================================ */

.service-content {
    position: absolute;

    left: 26px;
    right: 26px;
    bottom: 30px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    width: auto;
    box-sizing: border-box;

    /* Always anchored */
    transform: translate3d(0, 0, 0);

    transition: none;

    z-index: 2;
}


/* ================================
   ICON
================================ */

.service-icon {
    width: 64px;
    height: 64px;

    fill: none;
    stroke: var(--gold);
    stroke-width: 1.2;

    margin-bottom: 200px;

    flex-shrink: 0;
}


/* ================================
   NUMBER
================================ */

.service-number {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--gold);

    margin-bottom: 14px;
}


/* ================================
   HEADING
================================ */

.service h3 {
    font-size: 33px;
    margin-bottom: 23px;
    line-height: 1.09;
}


/* ================================
   DESCRIPTION
================================ */

.service > p:not(.service-number) {
    font-size: 1rem;
    line-height: 1.6;
    color: #efdeca;
}


/* ================================
   SHUTTER DETAILS
================================ */

.service-details {
    width: 100%;

    max-height: 0;
    opacity: 0;

    overflow: hidden;

    transform: translate3d(0, 30px, 0);

    visibility: hidden;
    pointer-events: none;

    transition:
        max-height 0.6s ease,
        opacity 0.35s ease,
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0.6s;

    will-change: max-height, opacity, transform;
}


/* ================================
   HOVER SHUTTER
   JS MUST ADD .hover-enabled
================================ */

.service.hover-enabled:hover .service-details {
    max-height: 350px;

    opacity: 1;

    transform: translate3d(0, 0, 0);

    visibility: visible;
    pointer-events: auto;

    transition:
        max-height 0.6s ease,
        opacity 0.35s ease,
        transform 0.6s cubic-bezier(.22, 1, .36, 1),
        visibility 0s linear 0s;
}


/* ================================
   DISABLED HOVER STATE
================================ */

.service:not(.hover-enabled) .service-details {
    max-height: 0 !important;
    opacity: 0 !important;

    transform: translate3d(0, 30px, 0) !important;

    visibility: hidden !important;
    pointer-events: none !important;

    transition: none !important;
}


/* ================================
   SERVICE LIST
================================ */

.service ul {
    list-style: none;

    margin: 24px 0 30px;
    padding: 0;

    width: 100%;

    font-size: .875rem;
    color: #efdeca;
}

.service li {
    padding: 10px 0;
    border-top: 1px solid #c7a26640;
}


/* ================================
   CTA
================================ */

.service .text-link {
    margin-top: auto;

    font-size: .875rem;
    gap: 16px;
}


/* ================================
   NEVER MOVE MAIN CONTENT
================================ */

.service.hover-enabled:hover .service-content {
    transform: translate3d(0, 0, 0);
}


@media (max-width: 1366px) { 
	.service {
    height: 480px;
}
.service h3 {
    font-size: 24px;
}
	.service-icon {
    margin-bottom: 110px;
}
	.service-content p {
    font-size: 15px;
}
}
@media (max-width: 1280px) {  
.service {
        height: 430px;
    }
	.service ul {
    margin: 10px 0 10px;
}
	.service h3 {
    margin-bottom: 12px;
}
	    .service-content p {
        font-size: 14px;
    }
	.service li {
    padding: 7px 0;
    font-size: 13px;
}
}
/* ================================
   TABLET
================================ */

@media (max-width: 1024px) {

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    .project.reverse .project-art {
        order: 1;
    }

    .project-copy,
    .project.reverse .project-copy {
        order: 2;
    }

    .project-copy dl {
        flex-direction: column;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    .service {
        height: 500px;
    }

    .service-icon {
        margin-bottom: 160px;
    }

    .service h3 {
        font-size: 28px;
    }

}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {
	.project.reverse .project-art {
    order: 1;
}
.project-copy, .project.reverse .project-copy {
        order: 2;
    }
    .project-copy dl {
        flex-direction: column;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }

    .service {
        height: 500px;
    }

    .service-icon {
        margin-bottom: 160px;
    }

    .service h3 {
        font-size: 28px;
    }

}

/* ================================
   TABLET
================================ */

@media (max-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

 @media(min-width:1600px){
    .hero h1{
        font-size:100px
    }
    .hero-intro{
        padding-top:12px
    }
    .hero-image>img{
        height:600px
    }
	
}
 @media(max-width:1500px){  
.contact h2 {
    font-size: clamp(66px, 5.4vw, 118px);
}
 }
 @media(max-width:1300px){  
 :root {
    --max: 1150px;
}

 }
 @media(max-width:1100px){
    .header nav{
        gap:18px
    }
    .header nav>a:not(.nav-cta){
        font-size:.8125rem
    }
    .hero h1{
        font-size:7.6vw
    }
    .hero-composition{
        grid-template-columns:1fr 30%
    }
    .hero-intro{
        padding-right:14px
    }
    .hero-intro>p:first-child{
        font-size:17px
    }
    .hero-small{
        font-size:.8125rem
    }
    .hero-image>img{
        height:480px
    }
    .hero-image{
        min-height:480px
    }
    .about{
        gap:50px 6%
    }
    .capsule-image{
        height:460px
    }
    .service{
        padding:28px 20px
    }
    .service h3{
        font-size:29px
    }
    .section-heading{
        gap:45px
    }
    .section-heading>p,.section-heading>div{
        max-width:310px
    }
    .energy-photo{
        height:240px
    }
    .project-copy dl{
        margin:20px 0
    }
    .work-row{
        grid-template-columns:30px 1.2fr .9fr 1fr 20px;
        gap:12px
    }
    .row-title{
        font-size:21px
    }
    .experience-number p{
        font-size:.65rem;
        max-width:170px;
        padding-bottom:22px
    }
    .footer-main{
        gap:30px
    }
    .contact-lines{
        right:12%
    }
}
 @media(max-width:820px){
    .section-wrap{
        padding:75px 28px
    }
    .opening{
        padding:12px 14px 0
    }
    .header{
        padding-left:20px
    }
    .header nav{
        gap:14px
    }
    .header nav>a:not(.nav-cta){
        font-size:.75rem
    }
    .nav-cta{
        padding:11px 14px;
        gap:12px;
        font-size:.75rem
    }
    .wordmark{
        font-size:25px
    }
    .hero{
        padding-top:40px
    }
    .hero-eyebrow{
        margin-left:15px;
        font-size:.65rem
    }
    .hero h1{
        font-size:8.1vw;
        margin-left:14px
    }
    .hero-intro{
        padding:3px 10px 28px 8px
    }
    .hero-intro>p:first-child{
        font-size:15px
    }
    .hero-small{
        display:none
    }
    .hero-intro .text-link{
        font-size:.8125rem;
        gap:14px
    }
    .hero-image{
        min-height:420px
    }
    .hero-image>img{
        height:420px
    }
    .tile-title{
        font-size:25px
    }
    .feature-tile{
        padding:24px;
        min-height:155px
    }
    .tile-caption{
        font-size:.8125rem;
        gap:12px
    }
    .about{
        gap:40px 5%
    }
    .about h2{
        font-size:42px
    }
    .capsule-image{
        height:420px;
        gap:5px
    }
    .about-copy p{
        font-size:.9375rem
    }
    .intro-note>p{
        font-size:20px
    }
    .intro-note{
        gap:25px
    }
    .section-heading{
        gap:30px;
        align-items:flex-start
    }
    .section-heading>p,.section-heading>div{
        max-width:280px
    }
    .section-heading p{
        font-size:.9375rem
    }
    h2{
        font-size:42px
    }
    .service-grid{
        gap:10px
    }
    .service{
        padding:24px 18px
    }
    .service h3{
        font-size:25px
    }
    .service>p:not(.service-number),.service ul{
        font-size:.875rem
    }
    .service-number{
        font-size:.65rem
    }
    .service .text-link{
        font-size:.75rem;
        gap:10px
    }
    .service-icon{
        margin-bottom:30px
    }
    .experience-number{
        gap:10px
    }
    .experience-number p{
        font-size:.6rem
    }
    .outline-type{
        font-size:14vw
    }
    .project{
        gap:6%;
        margin-bottom:50px
    }
    .energy-identity{
        padding:20px
    }
    .energy-identity>img{
        width:100px;
        height:50px
    }
    .energy-identity>span{
        font-size:.6rem
    }
    .energy-photo{
        height:215px
    }
    .energy-art .art-bottom{
        padding:12px 20px
    }
    .project-copy h3{
        font-size:38px
    }
    .project-scope{
        font-size:16px
    }
    .row-industry{
        display:none
    }
    .work-row{
        grid-template-columns:25px 1.2fr 1fr 20px;
        gap:15px
    }
    .process-grid{
        grid-template-columns:1fr 1fr;
        gap:40px 0
    }
    .process-grid article{
        padding:0 25px
    }
    .process-grid article:nth-child(3){
        border:0;
        padding-left:0
    }
    .process-grid article:nth-child(2){
        padding-right:0
    }
    .step-number{
        margin-bottom:20px
    }
    .process-grid h3{
        margin-bottom:20px
    }
    .moments-layout{
        gap:35px
    }
    .moment-list summary{
        font-size:20px
    }
    .detail-content{
        padding-right:5px
    }
    .moments h2{
        font-size:39px
    }
    .industry .section-heading h2{
        font-size:38px
    }
    .industry-list{
        gap:12px 22px
    }
    .brand-statement .section-wrap{
        gap:35px;
        padding-block:60px
    }
    .statement-symbol{
        font-size:95px
    }
    .contact-title-wrap>p{
        max-width:210px;
        font-size:.875rem
    }
    .contact-lines{
        width:300px;
        right:20%;
        height:380px
    }
    .contact h2{
        font-size:76px
    }
    .conversation{
        padding:22px 26px;
        font-size:40px
    }
    .circle-arrow{
        width:64px;
        height:64px;
        font-size:32px
    }
    .footer-main{
        grid-template-columns:1.7fr 1fr 1fr;
        gap:32px
    }
    .footer-main>div:last-child{
        grid-column:2/4;
        flex-direction:row;
        gap:24px;
        align-items:center
    }
    .footer-main>div:last-child h2{
        margin:0
    }
    .footer-bottom>span:last-child{
        display:none
    }
}
@media (max-width: 991px) {
    .real-identities > * {
        flex-basis: calc((100% - 30px) / 3);
    }
}
@media (max-width: 767px) {
	.contact-img {
    margin-top: 20px;
}
	.real-identities img {
        width: 100%;
        max-width: 100%;
    }
    .service-grid {
        grid-template-columns: 1fr;
    }

    .service {
        height: auto;
        min-height: 520px;
    }

    .service-content {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;

        width: 100%;
        transform: none;
    }

    .service-details {
        max-height: none;
        opacity: 1;
        overflow: visible;
        transform: none;
        transition: none;
    }
}
 @media(max-width:640px){
    html{
        scroll-padding-top:16px
    }
    .section-wrap{
        padding:60px 24px
    }
    .opening{
        padding:10px 10px 0
    }
    .header{
        padding:16px 18px;
        border-radius:10px
    }
    .wordmark{
        font-size:27px
    }
    .menu-toggle{
        display:flex;
        align-items:center;
        gap:12px;
        border:0;
        background:none;
        color:var(--plum);
        padding:5px 0;
        font-size:.875rem
    }
    .menu-lines{
        width:22px;
        height:12px;
        border-top:1px solid currentColor;
        border-bottom:1px solid currentColor
    }
    .header nav{
        display:none;
        position:absolute;
        top:calc(100% + 8px);
        left:0;
        right:0;
        background:var(--cream);
        border-radius:10px;
        box-shadow:0 18px 35px #512c3022;
        flex-direction:column;
        align-items:stretch;
        padding:14px 24px;
        gap:0
    }
    .header nav.is-open{
        display:flex
    }
    .header nav>a:not(.nav-cta){
        font-size:18px;
        padding:14px 0;
        border-bottom:1px solid var(--line)
    }
    .nav-cta{
        font-size:16px;
        justify-content:space-between;
        padding:14px 16px;
        margin:16px 0 8px
    }
    .hero{
        padding-top:35px
    }
    .hero-eyebrow{
        font-size:.6rem;
        letter-spacing:.13em;
        margin-left:10px;
        margin-bottom:20px
    }
    .hero-composition{
        display:flex;
        flex-direction:column
    }
    .hero h1{
        font-size:clamp(42px,10.4vw,66px);
        line-height:1;
        letter-spacing:-.059em;
        margin:0 10px;
        padding:0;
        order:0
    }
    .hero-intro{
        order:1;
        padding:26px 10px 28px;
        display:block
    }
    .hero-intro>p:first-child{
        font-size:17px;
        max-width:330px;
        line-height:1.45
    }
    .hero-intro .text-link{
        font-size:.9375rem;
        margin-top:12px;
        gap:24px
    }
    .hero-image{
        order:2;
        min-height:285px;
        margin-top:0;
        border-radius:10px
    }
    .hero-image>img{
        height:310px;
        object-position:62% center
    }
    .hero-image:after{
        background:linear-gradient(0deg,#32160b44,transparent 45%)
    }
    .image-index{
        left:18px;
        bottom:23px;
        font-size:.6rem;
        max-width:220px
    }
    .down-button{
        width:38px;
        height:38px;
        bottom:14px;
        right:14px;
        font-size:20px
    }
    .feature-tiles{
        gap:8px;
        padding-bottom:10px
    }
    .feature-tile{
        padding:18px 15px;
        min-height:165px;
        border-radius:8px
    }
    .tile-title{
        font-size:22px;
        line-height:1.08;
        letter-spacing:-.04em
    }
    .tile-caption{
        font-size:.75rem;
        line-height:1.45;
        gap:8px;
        align-items:flex-end;
        max-width:150px
    }
    .parallel-lines{
        width:100px;
        opacity:.4
    }
    .tile-orbit{
        opacity:.4
    }
    .about{
        display:flex;
        flex-direction:column;
        gap:35px;
        align-items:stretch
    }
    .about-copy{
        order:0
    }
    .capsule-image{
        order:1;
        height:360px;
        max-width:440px;
        width:100%;
        align-self:center;
        gap:7px
    }
    .about h2{
        font-size:clamp(46px,11.5vw,66px);
        margin-bottom:24px
    }
    .about-copy p:not(.eyebrow){
        font-size:1rem;
        max-width:none
    }
    .about-copy .lede{
        font-size:21px!important
    }
    .eyebrow{
        font-size:.7rem;
        margin-bottom:20px
    }
    .intro-note{
        order:2;
        display:block;
        padding-top:25px
    }
    .intro-note .eyebrow{
        margin-bottom:18px;
        display:block
    }
    .intro-note>p{
        font-size:20px
    }
    .section-heading{
        display:block;
        margin-bottom:35px
    }
    .section-heading>p,.section-heading>div{
        max-width:none;
        margin-top:25px
    }
    .section-heading p{
        font-size:1rem
    }
    h2{
        font-size:clamp(38px,10vw,56px)
    }
    .service-grid{
        grid-template-columns:1fr;
        gap:14px
    }
    .service{
        padding:28px;
        display:grid;
        grid-template-columns:1fr;
        position:relative
    }
    .service-icon{
        width:50px;
        height:50px;
        margin-bottom:30px
    }
    .service-number{
        font-size:.75rem
    }
    .service h3{
        font-size:34px
    }
    .service h3 br{
        display:none
    }
    .service>p:not(.service-number){
        font-size:1rem
    }
    .service ul{
        font-size:.9375rem;
        margin-bottom:20px
    }
    .service .text-link{
        font-size:.9375rem;
        justify-self:start
    }
    .experience-number{
        display:block;
        padding-top:20px
    }
    .outline-type{
        font-size:12vw;
        line-height:1.3;
        display:block;
        letter-spacing:-.08em
    }
    .experience-number p{
        font-size:.7rem;
        max-width:none;
        padding:0 0 20px;
        letter-spacing:.1em
    }
    .experience-number p br{
        display:none
    }
    .project-note{
        font-size:.8125rem
    }
    .project,.project.reverse{
        display:flex;
        flex-direction:column;
        gap:27px;
        margin-bottom:52px;
        align-items:stretch
    }
    .project-copy,.project.reverse .project-copy{
        order:1
    }
    .project-copy h3{
        font-size:38px
    }
    .project-copy h3 br{
        display:none
    }
    .project-copy .eyebrow{
        font-size:.65rem
    }
    .project-copy dl{
        display:flex;
        gap:20px
    }
    .project-copy dl>div{
        display:block;
        margin:0
    }
    .project-copy dt{
        margin-bottom:7px
    }
    .project-scope{
        font-size:17px
    }
    .energy-photo{
        height:235px
    }
    .energy-identity>img{
        width:115px
    }
    .energy-identity>span{
        font-size:.65rem
    }
    .work-index{
        padding-top:0
    }
    .index-heading{
        display:block;
        padding-bottom:25px
    }
    .index-heading h3{
        margin-top:20px;
        font-size:34px
    }
    .work-row{
        grid-template-columns:24px 1fr 24px;
        gap:8px 14px;
        padding:22px 0
    }
    .row-title{
        font-size:21px;
        grid-column:2
    }
    .row-number{
        grid-column:1
    }
    .row-arrow{
        grid-column:3;
        grid-row:1/3
    }
    .row-scope{
        grid-column:2;
        font-size:.8125rem
    }
    .approach{
        padding-top:0
    }
    .process-grid{
        gap:32px 0
    }
    .process-grid article{
        padding:0 16px
    }
    .process-grid h3{
        font-size:24px
    }
    .process-grid h4{
        font-size:.9375rem
    }
    .process-grid p{
        font-size:.9375rem
    }
    .step-number{
        font-size:30px
    }
    .moments-layout{
        display:block
    }
    .moments h2{
        font-size:44px
    }
    .moments-intro{
        font-size:1rem;
        margin-top:22px
    }
    .moment-list{
        margin-top:35px
    }
    .moment-list summary{
        font-size:21px;
        padding-block:23px
    }
    .detail-content{
        font-size:1rem
    }
    .industry .section-heading h2{
        font-size:39px
    }
    .industry-list{
        font-size:.8125rem;
        gap:10px 20px
    }
    .real-identities{
        gap:24px;
        flex-wrap:wrap;
        padding-top:30px
    }

    .brand-statement .section-wrap{
        display:block;
        padding-block:48px
    }
    .statement-symbol{
        display:block;
        font-size:72px;
        margin-bottom:22px
    }
    .brand-statement h2{
        font-size:38px
    }
    .contact .section-wrap{
        padding-top:55px
    }
    .contact-title-wrap{
        display:block;
        margin-bottom:32px
    }
    .contact h2{
        font-size:clamp(57px,14vw,84px)
    }
    .contact-title-wrap>p{
        font-size:1rem;
        max-width:none;
        margin-top:28px
    }
    .contact-title-wrap>p br:nth-child(3){
        display:none
    }
    .contact-lines{
        right:-160px;
        top:0;
        width:320px;
        height:420px;
        opacity:.5
    }
    .conversation{
        padding:20px;
        border-radius:10px;
        font-size:30px;
        gap:12px
    }
    .circle-arrow{
        width:50px;
        height:50px;
        font-size:27px
    }
    .contact-meta{
        font-size:.75rem;
        align-items:flex-start;
        flex-direction:column;
        gap:10px
    }
    .footer .section-wrap{
        padding-top:45px
    }
    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:35px 25px
    }
    .footer-main>div:first-child{
        grid-column:1/-1
    }
    .footer-main>div:last-child{
        grid-column:1/-1;
        gap:22px
    }
    .footer .wordmark{
        font-size:34px
    }
    .footer-main>div>p{
        margin-top:20px
    }
    .footer-bottom{
        margin-top:30px;
        font-size:.7rem
    }
    .review-notes{
        font-size:.75rem;
        margin-top:18px
    }
}
@media (max-width: 575px) {
    .real-identities > * {
        flex-basis: calc((100% - 15px) / 2);
    }
}
 @media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
    *,*:before,*:after{
        transition:none!important;
        animation:none!important
    }
    .reveal-ready{
        opacity:1;
        transform:none
    }
}