/* ARCIS · brand layer v1 — typography, sketch, micro-interactions. Loaded last. */
:root{
  --serif:'Newsreader','Iowan Old Style',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans','Segoe UI',Arial,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
body{font-family:var(--sans);font-feature-settings:"ss01","cv11";}
h1,h2,h3,.view-title{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;font-optical-sizing:auto}
h1{letter-spacing:-.02em}
h2{line-height:1.08}
h3{font-weight:400;letter-spacing:-.01em}
em{font-family:var(--serif);font-style:italic;font-weight:400}
.large{font-family:var(--serif);font-size:25px;line-height:1.45;letter-spacing:0}
p,li,input,button,select,textarea{font-family:var(--sans)}
.eyebrow,.hero-caption,.hero-tags,.portfolio-card figcaption span,.panel-kicker,.pillars li,.contact-grid span,.hero-note,.drawing-label{font-family:var(--sans);font-weight:600;letter-spacing:.14em}
.eyebrow{font-size:11px}
.button,.nav-contact,.hero-link,.portfolio-filters button,.nav nav{font-family:var(--sans);font-weight:500}
.nav nav{font-size:13.5px}
.office-mark>span{font-family:var(--serif);font-style:italic;font-weight:400}
.portfolio-card h3{font-size:22px}
.service-list h3{font-size:27px}
.process h3{font-size:22px;letter-spacing:-.01em}
.faq-list summary{font-family:var(--serif);font-size:20px}
.contact h2{font-weight:400}

/* Hero headline: line mask reveal (one orchestrated moment) */
.hero-inner>h1{animation:none}
.hero-inner h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero-inner h1 .line>*{display:inline-block;transform:translateY(112%);animation:line-up 1.1s var(--ease-out) forwards}
.hero-inner h1 .line:nth-child(2)>*{animation-delay:.14s}
@keyframes line-up{to{transform:translateY(0)}}
.hero-inner>.eyebrow{position:relative;padding-left:38px}
.hero-inner>.eyebrow span{display:none}
.hero-inner>.eyebrow:before{content:'';position:absolute;left:0;top:.55em;width:26px;height:1px;background:var(--accent-soft,#efa057);transform-origin:left;transform:scaleX(0);animation:draw-rule .9s var(--ease-out) .25s forwards}
@keyframes draw-rule{to{transform:scaleX(1)}}

/* Scroll progress hairline */
.scroll-progress{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--orange);transform:scaleX(var(--p,0));transform-origin:left;z-index:60;pointer-events:none;opacity:.9}

/* Self-drawing architectural sketch (approach section) */
.sketch{margin:38px 0 0;max-width:460px}
.sketch svg{width:100%;height:auto;display:block;overflow:visible}
.sketch path{fill:none;stroke:#3a3734;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.sketch .thin{stroke-width:.8;stroke:#8a8178}
.sketch .acc{stroke:var(--orange)}
.sketch.is-drawn path{stroke-dashoffset:0}
.sketch figcaption{font-size:11px;letter-spacing:.14em;font-weight:600;color:#8a8178;margin-top:14px;opacity:0;transition:opacity .6s ease 2.2s}
.sketch.is-drawn figcaption{opacity:1}

/* Process steps: the rule above each step draws in sequence */
.process article{border-top:0;padding-top:0}
.process article:before{content:'';display:block;height:1px;background:var(--line);margin-bottom:20px;transform-origin:left;transform:scaleX(1);transition:transform 1.1s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.process article.reveal-pending:before{transform:scaleX(0)}

/* Hover micro-interactions (answer the cursor, nothing more) */
.button span{display:inline-block;transition:transform .35s var(--ease-out)}
.button:hover span{transform:translate(3px,-3px)}
.portfolio-card{overflow:visible}
.portfolio-card figure{overflow:hidden}
.portfolio-card img{transition:transform 1.1s var(--ease-out),filter .6s ease}
.portfolio-card:hover img{transform:scale(1.035)}
.portfolio-card h3 b{display:inline-block;transition:transform .45s var(--ease-out),color .3s}
.portfolio-card:hover h3 b{transform:rotate(90deg);color:var(--orange)}
.portfolio-card figcaption h3{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px}
.portfolio-card figcaption h3:after{content:'';position:absolute;left:0;bottom:-6px;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out)}
.portfolio-card:hover figcaption h3:after{transform:scaleX(1)}
.start-options>a b,.service-list article b,.nav-panel b{display:inline-block;transition:transform .4s var(--ease-out),color .3s}
.start-options>a:hover b,.nav-panel a:hover b{transform:translate(4px,-4px);color:var(--orange)}
.hero-link{position:relative;border-bottom:0}
.hero-link:after{content:'';position:absolute;left:0;bottom:2px;height:1px;width:100%;background:currentColor;opacity:.55;transform:scaleX(1);transform-origin:right;transition:transform .5s var(--ease-out)}
.hero-link:hover:after{transform:scaleX(0);transform-origin:right;animation:underline-redraw .7s var(--ease-out) .05s forwards}
@keyframes underline-redraw{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1);transform-origin:left}}
.pillars li{transition:background .3s,border-color .3s,color .3s,transform .4s var(--ease-out)}
.pillars li:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:translateY(-2px)}
.reference-grid li img{transition:filter .5s ease,opacity .5s ease}
.contact-grid a{transition:color .25s,transform .35s var(--ease-out);display:inline-block}
.contact-grid a:hover{transform:translateX(4px)}

/* Page transition between home and project pages */
body.is-leaving{animation:page-out .22s ease forwards}
@keyframes page-out{to{opacity:0}}
body.page-detail{animation:page-in .55s ease both}
@keyframes page-in{from{opacity:0}to{opacity:1}}
.pg-item{clip-path:inset(0 0 0 0);opacity:1;transition:clip-path 1.1s var(--ease-out),opacity .8s ease}
.pg-item.is-waiting{clip-path:inset(0 0 14% 0);opacity:0}
.project-head h1 .line{display:block;overflow:hidden}
.project-head h1 .line>span{display:inline-block;transform:translateY(112%);animation:line-up 1s var(--ease-out) .05s forwards}

@media(max-width:900px){.sketch{max-width:380px;margin-top:28px}.large{font-size:22px}}
@media(max-width:600px){.sketch{margin:22px 0 6px}.portfolio-card h3{font-size:20px}.service-list h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){
  .hero-inner h1 .line>*,.project-head h1 .line>span{transform:none;animation:none}
  .hero-inner>.eyebrow:before{transform:none;animation:none}
  .sketch path{stroke-dashoffset:0;transition:none}.sketch figcaption{opacity:1;transition:none}
  .process article:before{transform:none!important;transition:none}
  .portfolio-card img,.pillars li,.contact-grid a,.button span{transition:none}
  body.is-leaving,body.page-detail{animation:none}
  .pg-item{transition:none}.pg-item.is-waiting{clip-path:none;opacity:1}
  .scroll-progress{display:none}
}