:root{
  --bp-ink:#090b10;
  --bp-ink-soft:#10131a;
  --bp-paper:#eee9dd;
  --bp-paper-light:#f8f4ea;
  --bp-blue:#315cff;
  --bp-blue-light:#8aa4ff;
  --bp-coral:#e36f5c;
  --bp-line-dark:rgba(238,233,221,.13);
  --bp-line-light:rgba(9,11,16,.14);
  --bp-serif:"Fraunces",Georgia,serif;
  --bp-sans:"Inter",Arial,sans-serif;
  --bp-mono:"JetBrains Mono",monospace;
}

html{scroll-padding-top:72px}
body{background:var(--bp-paper);color:var(--bp-ink);cursor:default}
.container{width:min(1280px,calc(100% - 80px))}
.header{background:rgba(9,11,16,.94);backdrop-filter:blur(18px);border-bottom-color:var(--bp-line-dark)}
.header-inner{height:72px}
.brand{font-family:var(--bp-serif)}
.bp-logo-mark{position:relative;width:48px;height:43px;display:block;font-family:var(--bp-serif);font-size:39px;line-height:43px;letter-spacing:-.16em}
.bp-logo-mark i,.bp-logo-mark b{position:absolute;top:0;font-style:normal;font-weight:400}
.bp-logo-mark i{left:0;color:var(--bp-paper-light)}
.bp-logo-mark b{left:15px;color:var(--bp-blue-light);mix-blend-mode:screen}
.bp-logo-divider{width:1px;height:37px;background:rgba(238,233,221,.5)}
.bp-logo-name{display:grid;color:var(--bp-paper-light);font:400 1rem/1.05 var(--bp-serif);letter-spacing:0}
.bp-logo-name small{display:block;font-size:.93rem;color:inherit}
nav{gap:18px}
nav a{padding:8px 4px;border-radius:0;position:relative}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--bp-blue);transition:right .3s}
nav a:hover::after,nav a:focus-visible::after{right:0}
.btn{border-radius:2px;text-transform:none}
.primary{background:var(--bp-blue);box-shadow:12px 12px 0 rgba(49,92,255,.12)}
.primary:hover{background:#234fe7;transform:translate(-2px,-2px);box-shadow:16px 16px 0 rgba(49,92,255,.16)}
.header .actions>.primary{display:none}

.hero{min-height:0;padding:58px 0 34px;background:var(--bp-ink);isolation:isolate}
.hero::before{
  opacity:.58;
  background-image:linear-gradient(var(--bp-line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--bp-line-dark) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(90deg,#000 0 84%,transparent);
}
.hero::after{content:none}
.hero-grid{grid-template-columns:.96fr 1.04fr;gap:42px;align-items:start}
.hero-top{margin-bottom:34px;padding-left:52px;position:relative}
.hero-top::before{position:absolute;left:0;width:35px}
.hero h1{font-size:clamp(3.7rem,5.7vw,6.25rem);line-height:.93;letter-spacing:-.045em;margin-bottom:30px;max-width:760px}
.hero h1 em{color:var(--bp-blue-light)}
.hero h1::after{content:"";display:block;width:60px;height:2px;margin-top:28px;background:var(--bp-coral)}
.hero-copy{max-width:580px;font-size:1.05rem;line-height:1.75}
.hero-note{display:none}

.visual{height:570px;margin-top:8px}
.bp-asset-stack{position:absolute;inset:0;perspective:1200px}
.bp-paper{display:none}
.bp-project{position:absolute;background:var(--bp-paper-light);padding:12px;border:1px solid rgba(255,255,255,.62);box-shadow:0 34px 75px -32px #000;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bp-project img{width:100%;height:100%;display:block;object-fit:cover}
.bp-project-main{width:78%;height:65%;right:3%;top:70px;transform:rotate(-1.2deg);z-index:3}
.bp-project-secondary{width:35%;height:40%;left:2%;bottom:12px;transform:rotate(4deg);z-index:4}
.bp-asset-stack:hover .bp-project-main{transform:rotate(-.4deg) translateY(-6px)}
.bp-asset-stack:hover .bp-project-secondary{transform:rotate(1deg) translate(-5px,-9px)}
.bp-measure{position:absolute;z-index:6;color:var(--bp-blue-light);font:500 .62rem var(--bp-mono);letter-spacing:.08em}
.bp-measure::before{content:"";display:block;width:96px;height:1px;margin-bottom:8px;background:var(--bp-blue)}
.bp-measure-top{right:8%;top:25px}
.bp-measure-side{display:block;left:-1%;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:left top}
.bp-stamp{display:none}
.bp-architecture-sheet,.bp-wireframe-sheet{position:absolute;background:url("assets/images/blueprint-paper.png") center/cover no-repeat;box-shadow:0 40px 80px -45px #000}
.bp-architecture-sheet{width:76%;height:84%;right:-8%;top:34px;transform:rotate(-8deg);opacity:.94;z-index:1}
.bp-wireframe-sheet{width:58%;height:58%;left:1%;bottom:10px;transform:rotate(-8deg);background-position:left center;z-index:2}
.bp-site-sheet{position:absolute;z-index:4;width:91%;height:68%;right:-3%;top:48px;background:#f8f4ea;color:#15171b;border:1px solid rgba(9,11,16,.2);box-shadow:0 36px 72px -38px #000;transform:rotate(-1deg);overflow:hidden;font-family:var(--bp-sans)}
.bp-site-head{height:13%;display:grid;grid-template-columns:1fr 1.3fr .8fr;align-items:center;padding:0 22px;border-bottom:1px solid rgba(9,11,16,.12);font-size:.62rem}
.bp-site-head strong{font:500 .8rem var(--bp-serif)}
.bp-site-head nav{display:flex;justify-content:center;gap:18px;color:#333;font-size:.48rem}
.bp-site-head b{text-align:right;color:var(--bp-blue);font:600 .55rem var(--bp-mono)}
.bp-site-body{height:63%;display:grid;grid-template-columns:1fr 1.05fr;gap:18px;padding:24px 22px 14px}
.bp-site-copy{padding-top:12px}
.bp-site-copy small{color:var(--bp-blue);font:500 .48rem var(--bp-mono);text-transform:uppercase;letter-spacing:.08em}
.bp-site-copy h3{margin:14px 0 20px;font:400 1.5rem/1.03 var(--bp-serif);color:#17191d}
.bp-site-copy button{padding:9px 13px;background:var(--bp-blue);color:#fff;font-size:.56rem}
.bp-site-body img{width:100%;height:100%;object-fit:cover}
.bp-site-services{height:24%;display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 22px 18px}
.bp-site-services span{display:flex;flex-direction:column;justify-content:center;padding:8px;border:1px solid rgba(9,11,16,.16);font-size:.46rem;color:#666}
.bp-site-services b{margin-bottom:3px;color:#222;font-size:.53rem}

.bp-flow{position:relative;z-index:3;margin-top:0;padding:0 0 10px;background:var(--bp-ink);color:#fff}
.bp-flow::before,.bp-flow::after{content:none}
.bp-flow-inner{position:relative;width:min(1280px,calc(100% - 80px));margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bp-line-dark)}
.bp-flow-canvas{position:absolute;inset:0;pointer-events:none}
.bp-flow-item{position:relative;z-index:1;padding:24px 54px 6px 48px;min-height:112px}
.bp-flow-item:not(:last-child)::after,.bp-flow-item:not(:last-child)::before{display:none}
.bp-flow-item span{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:13px;border:1px solid var(--bp-line-dark);border-radius:50%;color:var(--bp-blue-light);font:.7rem var(--bp-mono)}
.bp-flow-item h3{font-size:1.35rem;margin-bottom:8px;color:var(--bp-paper-light)}
.bp-flow-item p{max-width:310px;color:#999daa;font-size:.84rem;line-height:1.55}
.bp-problem-visual{position:absolute;z-index:1;inset:0;height:auto;margin:0;pointer-events:none}
.bp-problem-visual::before{content:none}
.bp-outcomes{position:absolute;right:2%;top:505px;display:grid;gap:24px;color:var(--bp-blue);font:italic 400 1.05rem var(--bp-serif)}
.bp-outcomes span{display:flex;align-items:center;gap:14px}
.bp-outcomes span::before{content:"";width:150px;height:1px;background:var(--bp-blue)}
.bp-architecture-path{position:absolute;left:3%;right:3%;top:420px;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:16px;color:var(--bp-ink)}
.bp-architecture-path>span{display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:baseline;padding:8px 10px;background:rgba(238,233,221,.82);border:1px solid rgba(49,92,255,.25);box-shadow:0 8px 24px rgba(74,62,40,.06)}
.bp-architecture-path b{grid-row:1 / 3;color:var(--bp-blue);font:500 .62rem var(--bp-mono)}
.bp-architecture-path strong{text-transform:uppercase;letter-spacing:.08em;font:500 .72rem var(--bp-mono)}
.bp-architecture-path small{color:var(--bp-muted);font:400 .62rem var(--bp-mono)}
.bp-architecture-path i{position:relative;height:1px;background:var(--bp-blue)}
.bp-architecture-path i::after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-top:1px solid var(--bp-blue);border-right:1px solid var(--bp-blue);transform:rotate(45deg)}

#problems{isolation:isolate;background:var(--bp-paper)}
#problems::before{content:"";position:absolute;z-index:0;inset:0;background:url("assets/images/blueprint-paper.png") center 44% / min(1380px,100vw) auto no-repeat;opacity:.95;filter:saturate(.95) contrast(1.24);mix-blend-mode:multiply}
#problems::after{content:"";display:block;position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--bp-paper) 0%,rgba(238,233,221,.92) 18%,rgba(238,233,221,.1) 35%,transparent 61%,rgba(238,233,221,.58) 84%,var(--bp-paper) 100%)}
#problems .container{position:relative;z-index:2}
#problems .section-head{margin-bottom:285px}
#problems .section-head .left,#problems .section-head .right{position:relative}
#problems .section-head .left::before,#problems .section-head .right::before{content:"";position:absolute;z-index:-1;inset:-22px -28px;background:rgba(238,233,221,.78);filter:blur(18px)}
#problems .grid4{background:rgba(238,233,221,.25);backdrop-filter:blur(4px)}
#problems .card{background:rgba(238,233,221,.68)}
#problems .card:hover{background:rgba(247,244,237,.9)}

section:not(.hero):not(.bp-flow){position:relative;overflow:hidden}
section:not(.hero):not(.bp-flow)::after{display:none}
.light,.light2{background:var(--bp-paper)}
.light2{background:var(--bp-paper-light)}
.dark,.dark2{background:var(--bp-ink)}
.section-head{grid-template-columns:1fr 1fr;gap:110px;margin-bottom:72px}
.section-head h2{font-size:clamp(3rem,4.8vw,5.2rem);line-height:.98;letter-spacing:-.045em}
.section-head .right{padding-top:18px;border-top:1px solid currentColor;opacity:.72}
.section-head .eyebrow{display:none}
.eyebrow,.num,.mono{font-family:var(--bp-mono)}

.grid4{gap:0;background:transparent;border-color:var(--bp-line-light)}
.card{min-height:290px;background:transparent;border-top:1px solid var(--bp-line-light);padding:34px 36px}
.card:nth-child(odd){border-right:1px solid var(--bp-line-light)}
.card:hover{background:rgba(255,255,255,.42)}
.card-icon{display:none}
.services{grid-template-columns:1fr;border-top:1px solid var(--bp-line-dark);gap:0}
.service{display:grid;grid-template-columns:120px .7fr 1fr 190px;align-items:start;gap:30px;padding:34px 0;border:0;border-bottom:1px solid var(--bp-line-dark);border-radius:0;background:transparent}
.service:hover{transform:none;border-color:var(--bp-blue);background:rgba(49,92,255,.035)}
.service .num{grid-column:1}.service h3{grid-column:2;font-size:2rem}.service p{grid-column:3}.service ul{grid-column:4;padding:0;border:0}.service a{grid-column:4;font-family:var(--bp-mono);font-size:.68rem}
.info{display:none}
.chain::after{content:none}

.service li::before{
  content:"";
  display:inline-block;
  width:12px;
  height:1px;
  margin-right:10px;
  vertical-align:middle;
  background:var(--bp-blue);
}

.chain{border-radius:0;background:var(--bp-ink);position:relative}
.chain::after{content:"DECISION / 03";position:absolute;right:24px;top:20px;color:var(--bp-coral);font:.6rem var(--bp-mono)}
.chain::after{content:none}
.process{border-top-color:var(--bp-line-light)}
.step{min-height:330px;padding-top:40px}
.step strong{font-size:4.2rem;color:transparent;-webkit-text-stroke:1px rgba(9,11,16,.32)}
.why-list li{background:transparent}
.portrait{border-radius:0}
.portfolio{grid-template-columns:1fr;gap:0;border-top:1px solid var(--bp-line-dark)}
.portfolio-card{display:grid;grid-template-columns:140px 1fr 1.3fr;align-items:center;gap:36px;padding:36px 0;border:0;border-bottom:1px solid var(--bp-line-dark);border-radius:0;background:transparent}
.portfolio-card h3{font-size:2.4rem}
.portfolio-card .mock{grid-column:3;grid-row:1 / span 3;border-radius:0}
.portfolio-card footer{grid-column:2;display:block;color:#c8c7c1;font:400 1rem/1.6 var(--bp-sans);max-width:500px}
.portfolio-card footer p{margin:0}
.project-hover{border-radius:0}
.view-project{border-radius:1px!important}
.faq-q{font-size:1.55rem}
.form{border-radius:0;background:transparent;border-left:1px solid var(--bp-blue)}
.contact-grid{gap:110px}
footer{background:var(--bp-ink)}

/* One architectural language across the full page */
#services,#about,#portfolio,#contact{position:relative;isolation:isolate}
#services::before,#about::before,#portfolio::before,#contact::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background-image:linear-gradient(rgba(79,111,215,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(79,111,215,.09) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
#services>.container,#about>.container,#portfolio>.container,#contact>.container{position:relative;z-index:1}

#services .services{position:relative;margin-top:92px}
#services .services::before{content:"SCOPE                 DESIGN RESPONSE                    INCLUDED SYSTEMS                 ACTION";position:absolute;left:0;right:0;top:-42px;padding-bottom:12px;border-bottom:1px solid var(--bp-blue);color:var(--bp-blue-light);white-space:pre;font:500 .62rem var(--bp-mono);letter-spacing:.06em;word-spacing:7.5vw}
#services .service{position:relative}
#services .service::before{content:"";position:absolute;left:-14px;top:29px;width:5px;height:5px;border:1px solid var(--bp-blue);border-radius:50%;background:var(--bp-ink)}
#services .service::after{content:"SPECIFICATION";position:absolute;right:0;bottom:8px;color:rgba(129,162,255,.42);font:500 .52rem var(--bp-mono);letter-spacing:.12em}

#approach{background-image:radial-gradient(circle at 82% 18%,rgba(49,92,255,.08),transparent 28%),linear-gradient(rgba(49,92,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(49,92,255,.045) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
#approach .split{position:relative}
#approach .split::before{content:"ANALYSIS / DETAIL 04";position:absolute;right:0;top:-34px;color:var(--bp-blue);font:500 .6rem var(--bp-mono);letter-spacing:.08em}
#approach .chain{box-shadow:18px 18px 0 rgba(49,92,255,.07);border:1px solid rgba(49,92,255,.36)}
#approach .chain-row{padding-left:10px}

#process{background-image:linear-gradient(90deg,transparent 0 7%,rgba(49,92,255,.055) 7% 7.1%,transparent 7.1% 93%,rgba(49,92,255,.055) 93% 93.1%,transparent 93.1%)}
#process .process{position:relative;padding-top:45px}
#process .process::before{content:"";position:absolute;left:0;right:0;top:19px;height:1px;background:var(--bp-blue)}
#process .step{position:relative}
#process .step::before{content:"";position:absolute;left:0;top:-30px;width:9px;height:9px;background:var(--bp-paper-light);border:1px solid var(--bp-blue);border-radius:50%;box-shadow:0 0 0 6px var(--bp-paper-light)}
#process .step::after{position:absolute;left:0;top:5px;color:var(--bp-blue);font:500 .55rem var(--bp-mono);letter-spacing:.08em}
#process .step:nth-child(1)::after{content:"SURVEY"}#process .step:nth-child(2)::after{content:"PLAN"}#process .step:nth-child(3)::after{content:"BUILD"}#process .step:nth-child(4)::after{content:"HANDOVER"}

#about .about{position:relative}
#about .about::before{content:"STUDIO DOSSIER / 06";position:absolute;left:0;top:-40px;color:var(--bp-blue);font:500 .6rem var(--bp-mono);letter-spacing:.1em}
#about .about>div:first-child{padding:34px;border:1px solid rgba(49,92,255,.2);background:rgba(247,244,237,.62);backdrop-filter:blur(5px)}
#about .portrait{transform:rotate(1.2deg);border:8px solid var(--bp-paper-light);box-shadow:0 28px 70px rgba(0,0,0,.35)}
#about .portrait::before{content:"REFERENCE / FOUNDER";position:absolute;z-index:2;right:10px;top:10px;padding:5px 7px;background:var(--bp-paper-light);color:var(--bp-blue);font:500 .52rem var(--bp-mono)}

#portfolio .portfolio{counter-reset:project;gap:0;border-top:1px solid var(--bp-line-dark)}
#portfolio .portfolio-card{counter-increment:project;position:relative;border-width:0 0 1px;border-color:var(--bp-line-dark);padding-top:52px}
#portfolio .portfolio-card::before{content:"ARCHIVE / 0" counter(project);position:absolute;left:0;top:18px;color:var(--bp-blue-light);font:500 .58rem var(--bp-mono);letter-spacing:.1em}
#portfolio .portfolio-card::after{content:"";position:absolute;right:0;top:18px;width:54px;height:8px;border-top:1px solid rgba(129,162,255,.55);border-bottom:1px solid rgba(129,162,255,.55)}
#portfolio .mock{box-shadow:14px 14px 0 rgba(49,92,255,.08)}

#faq{background-image:linear-gradient(rgba(49,92,255,.04) 1px,transparent 1px);background-size:100% 42px}
#faq .faq{position:relative;margin-top:78px;border-left:1px solid var(--bp-blue);padding-left:34px}
#faq .faq::before{content:"TECHNICAL NOTES / REVISION A";position:absolute;left:-1px;top:-45px;color:var(--bp-blue);font:500 .62rem var(--bp-mono);letter-spacing:.1em}
#faq .faq-item{position:relative}
#faq .faq-item::before{content:"NOTE";position:absolute;right:42px;top:29px;color:rgba(49,92,255,.45);font:500 .5rem var(--bp-mono)}

#contact::after{content:"NEW PROJECT / INPUT SHEET";display:block;position:absolute;z-index:1;right:4%;top:90px;color:rgba(129,162,255,.5);font:500 .58rem var(--bp-mono);letter-spacing:.12em}
#contact .form{position:relative;background:rgba(9,11,16,.62);border:1px solid rgba(129,162,255,.26);padding-top:62px}
#contact .form::before{content:"PROJECT BRIEF";position:absolute;left:26px;right:26px;top:22px;padding-bottom:12px;border-bottom:1px solid var(--bp-blue);color:var(--bp-blue-light);font:500 .62rem var(--bp-mono);letter-spacing:.12em}
#contact .channels{border-left:1px solid var(--bp-blue);padding-left:20px}

@media(max-width:940px){
  #services .services{margin-top:40px}
  #services .services::before{display:none}
  #process .process{padding-top:0}
  #process .process::before,#process .step::before,#process .step::after{display:none}
  #about .about>div:first-child{padding:24px}
  #portfolio .portfolio-card{padding-top:48px}
  #contact::after{display:none}
}

/* Architectural diagrams replace the generic notebook treatment */
#services::before,#about::before,#portfolio::before,#contact::before{background:none}
#approach{background-image:none}
#process{background-image:none}
#services .services{margin-top:42px}
#services .services::before{display:none}
#services .service::before,#services .service::after{content:none}
#process .process{padding-top:0}
#process .process::before,#process .step::before,#process .step::after{display:none}

.bp-architectural-diagram{position:relative;width:100%;margin:-20px 0 64px;color:var(--bp-blue)}
.bp-architectural-diagram svg{display:block;width:100%;height:auto;overflow:visible}
.bp-architectural-diagram .construction{fill:none;stroke:currentColor;stroke-width:1;opacity:.34;vector-effect:non-scaling-stroke}
.bp-architectural-diagram .accent{fill:none;stroke:currentColor;stroke-width:1.5;opacity:.95;vector-effect:non-scaling-stroke}
.bp-architectural-diagram .measure{fill:var(--bp-blue);stroke:var(--bp-blue);stroke-width:1;opacity:.72;vector-effect:non-scaling-stroke}
.dark .bp-architectural-diagram,.dark2 .bp-architectural-diagram{color:var(--bp-blue-light)}
.bp-diagram-captions,.bp-layer-labels,.bp-stage-labels{display:grid;color:currentColor;font:500 .62rem var(--bp-mono);letter-spacing:.07em;text-transform:uppercase}
.bp-diagram-captions{grid-template-columns:repeat(3,1fr);gap:44px;margin-top:-8px}
.bp-diagram-captions span{padding-top:12px;border-top:1px solid currentColor}
.bp-diagram-captions b{margin-right:12px;color:var(--bp-blue)}

.bp-services-architecture{border-bottom:1px solid var(--bp-line-dark);padding-bottom:34px}
.bp-services-architecture::before{content:"THREE WEBSITE ARCHITECTURE SCOPES";position:absolute;left:0;top:0;color:currentColor;font:500 .58rem var(--bp-mono);letter-spacing:.1em}

.bp-approach-architecture{margin-top:-34px;margin-bottom:44px;padding:24px 0;border-top:1px solid var(--bp-line-light);border-bottom:1px solid var(--bp-line-light)}
.bp-layer-labels{position:absolute;left:12%;right:12%;bottom:20px;grid-template-columns:repeat(3,1fr);text-align:center;color:var(--bp-blue)}
.bp-approach-architecture::before{content:"WEBSITE SECTION / EXPLODED LOGIC";position:absolute;left:0;top:12px;color:var(--bp-blue);font:500 .58rem var(--bp-mono);letter-spacing:.1em}

.bp-process-architecture{margin-top:-35px;margin-bottom:20px}
.bp-stage-labels{grid-template-columns:repeat(4,1fr);text-align:center;margin-top:-20px;color:var(--bp-blue)}
.bp-process-architecture::before{content:"DESIGN SEQUENCE";position:absolute;left:0;top:0;color:var(--bp-blue);font:500 .58rem var(--bp-mono);letter-spacing:.1em}
#process .step{min-height:290px;border-top:1px solid var(--bp-line-light)}

#about .about::after{content:"";position:absolute;z-index:-1;left:44%;right:-4%;top:-9%;bottom:-8%;background:linear-gradient(135deg,transparent 49.8%,rgba(49,92,255,.18) 50%,transparent 50.2%),linear-gradient(45deg,transparent 49.8%,rgba(49,92,255,.12) 50%,transparent 50.2%);background-size:70px 70px;border:1px solid rgba(49,92,255,.18);transform:rotate(-1deg)}
#about .about>div:first-child{border-width:1px 0 1px 1px;box-shadow:-14px 14px 0 rgba(49,92,255,.055)}

#portfolio .portfolio{gap:42px;border:0}
#portfolio .portfolio-card{border:1px solid var(--bp-line-dark);padding:52px 26px 28px;background:transparent}
#portfolio .portfolio-card:nth-child(2){transform:translateY(42px)}
#portfolio .portfolio-card:nth-child(3){transform:translateY(84px)}
#portfolio .portfolio-card::after{width:72px;background:repeating-linear-gradient(90deg,var(--bp-blue-light) 0 1px,transparent 1px 12px);border:0;height:18px;opacity:.5}

#faq{background-image:none}
#faq .faq{border-left:0;padding-left:0}
#faq .faq::before{content:"PROJECT NOTES / QUESTIONS RESOLVED BEFORE DESIGN";left:0;border-bottom:1px solid var(--bp-blue);right:0;padding-bottom:12px}
#faq .faq-item{display:grid;grid-template-columns:90px 1fr;border-bottom:1px solid var(--bp-line-light)}
#faq .faq-item::before{content:"RFI";position:static;padding-top:29px;color:var(--bp-blue);font:500 .58rem var(--bp-mono)}
#faq .faq-q,#faq .answer{grid-column:2}

.bp-contact-architecture{margin:38px 0 0;color:var(--bp-blue-light);opacity:.9}
.bp-contact-architecture span{position:absolute;left:48px;top:102px;max-width:220px;color:#d9d6ce;font:400 1rem/1.45 var(--bp-serif)}
#contact .channels{margin-top:35px}

@media(max-width:940px){
  .bp-architectural-diagram{margin:0 0 44px}
  .bp-diagram-captions{gap:12px;font-size:.52rem}
  .bp-services-architecture::before,.bp-approach-architecture::before,.bp-process-architecture::before{display:none}
  .bp-layer-labels,.bp-stage-labels{font-size:.5rem}
  #portfolio .portfolio-card:nth-child(2),#portfolio .portfolio-card:nth-child(3){transform:none}
  #faq .faq-item{grid-template-columns:48px 1fr}
  .bp-contact-architecture span{font-size:.85rem;left:30px;top:78px}
}

.bp-progress{display:none}
.bp-progress a{display:block;width:5px;height:5px;border-radius:50%;background:#757984;transition:.25s}
.bp-progress a.active{height:24px;border-radius:4px;background:var(--bp-blue)}
.bp-cursor{display:none}

.reveal{transform:translateY(30px);transition:opacity .8s,transform .8s}
.reveal.in{transform:none}
.bp-draw{clip-path:none}
.hero-buttons .outline{display:none}

@media(max-width:940px){
  .container,.bp-flow-inner{width:calc(100% - 44px)}
  .hero::after,.bp-measure-side{display:none}
  .bp-logo-mark{width:42px;font-size:34px}.bp-logo-divider{height:32px}.bp-logo-name{font-size:.88rem}.bp-logo-name small{font-size:.82rem}
  .hero{padding-top:48px}
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(3.3rem,10vw,5.5rem)}
  .visual{height:520px}
  .bp-flow-inner{grid-template-columns:1fr}
  .bp-flow-item{border-top:1px solid var(--bp-line-dark)}
  .bp-flow-item:not(:last-child)::after,.bp-flow-item:not(:last-child)::before{display:none}
  .service{grid-template-columns:90px 1fr}
  .service p,.service ul,.service a{grid-column:2}
  .portfolio-card{grid-template-columns:100px 1fr}
  .portfolio-card .mock{grid-column:1 / -1;grid-row:auto}
  .bp-progress{display:none}
}
@media(max-width:560px){
  .container,.bp-flow-inner{width:calc(100% - 36px)}
  .hero h1{font-size:3.15rem}
  .hero-copy{font-size:1rem}
  .hero-buttons{display:grid}
  .hero-buttons .btn{width:100%;justify-content:center}
  .visual{height:390px}
  .bp-project-main{width:88%;height:65%;right:0}
  .bp-project-secondary{display:none}
  .bp-site-sheet{width:88%;height:68%;right:0}
  .bp-site-head nav{display:none}
  .bp-site-head{grid-template-columns:1fr 1fr}
  .bp-site-head b{display:block}
  .bp-site-copy h3{font-size:1.05rem}
  .bp-site-services{gap:4px;padding-inline:10px}
  #problems .section-head{margin-bottom:30px}
  .bp-problem-visual{position:relative;inset:auto;height:205px;margin:0}
  .bp-outcomes{top:100px;right:0;gap:12px}
  .bp-outcomes span::before{width:80px}
  .bp-architecture-path{display:grid;left:0;right:0;top:0;grid-template-columns:repeat(3,1fr);gap:5px}
  .bp-architecture-path i{display:none}
  .bp-architecture-path>span{display:grid;grid-template-columns:auto 1fr;padding:7px 6px;column-gap:5px}
  .bp-architecture-path strong{font-size:.53rem;letter-spacing:.03em}
  .bp-architecture-path small{display:none}
  .bp-stamp{font-size:.5rem}
  .section-head h2{font-size:3rem}
  .service{grid-template-columns:1fr}
  .service .num,.service h3,.service p,.service ul,.service a{grid-column:1}
  .portfolio-card{grid-template-columns:1fr}
  .portfolio-card h3,.portfolio-card footer{grid-column:1}
  .bp-cursor{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bp-project,.reveal,.bp-draw{transition:none!important;transform:none!important;clip-path:none!important}
  .bp-cursor{display:none}
}